vue-cli3使用mock数据的方法分析

什么是Mock数据

在前端开发中，当需要访问后端接口来获取数据时，如果后端接口还没有开发完成或者还没有部署到服务器中，前端开发人员就无法进行开发工作。而使用Mock数据可以解决这个问题。

Mock数据是指在前端开发中，为了模拟真实的后端接口数据而创建的一组模拟数据，可以使用一些工具快速生成，比如json-server、Mock.js等。

使用Vue-cli3创建Mock数据

1. 安装Vue-cli3

安装方法可以参考Vue官网，这里不再赘述。

1. 安装依赖

在项目目录下，使用以下命令安装依赖：

npm i mockjs -D
npm i express -D

1. 创建mock-server目录

在src目录下创建一个mock-server目录，用于存放后续的Mock数据。

1. 创建Mock数据

在mock-server目录下，创建一个index.js文件，并编写Mock数据。这里以创建一个/getUserInfo的接口为例。

```js
const express = require('express')
const app = express()
const port = 3000
const bodyParser = require('body-parser')
const Mock = require('mockjs')

app.use(bodyParser.json())

app.get('/getUserInfo', (req, res) => {
let data = Mock.mock({
'name': '@cname',
'age|18-26': 0,
'sex': '@boolean'
})
res.send(JSON.stringify(data))
})

app.listen(port, () => {
console.log(Mock server is listening on port ${port})
})
```

上述代码使用Mock.js创建了一个Mock数据，并通过express框架创建了一个3000端口的服务器用于响应请求。

1. 修改package.json文件

打开package.json文件，在scripts节点中添加以下代码：

json
"mock": "node ./src/mock-server/index.js"

这样在后续的开发过程中，只需要在终端中输入以下命令即可启动Mock服务器：

npm run mock

1. 在项目中测试Mock数据

在Vue组件中使用axios模块发送请求，获取Mock数据。这里以在Home.vue中获取/getUserInfo接口数据为例。

```vue

```

1. 运行项目

在终端中输入以下命令运行项目：

npm run serve

打开浏览器，访问页面，即可看到Mock数据的展示效果。

其他说明

Mock数据的创建方法和使用方式可以因实际情况而定，此处只是提供一种较为简单的实现方式。

下面举两个示例说明：

示例1

如果需要在Mock数据中，返回一个列表数据，则可以在index.js中添加以下代码：

// Mock 一个列表数据
app.get('/getList', (req, res) => {
       let data = Mock.mock({
           'list|10-20': [{
               'id|+1': 1,
               'name': '@cname',
               'age|18-26': 0,
               'sex': '@boolean'
           }]
       })
       res.send(JSON.stringify(data))
   })

示例2

如果需要在Mock数据中，返回一个对象数据，则可以在index.js中添加以下代码：

// Mock 一个对象数据
app.get('/getObject', (req, res) => {
       let data = Mock.mock({
           'id|+1': 1,
           'name': '@cname',
           'age|18-26': 0,
           'sex': '@boolean'
       })
       res.send(JSON.stringify(data))
   })