在Vue项目中使用mock.js
- 开发工具选择：Vscode
1. 使用命令行创建vue项目（手动选择Babel，Router，Vuex）
2. 导入element-ui（为了显示效果好一点），命令行输入
|
1
|
npm i element-ui -S |
3.在main。js中进行引用
|
1
2
3
4
|
import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css';//样式文件一定要引入Vue.use(ElementUI) |
4.新建src/views/main/List.vue使用elememnt-ui中的自定义列模板
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
<template><div> <el-table :data="tableData" style="width: 100%"> <el-table-column label="日期" width="180"> <template slot-scope="scope"> <i class="el-icon-time"></i> <span style="margin-left: 10px">{{ scope.row.date }}</span> </template> </el-table-column> <el-table-column label="姓名" width="180"> <template slot-scope="scope"> <el-popover trigger="hover" placement="top"> <p>姓名: {{ scope.row.name }}</p> <p>住址: {{ scope.row.address }}</p> <div slot="reference" class="name-wrapper"> <el-tag size="medium">{{ scope.row.name }}</el-tag> </div> </el-popover> </template> </el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> </template> </el-table-column> </el-table></div></template><script> export default { data() { return { tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }] } }, methods: { handleEdit(index, row) { console.log(index, row); }, handleDelete(index, row) { console.log(index, row); } } }</script> |
5.router/index.js配置如下
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
import Vue from 'vue'import VueRouter from 'vue-router'//导入组件import List from '../views/main/List.vue'Vue.use(VueRouter)const routes = [ { path: '/', name: 'List', component: List },]const router = new VueRouter({ routes})export default router |
现在的网页显示效果如下
5. 安装mockjs 和axios
|
1
2
|
npm install --save-dev mockjsnpm install --save axios |
6.新建api/getData.js和request.js
request.js
|
1
2
3
4
5
|
import axios from 'axios'const service = axios.create({ baseURL : "http://localhost:8080",})export default service |
getData.js
|
1
2
3
|
import axios from '../request'//数据列表接口export const getList = () => axios.get("/list") |
7.在src下新建mock/mockServer.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
import Mock from 'mockjs'//import data from './data.json'Mock.mock('http://localhost:8080/list', { code: 0, data: { 'data|1000': [ { id: '@id',//随机id name: '@name',//随机名称 nickName: '@last',//随机昵称 phone: /^1[34578]d{9}$/,//随机电话号码 'age|11-99': 1,//年龄 address: '@county(true)',//随机地址 email: '@email',//随机邮箱 isMale: '@boolean',//随机性别 createTime: '@datetime',//创建时间 avatar() { //用户头像 return Mock.Random.image('100×100', Mock.Random.color(), '#757575', 'png', this.nickName) } } ] }}) |
8.在main.js中导入mockServer
|
1
|
import './mock/mockServer' |
9.修改src/views/main/List.vue（数据获取与绑定，设置表格居中）
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
<template> <div> <el-table :data="tableData" style="width: 600px;margin: 0 auto"> <el-table-column label="随机ID" width="200"> <template slot-scope="scope"> <i class="el-icon-time"></i> <span style="margin-left: 10px">{{ scope.row.id }}</span> </template> </el-table-column> <el-table-column label="姓名" width="180"> <template slot-scope="scope"> <el-popover trigger="hover" placement="top"> <p>姓名: {{ scope.row.name }}</p> <p>住址: {{ scope.row.address }}</p> <div slot="reference" class="name-wrapper"> <el-tag size="medium">{{ scope.row.name }}</el-tag> </div> <p>邮箱: {{ scope.row.email }}</p> <p>性别: {{ scope.row.isMale }}</p> <p>昵称: {{ scope.row.nickName }}</p> <p>手机号: {{ scope.row.phone }}</p> <p>头像：</p> </el-popover> </template> </el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" >编辑</el-button > <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)" >删除</el-button > </template> </el-table-column> </el-table> </div></template><script>import { getList } from "../../api/getData";export default { data() { return { tableData: [ // { // date: "2016-05-02", // name: "王小虎", // address: "上海市普陀区金沙江路 1518 弄", // }, // { // date: "2016-05-04", // name: "王小虎", // address: "上海市普陀区金沙江路 1517 弄", // }, // { // date: "2016-05-01", // name: "王小虎", // address: "上海市普陀区金沙江路 1519 弄", // }, // { // date: "2016-05-03", // name: "王小虎", // address: "上海市普陀区金沙江路 1516 弄", // }, ], }; }, methods: { handleEdit(index, row) { console.log(index, row); }, handleDelete(index, row) { console.log(index, row); }, async getMockList() { try { const result = await getList(); //console.log(result); if (result.data.code == 0) { this.tableData = result.data.data.data; } //console.log(result.data.data.data); } catch (error) { console.log(error); } }, }, mounted() { this.getMockList(); },};</script> |
10.再次运行
鼠标放在姓名上，会有更多信息显示
显示测试的数据1000条
分页就懒得做了。。。。
总结
到此这篇关于Vue项目中使用mock.js的文章就介绍到这了,更多相关项目使用mock.js内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家！
原文链接：https://blog.csdn.net/cmj1664975126/article/details/112313887
