引言
前面我们已经学完了基于express框架下服务器的启动,get请求的接收与处理还有post请求的接收与处理。同时我们使用接口测试工具完成了接口的测试,响应值和接受值返回值都是正常的。那么为什么还有这一章节呢?
问题的提出
原来我们之前对于get请求和Post请求的接受与处理,虽然可以实现其功能,但是整体代码都是写在一个js文件中的,这就导致我们js文件很臃肿,很难看,维护和开发成本都会大大的提高。
那么我们有没有一种方法,让我们的代码工整性和复用性都大大提高呢?
解决的思路
我的解决方案是:抽成模块,进行模块化开发。
实例
还是拿我们之前的cs.js作为讲解。
原本的cs.js中的代码
import express from 'express';
const app = express();
app.use(express.urlencoded({extended:false}));
app.get('/getmethod',(req,resp)=>{
console.log('get')
resp.send("这是一个get请求");
})
app.post('/postmethod',(req,resp)=>{
console.log('post')
resp.send("这是一个post请求");
})
app.post('/postcs',(req,resp)=>{
const result = req.body;
console.log(result);
resp.send('成功了');
})
app.listen(6666,()=>{
console.log('serve is running at http://localhost:6666');
})
当然上面我们的代码还是不够多,当一个复杂的业务出现时,如果把所有的请求都挂在一个js文件中,就会导致文件变得非常臃肿。而且代码的复用性很差。
这里我们采取模块化的开发方法。
在目录下创建 router文件夹和router_handle这两个文件夹。
接下来我们利用到下面几个知识点完成模块的抽出
Router
express中的Router作用就是为了方便我们更好的根据路由去分模块。避免将所有路由都写在入口文件中。
使用之前我们通过const router = express.Router();
完成创建router
router文件夹
我们在router文件夹下创建ceshi.js文件,然后首先导入'express'模块
import express from 'express';
const router = express.Router();
...//暂时省略的部分
export default router;
完成上述代码后,我们就已经成功将router下的ceshi.js抽成了一个module并导出了。
router_handle文件夹
该目录下同样创建一个ceshi.js,这里用来写代码层面上的真正的功能上的实现。
function postMethod(req,resp){
const result = req.body;
console.log(result.ceshi);
resp.send('post method success');
}
export {postMethod};
最后的整合及测试
router和router_handle的整合
接下来我们来整合router文件夹和router_handle文件夹,上面说过,中间router文件夹中省略了一部分代码,省略的这部分代码就是import router_handle中的实现的代码 并use上。
import express from 'express';
const router = express.Router();
import {postMethod} from '../router_handle/ceshi.js';
router.post('/postMethodCeshi',postMethod);
export default router;
上述就是router目录下的ceshi.js全部代码,先是常规的 ES Moudle标准的导入所需的模块,然后创建router,然后导入写好的实现文件---即:router_handle目录下的ceshi.js文件。
接下来将引入的router_handle挂载到router.post()下,最后作为modle导出。
整合到cs.js中使用
上面说到,这次我们的主入口是cs.js文件,接下来我们要在cs.js中使用这个模块。
import express from 'express';
import router from './router/ceshi.js'
const app = express();
app.use(express.urlencoded({extended:false}));
app.use(router);
app.listen(6666,()=>{
console.log('serve is running at http://localhost:6666');
})
接下来我们打开接口测试工具,按照之前测试接口,发现没有问题。优化完成。