写在前面的话:
自学Vue中,手写json数据,被同事看到,问我你怎么不用mock,忽然觉得自己太落后了
永远不能停止学习
啊啊啊
立马上手去学习mock,真的很方便
学习过程中还是遇到了很多问题,最终搞出来了,在此记录,防止自己忘记
——————————————————————————————————————————————————————————
一、安装mock
npm install mockjs --save-dev
二、实例(举个小栗子)
1、新建一个mock文件夹,里面创建index.js,table.js
扫描二维码关注公众号,回复:
6557254 查看本文章
目录如下:
2、在main.js中引入mock
import '@/mock/index.js';
3、在mock/index.js中写如下代码:
import mockjs from 'mockjs';
import TableApi from './table.js' //引入生成数据的js
const Mock = require('mockjs') // Mock函数
// 使用拦截规则拦截命中的请求
Mock.mock('api/getTableData','get',TableApi.getTableData);//此处url要与使用数据的组件中请求的url一致
export default mockjs
4、在mock/table.js中写入如下代码
import { Random } from 'mockjs'
const code = 200 // 状态码 项目同一
export default{
getTableData () {
let data = []
Array.apply(null, { length: 10 }).forEach(_ => {
data.push({
name: Random.cname(), // 随机汉语名
title: Random.csentence(8, 16), // 随机中文字符串
date: Random.date() // 随机日期
})
})
return {
code,
data
}
}
}
·
5、在需要引入数据的组件内写如下代码(此处html使用了element)
<template>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="title"
label="地址">
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: []
}
},
mounted(){
this.createTable();
},
created(){
//组件实例创建完成,此时dom还未生成
},
methods:{
createTable(){
let $this = this;
// getTableData(data)
this.$axios.get('api/getTableData') //此处地址为mock/index.js文件中.mock函数中的路径
.then(response => {
let $data = response.data.data;
$this.tableData = $data;
})
}
}
}
</script>
6、npm run dev运行,效果如下图