uniapp中使用mockjs模拟接口测试总结(swiper轮播图示例）

完整总结下在uni-app中如何使用Mock.js模拟接口测试，这在后台接口未就绪的情况下非常有用。同时也给出个首页swiper轮播图的mock接口使用。网上的文章都不太完整，这里总结下完整的使用示例，同时也支持h5和小程序平台，分享给需要的小伙伴，喜欢的可以点击收藏。

前言

网上的大多数教程和使用都较麻烦，且有的不支持小程序平台，有的仅是针对H5或者后台的nodejs环境。这里完整总结下如何在uniapp中简单使用Mock.js模拟接口测试，同时支持小程序环境。使用很简单，没有网上介绍的那么复杂，同时也给出个首页swiper轮播图的mock接口使用举例。

对于前后端分离的项目，后端工程师的API数据迟迟没有上线；而前端工程师却没有JSON 数据进行数据填充，自己写后端模拟又太繁重；这个时候，Mock.js 就能解决这个问题，让前端工程师更加独立做自己。

Mock.js简介

Mock.js 是一个前端模拟数据生成工具，它可以帮助前端人员在开发过程中模拟后端接口的返回数据，以便在开发和测试阶段能够独立于后端进行工作，从而实现前后端的分离开发。

Mock.js官网 http://mockjs.com/
Mock.js的Github地址 https://github.com/nuysoft/Mock/wiki

主要功能和特点

随机数据生成：Mock.js 可以根据预设的数据模板生成随机数据，包括数字、字符串、对象、数组等，帮助开发人员快速生成测试数据。
数据模板定义：Mock.js 允许你定义数据模板，通过简单的语法描述数据结构和数据关系，然后自动生成模拟数据。
请求拦截：Mock.js 可以拦截通过 XMLHttpRequest 或 Fetch 发起的请求，并根据预先设定的规则返回模拟数据，从而实现前端与后端接口的解耦，加快前端开发速度。
灵活的语法：Mock.js 提供了丰富且灵活的数据模板语法，可以满足各种复杂数据生成的需求，包括嵌套数据、条件数据、循环数据等。

better-mock 介绍

better-mock fork 了 Mock.js (opens new window)，在代码实现、构建脚本、单元测试上都选择了更加现代化的技术方案进行重构，所以使用者无需更改代码，可以 100% 兼容Mock.js。

虽然 Mock.js 已经很长时间已经没有维护了，但是还是会一些使用者在提 issue，提 PR，所以 better-mock 的规划是：重构Mock.js，在不改变 Mock.js API 的基础上进行长期迭代，并且解决一些 Mock.js 的 issue 和 PR。

为了同时支持H5和小程序平台环境，推荐使用better-mock，这里也以better-mock的使用举例。

项目地址:https://gitcode.com/lavyun/better-mock

GitHub - lavyun/better-mock: Forked from Mockjs, Generate random data & Intercept ajax request. Support miniprogram.

如何使用

如果不使用vue，在网页界面中可以以下方式引入。

<script type="text/javascript" src="https://unpkg.com/better-mock/dist/mock.browser.js"></script>

可以在网页的控制台调试窗口测试和查看。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script src="http://mockjs.com/dist/mock.js"></script><script>const data = Mock.mock({'list|1-10': [{'id|+1': 1}]});console.log(data);console.log(JSON.stringify(data, null, 4));</script>
</body></html>

在uni-app中使用，方法很简单，不用网上说的npm方式安装了（那种更适合pc的web端项目），直接在工程目录下建个mock文件夹，把下载好的文件放进去就行了。

如下所示：

这两个文件可以在以下网址资源中下载：

https://unpkg.com/better-mock@0.3.7/dist/mock.browser.js
https://unpkg.com/better-mock@0.3.7/dist/mock.mp.js

使用举例：

// mock文件夹下的test.js内容
import './better-mock/mock.mp.js'export function mockTest(){console.log('mockTest')const data = Mock.mock('https://yyz.cn/api/v1/test',{// 属性 list 的值是一个数组，其中含有3个元素'list|3': [{'name|3': '钱学森','age|1-100': 1,'isGay|4-6': true,'people|+1': ['黄种人', '黑种人', '白种人'],'sayHi': /[a-z][A-Z][0-9]/}]});// 输出结果console.log(JSON.stringify(data, null, 4));//使用四个空格缩进
}

把需要mock的接口，都写在了一个叫做mockTest的函数里，并用export关键字导出。

在uni-app的main.js中，全局加载一下就完成了使用。

//main.js
import App from './App'
// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({...App
})
app.$mount()
// #endif// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {const app = createSSRApp(App)return {app}
}
// #endifimport { $http } from './utils/http.js'
uni.$http = $http
// 配置请求根路径
$http.baseUrl = 'https://yyz.cn'// 请求开始之前做一些事情
$http.beforeRequest = function (options) {uni.showLoading({title: '数据加载中...',})
}// 请求完成之后做一些事情
$http.afterRequest = function () {uni.hideLoading()
}//mock数据，用于测试接口,注意末尾空一行
import {mockTest} from './mock/test.js'
mockTest()

