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

本文旨在学习搭建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