基于vue-cli搭建的项目中使用mockjs

2017-11-14

cmd-markdown-logo
在使用vue开发的时候，一直疑惑怎么才能前后端数据分离，这样能增加工作效率，经过查找资料终于自己研究出来，在此做一个小小的总结。

搭建一个vue项目

全局安装 vue-cli

1
2
3

$ npm install vue-cli -g
搜索 vue.cmd 配置环境变量 path
vue --version 验证是否安装

创建一个基于 webpack 模板的新项目 vue init webpack 文件名

1	$ vue init webpack webpackName

安装依赖

1 2	$ cd webpackName $ npm install

正式安装mockjs

1	npm install mockjs --save-dev

启动项目

1	npm run dev

在src目录下创建一个mock.js跟main同级

1 2	import Vue from 'vue'; import Mock from 'mockjs';

export default Mock.mock('msg', {
  'name'    : '@name',
  'age|1-100': 100,
  'color'    : '@color'
});

然后再main.js引入

1	import './mock'

ajax请求mockjs数据

this.$http.get('msg').then(function(data){
    console.log(data)
},function(){
    console.log('数据请求错误')
})

由于mockjs是拦截ajax请求，所以只要请求名对应就可，无需填写请求地址，例如this.$http.get中的 msg

Response {url: “msg”, ok: true, status: 200, statusText: “OK”, headers: Headers, …}

基于jQuery的使用方法

引入script

1	<script src="../plugin/mockjs/dist/mock.js"></script>

mock数据

 Mock.mock('echart_data', {
        'name': 'name',
        'age|1-100': 100,
});

ajax请求mock数据

$.ajax({
       type: "post",
       url: 'echart_data',
       contentType: "application/x-www-form-urlencoded; charset=utf-8",
       cache: false,//禁止缓存
       success: function (data) {
           console.log(data)
       }
   })