个人简介
👀个人主页: 前端杂货铺
🙋♂️学习方向: 主攻前端方向,也会涉及到服务端
📃个人状态: 在校大学生一枚,已拿多个前端 offer(秋招)
🚀未来打算: 为中国的工业软件事业效力n年
🥇推荐学习:🍍前端面试宝典 🍉Vue2 🍋Vue3 🍓Vue2&Vue3项目实战 🥝Node.js🍒Three.js
🌕个人推广:每篇文章最下方都有加入方式,旨在交流学习&资源分享,快加入进来吧
Node.js系列文章目录
文章目录
Node.js系列文章目录一、前言二、express1、安装 express2、express 处理路由3、中间件机制 三、写在最后一、前言
前面我们已经使用原生的 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.bodyres.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) => {// 假设在处理 cookiereq.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)】
如果你需要该项目的源码,请通过本篇文章最下面的方式加入进来~~