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

news2024/10/6 9:19:11

完整总结下在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

主要功能和特点

  1. 随机数据生成：Mock.js 可以根据预设的数据模板生成随机数据，包括数字、字符串、对象、数组等，帮助开发人员快速生成测试数据。

  2. 数据模板定义：Mock.js 允许你定义数据模板，通过简单的语法描述数据结构和数据关系，然后自动生成模拟数据。

  3. 请求拦截：Mock.js 可以拦截通过 XMLHttpRequest 或 Fetch 发起的请求，并根据预先设定的规则返回模拟数据，从而实现前端与后端接口的解耦，加快前端开发速度。

  4. 灵活的语法：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
  }
}
// #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

语法规范 | 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.

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1690717.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

基于Arduino的电梯超载报警系统

基于Arduino的电梯超载报警系统

企鹅&#xff1a;2583550535 项目和论文都有 第1章 绪论.............................................................................................................................. 1 1.1 项目背景及意义........................................................…
阅读更多...
【教学类-56-03】数感训练——数字03（寻找自己的学号数字，15-20个）

【教学类-56-03】数感训练——数字03（寻找自己的学号数字，15-20个）

背景需求&#xff1a; 在实际操作中&#xff0c;孩子们把数字当做了自己的学好&#xff0c;这个提示老师可以给每位孩子做一份“学号数感训练 【教学类-56-02】数感训练——数字02&#xff08;控制指定数字出现的数量&#xff09;-CSDN博客文章浏览阅读341次&#xff0c;点赞…
阅读更多...
TypeScript（持续更新中...）

TypeScript（持续更新中...）

1.TypeScript是什么&#xff1f; TypeScript是javaScript的超集。 2.使用TypeScript 1&#xff09;全局安装nodejs 2&#xff09;安装TypeScript编译器 npm i -g typescript 3.编译ts文件 //注意&#xff1a;需要在ts文件同级目录执行此命令&#xff0c;否则会报找不到…
阅读更多...
AI爆文写作：关注热点，提前埋伏好关键词，吃系统的热点推荐，吃搜索流量，让你的文章直接爆了！

AI爆文写作：关注热点，提前埋伏好关键词，吃系统的热点推荐，吃搜索流量，让你的文章直接爆了！

做内容&#xff0c;要对热点敏感。 小米汽车的发布会时间&#xff0c;我们是不是提前就知道&#xff0c;发布会前&#xff0c;大家最关注的就是价格。 你看这个相关关键词搜索&#xff0c;10W太多了。 我看到有博主在发布会前&#xff0c;埋伏了一篇&#xff0c;公众号也有推…
阅读更多...
FunSound: 基于FunASR-onnx 的高精度离线转写

FunSound: 基于FunASR-onnx 的高精度离线转写

​ 基于funasr的高精度离线语音转写网页 www.funsound.cn 精度和速度表现不错&#xff0c;提供给大家免费测试 ​
阅读更多...
UniApp 2.0可视化开发工具：引领前端开发新纪元

UniApp 2.0可视化开发工具：引领前端开发新纪元

一、引言 在移动互联网迅猛发展的今天&#xff0c;移动应用开发已经成为前端开发的重要方向之一。为了简化移动应用开发流程&#xff0c;提高开发效率&#xff0c;各大开发平台不断推出新的工具和框架。UniApp作为一款跨平台的移动应用开发框架&#xff0c;自诞生以来就备受开…
阅读更多...
如何通过软件SPI读写W25Q64

如何通过软件SPI读写W25Q64

STM32F1之SPI通信软件SPI代码编写-CSDN博客 目录 1. W25Qxx系列简介 2. W25Q64硬件电路 3. W25Q64框图 4. Flash操作注意事项 5. 代码编写 5.1 初始化 5.2 W25Q64读取ID号 5.3 W25Q64写使能 5.4 W25Q64等待忙 5.5 W25Q64页编程 5.6 W25Q64扇区擦除&#x…
阅读更多...
YOLOv5改进 | 主干网络 | 用EfficientNet卷积替换backbone【教程+代码 】

YOLOv5改进 | 主干网络 | 用EfficientNet卷积替换backbone【教程+代码 】

&#x1f4a1;&#x1f4a1;&#x1f4a1;本专栏所有程序均经过测试&#xff0c;可成功执行&#x1f4a1;&#x1f4a1;&#x1f4a1; 在YOLOv5的GFLOPs计算量中&#xff0c;卷积占了其中大多数的比列&#xff0c;为了减少计算量&#xff0c;研究人员提出了用EfficientNet代替b…
阅读更多...
PS —— 精修图像

PS —— 精修图像

PS —— 精修图像 修复污点修复画笔工具修复画笔工具 美白滤镜去杂锐化加杂减淡和锐化工具 我觉得今天这篇博客&#xff0c;无论是男同胞还是女同胞&#xff0c;都要熟练掌握&#xff08;哈哈哈哈…) 今天我们来学习如何精修图像&#xff0c;精修图像一般分为几步——修复&…
阅读更多...
32 位和 64 位 Linux 上 C 语言的整数大小的分析

32 位和 64 位 Linux 上 C 语言的整数大小的分析

