前端mock假数据

一、本地创建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运行程序