在Uni-App项目中使用Mock.js模拟数据

Mock.js简单介绍

Mock.js 是一款前端开发中拦截Ajax请求再生成随机数据响应的工具.可以用来模拟服务器响应. 优点是非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型。

Mock.js 官网地址：http://mockjs.com/

安装

安装axios和mockjs

npm install mockjs
npm install axios

使用方式

• 建立 mock 的文件目录 (/common/mock/)
  
• index.js

  //导入 mock 文件(可扩展多个文件)
  import './user.js'
  //import './vod.js'

• user.js

  const Mock = require('mockjs') 
  //获取用户列表
  Mock.mock(/\/api\/user\/list/, {
  	code: 200,
  	msg: 'ok',
  	data: [{
  		id: 1,
  		name: 'tkw'
  	}, {
  		id: 2,
  		name: '张三'
  	}]
  })

• 在main.js文件中引入mock

  // 引入mockjs 
  import './common/mock/index'

• index.vue调用

  <template>
  	<view class="content">
  		<image class="logo" src="/static/logo.png"></image>
  
  		<view class="text-area">
  			<text class="body">{{jsonResult}}</text>
  		</view> 
  
  	</view>
  </template>
  
  <script>
  	import axios from 'axios'
  	export default {
  		data() {
  			return {
  				title: 'Hello',
  				jsonResult: ''
  			}
  		},
  		onLoad() {
  			this.test();
  		},
  		methods: {
  			test() {
  				let self = this; 
  				
  				axios.get("http://localhost/api/user/list?id=1").then(function(result) {
  					self.jsonResult = JSON.stringify(result.data.data);
  					 
  				})
  				 
  			}
  		}
  	}
  </script>
  
  <style> 
  	.logo {
  		height: 100rpx;
  		width: 200rpx; 
  		margin-left: auto;
  		margin-right: auto;
  		margin-bottom: 50rpx;
  	}
    
  </style>

• 运行效果
  

使用 正则匹配 Url和参数

Mock.mock(/\/api\/user/), "get", getUser)
Mock.mock(RegExp('/api/user''), "post", postUser)
Mock.mock(RegExp('/api/user' + '.*'), "delete", deleteUser)