NodeJs快速开发应用（五）-express基本使用

一杯温水2023-12-01 16:01

本文旨在学习搭建express框架，如想快速搭建实现敏捷开发直接参考:express快速应用程序生成器。

1.使用nodemon 第三方依赖来自动监听文件的变化并重新启动

1.1 使用npm下载nodemon

css 复制代码 
$ npm i nodemon

1.2 修改npm包配置

css 复制代码 
---package.json
{
  "name": "acquaintance",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon app.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "koa": "^2.13.1"
  },
  "devDependencies": {
    "nodemon": "^2.0.7"
  }
}

2.配置express测试程序

2.1 使用npm安装express

ruby 复制代码 
$ npm install express

2.2 编写express测试程序

javascript 复制代码 
---index.js
const express = require("express");
const app = express();
​
// 添加根路由，返回 "hello world!"
app.get("/", (req, res) => {
    res.send("hello world!");
});
​
// 添加测试路由，用于测试 GET 请求
app.get("/test", (req, res) => {
    res.send("This is a test route for GET request.");
});
​
// 添加测试路由，用于测试 POST 请求
app.post("/test", (req, res) => {
    res.send("This is a test route for POST request.");
});
​
// 添加测试路由，用于测试 OPTIONS 请求
app.options("/test", (req, res) => {
    res.send("This is a test route for OPTIONS request.");
});
​
// 添加测试路由，用于测试 DELETE 请求
app.delete("/test", (req, res) => {
    res.send("This is a test route for DELETE request.");
});
​
// 添加测试路由，用于测试 PUT 请求
app.put("/test", (req, res) => {
    res.send("This is a test route for PUT request.");
});
​
app.listen("9999", (error) => {
    if (error) {
        console.log("服务器启动失败!");
        return;
    }
    console.log("服务器启动成功!");
});
​

2.3 通过浏览器测试接口

此应用程序启动服务器并侦听端口 9999 上的连接。该应用程序响应"Hello World！" 用于请求根 URL( /) 或路由。对于所有其他路径，它将响应404 Not Found。

2.3.1 启动应用 npm run dev
2.3.2 浏览器输入链接并展示

测试其他get链接：localhost:9999/test

3.路由配置

3.1 创建routes文件夹，按模块管理route
js 复制代码 
-routes/test.js
/**
 * @fileoverview 路由文件，包含用于测试不同请求方法的路由。
 * @module routes/test
 */

const express = require("express");
const router = express.Router()

/**
 * GET请求测试路由
 * @name GET /test
 * @function
 * @memberof module:routes/test
 * @param {Object} req - 请求对象
 * @param {Object} res - 响应对象
 */
router.get("/test", (req, res) => {
    res.send("This is a test route for GET request.");
});

/**
 * POST请求测试路由
 * @name POST /test
 * @function
 * @memberof module:routes/test
 * @param {Object} req - 请求对象
 * @param {Object} res - 响应对象
 */
router.post("/test", (req, res) => {
    res.send("This is a test route for POST request.");
});

/**
 * OPTIONS请求测试路由
 * @name OPTIONS /test
 * @function
 * @memberof module:routes/test
 * @param {Object} req - 请求对象
 * @param {Object} res - 响应对象
 */
router.options("/test", (req, res) => {
    res.send("This is a test route for OPTIONS request.");
});

/**
 * DELETE请求测试路由
 * @name DELETE /test
 * @function
 * @memberof module:routes/test
 * @param {Object} req - 请求对象
 * @param {Object} res - 响应对象
 */
router.delete("/test", (req, res) => {
    res.send("This is a test route for DELETE request.");
});

/**
 * PUT请求测试路由
 * @name PUT /test
 * @function
 * @memberof module:routes/test
 * @param {Object} req - 请求对象
 * @param {Object} res - 响应对象
 */
router.put("/test", (req, res) => {
    res.send("This is a test route for PUT request.");
});

module.exports = router
js 复制代码 
-routes/user.js
/**
 * @fileoverview 该文件包含了用于处理 GET 请求的用户路由。
 * @module routes/user
 */

