盘点 Vue 项目 mock 数据的几种方式

本文基于vue/cli@3+创建的项目进行讲解

方式一：使用 mockjs 插件实现本地 mock 数据

1. 安装mockjs插件

npm i mockjs -D

2. 在 src 目录下创建一个mock文件夹，在mock文件夹下创建一个index.js和一个data文件夹（用于存放项目需要的模拟数据）

.
├── src
│   ├── mock
│   │   └── data
│   │   │   └──  test.json
│   │   └── index.js 
.

3. mock目录下的index.js示例如下：

const Mock = require('mockjs')
 
// 格式： Mock.mock( url, 'post'|'get' , 返回的数据)
Mock.mock('/api/test', 'get', require('./data/test.json'))
Mock.mock('/api/test2', 'post', require('./data/test2.json'))

4. 在main.js入口文件中引入mock数据，不需要时，则注释掉

require('./mock') // 引入mock数据，不需要时，则注释掉

5. 最后，在 vue 模板中使用即可

axios.get('/api/test')
.then(function(res){
  console.log(res);
})
.catch(function(err){
  console.log(err);
});

方式二：在 public 文件夹放mock数据（无需使用mockjs插件）

1. 在public文件夹下创建一个mock文件夹，用来存放模拟数据的json文件

.
├── public
│   ├── mock
│   │   └── test.json 
.

2. 在vue.config.js里进行路径配置，如下:

module.exports = {
 devServer: {
   proxy: {
     '/api': { // 代理接口
       target: 'http://localhost:8080',
       ws: true, // proxy websockets
       changeOrigin: true, // 是否开启跨域
       pathRewrite: { // 路径重写
         '^/api': '/mock'
       }
     }
   }
 }
}

3. 最后，在 vue 模板中使用即可

axios.get('/api/test.json') // 注意这里需要.json后缀
.then(function(res){
  console.log(res);
})
.catch(function(err){
  console.log(err);
});

方式三：使用 nodejs 服务，vue项目向nodejs服务请求mock数据

1. 创建一个 node 项目（为了方便，本例直接在vue项目根目录创建，当然也可以是其它任何地方）

.
├── 项目根目录
│   └── serve.js
.

2. serve.js示例

const http = require('http')
// url模块用于处理与解析 前端传给后台的URL，适用于get请求（不适用于post请求），详情参见文档
const urlLib = require('url')

http.createServer(function (req, res) {
  const urlObj = urlLib.parse(req.url, true) // 注意：这里的第二个参数一定要设置为：true, query才能解析为对象形式,可以更加方便地获取key:value
  const url = urlObj.pathname
  const get = urlObj.query
  console.log(url)
  // 模拟的mock数据
  const data = {
    "code": 200,
    "list": [
        {
            "id": '0001',
            "name": "test"
        },
        {
            "id": '0002',
            "name": "test2"
        }
    ]
  }

  // console.log(get.user)
  if (url === '/test') { // 接口名
    res.write(JSON.stringify(data))
  }
  res.end()
}).listen(9000)

3. 启动node服务

node serve.js

4. 配置vue.config.js的proxy，解决跨域

module.exports = {
 devServer: {
   proxy: {
     '/api': {
       target: 'http://localhost:9000',
       ws: true, // proxy websockets
       changeOrigin: true, // 是否开启跨域
       pathRewrite: { // 路径重写
         '^/api': ''
       }
     }
   }
 }
}

5. 最后，在 vue 模板中使用即可

axios.get('/api/test')
.then(function(res){
  console.log(res);
})
.catch(function(err){
  console.log(err);
});