这样，配置的请求路径跟你mock的接口匹配上的话，就会自动被mock接口拦截并响应mock的数据。如果生产发布的话，改下baseUrl和去掉import的mockTest就好了。其他地方无任何侵入。

uni-app的轮播图示例

接下来实战一把，结合实例把mockjs用起来看看效果。

以uni-app的轮播图举例：

<template><view class="content"><view class="uni-margin-wrap"><swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval":duration="duration"  lazy-render><swiper-item v-for="item in swiperList" :key="item.id"><image :src="item.imageUrl" :alt="item.title" mode="widthFix" class="swiper-image"></image><view class="swiper-desc" v-if="item.description">{{ item.description }}</view></swiper-item></swiper></view><uni-card>这是一个uni-card.</uni-card><uni-badge text="1"></uni-badge><uni-badge text="3" type="primary" :inverted="true"></uni-badge><view class="uni-flex uni-row"><view class="flex-item uni-bg-red">A</view><view class="flex-item uni-bg-green">B</view><view class="flex-item uni-bg-blue">C</view></view></view>
</template><script>//import { getSwiperList } from '@/api/home.js';export default {data() {return {title: 'Hello',indicatorDots: true,autoplay: true,interval: 2000,duration: 500,// 轮播图的数据列表，默认为空数组//swiperList:[],swiperList: [{id: 1,imageUrl: '/static/swiper/1.jpg',title: '标题1',description: '描述1',},{id: 2,imageUrl: '/static/swiper/2.jpg',title: '标题2',description: '描述2',},{id: 3,imageUrl: '/static/swiper/3.jpg',title: '标题3',description: '描述3',}]}},onLoad() {console.log("onLoad")//console.log(this.swiperList)},methods: {},mounted() {console.log("mounted")console.log(this.swiperList)}}
</script><style scoped>.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}.uni-margin-wrap {width: 690rpx;width: 100%;}.swiper {height: 300rpx;}.swiper-image{width: 100%; height: auto;}.swiper-desc {position: absolute;bottom: 20px;left: 0;right: 0;color: #fff;background-color: rgba(0, 0, 0, 0.5);padding: 10px;text-align: center;}.swiper-item {display: block;height: 300rpx;line-height: 300rpx;text-align: center;}.title {font-size: 36rpx;color: #8f8f94;}
</style>

在上述示例中，仅仅是把图片数据信息硬编码到了 swiperList中，图片是放在了本地的static文件夹中。先测试下轮播图可以正常的加载。接来下实现getSwiperList接口。

在项目的根目录下新建api文件夹，用来存放前端需要用到的api接口实现。新建个home.js，放置首页需要用到的接口实现。


// api/home.js
export const getSwiperList = async () => {try {console.log('getSwiperList request');const response = await uni.$http.get('/api/v1/home/swiperdata');console.log(response.data.list);if (response.statusCode !== 200) {uni.showToast({title: '数据请求失败! ',duration: 1500,icon: 'none',});return [];}return response.data.list;} catch (error) {console.error('Network request failed:', error);uni.showToast({title: '网络请求失败! ',duration: 1500,icon: 'none',});return [];}
};

上述实现了一个获取轮播图的getSwiperList接口调用，但是后台的轮图接口还未就绪，如何模拟呢？接下来就该使用better-mock模拟接口了。

在mock文件夹里新建一个test.js文件，在里面写你要mock的接口。

如：我的test.js文件内容如下：

// mock文件夹下的test.js内容
import './better-mock/mock.mp.js'export function mockTest(){console.log('mockTest')const data = Mock.mock('https://yyz.cn/api/v1/test',{// 属性 list 的值是一个数组，其中含有3个元素'list|3': [{'name|3': '钱学森','age|1-100': 1,'isGay|4-6': true,'people|+1': ['黄种人', '黑种人', '白种人'],'sayHi': /[a-z][A-Z][0-9]/}]});// 输出结果console.log(JSON.stringify(data, null, 4));//使用四个空格缩进const data1 = Mock.mock('https://yyz.cn/api/v1/home/swiperdata',{// 属性 list 的值是一个数组，其中含有3个元素'list|3': [{'id|+1': 1,'imageUrl|+1': ['/static/swiper/1.jpg','/static/swiper/2.jpg', '/static/swiper/3.jpg'],'title|4-6': '标题','description|2-3':'这是描述'}]});// 输出结果console.log(JSON.stringify(data1, null, 4));//使用四个空格缩进
}

经过以上步骤，已经完成一个接口的模拟啦，可以在uni-app中完美运行。

最后附上完整工程项目源码，可以作为基础工程模版，封装了网络库：

https://download.csdn.net/download/qq8864/89351804