【第三步】vue中使用mockjs

一. 简单使用

1. 安装mockjs：npm install --save mockjs

2. 创建一个js文件写mock模拟数据，例：

import Mock from 'mockjs';
 
Mock.mock({ "string|1-10": "★" })

3. 在main.js入口处引入这个js文件

如果模拟数据的代码是单独定义在一个 js 文件里的，一定要先运行定义模拟数据的 js，再发起请求，请求才会被mock.js 拦截。一般在入口页面运行定义模拟数据的 js

 

好处：可以起到拦截ajax请求，返回数据，

缺点：network看不到请求

原因：

　　1. 源码中首先查找是否在 Mockjs 中定义了该请求，有则进行拦截，然后使用其模拟请求对象 MockXMLHttpRequest 进行响应，即此时不发送 XHR 请求；

　　2. 否则使用本地标准 XHR 对象进行请求，此时可以在控制台 network 中看到请求信息

 

 

二. 中级使用

1. 编写mock返回数据js文件

const Mock = require('mockjs')

module.exports = function (app) {

  // 监听请求
  app.post('/dev-api/vue-admin-template/user/login', (rep, res) => {

    // 响应时，返回 mock data的json数据
    // 将json传入 Mock.mock 方法中，生成的数据返回给浏览器

    res.json(Mock.mock({
      code: 20000,
      data: 'admin-ton'
    }))

  })

}

2.  修改 vue.config.js配置。

在文件中的devServer属性中新添加一个before钩子函数,用来监听来自web的http请求。

优点：可以在network看到请求了

缺点：不能热更新代码

 

三. 高级使用

1. 将中级使用的js文件利用webpack的中间件，使用路由导入

2. 利用chokidar模块实现热更新