const express = require("express");
const router = express.Router()

/**
 * GET /user
 * 这是一个用于处理 GET 请求的用户路由。
 * @param {Object} req - 请求对象。
 * @param {Object} res - 响应对象。
 */
router.get("/user", (req, res) => {
    res.send("这是一个用于处理 GET 请求的用户路由");
})

router.get("/userInfo", (req, res) => {
    const {id,name}=req.query
    res.send("用户id"+id+"\r用户姓名"+name);
})

module.exports = router

安装http-errors

ruby 复制代码 
$ npm install  http-errors
js 复制代码 
-index.js

/**
 * Express应用程序的入口文件
 * @module index
 */

const express = require("express");
const httpErrors = require("http-errors");
const testRouter = require("./routes/test");
const userRouter = require("./routes/user");

const app = express();

// 添加根路由，返回 "hello world!"
app.get("/", (req, res) => {
    res.send("hello world!");
});

app.use(testRouter);
app.use(userRouter);

// 处理404错误
app.use(function (req, res, next) {
    next(httpErrors(404));
});

// 处理异常错误
app.use(function (err, req, res, next) {
    // 设置局部变量，仅提供开发中的错误
    res.locals.message = err.message;
    res.locals.error = req.app.get('env') === 'development' ? err : {};

    // 渲染错误页面
    res.status(err.status || 500);
    res.render('error');
});

/**
 * 启动Express应用程序的服务器
 * @param {string} port - 服务器监听的端口号
 * @param {function} callback - 服务器启动成功后的回调函数
 */
app.listen("9999", (error) => {
    if (error) {
        console.log("服务器启动失败!");
        return;
    }
    console.log("服务器启动成功!");
});
3.2 页面测试

基础功能测试

localhost:9999/

localhost:9999/userinfo?id=10&name=hhh

localhost:9999/test

错误测试 localhost:9999/test/hhh

4.使用模板引擎

可以使用模板引擎渲染页面

下载pug模板引擎

css 复制代码 
$ npm install pug --save

在 Express 可以呈现模板文件之前，必须设置以下应用程序设置：

  • views：模板文件所在目录。例如：app.set('views', './views')
  • view engine：要使用的模板引擎。例如：app.set('view engine', 'pug')

在设置视图引擎之后，不必指定该引擎或者在应用程序中装入模板引擎模块；Express 在内部装入此模块.

在 views 目录中创建名为 index.pug 的 Pug 模板文件

-views/index.pug

css 复制代码 
​
extends layout
​
block content
  h1= title
  p Welcome to #{title}

-views/error.pug

ini 复制代码 
extends layout
​
block content
  h1= message
  h2= error.status
  pre #{error.stack}

-views/layout.pug

ini 复制代码 
doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    block content

随后创建路由以呈现 index.pug 文件。如果未设置 view engine 属性，必须指定 view 文件的扩展名。

使用模板引擎

-index.js

javascript 复制代码 
​
/**
 * Express应用程序的入口文件
 * @module index
 */
​
const express = require("express");
const httpErrors = require("http-errors");
const path=require("path")
const testRouter = require("./routes/test");
const userRouter = require("./routes/user");
​
const app = express();
​
//使用模板引擎
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
​
// 添加根路由，返回 "hello world!"
app.get("/", (req, res) => {
    res.send("hello world!");
});
​
app.use(testRouter);
app.use(userRouter);
​
// 处理404错误
app.use(function (req, res, next) {
    next(httpErrors(404));
});
​
// 处理异常错误
app.use(function (err, req, res, next) {
    // 设置局部变量，仅提供开发中的错误
    res.locals.message = err.message;
    res.locals.error = req.app.get('env') === 'development' ? err : {};
​
    // 渲染错误页面
    res.status(err.status || 500);
    res.render('error');
});
​
/**
 * 启动Express应用程序的服务器
 * @param {string} port - 服务器监听的端口号
 * @param {function} callback - 服务器启动成功后的回调函数
 */
