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

主要功能和特点

  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.

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

个人感觉对Material设计有用的几个网址

个人感觉对Material设计有用的几个网址

(一) Modular and customizable Material Design UI components for Android GIthub: material-components-android (二) 学习Material设计 Material Design (三) 用于创建Material主题&#xff0c;支持导出多种格式 material-theme-builder
阅读更多...
谷歌蜘蛛池是什么？

谷歌蜘蛛池是什么？

或称为谷歌爬虫池&#xff0c;是一项专门针对谷歌搜索引擎优化&#xff08;SEO&#xff09;的先进技术&#xff0c;这种技术的主要目的是通过建立庞大的网站群体和复杂的链接结构来吸引和维持谷歌的爬虫程序的注意力&#xff0c;其核心是通过这种结构优化&#xff0c;增强特定网…
阅读更多...
ESP32 实现获取天气情况

ESP32 实现获取天气情况

按照小安派AiPi-Eyes天气站思路&#xff0c;在ESP32 S3上实现获取天气情况。 一、在ESP32 S3实现 1、main.c 建立2个TASK void app_main(void) {//lvgl初始化xTaskCreate(guiTask, "guiTask", 1024 * 6, NULL, 5, NULL);//wifi初始化、socket、json处理taskcustom_…
阅读更多...
Xcode代码格式化SwiftFormat安装使用，以及不生效问题

Xcode代码格式化SwiftFormat安装使用，以及不生效问题

官方仓库地址&#xff1a;GitHub - nicklockwood/SwiftFormat: A command-line tool and Xcode Extension for formatting Swift code 安装SwiftFormat 有两种安装方式&#xff0c;两种方式都可以&#xff0c;二选一即可&#xff1a; 第一种使用brew&#xff0c;如果已经使用…
阅读更多...
AWPortrait1.4更新，人物的生成更加趋近真实感，将SD1.5人像的真实感提升到了一个新的高度

AWPortrait1.4更新，人物的生成更加趋近真实感，将SD1.5人像的真实感提升到了一个新的高度

AWPortrait1.4更新&#xff0c;人物的生成更加趋近真实感&#xff0c;将SD1.5人像的真实感提升到了一个新的高度 经过5个月&#xff0c;AWPortrait终于迎来了1.4。 本次更新基于1.3训练&#xff0c;使得人物的生成更加趋近真实感&#xff0c;将SD1.5人像的真实感提升到了一个新…
阅读更多...
《二》MP3在线搜索所歌曲的实现

《二》MP3在线搜索所歌曲的实现

上一期我们大致实现了布局等操作 那么这一期我们来实现如何去搜索歌曲&#xff1a; 首先呢&#xff0c;我们是设计多媒体&#xff0c;要包含多媒体类头文件&#xff0c;还要能在线搜索&#xff0c;那就要包含网络上的头文件&#xff0c;还要实现打开文件操作&#xff0c;处理…
阅读更多...
618知识狂欢，挑本好书，点亮智慧生活！

618知识狂欢，挑本好书，点亮智慧生活！

618精选编程书单&#xff1a;提升你的代码力 一年一度的618又到啦&#xff01;今年的618就不要乱买啦&#xff0c;衣服买多了会被淘汰&#xff0c;电子产品买多了会过时&#xff0c;零食买多了会增肥&#xff0c;最后怎么看都不划算。可是如果你购买知识&#xff0c;坚持阅读&a…
阅读更多...
k8s节点亲和性配置

k8s节点亲和性配置

在Kubernetes中&#xff0c;你可以使用节点亲和性&#xff08;Node Affinity&#xff09;来控制Pod调度到特定的节点上。节点亲和性是通过Pod的spec.affinity.nodeAffinity属性来设置的。 以下是一个配置节点亲和性的YAML示例&#xff1a; apiVersion: v1 kind: Pod metadata…
阅读更多...
nss刷题（3）

nss刷题（3）

1、[SWPUCTF 2021 新生赛]include 根据提示传入一个file后显示了关于flag的代码 这是一个文件包含&#xff0c;考虑php伪协议&#xff0c;构造payload&#xff1a; ?filephp://filter/readconvert.base64-encode/resourceflag.php 2、[SWPUCTF 2021 新生赛]Do_you_know_http …
阅读更多...
HTML5 + CSS3模拟庆余年中“五竹”的镭射眼动画特效

HTML5 + CSS3模拟庆余年中“五竹”的镭射眼动画特效

庆余年2已经火热开播了&#xff0c;据说反响强烈啊&#xff0c;不知道这一部里面&#xff0c;五竹的镭射眼会不会表现出来&#xff0c;我还挺想看看他的镭射眼的&#xff0c;我看到底有没有杀死剧中的庆帝。 回想第一部&#xff0c;我都快记不清那是几年前开播的了&#xff0c;…
阅读更多...
【QT八股文】系列之篇章2 | QT的信号与槽机制及通讯流程

