mock.js在vue中的使用(axios请求数据)

本文简单介绍了怎样使用mock模拟数据请求,直入主题:

第一步:安装:

在命令行中执行: 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模拟数据请求就完成了,详细的mockjs语法可以去官网中了解:mockjs语法

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值