本文主要是介绍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
其他资源
介绍 | Better-Mock
语法规范 | Better-Mock
UNPKG - better-mock
uni-app引入Better-Mock - 简书
使用Mock.js快速模拟接口 - 简书
更智能更便捷的模拟数据生成工具 - Better Mock-CSDN博客
玩转Mock.js:构建模拟数据的利器_mockjs-CSDN博客
uni-app开发教程之swiper组件使用教程_uniapp swiper-CSDN博客
swiper | uni-app官网
https://www.cnblogs.com/winchance/p/13230063.html
GitHub - nuysoft/Mock: A simulation data generator
介绍 | Better-Mock
GitHub - lavyun/better-mock: Forked from Mockjs, Generate random data & Intercept ajax request. Support miniprogram.
这篇关于uniapp中使用mockjs模拟接口测试总结(swiper轮播图示例)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!