完整总结下在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
如何使用
如果不使用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
}
}
// #endif
import { $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
其他资源
更智能更便捷的模拟数据生成工具 - Better Mock-CSDN博客
玩转Mock.js：构建模拟数据的利器_mockjs-CSDN博客
uni-app开发教程之swiper组件使用教程_uniapp swiper-CSDN博客
https://www.cnblogs.com/winchance/p/13230063.html
4346
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
