mockjs

最新推荐文章于 2024-01-30 14:10:39 发布

元气满满的一名前端小开发

最新推荐文章于 2024-01-30 14:10:39 发布

阅读量631

点赞数

文章标签： p2p linq html

本文链接：https://blog.csdn.net/xinxin7789/article/details/123059618

版权

模拟数据进行测试需要用到mockjs

1. 安装mockjs

npm install --save mockjs

2. 在src文件夹下创建一个文件夹，文件夹mock文件夹。

3. 准备模拟的数据

[
    {
        "id": 1,
        "name": "xxxxx",
        "source": "xxxxxxxxxxxxxxxx",
        "create_time":"2022-2-16"
    }
]

4. 在mock文件夹中创建一个server.js文件，通过mock模块模拟出数据

// 先引入mockjs模块
import Mock from 'mockjs'
// 把JSON数据格式引入进来[JSON数据格式根本没有对外暴露，但是可以引入
// webpack默认对外暴露的：图片、JSON数据格式
import xxx from './reco.json'

// mock数据:第一个参数请求地址   第二个参数：请求数据
Mock.mock('/mock/xxxxxxxxxxxxx', { code: 200, data: xxx })

5. 回到入口文件，引入serve.js

// 引入MockServer.js----mock数据
import '@/mock/mockServe'

6. 在API文件夹中创建mockRequest

// 对于axios进行二次封装
import axios from 'axios'
import nprogress from 'nprogress'
// 如果出现进度条没有显示：一定是你忘记了引入样式了
import 'nprogress/nprogress.css'
// 底下的代码也是创建axios实例
let requests = axios.create({
  // 基础路径
  baseURL: '/mock',
  // 请求不能超过5S
  timeout: 5000
})

// 请求拦截器----在项目中发请求（请求没有发出去）可以做一些事情
requests.interceptors.request.use((config) => {
  // 现在的问题是config是什么?配置对象
  // 可以让进度条开始动
  nprogress.start()
  return config
})

// 响应拦截器----当服务器手动请求之后，做出响应（相应成功）会执行的
requests.interceptors.response.use(
  (res) => {
    // 进度条结束
    nprogress.done()
    // 相应成功做的事情
    return res.data
  },
  (err) => {
    return (err, '服务器响应数据失败')
  }
)
// 最终需要对外暴露（不对外暴露外面模块没办法使用）
// 这里的代码是暴露一个axios实例
export default requests