前端本地mock数据

最新推荐文章于 2025-04-17 14:14:01 发布

阿奇是只猪

最新推荐文章于 2025-04-17 14:14:01 发布

阅读量629

点赞数

本文链接：https://blog.youkuaiyun.com/etemal_bright/article/details/112319852

版权

这篇博客介绍了如何利用json-server在前端本地创建mock数据。通过设置文件结构，包括data、db、router和server文件，配合package.json配置运行命令，可以启动mock服务器。在.env.dev文件中进行配置后，调用接口时，执行npm run mock，即可访问本地http://localhost:3006/***接口获取mock数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用json-server插件

文件结构

在这里插入图片描述

data文件

在这里插入图片描述
data文件呢是存储mock数据的
比如：defaultRes.js文件里面如下：
完全模拟接口返回格式

const Mock = require('mockjs')

const result = Mock.mock({
  code: 1,
  msg: 'success',
  errorMsg: 'success',
  content: {
    formCode: '5555555',
    formType: 0,
    formName: '表单5'
  }
})

module.exports = result

db文件

官方文档：
在这里插入图片描述

// db.js
const defaultRes = require('./data/defaultRes')
// 通过使用mock.js，来避免手写数据
module.exports = {
  defaultRes,
 }

相当于导出一个json

{
defaultRes:{
  code: 1,
  msg: 'success',
  errorMsg: 'success',
  content: {
    formCode: '5555555',
    formType: 0,
    formName: '表单5'
  }
}
}

router文件

官方文档
在这里插入图片描述

module.exports = {
'/ProjectApiService/addOrUpdateProjectInfo': '/defaultRes',
}

server文件

在这里插入图片描述

const jsonServer = require('json-server')
const db = require('./db.js')
const routes = require('./routes.js')

const port = 3006

const server = jsonServer.create()
// 使用mock的数据生成对应的路由
const router = jsonServer.router(db)
const middlewares = jsonServer.defaults()
// 根据路由列表重写路由
const rewriter = jsonServer.rewriter(routes)

server.use(middlewares)
// 将 POST 请求转为 GET，满足可以接受 POST 和 GET 请求的需求
server.use((request, res, next) => {
  request.method = 'GET'
  next()
})

server.use(rewriter) // 注意：rewriter 的设置一定要在 router 设置之前
server.use(router)

server.listen(port, () => {
  console.log(`open mock server at localhost:${port}`)
})

package.json文件配置运行命令

"scripts": {
    "serve": "vue-cli-service serve",
    "mock": "nodemon --watch mock mock/server.js",
    "dev": "vue-cli-service serve --mode dev",
    "serve:pre": "vue-cli-service serve --mode pre",
    "serve:prod": "vue-cli-service serve --mode production",
    "build": "vue-cli-service build --mode production",
    "build:pre": "vue-cli-service build --mode pre",
    "build:test": "vue-cli-service build --mode development",
    "lint": "vue-cli-service lint"
  },

启动项目

npm run dev
npm run mock

根据命令可以看到肯定是要新建.env.dev文件做配置的

.env.dev文件

ENV = dev
NODE_ENV = dev

调用接口时

可见链接https://blog.youkuaiyun.com/etemal_bright/article/details/112320668

// 若当前是本地开发环境，则走mock数据
if (process.env.NODE_ENV === 'dev') {
  Fetch.interceptors.push((request: any, next: any) => {
    const { url, options } = request
    const mockUrl = url.replace(options.root, 'http://localhost:3006')
    request.url = mockUrl
    next()
  })
}