在Vue項(xiàng)目中使用mock.js
- 開(kāi)發(fā)工具選擇：Vscode
1. 使用命令行創(chuàng)建 vue 項(xiàng)目（手動(dòng)選擇 Babel，Router，Vuex）
2. 導(dǎo)入 element-ui（為了顯示效果好一點(diǎn)），命令行輸入
npm i element-ui -S3.在 main。js 中進(jìn)行引用
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';//樣式文件一定要引入
?
Vue.use(ElementUI)
4.新建 src/views/main/List.vue 使用 elememnt-ui 中的自定義列模板
<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: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1516 弄'
}]
}
},
methods: {
handleEdit(index, row) {
console.log(index, row);
},
handleDelete(index, row) {
console.log(index, row);
}
}
}
</script>5.router/index.js配置如下
import Vue from 'vue'
import VueRouter from 'vue-router'
//導(dǎo)入組件
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現(xiàn)在的網(wǎng)頁(yè)顯示效果如下
5. 安裝 mockjs 和 axios
npm install --save-dev mockjs
npm install --save axios
126.新建 api/getData.js 和 request.js
- request.js
import axios from 'axios'
const service = axios.create({
baseURL : "http://localhost:8080",
})
export default service
12345- getData.js
import axios from '../request'
//數(shù)據(jù)列表接口
export const getList = () => axios.get("/list")
1237.在src下新建 mock/mockServer.js
import Mock from 'mockjs'
//import data from './data.json'
?
Mock.mock('http://localhost:8080/list', {
code: 0, data:
{
'data|1000': [
{
id: '@id',//隨機(jī)id
name: '@name',//隨機(jī)名稱(chēng)
nickName: '@last',//隨機(jī)昵稱(chēng)
phone: /^1[34578]\d{9}$/,//隨機(jī)電話(huà)號(hào)碼
'age|11-99': 1,//年齡
address: '@county(true)',//隨機(jī)地址
email: '@email',//隨機(jī)郵箱
isMale: '@boolean',//隨機(jī)性別
createTime: '@datetime',//創(chuàng)建時(shí)間
avatar() {
//用戶(hù)頭像
return Mock.Random.image('100×100', Mock.Random.color(), '#757575', 'png', this.nickName)
}
}
]
}
?
})8.在 main.js 中導(dǎo)入 mockServer
import './mock/mockServer'9.修改 src/views/main/List.vue（數(shù)據(jù)獲取與綁定，設(shè)置表格居中）
<template>
<div>
<el-table :data="tableData" style="width: 600px;margin: 0 auto">
<el-table-column label="隨機(jī)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>昵稱(chēng): {{ scope.row.nickName }}</p>
<p>手機(jī)號(hào): {{ 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: "上海市普陀區(qū)金沙江路 1518 弄",
// },
// {
// date: "2016-05-04",
// name: "王小虎",
// address: "上海市普陀區(qū)金沙江路 1517 弄",
// },
// {
// date: "2016-05-01",
// name: "王小虎",
// address: "上海市普陀區(qū)金沙江路 1519 弄",
// },
// {
// date: "2016-05-03",
// name: "王小虎",
// address: "上海市普陀區(qū)金沙江路 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.再次運(yùn)行
- 鼠標(biāo)放在姓名上，會(huì)有更多信息顯示
- 顯示測(cè)試的數(shù)據(jù)1000條
