elementui mock.js

1.Elementui

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,网站快速成型的工具 类似easyui layui

1.elementui使用

1)安装 : npm i element-ui -S
2)在main.js 引入:

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

3)组件
可以去elementui的官网拷贝代码测试

2.mockjs

为什么需要模拟数据?

​ 主要针对前端人员 , 前端没有后台的数据,需要模拟进行测试
使用mockjs:
(1)安装

​ npm install mockjs
(2)测试

​ 新创建一个js文件:

var data = Mock.mock({
  name: {
    first: '@FIRST',
    middle: '@FIRST',
    last: '@LAST',
    full: '@first @middle @last',
    email:'@email',
    ip:'@ip'
  }
})
// 输出结果
console.log(JSON.stringify(data, null, 4))

3)运行 node demo(你要测试的js的名字)

3.axiox请求

axios类似 ajax ,封装promise(异步请求)
安装:

​ npm install axios --save

4.mockjs流程

引入文件（在main.js中）

import axios from 'axios'
import userMock from '../userMock'
//配置axios的全局基本路径 t
axios.defaults.baseURL=''
//全局属性配置，在任意组件内可以使用this.$http获取axios对象
Vue.prototype.$http = axios

5.crud.vue

1.发送请求

getUsers(){
      let params = {
         page:this.page
      }
      //发送请求  controller {data:[],total:100}
      this.$http.post('/user/list',params).then(res=>{
         console.log("-------------------res.data {data: total}");
         console.log(res);
         this.users =  res.data.data;
         this.total = res.data.total;
      })
      }

2.被mock拦截

Mock.mock(new RegExp('/user/list'),'post',(opts) => {
  //赋值
  var list =dataList;
  console.log(opts.body) ;// "{page:2}"
  //json字符串转换成JSON对象
  var index = JSON.parse(opts.body).page; //2
  //每页条数
  var size = 10;
  //公共的条数
  var total = list.length
  //分页方法
  list = pagination(index, size, list);
  return {
    'total': total,
    'data': list
  }
})