一、前言
前面我们已经使用原生的 node.js 完成了 myblog 博客项目。
接下来,我们使用 express 框架来重构我们的 myblog 项目…
二、express
1、安装 express
使用脚手架(express-generator)
首先,我们全局安装脚手架
npm install express-generator -g
使用脚手架生成名为 blog-express 的项目
express blog-express
之后我们安装依赖
npm install
再之后,我们就可以启动它了
npm start
我们访问 localhost:3000 端口
下面我们安装一下 nodemon
npm i nodemon cross-env --save-dev
给 package.json 添加一行(实时监听,不用再次启动)
"scripts": { ... "dev": "cross-env NODE_ENV=dev nodemon ./bin/www" },
那么我们便可以使用 npm run dev 来启动项目了
2、express 处理路由
express 已经为我们封装好了路由,我们直接拿来简单配置一下就可以
我们可以参照 index.js 的代码,稍加修改即可
blog.js
我们首先配置一下博客列表和博客详情的路由(GET请求)
var express = require('express'); var router = express.Router(); // 博客列表 router.get('/list', function(req, res, next) { res.json({ errno: 0, data: [1, 2, 3] }) }); // 博客详情 router.get('/detail', function(req, res, next) { res.json({ errno: 0, data: 'OK' }) }); module.exports = router;
user.js
我们再来配置一下登录的路由(POST请求)
var express = require('express'); var router = express.Router(); // 登录 router.post('/login', function (req, res, next) { const { username, password } = req.body res.json({ errno: 0, data: { username, password } }) }); module.exports = router;
app.js
在 app.js 文件中添加刚刚配置的路由
const blogRouter = require('./routes/blog') const userRouter = require('./routes/user') ... app.use('/api/blog', blogRouter); app.use('/api/user', userRouter);
接下来,我们来进行一下 GET 和 POST 请求的测试
3、中间件机制
中间件主要是指封装所有Http请求细节处理的方法
express 中间件函数,帮助拆解主程序的业务逻辑,并且每一个的中间件函数处理的结果都会传递给下一个中间件函数
首先,我们来做一个小 demo
我们在根目录创建 express-test 文件,在当前目录下初始化
npm init -y
修改 package.json 文件下的主文件
"main": "app.js",
之后创建 app.js 文件,并安装 express(注意:没有使用到脚手架,因为此处仅做测试介绍中间件)
npm i express
app.js
我们编写一些 http 请求,理解一下 next() 的作用(根据请求方式和路径进行匹配执行)
const express = require('express') // 本次 http 请求的实例 const app = express() app.use((req, res, next) => { console.log('请求开始...', req.method, req.url) next() }) app.use((req, res, next) => { // 假设在处理 cookie req.cookie = { userId: 'abc123' } next() }) app.use((req, res, next) => { // 假设处理 post data // 异步 setTimeout(() => { req.body = { a: 100, b: 200 } next() }) }) app.use('/api', (req, res, next) => { console.log('处理 /api 路由') next() }) app.get('/api', (req, res, next) => { console.log('get /api 路由') next() }) app.post('/api', (req, res, next) => { console.log('post /api 路由'); next() }) app.get('/api/get-cookie', (req, res, next) => { console.log('get /api/get-cookie'); res.json({ errno: 0, data: req.cookie }) }) app.post('/api/get-post-data', (req, res, next) => { console.log('post /api/get-post-data'); res.json({ errno: 0, data: req.body }) }) app.use((req, res, next) => { console.log('处理 404'); res.json({ errno: -1, msg: '404 not found' }) }) app.listen(3000, () => { console.log('server is running on port 3000'); })
三、写在最后
至此,我们明白了 如何安装Express,如何处理路由以及什么是中间件机制 继续跟进学习吧!
后续会对该项目进行多次重构【多种框架(express,koa)和数据库(mysql,sequelize,mongodb)】
如果你需要该项目的 源码,请通过本篇文章最下面的方式 加入 进来~~