【QT八股文】系列之篇章2 | QT的信号与槽机制及通讯流程

【QT八股文】系列之篇章2 | QT的信号与槽机制及通讯流程 前言2. 信号与槽信号与槽机制介绍/本质/原理&#xff0c;什么是Qt信号与槽机制&#xff1f;如何在Qt中使用&#xff1f;信号与槽机制原理&#xff0c;解析流程Qt信号槽的调用流程信号与槽机制的优缺点信号与槽机制需要注…
阅读更多...
明天（周六）下午！武汉Linux爱好者线下沙龙，我们在华中科技大学等你！

明天（周六）下午！武汉Linux爱好者线下沙龙，我们在华中科技大学等你！

2024 年 5月 25 日&#xff08;周六&#xff09;下午&#xff0c;我们将在「武汉市洪山区」 珞喻路 1037 号华中科技大学南五楼 613 室举办武汉 Linux 爱好者线下沙龙&#xff08;WHLUG&#xff09;&#xff0c;欢迎广大 Linux 爱好者来到现场&#xff0c;与我们一同交流技术&a…
阅读更多...
【vue echart】完成一个简单echart图表+自适应

【vue echart】完成一个简单echart图表+自适应

实现效果&#xff1a; html&#xff1a; <divref"echartOne"id"echartOne"style"width: 100%; height: 100%" ></div> js: getEchartOne() {let chart this.$echarts.init(this.$refs.echartOne);chart.setOption({title: {text:…
阅读更多...
科技产业园3D探秘：未来科技之城的奇幻之旅

科技产业园3D探秘：未来科技之城的奇幻之旅

在数字时代的浪潮中&#xff0c;科技产业园区成为了推动城市经济发展、科技创新的重要引擎。 当我们打开科技产业园的3D可视化模型&#xff0c;仿佛穿越时空&#xff0c;来到了一个充满奇幻色彩的科技世界。在这里&#xff0c;高楼大厦鳞次栉比&#xff0c;绿色植被点缀其间&am…
阅读更多...
Python协程的作用

Python协程的作用

过分揣测别人的想法&#xff0c;就会失去自己的立场。大家好&#xff0c;当代软件开发领域中&#xff0c;异步编程已成为一种不可或缺的技术&#xff0c;用于处理大规模数据处理、高并发网络请求、实时通信等应用场景。而Python协程&#xff08;Coroutine&#xff09;作为一种高…
阅读更多...
数组-区间合并

数组-区间合并

一、题目描述 二、题目思路 这里提供满足基本要求的解题思路&#xff1a; 1.先对列表内按照start大小升序排序&#xff0c;这里创建Comparator接口的实现类&#xff0c;重写compare方法。 2.遍历intervals&#xff0c;设置laststart、lastend两个变量与当前区间相比较&#…
阅读更多...
JavaEE技术之分布式事务(理论、解决方案、Seata解决分布式事务问题、Seata之原理简介、断点查看数据库表数据变化)

JavaEE技术之分布式事务(理论、解决方案、Seata解决分布式事务问题、Seata之原理简介、断点查看数据库表数据变化)

文章目录 JavaEE技术之分布式事务准备:1. 本地事务回顾1.1 什么是事务1.2 事务的作用1.3 事务ACID四大特性1.4 事务的并发问题1.5 MySQL事务隔离级别1.6 事务相关命令(了解)1.7 事务传播行为&#xff08;propagation behavior&#xff09;1.8 伪代码练习1.9 回滚策略1.10 超时事…
阅读更多...
arcgisPro精确移动要素某一点至指定点位

arcgisPro精确移动要素某一点至指定点位

1、打开要素&#xff0c;如下&#xff1a; 2、选择移动工具&#xff0c;如下&#xff1a; 3、选择需要移动的要素&#xff0c;如下&#xff1a; 4、按住Ctrl键&#xff0c;移动锚点的位置至三角形顶点位置&#xff0c;如下&#xff1a; 5、拖动锚点至上面多边形的左上角点&…
阅读更多...
CS西电高悦计网课设——校园网设计

CS西电高悦计网课设——校园网设计

校园网设计 一&#xff0c;需求分析 所有主机可以访问外网 主机可以通过域名访问Web服务器 为网络配置静态或者动态路由 图书馆主机通过DHCP自动获取IP参数 为办公楼划分VLAN 为所有设备分配合适的IP地址和子网掩码&#xff0c;IP地址的第二个字节使用学号的后两位。 二…
阅读更多...
K8s资源限制和三种探针

K8s资源限制和三种探针

一 默写总结 1 pod 的组成 ① Pod 中有几种容器 init 初始化 &#xff0c;阻塞主容器运行&#xff0c;初始化后方可运行主容器 pause 基础容器&#xff1a; 提供network 的 namespace 和 共享存储 业务容器&#xff1a; 跑Pod 主应用 &#xff08;POD中跑什么&#xff1a;微…
阅读更多...
最新文章

Copyright @ 2022~2023