前面我们一起学习了Node.js路由之由浅入深,基本了解并熟悉了Node.js的路由实现。
现在我们来一个综合完整版,让这个路由模块即拿即用,也就是下载运行就可用,并可以轻松地自行增加路由,无需去繁琐地修改路由配置,完全自动实现,重启webserver 就生效。
本项目启动后,可以通过 http://127.0.0.1:3000 访问到静态页面测试,同时也是api的根地址。
一、文件结构
我们先来看下这个项目的文件结构:
bash
/controllers
authController.js //路由控制器,负责执行数据处理并向前端返回数据
... //更多的路由控制器
/routes
routesConfig.js // 路由配置文件,这个文件是自动生成的,根据/controllers 下的文件生成。
/static
index.html 启动webserver后的静态网页文件,可以通过 http://127.0.0.1:3000 访问
/rcMake.js //自动化脚本,将controllers下的文件以及文件中的控制器方法,自动写入到路由配置文件中。
app.js // 主启动文件,端口是3000
这个结构很简单很清晰,没几个文件,后面你要自己加路由,直接加控制器即可。具体说明请看注释。
二、怎样写路由控制器
每个控制器对应一个路由,比如你需要这样一个路由 /member
就在/controllers 文件夹下增加一个文件 memberController.js(文件名可以自取),内容如下:
javascript
// 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的格式如下(实际是根据你的控制器定义)
javascript
// 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 结构如下:
javascript
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
结果:
对应的路由和控制器代码:
javascript
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/index.html
因为我们在app.js 中设置了静态资源目录:
javascript
app.use(express.static(__dirname + '/static'))
所有放置在/static 下的静态资源 如 html css js 图片等 都可以通过http://127.0.0.1:3000/的方式访问。
结果:
这里我在index.html中写了一个表单,这个表单会被post到指定的api地址 也就是/product,并在控制器中将这个内容返回到前端,由前端进行回显。
对应的路由和控制器代码:
javascript
post: {
createProduct: {
path: '/product',
fn: (req, res) => {
console.log('req', req.body.pd, typeof (req.body))
const product = req.body
res.send({ message: product.pd });
},
}
}
六、如何获取本项目
本项目已经发布到github :
GitHub - guangboshushu/node_route: node_route
直接拉取到本地即可测试,稍加修改即可作为实际应用。