vue+vuecli+webpack中使用mockjs模拟后端数据的示例
使用Mockjs模拟Vue+Vue CLI+Webpack中的后端数据
前言
在前后端分离的开发模式下，模拟后端数据对于前端开发来说至关重要。Mockjs是一个能够生成模拟数据的工具，可以帮助我们模拟后端接口返回的数据，从而实现前后端的独立开发。本文将介绍如何在Vue项目中使用vue-cli和webpack结合Mockjs来模拟后端数据。
一、Mockjs简介
Mockjs是一个功能强大的模拟数据生成器，它可以基于数据模板生成模拟数据，拦截并模拟ajax请求。使用Mockjs，我们可以事先模拟数据，前提是和后端约定好了数据接口及数据格式。
二、Mockjs语法规范
1. 数据模板定义规范（DTD）
数据模板中的每个属性由三部分构成：属性名、生成规则、属性值。格式如下：
'属性名|生成规则': 值
注意：
属性名和生成规则之间用竖线 | 分隔。
生成规则有7种格式，根据需求选择合适的格式。
生成规则的含义依赖于属性值的类型。
属性值中可以含有@占位符。
属性值还指定了最终值的初始值和类型。
例1：
```javascript
Mock.mock({
'number1|1-100.1-10': 1, // 生成一个介于1到100之间，保留一位小数的数字
// 其他属性...
})
```
这将生成一个包含模拟数据的对象。
2. 数据占位符定义规范（DPD）
占位符用于在属性值字符串中占个位置，并不出现在最终的属性值中。格式如下：
@占位符
@占位符(参数 [, 参数])
注意：
用 @ 来标识其后的字符串是占位符。
占位符引用的是Mock.Random中的方法。
通过Mock.Random.extend()来扩展自定义占位符。
占位符也可以引用数据模板中的属性。
占位符支持相对路径和绝对路径。
例2：根据正则表达式生成匹配字符串：
```javascript
Mock.mock({
'regexp1': /[a-z][A-Z][0-9]/, // 生成一个符合正则表达式的字符串
// 其他属性...
})
```这将生成一个匹配给定正则表达式的字符串。
三、在Vue项目中使用Mockjs模拟后端数据
1. 安装依赖：在项目根目录下执行`npm install --save-dev mockjs axios`，安装mockjs和axios。
2. 在vue-cli项目中创建一个mock文件夹，用于存放模拟数据的相关文件。
通过模拟请求获取假数据：以mockjs和jQuery为例
在web开发中，我们经常需要从服务器获取数据。但有时出于测试或其他原因，我们需要模拟这些数据。这时，mockjs就派上了用场。下面是一个使用mockjs和jQuery发送ajax请求获取模拟数据的例子。
我们需要引入mockjs和jquery。可以在HTML文件中通过script标签引入。例如：
```html