Download and install iview,
Into the root directory, use the command line to start
npm install npm run build npm run dev
Installation mock.js and axios
npm install mock.js -save npm install axios --save
Configuring mock and axios
1. mock.js introduced in the main.js
2. axios introduced in the main.js
Project Directory
api.js file code
import axios from 'axios'
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
// 请求拦截器
axios.interceptors.request.use(function(config) {
return config;
}, function(error) {
return Promise.reject(error);
})
// 响应拦截器
axios.interceptors.response.use(function(response) {
return response;
}, function(error) {
return Promise.reject(error);
})
// 封装axios的post请求
export function fetch(url, params) {
return new Promise((resolve, reject) => {
axios.post(url, params)
.then(response => {
resolve(response.data);
})
.catch((error) => {
reject(error);
})
})
}
export default {
mockdata(url, params) {
return fetch(url, params);
}
}
mock.js
import Mock from 'mockjs' // introduced mockjs
const = Mock.Random // Mock.Random the Random is a utility class used to generate a variety of random data
let data = [] // array for receiving data generation
let size = [
'300x250', '250x250', '240x400', 'the 336x280',
'180x150', '720x300', '468x60', '234x60',
'88x31', '120x90', '120x60', '120x240',
' 125x125 ',' 728x90 ',' a 160x600 ',' 120x600 ',
' 300x600 '
] // random value defined
for (let i = 0; i <10; i ++) {// customizable number generated
let = {Template
'the float': Random.float (0, 100 0,. 5), // generated floating point number between 0 and 100,After the decimal point mantissa is 0-5
'Date': Random.date (), // generates a random date, date format parameter definitions may be added
'Image': Random.image (Random.size, '# 02adea', 'Hello'), // Random.size optionally represents a data size from the data
'Color': Random.color (), // generated a random color value of
'Paragraph': Random.paragraph (2, 5), // 2-5 generates text sentence
'name': Random.name (), // generated name
'Url': Random.url () // generates a web address
'address': Random.province () // address generating
}
data.push (template)
}
Mock.mock ( '/ data / index', 'POST', data) // template generation according to the data analog data
App.vue
<template>
<Table :columns="columns1" :data="dataShow">
<tr>
<td></td>
</tr>
</Table>
</template>
<script>
import api from "./axios/api.js";
export default {
name: "app",
data() {
return {
columns1: [
{
title: "姓名",
key: "Float"
},
{
title: "年龄",
key: "Float"
},
{
title: "地址",
key: "Float"
}
],
dataShow: []
};
},
created() {
this.getdata();
},
methods: {
getdata() {
api.mockdata("/data/index").then(res => {
console.log(res);
this.dataShow = res;
});
}
}
};
</script>
page
Https://www.jianshu.com/p/3074a50d099a to thank my reference