1. 程式人生 > 實用技巧 >vue中mock資料

vue中mock資料

首先 npm install mockjs
npm install vue-axios --save
npm install qs.js --save

main.js
import Vue from 'vue'
import axios from 'axios'
Vue.prototype.$http = axios   //全域性註冊,使用方法為:this.$axios
Vue.prototype.qs = qs           //全域性註冊,使用方法為:this.q

index.vue
import Mock from "mockjs";
export default {
  data() {
    
return { listTemps:[], }; }, mounted() { // 獲取mock資料 var listTemps = JSON.stringify(this.mockInfo()); this.$http({ method: "get", url: "/listTemp", }).then((res) => { this.listTemps = JSON.parse(JSON.stringify(res.data)).data; console.log(this.listTemps); }); }, methods: {
// mock資料 mockInfo() { var that = this; var res = Mock.mock("/listTemp", { //按序生成一個list "data|5": [ { "Name|+1": [ "balala", "balala", "balala", ], //入口 "number|+1": ["4812", "8201", "3412
"], //車牌 "all|+1": ["16:20:15", "18:52:09", "08:44:21"], //時間 }, ], }); return res; }, }, }; </script>