1.安装
要与elementui一起使用
(1) npm install mockjs
(2)创建userMock.js文件并引用 mockjs
let Mock=require(‘mockjs’) ;
(3)在userMock.js中生成模拟数据 ,拦截axios请求
let Mock=require('mockjs')
//定义数组
var dataList = [];
//循环16次,产生16条数据放入数组
for(var i=0;i<16;i++){
dataList.push(Mock.mock({
'id': '@increment',
'name': '@cname',
'phone': /^1[0-9]{10}$/,
'email': '@email',
'address': '@county(true)',
'createTime': '@date("yyyy-MM-dd")'
}));
}
//拦截axios请求 this.$http.post('/user/list',para) para ={page:2}
Mock.mock(new RegExp('/user/list'), 'post', (opts) => {
//把产生的16数据 放入list对象里面
var list =dataList;
console.log(opts.body)
//取出传递过来的 当前页
var index = JSON.parse(opts.body).page; //3
//每页显示条数
var size = 10;
//取出总的条数
var total = list.length
//分页方法
list = pagination(index, size, list)
return {
'total': total, //总的条数
'data': list //分页之后的数组
}
})
//分页
function pagination(index, size, list){
return list.slice((index-1)*size,index*size); //slice((2-1)*10,2*10) slice(10,20)
}
(4)crud.vue – 掌握
//安装axios
npm install axios --save
在crud.vue中添加如下代码
return中的数据暂时是假数据,因为数据变动,会将更新后的数据替换原有的数据
export default {
data () {
return {
users:[],
total:50,
page:1
}
},
getUsers(){
//这个是对象 {key:value} 传递参数
let para = {
page:this.page
}
//加载数据
//发送ajax 从后台查询出来...没有写后台 --模拟后台数据 mockjs
this.$http.post('/user/list',para).then(res=>{
console.log(res.data);//返回数组 {'total': total, 'data': list}
this.users = res.data.data; //返回分页list
this.total = res.data.total;//返回总的条数
});
},
handleCurrentChange(val){
//currentPage 每次点击分页条执行的方法
console.log(val);
//把当前页 赋值给page这个字段
this.page = val;
this.getUsers();
}
mounted(){
//钩子函数,页面加载完后执行
this.getUsers();
}
在crud.vue中引用elementui组件
<div>
<!--工具条-->
<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
<el-form :inline="true">
<el-form-item>
<el-input placeholder="关键字"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary">查询</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary">新增</el-button>
</el-form-item>
</el-form>
</el-col>
<el-table
:data="users"
style="width: 100%"
border
height="450px"
>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
<el-table-column
prop="email"
label="邮件">
</el-table-column>
<el-table-column
prop="phone"
label="电话">
</el-table-column>
<el-table-column
prop="createTime"
label="创建时间"
width="180">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="100">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
<el-button type="text" size="small">编辑</el-button>
</template>
</el-table-column>
</el-table>
<el-col :span="24" class="toolbar">
<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total" style="float:right;">
</el-pagination>
</el-col>
</div>
(5)注意事项
在main.js中引入axios和usermock.js
//引入axios,相当于ajax
import axios from 'axios'
//引入mockjs
import UserMock from './userMock.js'
//配置axios的全局基本路径
axios.defaults.baseURL=''
//全局属性配置,在任意组件内可以使用this.$http获取axios对象
Vue.prototype.$http = axios