Vue项目使用mock数据的几种方式

# Vue项目使用mock数据的几种方式

本文是基于vue/cli 3.0创建的项目进行讲解

首先我们来说一说vue/cli 3.0 与 2.0 的一些不同：

3.0 移除了 static 文件目录，新增了 public 目录，这个目录下的静态资源不会经过 webpack 的处理，会被直接拷贝，所以我们能够直接访问到该目录下的资源，静态数据（如json数据、图片等）需要存放在这里。

放在public目录下的静态资源可直接通过(http://localhost:8080/+ 文件名称)来访问，不需要在前面加一个/public路径

3.0 移除了 config、build 等配置目录，如果需要进行相关配置我们需要在根目录下创建vue.config.js 进行配置。

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

安装mockjs插件
```
npm i mockjs -D
```
1
在src目录下创建一个mock文件夹，在mock文件夹下创建一个index.js和一个data文件夹（用于存放项目需要的模拟数据）
```
.
├── src
│   ├── mock
│   │   └── data
│   │   │   └──  test.json
│   │   └── index.js 
.   .   
```
1
2
3
4
5
6
7

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'))

1
2
3
4
5

在main.js入口文件中引入mock数据，不需要时，则注释掉
```
require('./mock') // 引入mock数据，不需要时，则注释掉
```
1

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

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

1
2
3
4
5
6
7

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

在public文件夹下创建一个mock文件夹，用来存放模拟数据的json文件
```
.
├── public
│   ├── mock
│   │   └── test.json 
.   .   
```
1
2
3
4
5
放在public目录下的静态资源可直接通过(http://localhost:8080/ + 文件名称)来访问，不需要在前面加一个/public路径。

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14

devServer.proxy官方文档

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

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

1
2
3
4
5
6
7

这方式貌似不支持post请求，有待研究。

# 方式三：前端本地启动一个nodejs服务，vue项目向nodejs服务请求mock数据

创建一个node项目（为了方便，本例直接在vue项目根目录创建，当然也可以是其它任何地方）
```
.
├── 项目根目录
│   └── serve.js
.   .  
```
1
2
3
4

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)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

启动node服务
```
node serve.js
```
1

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

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

1
2
3
4
5
6
7

# 总结

方式二目前来看只支持get方式请求，对于post请求还有待研究。方式三虽然也是一种实现方式，但实现起来比较麻烦。个人建议使用方式一，灵活、方便。

# 相关文章

《Vue CLi3 修改webpack配置》

← Vue中的scoped和scoped穿透《JavaScript教程》笔记→