vue中使用mock.js
-
安装:
npm install mockjs -D (–save-dev)
使用
- 做一个分页表格
-
main.js
import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' Vue.config.productionTip = false if (process.env.NODE_ENV !== 'production') { require('@/mock'); } Vue.use(ElementUI); new Vue({ router, store, render: h => h(App) }).$mount('#app')
- src\mock\index.js
import Mock from "mockjs"; import userInfoApi from "./data/userInfo.js"; Mock.setup({ timeout:"200 - 2000" }) Mock.mock(RegExp('/api/test/tableData' + '.*'), 'get', userInfoApi.getUserInfoList); export default Mock;
- src\mock\data\userInfo.js
import Mock from 'mockjs'; const code = 200; const status = 'success'; const message = '操作成功'; const userInfoList = Mock.mock({ 'rows|50': [ { id: '@guid()', username: '@cname', departmentId: '@guid()', mobile: /^1[385][1-9]\d{8}/, 'departmentName|1': ['总裁办', '行政部', '人事部', '财务部', '技术部', '运营部'], 'workNumber|1001-1999': + 1, address: '@county(true)' } ], }) export default { getUserInfoList: parmas => { const pageSize = getQueryVariable(parmas.url,'pageSize'); const currentPage = getQueryVariable(parmas.url,'currentPage'); const userList = userInfoList.rows.filter( (item, index) => index < pageSize * currentPage && index >= pageSize * (currentPage - 1) ); return { code: code, message: message, success: status, data: { total: userInfoList.rows.length, userList: userList } }; } } function getQueryVariable(url,variable) { var query = url.substring(1); var vars = query.split("&"); for (var i = 0; i < vars.length; i++) { var pair = vars[i].split("="); if (pair[0] == variable) { return pair[1]; } } return (false); }
- src\utils\axios.js
import axios from 'axios'; const service = axios.create({ baseURL: process.env.BASE_API, // api的base_url timeout: 5000 // 请求超时时间 }); service.interceptors.request.use( config => { return config; }, err => { Promise.reject(err); } ); service.interceptors.response.use( response => { return response }, error => { console.log(error); return Promise.reject(error); } ); export default service;
- src\api\table.js
import axios from "@/utils/axios.js"; class TestService { getTableData(data){ return axios({ url: `/api/test/tableData`, method: "get", params: data }) } } export default new TestService();
- src\views\table-test.vue
<template> <div> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="username" label="姓名" width="180"> </el-table-column> <el-table-column prop="mobile" label="手机"> </el-table-column> <el-table-column prop="address" label="工号"> </el-table-column> <el-table-column prop="address" label="部门"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table> <el-pagination background :hide-on-single-page="false" layout="total, prev, pager, next" :total="pageInfo.total" :current-page.sync="pageInfo.currentPage" @current-change="handleCurrentChange" > </el-pagination> </div> </template> <script> import Service from "@/api/table.js"; export default { name: "TableTest", data() { return { tableData: [], pageInfo: { total: 0, pageSize: 10, currentPage: 1, pagerCount: 5, }, }; }, created() { this.getTableData(this.pageInfo); }, methods: { getTableData(pageInfo) { Service.getTableData(pageInfo).then((res) => { this.pageInfo.total = res.data.data.total; this.tableData = res.data.data.userList; }); }, handleCurrentChange() { this.getTableData(this.pageInfo); }, }, }; </script>