vue-使用mock来模拟数据

1. Mock介绍

Mock官网地址
Mock的github地址

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完整代码如下：

    
    
    
    
    
    


    

        get请求
        {{list | json}}
    

(5)打开控制台的console查看获取的数据

控制台完整数据.png

获取的数据list.png