app.listen("9999", (error) => {
    if (error) {
        console.log("服务器启动失败!");
        return;
    }
    console.log("服务器启动成功!");
});
​
查看页面效果

5.使用morgan日志服务中间件

5.1 下载morgan

console 复制代码 
$ npm install morgan

5.2 使用

--index.js

js 复制代码 
/**
 * Express应用程序的入口文件
 * @module index
 */

const express = require("express");
const httpErrors = require("http-errors");
const path=require("path")
const logger = require('morgan');
const testRouter = require("./routes/test");
const userRouter = require("./routes/user");

const app = express();

//使用模板引擎
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

//日志服务中间件
app.use(logger('dev'));

// 添加根路由，返回 "hello world!"
app.get("/", (req, res) => {
    res.send("hello world!");
});

app.use(testRouter);
app.use(userRouter);


// 处理404错误
app.use(function (req, res, next) {
    next(httpErrors(404));
});

// 处理异常错误
app.use(function (err, req, res, next) {
    // 设置局部变量，仅提供开发中的错误
    res.locals.message = err.message;
    res.locals.error = req.app.get('env') === 'development' ? err : {};

    // 渲染错误页面
    res.status(err.status || 500);
    res.render('error');
});

/**
 * 启动Express应用程序的服务器
 * @param {string} port - 服务器监听的端口号
 * @param {function} callback - 服务器启动成功后的回调函数
 */
app.listen("9999", (error) => {
    if (error) {
        console.log("服务器启动失败!");
        return;
    }
    console.log("服务器启动成功!");
});

5.3 测试

6.express 快速应用程序生成器

以上对于学习的朋友来说可以练习，对于快速开发的同学可以直接生成程序，

可以使用应用程序生成工具express-generator快速创建应用程序框架。

使用以下命令运行应用程序生成器npx（Node.js 8.2.0 中提供）。

ruby 复制代码 
$ npx express-generator

Pug：视图引擎作为编程术语它主要意思是指"进行视图渲染的模块"。而 Express 框架中最常用的两个视图引擎是 Pug 和 EJS 。需要注意的是，Pug 早期的名称是 Jade 由于某些原因不得已改名 。

另外，Express 并没有指定必须使用何种引擎。只要该视图引擎的设计符合 Express API 规范，你就可以将其应用到工程中。

ini 复制代码 
$ express --view=pug myapp

然后安装依赖项：

shell 复制代码 
$ cd myapp
$ npm install

启动程序

arduino 复制代码 
$ npm run start
相关推荐
希冀12316 分钟前
【操作系统】1.2操作系统的发展与分类
后端
GoppViper1 小时前
golang学习笔记29——golang 中如何将 GitHub 最新提交的版本设置为 v1.0.0
笔记·git·后端·学习·golang·github·源代码管理
爱上语文2 小时前
Springboot的三层架构
java·开发语言·spring boot·后端·spring
serve the people2 小时前
springboot 单独新建一个文件实时写数据，当文件大于100M时按照日期时间做文件名进行归档
java·spring boot·后端
罗政7 小时前
[附源码]超简洁个人博客网站搭建+SpringBoot+Vue前后端分离
vue.js·spring boot·后端
拾光师9 小时前
spring获取当前request
java·后端·spring
Java小白笔记10 小时前
关于使用Mybatis-Plus 自动填充功能失效问题
spring boot·后端·mybatis
JOJO___12 小时前
Spring IoC 配置类 总结
java·后端·spring·java-ee
白总Server13 小时前
MySQL在大数据场景应用
大数据·开发语言·数据库·后端·mysql·golang·php
Lingbug14 小时前
.Net日志组件之NLog的使用和配置
后端·c#·.net·.netcore
热门推荐
01RAG 实践- Ollama+RagFlow 部署本地知识库02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）032024年高教社杯数学建模国赛C题超详细解题思路分析04Coze扣子平台完整体验和实践（附国内和国际版对比）05苍穹外卖面试总结06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）08CCF-CSP认证考试 202406-3 文本分词 100分题解09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10浏览器插件——ModHeader 的分享和学习