第一步:安装:
在命令行中执行: npm install mockjs;
或直接<script src="http://mockjs.com/dist/mock.js"></script>
第二步:定义index.js文件
我们新建一个mock文件夹,此文件夹中建一个index.js文件:
mock/index.js: import Mock from 'mockjs' //引入mockjs,npm已安装 import { Random } from 'mockjs' // 引入random对象,随机生成数据的对象,(与占位符@一样) Mock.setup({ timeout:1000 //设置请求延时时间 }) const getdata = function(option){ //定义请求数据方法 let datalist = [] for (let i = 0; i < 20; i += 1) { const o = { //mockjs模拟随机生成数据,生成20条 recipeId: Random.guid(), billId: Random.string(10), orgId: Random.string('number', 8, 10), Date:Random.date('yyyy-MM-dd'), time:Random.time('A HH:mm:ss'), adress:Random.county(), viewName: Random.cword(4, 16), // 随机生成任意名称 personName: Random.cname(), reason: Random.csentence(10, 32), } datalist.push(o) } return{ data:datalist } } Mock.mock('/user', /post|get/i,getdata)
第三步:在main.js中引入index.js文件:
import './mock/index' // mock 方式,正式发布时,注释掉该处即可
第四步:请求数据:
<template> <div class="hello"> <p>HELLO WORLD</p> <ul> <li v-for="(item,index) in datalist" :key='index'> <h1>{{item.personName}}:<span>{{item.viewName}}</span></h1> </li> </ul> </div> </template> <!--mockjs应用页面--> <script> import axios from 'axios' //局部引入 export default { name: 'HelloWorld', data () { return { datalist:[] } }, mounted(){ this.showdata() }, methods:{ showdata(){ // import axios from 'axios' // Vue.prototype.$http = axios 在main.js中把axios添加到vue原型中,则可在每个组件中调用 this.$http.get('/user') //全局引入使用vue原型中的方法this.$http,已经把axios添加到原型中 .then((res)=>{ console.log(res.data.data) this.datalist = res.data.data }) .catch((err)=>{ console.log('调用失败',err) }) } } } </script>
一个简单的mockjs模拟数据请求就完成了