WEB开发： Node.js路由之由浅入深- 即拿即用完整版

前面我们一起学习了Node.js路由之由浅入深，基本了解并熟悉了Node.js的路由实现。

现在我们来一个综合完整版，让这个路由模块即拿即用，也就是下载运行就可用，并可以轻松地自行增加路由，无需去繁琐地修改路由配置，完全自动实现，重启webserver 就生效。

本项目启动后，可以通过 http://127.0.0.1:3000 访问到静态页面测试，同时也是api的根地址。

一、文件结构

我们先来看下这个项目的文件结构：

/controllersauthController.js //路由控制器，负责执行数据处理并向前端返回数据... //更多的路由控制器
/routesroutesConfig.js // 路由配置文件，这个文件是自动生成的，根据/controllers 下的文件生成。/staticindex.html 启动webserver后的静态网页文件，可以通过 http://127.0.0.1:3000 访问/rcMake.js //自动化脚本，将controllers下的文件以及文件中的控制器方法，自动写入到路由配置文件中。app.js // 主启动文件，端口是3000

这个结构很简单很清晰，没几个文件，后面你要自己加路由，直接加控制器即可。具体说明请看注释。

二、怎样写路由控制器

每个控制器对应一个路由，比如你需要这样一个路由 /member

就在/controllers 文件夹下增加一个文件 memberController.js(文件名可以自取)，内容如下：

// memberController.js
module.exports = {get: { list: {path: '/member/list',fn: (req, res) => {res.send({ message: 'Login successful' });}},},post: {reg: {path: '/member/reg',fn: (req, res) => {res.send({ message: "test" });},}}// 更多方法...
};

说明：这里面只写了两个RESTful AP 方法，你也可以增肌 put 和 delete。

list 是控制器内对应get的处理方法，reg是对应post的处理方法名。
path 就是你设定的路由路径。比如 http://127.0.0.1:3000/member/list
fn是对应处理方法名的处理函数

三、生成路由表

根目录下的 rcMake.js 是一个自动化脚本，它会的作用是自动找到/controllers 目录下的各个控制器文件，并将这些文件的文件名、路由路径、RESTful AP 方法、统一写入到路由配置文件routesConfig.js中，以供app在启动的时候实现自动路由。

rcMake.js 在app.js中调用，也就是每次启动app.js 都会生成这个文件，实现自动化配置路由。routesConfig.js的格式如下（实际是根据你的控制器定义）

// routes.js
module.exports = [{"method": "get","path": "/auth/login","controller": "authController","action": "login"},{"method": "post","path": "/auth/login","controller": "authController","action": "login"},{"method": "get","path": "/member/list","controller": "memberController","action": "list"},{"method": "post","path": "/member/reg","controller": "memberController","action": "reg"},{"method": "get","path": "/product","controller": "productController","action": "createProduct"},{"method": "post","path": "/product","controller": "productController","action": "createProduct"},{"method": "get","path": "/user/:id","controller": "userController","action": "getUserById"},{"method": "post","path": "/user/","controller": "userController","action": "regUser"}
];

四、启动路由

在根目录下执行 node app.js 即可启动路由， app.js 结构如下：

const express = require('express');
const app = express();
app.use(express.json());  // 用于解析 JSON 格式的请求体const rcMake = require('./rcMake.js')
rcMake() // 自动生成路由配置文件
const routesConfig = require('./routers/routesConfig');  // 导入路由配置文件
app.use(express.static(__dirname + '/static')) //静态资源 如 html 存放目录// 动态加载路由
routesConfig.forEach(route => {const controller = require(`./controllers/${route.controller}`);  // 动态加载控制器app[route.method](route.path, controller[route.method][route.action].fn);  // 将路由与控制器方法绑定console.log('for review route:', route.method, route.path, controller[route.method][route.action].fn)});// 启动服务
const port = 3000;
app.listen(port, () => {console.log(`Server is running on port ${port}`);
});

说明：这里面主要实现了路由配置的自动写入、路自动控制的启动、服务器的启动。

五、测试

get测试:

http://127.0.0.1:3000/user/minstbe

结果：

对应的路由和控制器代码：

    get: {getUserById: {path: '/user/:id',fn: (req, res) => {const userId = req.params.id;res.send(`User ID: ${userId}`);},}},

post测试：

http://127.0.0.1:3000/

以上相当于http://127.0.0.1:3000/index.html

因为我们在app.js 中设置了静态资源目录：

app.use(express.static(__dirname + '/static'))

所有放置在/static 下的静态资源如 html css js 图片等都可以通过http://127.0.0.1:3000/的方式访问。

结果：

这里我在index.html中写了一个表单，这个表单会被post到指定的api地址也就是/product，并在控制器中将这个内容返回到前端，由前端进行回显。

对应的路由和控制器代码：

    post: {createProduct: {path: '/product',fn: (req, res) => {console.log('req', req.body.pd, typeof (req.body))const product = req.bodyres.send({ message: product.pd });},}}