在 Linux 系统上进行 C 语言编程时&#xff0c;理解整数大小在 32 位和 64 位系统上的区别是开发高效、可靠程序的基础。本文将深入探讨整数在这两种架构下的大小差异及其原因&#xff0c;并介绍其对程序的影响。 整数类型及其大小 C 语言中主要的整数类型包括 char、short、i…
阅读更多...
蓝牙模块技术在智慧养老领域的广泛运用

蓝牙模块技术在智慧养老领域的广泛运用

随着蓝牙模块通信技术的不断提升&#xff0c;蓝牙技术作为物联网无线通信技术之一&#xff0c;正在逐渐渗透到我们生活的各个领域。众所周知&#xff0c;我国人口老龄化日益严峻&#xff0c;传统的“养儿防老”已经满足不了当前的养老需求。养老不仅仅是一个家庭的问题&#xf…
阅读更多...
【Linux网络】端口及UDP

【Linux网络】端口及UDP

文章目录 1.再看四层2.端口号2.1引入linux端口号和进程pid的区别端口号是如何生成的传输层有了pid还设置端口号端口号划分 2.2问题2.3netstat 3.UDP协议3.0每学一个协议 都要讨论一下问题3.1UDP协议3.2谈udp/tcp实际上是在讨论什么&#xff1f; 1.再看四层 2.端口号 端口号(Po…
阅读更多...
安全风险 - 切换后台时背景模糊处理

安全风险 - 切换后台时背景模糊处理

因为安全风险中提到当app处于后台卡片状态时&#xff0c;显示的卡片页面应该为模糊效果&#xff0c;否则容易泄露用户隐私&#xff0c;尤其当前页涉及个人信息、资产信息等&#xff0c;都会造成信息泄露&#xff01;基于这种场景&#xff0c;我研究了下这种业务下的模糊效果 找…
阅读更多...
[JAVASE] 类和对象(三) - 继承

[JAVASE] 类和对象(三) - 继承

目录 一. 继承的定义 1.1 基本概念 1.2 基本实现 二. 父类 和 子类中的成员访问 2.0 super 与 this 关键字 2.1 访问成员变量 2.2 访问成员方法 三. 父类 和 子类中的构造方法 3.1 访问父类中的构造方法 3.2 注意事项 四. 权限修饰限定符 public: protected: default: …
阅读更多...
Spring系列-03-BeanFactory和Application接口和相关实现

Spring系列-03-BeanFactory和Application接口和相关实现

BeanFactory BeanFactory和它的子接口们 BeanFactory 接口的所有子接口, 如下图 BeanFactory(根容器)-掌握 BeanFactory是根容器 The root interface for accessing a Spring bean container. This is the basic client view of a bean container; further interfaces such …
阅读更多...
GD32F103RCT6/GD32F303RCT6-UCOSIII底层移植（4）消息队列实验

GD32F103RCT6/GD32F303RCT6-UCOSIII底层移植（4）消息队列实验

本文章基于兆易创新GD32 MCU所提供的2.2.4版本库函数开发 后续项目主要在下面该专栏中发布&#xff1a; 手把手教你嵌入式国产化_不及你的温柔的博客-CSDN博客 感兴趣的点个关注收藏一下吧! 电机驱动开发可以跳转&#xff1a; 手把手教你嵌入式国产化-实战项目-无刷电机驱动&am…
阅读更多...
【LeetCode算法】第58题：最后一个单词的长度

【LeetCode算法】第58题：最后一个单词的长度

目录 一、题目描述 二、初次解答 三、官方解法 四、总结 一、题目描述 二、初次解答 1. 思路&#xff1a;双指针法。low指向单词头&#xff0c;high指向单词后的空格&#xff0c;则high-low就是每个单词的长度。算法步骤&#xff1a;①low从头往后查找第一个非空格的字符&…
阅读更多...
分割文本文件

分割文本文件

分割一个.txt文件&#xff0c;可以选择在命令行中使用split指令&#xff0c;或者编写一段脚本进行操作。以下是一个简单的Python脚本来分割文本文件&#xff1a; def split_file(file, lines):# Open source filewith open(file, r) as source:count 0atEOF Falsewhile not …
阅读更多...
如果有多个文件夹，怎么快速获得文件夹的名字呢

如果有多个文件夹，怎么快速获得文件夹的名字呢

上一篇写到怎么批量建立文件夹&#xff0c;那么怎么获取批量文件夹的名字呢&#xff1f; 一、啊这&#xff0c;这真是一个好问题二、这个得用Python&#xff08;文本末尾有打包程序&#xff0c;点击链接运行就可以了&#xff09;&#xff08;1&#xff09;首先建立一个py文件&a…
阅读更多...
Python 将文件夹中的图片信息导入到 Excel 的表格

Python 将文件夹中的图片信息导入到 Excel 的表格

引言 在数据处理和管理的日常任务中&#xff0c;经常需要将文件夹中的图片文件信息&#xff08;如文件名、路径、创建日期、大小、分辨率等&#xff09;整理成一个 Excel 表格。这篇博客将介绍如何使用 Python 中的 wxPython 模块创建一个 GUI 应用&#xff0c;用户可以通过这…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023