1. Mock介绍
2. 下载安装mockjs
(1)打开项目目录
(2)在项目目录下按住shift并点击鼠标右键，找到“在此打开命令行窗口”
(3)在命令行窗口中输入指令完成下载安装：npm i mockjs --save-dev。（也可用cnpm安装）
备注：npm和cnpm的安装可参考资源打包工具webpack的安装与使用中的包管理工具模块。
3. 使用mock来模拟数据(sublime作为开发环境)
(1)在项目文件夹下新建一个util作为工具文件夹，然后在其下新建一个文件mock.js
(2)在mock.js中写入如下代码
const Mock = require('mockjs')
// 使用mockjs模拟数据
let dataList = Mock.mock({
// 属性 list 的值是一个数组，其中含有 1 到 10 个元素
'list|1-10': [{
// 属性 id 是一个自增数，起始值为 1，每次增 1
'id|+1': 1,
'name': '@FIRST',
'creatTime': Random.datetime()
}]
})
//根据数据模板生成模拟数据
Mock.mock('/api/getprodlist', 'get', (req, res) => {
return {
status: 0,
data: dataList,
message: '成功'
}
})
备注：import 和 export 是ES6的模块化的知识。
(3)使用webpack对mock.js进行打包(打包后的名称自定义为mockBuild.js)
资源打包方法参考资源打包工具webpack的安装与使用，该文章也说明了问什么不能直接进行调用而要先打包。
(4)调用mockBuild.js获取mock模拟数据
- 导入util文件夹下的mock.js
- 利用vue-resource来读取这个接口
main.html完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<!-- 按序导入vue.js和vue-resource.js -->
<script type="text/javascript" src="../../first/vue1026.js"></script>
<script type="text/javascript" src="../vue-resource151.js"></script>
<script type="text/javascript" src="../../util/mockBuild.js"></script>
</head>
<body>
<div id="app">
<button @click="getData">get请求</button>
{{list | json}}
</div>
</body>
<script>
var vue = new Vue({
el:"#app",
data:{
list:null
},
methods:{
getData:function(){
var url = "/api/getprodlist";
this.$http.get(url)
.then(function(response){
console.log(response.body);
this.list = response.body.data.list;
})
}
}
});
</script>
</html>
(5)打开控制台的console查看获取的数据
控制台完整数据.png
获取的数据list.png
网友评论