如今前后端已分离工作，后端数据还没及时提供时候，前端人员为了不让项目落后，应该适当给自己模拟接口数据。那么模拟接口数据就可以使用mockjs,可以来到https://github.com/nuysoft/Mock/wiki/Getting-Started
这是mock的jithub的教程，所以我们按照里面的教程安装并且使用就可以了。
如下是我的安装顺序，在这里我用的是yarn包管理器
1.创建项目文件夹，我这里叫user，里面有front前台文件夹，和back后台文件夹，在front文件夹子目录再建一个mock文件夹。
2.进入mock文件夹，yarn init -y 初始化文件夹,接着就yarn add mockjs,
3.在mock文件夹新建一个app.js文件，可在里面模拟一些数据（暂时），
此时mock文件夹下
// 使用 Mock
var Mock = require('mockjs');
// [{id;username;birthday;isGender;infos;avatar}]
var rs=[]
for (var i = 0;i<10;i++){
var data = Mock.mock({
// 属性 list 的值是一个数组，其中含有 1 到 10 个元素
'list|1': [{
// 属性 id 是一个自增数，起始值为 1，每次增 1
'id|+1': 10,
'username|1':Mock.Random.cname(),
'birthday':Mock.Random.date('yyyy-MM-dd'),
'isGender':Mock.Random.boolean(),
'infos':Mock.Random.paragraph(1,10),
'avatar':Mock.Random.image('100x100')
}]
})
rs.push(data)
}
// 输出结果
console.log(rs);
当然 ，多了一层list我们也可以去掉，直接成
for (var i = 0;i<10;i++){
var data = Mock.mock({
// 属性 list 的值是一个数组，其中含有 1 到 10 个元素
// 属性 id 是一个自增数，起始值为 1，每次增 1
'id|+1': 10,
'username|1':Mock.Random.cname(),
'birthday':Mock.Random.date('yyyy-MM-dd'),
'isGender':Mock.Random.boolean(),
'infos':Mock.Random.paragraph(1,10),
'avatar':Mock.Random.image('100x100')
})
rs.push(data)
}
现在数据是模拟出来了，我们还要模拟请求接口，用express-art-templte也能实现。在mock目录下我们要使用express快速生成器（脚手架）来初始化我们的框架。
1.在mock文件夹打开cmd，输入express --view=pug myapp，此时就生成好了一个架构.
2.然后cd myapp里面输入yarn或者npm install安装express需要的依赖，最后执行yarn start程序就执行了，默认端口是3000
在用mvc分层思想，再建一个controllers和models文件,别忘了在myapp文件下再安装一下mockjs哦（之前安装路径不一样，还需要在myapp文件中yarn add mockjs）
因为model层是负责与数据库打交道的，所以之前模拟数据应该放在model层，所以
// 使用 Mock,
//mockModel.js
var Mock = require('mockjs');
// [{id;username;birthday;isGender;infos;avatar}]
var rs=[]
for (var i = 0;i<10;i++){
var data = Mock.mock({
// 属性 list 的值是一个数组，其中含有 1 到 10 个元素
'list|1': [{
// 属性 id 是一个自增数，起始值为 1，每次增 1
'id|+1': 10,
'username|1':Mock.Random.cname(),
'birthday':Mock.Random.date('yyyy-MM-dd'),
'isGender':Mock.Random.boolean(),
'infos':Mock.Random.paragraph(1,10),
'avatar':Mock.Random.image('100x100')
}]
})
rs.push(data)
}
// 输出结果
module.exports={
userData:rs
}
接下来我们就要去到controller层了,利用model传过来的数据做判断
//userController.js
var mockModel = require('../models/mockModel');
function lst(req,res) {
var userData=mockModel.userData;
res.json({
error_code:0,
reason:'成功返回用户列表',
result:userData
})
}
module.exports={
lst
}
然后到路由文件层理调用controller就好了吧，记得别忘了在app.js设置外置路由哦
//路由文件
var express = require('express');
var router = express.Router();
var userController= require('../controllers/userController')
/* GET users listing. */
router.get('/lst', userController.lst);
module.exports = router;
请求成功后就能在页面看到如上图所示内容，可以到view层用ajax请求接口地址把数据渲染出来，所以整个模拟后台数据接口就完成啦。
比如这时候我有一个list.html来显示数据
<div class="container">
<h1>用户列表</h1>
<!-- 用户列表页 -->
<!-- 希望使用表格展示用户列表数据 -->
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>序号</th>
<th>用户名</th>
<th>头像</th>
<th>生日</th>
<th>性别</th>
<th>地址</th>
</tr>
</thead>
<tbody id="container">
</tbody>
</table>
</div>
我们要在tbody里面添加数据，这时候就要发送ajax了，可是我们的前台啊没有链接数据库这种操作，更别服务器了，我们可以用本地web服务器
1.如果你是webstrom编辑器的话，它自带了一个服务器内置的。
2.sunblime可以安装sunblime的插件
3.也可以使用express.static将view文件设置为静态文件。
4.phpstudy
5.npm下载一个http-server的包。步奏如下，
（1）先打开cmd安装全局 npm install http-server -g
(2)再去到你的front项目文件夹输入http-server -c-1 （⚠️只输入http-server的话，更新了代码后，页面不会同步更新）
得到的结果如下有两个链接，可以选一个输入在浏览器的地址栏，再拼接html文件，就可以访问了。
按快捷键CTRL-C
终端显示^Chttp-server stopped.即关闭服务成功。
好了我们开始吧
先要调用mock的接口
这时候我们就要想啦，我们目前本地服务器的端口是8081，接口地址是3000，那我们就会造成跨域问题。
解决接口调用跨域问题，那就要回到mock文件下的myapp文件cmd ，输入yarn add cors,去到myapp的app.js文件里加上
var cors = require('cors');
app.use(cors());
//list.html
<script src="https://cdn.bootcss.com/jquery/2.0.1/jquery.js"></script>
<script type="text/javascript" src="./js/user.js"></script>
<!-- 调用mock提供的数据 -->
<script type="text/javascript">
/**
* 页面DOM加载完毕后，执行
* @param {String} ) { var url [description]
* @return {[type]} [description]
*/
$(function () {
var url = 'http://localhost:3000/users/lst';
getUserListData(url);
})
</script>
//user.js
**
* 发送网络请求获取用户列表数据
* @param {[type]} url [description]
* @return {[type]} [description]
*/
function getUserListData(url) {
// 发送ajax请求获取数据
$.ajax({
url,
type: 'GET',
dataType: 'json',
success:function(json){
if(json.error_code === 0){
// 格式化数据，一般提取出一个方法
var _html = formatUserData(json.result);
$("#container").html( _html );
}else{
alert('系统繁忙！');
return;
}
}
});
}
**
* 用户格式化用户的列表数据
* @param {[type]} data [description]
* @return {[type]} [description]
*/
function formatUserData(data) {
var _html = ``;
data.forEach( (item, index) => {
var gender = item.isGender ? '男' : '女';
_html += `<tr>
<td>${item.id}</td>
<td>${item.username}</td>
<td><img src="${item.avatar}" alt="" /></td>
<td>${item.birthday}</td>
<td>${gender}</td>
<td>${item.address}</td>
</tr>`;
} );
return _html;
}
这时候页面就能展示数据啦
在这里需要注意的是，我用的虽然是添加html文本的形式添加的，假设我做的是购物车，我对价格要做保留两位小数的处理，这时候要用到过滤器了把，可是过滤器要在添加html时候加么？?我试过，但是会表示过滤器未定义。。。后来我的解决方案是不添加html文本了，而是用v-for将数据循环遍历出来到页面。
我在ajax请求的成功回调时候就定义了一个保留两位
function getGoodslistData(url) {
$.ajax({
url,
type:'GET',
dataType:'json',
success:function (json) {
if(json.err_code == 0){
var cartListData = json.result;
var vm = new Vue({
el: '#cart1',
data: {
cartListData
},
// 局部过滤器 filters
filters: {
toFixed2: function (input, param) {
console.log(input);
console.log(param);
return input.toFixed(param);
}
}
})
// var _html=formatGoodsData(json.result);
// console.log(json.result)
// $('#container').html(_html);
}else{
alert('系统繁忙');
return;
}
}
})
}
此时就不用添加html啦，但是要注意到，由于是请求接口，所以接口那边的服务是不能关掉的！！！！！！！！！
