一、本地创建mock,采用json-server模块
1、npm create vite@latest创建一个Vue项目
2、npm i json-server
3、新建一个mock文件夹,新建db.json文件书写数据
4、在package.json中进行配置"mock": "json-server ./mock/db.json -w"
5、npm run mock运行程序
6、可以通过http://localhost:3000/users对数据进行访问,数据的增删查改通过get、post、put、patch、delete进行操作。例如:
二、json-serve可以扩展自定义接口,更灵活;做一个登录接口(可以随意规范,不一定非的是restful风格)
1、创建一个自定义文件server.js,书写代码如下图所示。
const jsonServer = require('json-server')
const server = jsonServer.create()
const router = jsonServer.router('./mock/db.json')
const middlewares = jsonServer.defaults()
server.use(middlewares ))
server.use(router)
server.listen(3000, () => {
console.log('JSON server is running')
})
2、json-server的底层就是express,get请求:req.query.xxx(默认可以);post请求:req.body.xxx(需要一个中间件)
npm i nodemon =>(nodemon实时监听文件变化)
3、在package.json文件中进行相应配置
4、在server.js文件中书写以下代码
const jsonServer = require('json-server')
const server = jsonServer.create()
const router = jsonServer.router('./server.js')
const middlewares = jsonServer.defaults()
server.use(middlewares)
server.use(router)
server.listen(3000, () => {
console.log('服务器地址:http://localhost:3000');
})
5、npm run mock,运行代码
三、生成token
1、使用jwt生成token
下载json-web-token ===> npm i josn-web-token
import jsonServer from 'json-server'
// jwt -> 生成token的 -> cnpm i jsonwebtoken
import jwt from 'jsonwebtoken'
import multer from 'multer'
// 批量生成假数据
import Mock from 'mockjs'
import fs from 'node:fs'
const server = jsonServer.create()
const router = jsonServer.router('./mock/db.json')
const middlewares = jsonServer.defaults({
static: './mock/public'
})
const upload = multer({
dest: './mock/public'
})
server.use(middlewares)
server.use(jsonServer.bodyParser)
server.get('/mockjs', (req, res, next) => {
const data = Mock.mock({
'users|100': [
{
'id|+1': 1,
'name': '@name',
'email': /[a-z0-9]+@[a-z0-9]+\.[a-z]+/i,
'createdAt': '@datetime',
},
],
});
res.send(data)
})
// json-server的底层就是express
// get -> req.query.xxx
// post -> req.body.xxx
server.post('/login', (req, res, next) => {
if( req.body.username === 'xiaoming' && req.body.password === '123456' ) {
var token = jwt.sign({}, '857&%((^$', { expiresIn: 10000 })
res.send({
code: 200,
msg: 'ok:login',
token
})
}
else {
res.send({
code: 200,
msg: 'error:login'
})
}
})
//后端要完成上传操作,需要利用第三方模块:multer模块
server.post('/upload', upload.single('img'), (req, res, next) => {
//console.log( req.file )
fs.renameSync(req.file.path, req.file.path + '.jpg')
res.send({
code: 200,
msg: 'ok:upload',
url: 'http://localhost:3000/' + req.file.filename + '.jpg'
})
})
// 接口权限的拦截
server.use((req, res, next) => {
jwt.verify(req.headers.authorization, '857&%((^$', function(err, decoded) {
if(err) {
res.send({
code: -10000,
msg: 'error:token'
})
}
else {
next()
}
});
})
server.post('/users', (req, res, next) => {
req.body.username = 'hehe'
req.body.job = 'it'
next()
})
server.use(router)
server.listen(3000, () => {
console.log('JSON Server is running')
})
2、npm run mock运行程序