基本用法
Express是一个流行的Node.js Web应用程序框架，用于构建灵活且可扩展的Web应用程序和API。它是基于Node.js的HTTP模块而创建的，简化了处理HTTP请求、响应和中间件的过程。
app.js
import express from 'express'
import User from './src/user.js'
import List from './src/list.js'
import LoggerMiddleware from './middleware/logger.js'
const app = express()
app.use(express.json()) // 支持post解析json
app.use(LoggerMiddleware) // 日志中间件
// 模块化拆分
app.use('/user', User) POST http://localhost:3000/user/login HTTP/1.1
app.use('/List', List) POST http://localhost:3000/list/getall HTTP/1.1
// req接受客户端的参数
// res返回给客户端
app.get('/get', (req, res) => {
console.log(req.query)
res.send('Hello World!')
})
app.post('/post', (req, res) => {
console.log(req.body)
res.send('Hello World!')
})
app.get('/get/:id', (req, res) => {
console.log(req.params)
res.send('动态参数')
})
user.js
import express from 'express'
const router = express.Router()
router.post('/login', (req, res) => {
res.send({
code: 200,
msg: 'login success',
})
})
router.post('/register', (req, res) => {
res.send({
code: 200,
msg:'register success',
})
})
export default router
list.js
import express from 'express'
const router = express.Router()
router.post('/getall', (req, res) => {
res.send({
code: 200,
msg: 'success',
data: [{id: 123}]
})
})
export default router
中间件 logger.js
中间件是处理HTTP请求和响应的函数，它位于请求和最终路由处理函数之间，可以对请求和响应进行修改、执行额外的逻辑或者执行其他任务。
import log4js from 'log4js'
log4js.configure({
appenders: {
// 输出到控制台
out: {
type: 'stdout',
layout: {
type: 'colored'
}
},
// 输出到文件
file: { type: 'file', filename: 'logs/server.log' }
},
categories: {
default: { appenders: ['out', 'file'], level: 'debug' }
}
})
const logger = log4js.getLogger()
// next 执行下一个中间件的函数 如果不写就一直卡这
const LoggerMiddleware = (req, res, next) => {
logger.debug(`[${req.method}] ${req.url}`)
next()
}
export default LoggerMiddleware
访问静态资源
// 防盗链
const whiteList = ['localhost']
const preventHotLingking = (req, res, next) => {
// referer 如何获取referer 如果是直接打开的资源是获取不到
const referer = req.get('referer')
if (referer) {
const { hostname } = new URL(referer)
console.log(hostname)
if (!whiteList.includes(hostname)) {
res.status(403).send('Forbidden')
return
}
}
next()
}
app.use(preventHotLingking) // 防止热链接
// 初始化静态资源 static文件下11.jpg
app.use('/assets', express.static('./static')) // http://localhost:3000/assets/11.jpg
app.listen(3000, () => {
console.log('server is running')
})
响应头和请求头
// npm install nodemon -g nodemon app.js
import express from 'express';
const app = express();
app.use('/', (req, res, next) => {
res.setHeader('Access-Control-Allow-Origin', '*')
// Access-Control-Allow-Origin 允许哪些域名访问
// Access-Control-Allow-Methods 允许哪些方法访问 默认支持get post head
res.setHeader('Access-Control-Allow-Methods', 'GET,POST,PATCH')
res.setHeader('Access-Control-Allow-Headers', 'Content-Type')
next()
})
// 预检请求 OPTIONS请求 这个是浏览器自动发送的
// 满足以下条件发起
// 1.Content-Type: application/json
// 2.请求方法不是get post head 是put patch delete
// 3.自定义header
// 默认只支持这三种 Content-type: application/x-www-form-urlencoded | multipart/form-data | text/plain
// 不支持application/json
app.patch('/info', (req, res) => {
res.json({
code: 200,
type: 'patch'
})
})
app.get('/info', (req, res) => {
res.setHeader('xm', 123)
res.setHeader('Access-Control-Expose-Headers', 'Xm') // 后端必须暴露自定义header 不然前端获取为null
res.json({
code: 200,
type: 'get'
})
})
app.post('/info', (req, res) => {
res.json({
code: 200,
type: 'post'
})
})
app.listen(3000, () => {
})
<!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>
<script>
fetch('http://localhost:3000/info', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
name: 'John',
age: 30
}),
}).then(res=>{
const headers = res.headers
console.log(headers.get('Xm'))
return res.json()
}).then(data=>{
console.log(data)
})
</script>
</body>
</html>
SSE
app.get('/sse', (req, res) => {
res.setHeader('Content-type', 'text/event-stream')
setInterval(() => {
res.write('event: test\n') // 默认message
res.write('data:'+Date.now()+'\n\n')
}, 1000)
})
<script>
const sse = new EventSource('http://localhost:3000/sse')
sse.addEventListener('message', (e)=> {
console.log(e.data)
})
// 设置为test
sse.addEventListener('test', (e)=> {
console.log(e.data)
})
</script>
