579 lines
13 KiB
Markdown
Executable File
579 lines
13 KiB
Markdown
Executable File
# Node开发框架——Express
|
||
|
||
注意项:
|
||
|
||
* 引入自定义模块要用相对路径, 如`./`
|
||
|
||
## 简介
|
||
|
||
官网: https://www.expressjs.com.cn/
|
||
|
||
> Express是一个Node.js Web 应用程序开发框架
|
||
> 最肤浅理解: 路由框架
|
||
|
||
核心特性:
|
||
|
||
* **路由**: 定义了路由表用于执行不同的 HTTP 请求动作。
|
||
* **中间件**: 本质是一个函数, 在收到请求和返回响应的过程中进行处理
|
||
* **模版引擎**: ......
|
||
|
||
## 类似的框架
|
||
|
||
fastify koa koa2
|
||
|
||
## 使用
|
||
|
||
```js
|
||
//初始化, 创建package.json文件
|
||
npm init -y
|
||
|
||
//安装express到项目
|
||
npm i express -S
|
||
```
|
||
|
||
```js
|
||
//引入Express框架
|
||
const express = require('express')
|
||
|
||
//创建一个web服务器
|
||
const app = express()
|
||
|
||
//给app对象注册一个中间器，use是一个内置中间件，可以用来监听get和post请求
|
||
app.use((req, res) => res.send('Hello World!'))
|
||
|
||
//开启服务器并监听端口
|
||
app.listen(3000, ()=>{
|
||
console.log('http://127.0.0.1:300')
|
||
})
|
||
```
|
||
|
||
## 使用express-generator生成项目骨架
|
||
|
||
......
|
||
|
||
## 中间件
|
||
|
||
中间件功能可以执行以下任务：
|
||
|
||
* 执行任何代码。
|
||
* 更改请求和响应对象。
|
||
* 结束请求-响应周期。
|
||
* 调用堆栈中的下一个中间件函数。
|
||
|
||
中间件的分类:
|
||
|
||
* 应用层中间件
|
||
* 路由器级中间件
|
||
* 错误处理中间件
|
||
* 内置中间件
|
||
* 第三方中间件
|
||
|
||
### 应用层中间件
|
||
|
||
使用`use()`或者`METHOD()`绑定函数到应用程序实例app上, METHOD 包括get和post
|
||
|
||
* ==中间件是有顺序的==
|
||
* next() 放行, 触发后续的中间件. 不放行, 后面的中间件都不执行.
|
||
* next() 不能在响应处理完毕后调用. 举例: res.send() 后不能再接 next()
|
||
|
||
```js
|
||
const app = express()
|
||
|
||
//每个请求都会执行
|
||
app.use(function (req, res, next) {
|
||
console.log('Time:', Date.now())
|
||
next()
|
||
})
|
||
|
||
//访问根目录时会执行
|
||
app.use('/', (req, res, next) {
|
||
console.log('Time:', Date.now())
|
||
next()
|
||
})
|
||
```
|
||
|
||
### 路由器中间件
|
||
|
||
使用`router.use()`和`router.METHOD()`函数加载路由器级中间件。
|
||
|
||
```js
|
||
// 创建路由对象
|
||
const router = express.Router()
|
||
|
||
router.get('/', function (req, res) {
|
||
res.send('hello, user!')
|
||
})
|
||
|
||
//安装路由
|
||
app.use(router)
|
||
```
|
||
|
||
### 错误处理中间件
|
||
|
||
```js
|
||
//错误处理中间件始终带有四个参数, 不能省略
|
||
app.use(function (err, req, res, next) {
|
||
console.error(err.stack)
|
||
res.status(500).send('Something broke!')
|
||
})
|
||
//要写在路由安装之后
|
||
```
|
||
|
||
### 内置中间件
|
||
|
||
Express具有以下内置的中间件功能：
|
||
|
||
* express.static : 提供静态资产，例如HTML文件，图像等。
|
||
|
||
```js
|
||
// 中间件有顺序, 哪个在前, 哪个先生效
|
||
//实现静态页面的自动访问,它会默认打开views下面的index.html
|
||
app.use('/', express.static(path.join(__dirname, 'views')))
|
||
|
||
// 响应静态资源
|
||
app.use(express.static('public'))
|
||
```
|
||
|
||
* express.json: 。它使用JSON有效负载分析传入请求，并基于body-parser
|
||
|
||
```js
|
||
app.use(bodyParser.json())
|
||
|
||
//接受一个对象或数组，并在发送之前将其转换为JSON
|
||
res.json({ code: 204, msg: '注册失败' })
|
||
```
|
||
|
||
### 第三方中间件
|
||
|
||
通过使用第三方中间件从而为Express应用增加更加功能
|
||
|
||
安装所需要功能的node模块,并在应用中加载，可以在应用级加载，也可以在路由级加载。
|
||
|
||
* bodyParse: 处理程序之前，在中间件中对传入的请求体进行解析
|
||
|
||
```js
|
||
//先安装再使用
|
||
npm i body-parser -S
|
||
```
|
||
|
||
```js
|
||
const bodyPsrse = require('body-parser')
|
||
...
|
||
//bodyParser.json是用来解析json数据格式的
|
||
app.use(bodyParser.json())
|
||
//bodyParser.urlencoded则用来解析我们通常的form表单提交的数据
|
||
app.use(bodyParser.urlencoded({
|
||
extended: false
|
||
//设置为false采用querystring库，如果设置为true那么采用qs库, 官方建议false
|
||
}))
|
||
|
||
//body-parse不支持FormData, 但post的其他数据都可以用它来接收
|
||
//get参数用express自带的req.query接收
|
||
```
|
||
|
||
## 路由
|
||
|
||
参数:
|
||
|
||
* 请求方式:
|
||
|
||
```js
|
||
app.get()
|
||
app.post()
|
||
app.put()
|
||
app.delete()
|
||
app.all()
|
||
```
|
||
|
||
* 请求路径: 只匹配对应路径的请求进行处理
|
||
|
||
```js
|
||
app.get('/', function (req, res) {
|
||
res.send('只响应根路由/')
|
||
})
|
||
|
||
app.get('/random.text', function (req, res) {
|
||
res.send('只响应/random.text')
|
||
})
|
||
```
|
||
|
||
* 处理方法:
|
||
|
||
```js
|
||
//单个回调函数
|
||
app.get('/example/a', function (req, res) {
|
||
res.send('Hello from A!')
|
||
})
|
||
|
||
//多个回调函数可以处理一条路由, 使用next()
|
||
app.get('/example/b', function (req, res, next) {
|
||
console.log('the response will be sent by the next function ...')
|
||
next()
|
||
}, function (req, res) {
|
||
res.send('Hello from B!')
|
||
})
|
||
|
||
```
|
||
|
||
## 项目
|
||
|
||
```
|
||
//1.规划项目文件夹
|
||
Demo
|
||
-data 数据
|
||
-node_modules 第三方模块
|
||
-public 公共资源
|
||
-css
|
||
-images
|
||
-js
|
||
-views 静态页面资源
|
||
-index.html 首页
|
||
-register
|
||
-app.js 程序入口
|
||
-handler.js 业务处理模块
|
||
-router.js 路由表
|
||
-package.json
|
||
-package-lock.json
|
||
|
||
//2. 引入内置模块
|
||
//3. 创建服务器, 监听端口
|
||
//4. 响应页面资源
|
||
//5. 静态资源托管
|
||
//6. 添加路由表 router.js
|
||
//7. 业务功能处理 handle.js
|
||
//8. 安装路由
|
||
```
|
||
|
||
### 程序入口 `app.js`
|
||
|
||
```js
|
||
const express = require('express')
|
||
const path = require('node:path')
|
||
const router = require('./router')
|
||
const bodyParser = require('body-parser')
|
||
|
||
let app = express()
|
||
|
||
app.listen(3002, () => {
|
||
console.log('127.0.0.1:3002')
|
||
})
|
||
|
||
// 添加body-parse解析器，使用它进行处理post方式所传递的参数
|
||
app.use(bodyParser.json())
|
||
app.use(bodyParser.urlencoded({
|
||
extended: false
|
||
}))
|
||
|
||
//static中间函数实现静态页面的自动访问
|
||
app.use('/', express.static(path.join(__dirname, 'views')))
|
||
|
||
//响应静态资源
|
||
app.use(express.static('public'))
|
||
|
||
//安装路由功能
|
||
app.use(router)
|
||
// 路由可以安装多个, 中间件都是有顺序的
|
||
// app.use('url1', router1) // 都在url1下, 路径为url1/xxx
|
||
// app.use('url2', router1)
|
||
```
|
||
|
||
### 路由表`router.js`
|
||
|
||
```js
|
||
// 引入express
|
||
const express = require('express')
|
||
const handler = require('./handler')
|
||
// 创建路由对象
|
||
const router = express.Router()
|
||
|
||
// 添加（挂载）路由配置
|
||
router.post('/register', (req, res) => {
|
||
handler.userRegister(req, res)
|
||
})
|
||
|
||
// 暴露
|
||
module.exports = router
|
||
```
|
||
|
||
### 业务处理 `handler.js`
|
||
|
||
```js
|
||
const fs = require('node:fs/promises')
|
||
const path = require('node:path')
|
||
|
||
// 专门进行业务处理
|
||
module.exports = {
|
||
userRegister: function (req, res) {
|
||
// express封装了get请求参数的接收
|
||
// req.query 是express自带的
|
||
// 接收用户参数 以前req.on('data') req.on('end') > 参数的类型转换
|
||
// body:就是post方式所传递的参数，它是一个对象（参数的接收和参数的转换）
|
||
// console.log(req.body)
|
||
// 存储到指定的数据文件中，并响应结果
|
||
|
||
getRegister: (req,res) => {
|
||
console.log('req.body', req.body)
|
||
fs.readFile(path.resolve(__dirname, './data/users.json'),'utf-8')
|
||
.then(data=>{
|
||
let arr = JSON.parse(data)
|
||
arr.push(req.body)
|
||
return fs.writeFile(path.resolve(__dirname,'./data/users.json'),JSON.stringify(arr, null, ' '))
|
||
})
|
||
.then(result => {
|
||
res.json({code:200,msg:'注册成功'})
|
||
})
|
||
.catch(err=>{
|
||
console.log('err', err)
|
||
res.json({code:204,msg:'注册失败'})
|
||
})
|
||
}
|
||
}
|
||
```
|
||
|
||
* 重定向: res.redirect(path)
|
||
* 设置响应状态码: `res.status(404).send('404 not found')`
|
||
|
||
## 用户认证
|
||
|
||
另建笔记
|
||
|
||
## 模板引擎(了解)
|
||
|
||
服务端渲染:
|
||
|
||
| | 优势 | 劣势 |
|
||
| ------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
|
||
| 服务端 | 1. 前端耗时少<br>2. 有利SEO<br>3. 客户端速度更快, 耗电更少 |1. 不利于前后端分离, 开发效率低 <br/>2. 请求多时, 对服务器造成访问压力|
|
||
|
||
折中方案: "首屏渲染", 首屏加载用服务器渲染，其他的用客户端渲染
|
||
|
||
模板引擎有很多: [Template Engines](https://expressjs.com/en/resources/template-engines.html)
|
||
|
||
其中: 前台模板引擎 express-art-template [介绍 - art-template](https://aui.github.io/art-template/zh-cn/docs/)
|
||
|
||
**使用步骤：**
|
||
|
||
* 下载安装
|
||
* 先下载art-template:`npm i art-template -S`
|
||
* 再下载express-art-template: `npm i express-art-template -S`
|
||
* 给express框架设置默认的模板引擎
|
||
|
||
```js
|
||
// 注册模板引擎
|
||
app.engine('html', require('express-art-template')); //第一个参数是渲染文件的格式
|
||
app.set('view options', {
|
||
debug: process.env.NODE_ENV !== 'production' //设置模板引擎的使用环境, 开发和上线都要使用
|
||
});
|
||
```
|
||
|
||
* 设置模板引擎文件的默认路径
|
||
|
||
```js
|
||
// 如果不设置，默认也是views
|
||
app.set('views',path.join(__dirname, './views')
|
||
app.set('view engine', 'html') //设置模板文件的类型
|
||
```
|
||
|
||
示例如下:
|
||
|
||
```js
|
||
// 1. 引入框架模块
|
||
var express = require('express')
|
||
|
||
// 2. 创建服务器
|
||
var app = express();
|
||
|
||
// 注册模板引擎
|
||
//engine就是个中间件
|
||
app.engine('html', require('express-art-template'));
|
||
app.set('view options', {
|
||
debug: process.env.NODE_ENV !== 'production'
|
||
});
|
||
// 如果不设置，默认也是views
|
||
//app.set('views','./views')
|
||
|
||
// 3. 开启服务器并监听端口
|
||
app.listen(3000,()=>{
|
||
console.log('http://127.0.0.1:3000')
|
||
})
|
||
|
||
app.get('/login',function(req,res){
|
||
// 引入express-art-template之前，会在Res上挂载一个render方法，可以实现页面的渲染
|
||
// render实现的功能有： 读取文件，动态渲染，响应, 所以不用fs去读文件
|
||
// res.render(要渲染的文件路径，[数据])
|
||
res.render('login.html', { list: [{ name: 'jack', age: 20 }, { name: 'rose', age: 18 }] })
|
||
})
|
||
```
|
||
|
||
`/views/login.html`
|
||
|
||
```html
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Document</title>
|
||
</head>
|
||
|
||
<body>
|
||
<ul>
|
||
{{each list}}
|
||
<li>{{$value.name}} -- {{$value.age}}</li>
|
||
{{/each}}
|
||
</ul>
|
||
<!--
|
||
//后台的模板不是使用script标签来创建模板
|
||
整个页面就是模板
|
||
-->
|
||
<form action="">
|
||
用户名： <input type="text"> <br>
|
||
密码 <input type="text"> <br>
|
||
<button>登陆</button>
|
||
</form>
|
||
</body>
|
||
|
||
</html>
|
||
```
|
||
|
||
## node操作mysql
|
||
|
||
```js
|
||
const express = require('express')
|
||
// 导入MySQL模块
|
||
const mysql = require('mysql');
|
||
|
||
const app = express()
|
||
|
||
app.listen('3008', () => {
|
||
console.log('http://127.0.0.1:3008')
|
||
})
|
||
|
||
// 创建一个数据库连接, 用createPool不用createConnection
|
||
var connection = mysql.createPool({
|
||
host: '127.0.0.1', // 数据库服务器的地址
|
||
user: 'root', // 数据库的账号
|
||
password: 'root', // 数据库的密码
|
||
database: 'mybase58' // 数据库名称, 不是表的名称
|
||
});
|
||
|
||
// 连接数据库或打开数据库
|
||
//connection.connect();
|
||
//不用手动打开链接
|
||
|
||
app.get('/', (req, res) => {
|
||
//查
|
||
// let sql = `select * from users`
|
||
|
||
//增
|
||
// let obj = {
|
||
// name: '赵六',
|
||
// age: '26',
|
||
// address: '赵家村'
|
||
// }
|
||
|
||
// let sql = `insert into users (name, age, address) value ('${obj.name}', '${obj.age}', '${obj.address}')`
|
||
//注意: value里面的字符串要主动加引号
|
||
//除了查询, 增删改的fields没有定义
|
||
//查询返回的是所有的数据, 增删改返回的是okPacket
|
||
|
||
//改
|
||
// let obj = {
|
||
// id: 8,
|
||
// age: 25
|
||
// }
|
||
|
||
// let sql = `update users set age = '${obj.age}' where id = '${obj.id}'`
|
||
|
||
//删
|
||
let obj = {
|
||
name: '赵六',
|
||
}
|
||
let sql = `delete from users where name = '${obj.name}'`
|
||
|
||
connection.query(sql, (err, results, fields) => {
|
||
if (err) {
|
||
console.log(err)
|
||
throw err
|
||
} else {
|
||
console.log(results)
|
||
console.log(typeof results)
|
||
console.log('-----------------')
|
||
console.log(fields)
|
||
}
|
||
})
|
||
})
|
||
```
|
||
|
||
简洁写法
|
||
|
||
```js
|
||
//参数查询
|
||
let sql = 'select * from users where name = ?'
|
||
connection.query(sql, ['张三'], (err, results, fields) => {
|
||
if (err) {
|
||
console.log(err)
|
||
throw err
|
||
} else {
|
||
console.log(results)
|
||
}
|
||
})
|
||
|
||
|
||
//增
|
||
let obj = {
|
||
name: '赵六1212',
|
||
age: '26',
|
||
address: '赵家村'
|
||
}
|
||
let sql = `insert into users set ?`
|
||
connection.query(sql, obj, (err, results, fields) => {
|
||
if (err) {
|
||
console.log(err)
|
||
throw err
|
||
} else {
|
||
console.log(results)
|
||
}
|
||
})
|
||
|
||
|
||
//改
|
||
let obj = {
|
||
id: 5,
|
||
name: '赵六1212',
|
||
age: '27',
|
||
address: '赵家村'
|
||
}
|
||
let sql = `update users set ? where id = ?`
|
||
connection.query(sql, [obj, obj.id], (err, results, fields) => {
|
||
//第二个参数, 如果只有一个是对象, 直接写, 如果是多个参数, 加上方括号成数组
|
||
if (err) {
|
||
console.log(err)
|
||
throw err
|
||
} else {
|
||
console.log(results)
|
||
}
|
||
})
|
||
|
||
|
||
//删除
|
||
let sql = 'delete from users where id = ?'
|
||
connection.query(sql, [2], (err, results, fields) => {
|
||
if (err) {
|
||
console.log(err)
|
||
throw err
|
||
} else {
|
||
console.log(results)
|
||
}
|
||
})
|
||
let sql = 'delete from users where name = ?'
|
||
connection.query(sql, ['李八'], (err, results, fields) => {
|
||
if (err) {
|
||
console.log(err)
|
||
throw err
|
||
} else {
|
||
console.log(results)
|
||
}
|
||
})
|
||
``` |