前端模拟假数据

最新推荐文章于 2024-07-14 08:45:01 发布
最新推荐文章于 2024-07-14 08:45:01 发布
阅读量5.2k 收藏 25
点赞数 2
分类专栏： uniapp web前端 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45768050/article/details/116704417
版权

1.新建一个goods.js（放数据），代码如下

const goods = [{
	"id": "1",
	"goodImg": "https://www.mescroll.com/demo/res/img/pd1.jpg",
	"goodName": "【1】  六罐装荷兰美素佳儿金装2段900g",
	"goodPrice": 1149.00,
	"goodSold": 648
}, {
	"id": "2",
	"goodImg": "https://www.mescroll.com/demo/res/img/pd2.jpg",
	"goodName": "【2】  韩国Amore爱茉莉红吕洗发水套装修复受损发质",
	"goodPrice": 89.00,
	"goodSold": 128
}, {
	"id": "3",
	"goodImg": "https://www.mescroll.com/demo/res/img/pd3.jpg",
	"goodName": "【3】  Friso美素佳儿 金装婴儿配方奶粉3段900g",
	"goodPrice": 195.00,
	"goodSold": 968
}, {
	"id": "4",
	"goodImg": "https://www.mescroll.com/demo/res/img/pd4.jpg",
	"goodName": "【4】  Fisher goodPrice费雪 费雪三轮儿童滑行车",
	"goodPrice": 299.00,
	"goodSold": 85
}, {
	"id": "5",
	"goodImg": "https://www.mescroll.com/demo/res/img/pd5.jpg",
	"goodName": "【5】  Babylee巴布力 实木婴儿床 雷卡拉130*70cm",
	"goodPrice": 1889.00,
	"goodSold": 18
}, {
	"id": "6",
	"goodImg": "https://www.mescroll.com/demo/res/img/pd6.jpg",
	"goodName": "【6】  Pigeon贝亲 独立三层奶粉盒 送小罐奶粉1段200g",
	"goodPrice": 70.00,
	"goodSold": 658
}, {
	"id": "7",
	"goodImg": "https://www.mescroll.com/demo/res/img/pd7.jpg",
	"goodName": "【7】 TTBOO兔兔小布 肩纽扣套装",
	"goodPrice": 268.00,
	"goodSold": 128
}, {
	"id": "8",
	"goodImg": "https://www.mescroll.com/demo/res/img/pd8.jpg",
	"goodName": "【8】  Nuna璐拉 婴儿布里奇果精纯嫩肤沐浴露婴儿精纯芦荟胶",
	"goodPrice": 140.00,
	"goodSold": 366
}, {
	"id": "9",
	"goodImg": "https://www.mescroll.com/demo/res/img/pd9.jpg",
	"goodName": "【9】  illuma启赋 奶粉3段900g",
	"goodPrice": 252.00,
	"goodSold": 98
}, {
	"id": "10",
	"goodImg": "https://www.mescroll.com/demo/res/img/pd10.jpg",
	"goodName": "【10】  Abbott雅培乳蛋白部分水解婴儿配方奶粉3段820g",
	"goodPrice": 89.00,
	"goodSold": 128
}, {
	"id": "11",
	"goodImg": "https://www.mescroll.com/demo/res/img/pd11.jpg",
	"goodName": "【11】  韩蜜 酷炫唇蜜（礼盒套装）2.8g*4",
	"goodPrice": 179.00,
	"goodSold": 35
}, {
	"id": "12",
	"goodImg": "https://www.mescroll.com/demo/res/img/pd12.jpg",
	"goodName": "【12】  保税区直发【3包装】日本Merries花王纸尿裤NB90",
	"goodPrice": 289.00,
	"goodSold": 1928
}, {
	"id": "13",
	"goodImg": "https://www.mescroll.com/demo/res/img/pd13.jpg",
	"goodName": "【13】  Comotomo可么多么 硅胶奶瓶（0-3月奶嘴）150ml绿色",
	"goodPrice": 203.00,
	"goodSold": 87
}, {
	"id": "14",
	"goodImg": "https://www.mescroll.com/demo/res/img/pd14.jpg",
	"goodName": "【14】  香港直邮德国瑞德露Rival de Loop芦荟精华安瓶",
	"goodPrice": 152.00,
	"goodSold": 61
}, {
	"id": "15",
	"goodImg": "https://www.mescroll.com/demo/res/img/pd15.jpg",
	"goodName": "【15】  保税区直发药师堂尊马油香草味温和保湿无刺激面霜",
	"goodPrice": 269.00,
	"goodSold": 73
}, {
	"id": "16",
	"goodImg": "https://www.mescroll.com/demo/res/img/pd16.jpg",
	"goodName": "【16】  香港直邮日本Spatreatment眼膜保湿去细纹法令纹",
	"goodPrice": 219.00,
	"goodSold": 13
}, {
	"id": "17",
	"goodImg": "https://www.mescroll.com/demo/res/img/pd17.jpg",
	"goodName": "【17】  韩国MEDIHEALNMF可莱丝针剂睡眠面膜",
	"goodPrice": 81.00,
	"goodSold": 128
}, {
	"id": "18",
	"goodImg": "https://www.mescroll.com/demo/res/img/pd18.jpg",
	"goodName": "【18】  DHC蝶翠诗橄榄蜂蜜滋养洗脸手工皂90g",
	"goodPrice": 123.00,
	"goodSold": 77
}, {
	"id": "19",
	"goodImg": "https://www.mescroll.com/demo/res/img/pd19.jpg",
	"goodName": "【19】  日本资生堂CPB肌肤之钥新版隔离霜 清爽型 30ml",
	"goodPrice": 429.00,
	"goodSold": 36
}, {
	"id": "20",
	"goodImg": "https://www.mescroll.com/demo/res/img/pd20.jpg",
	"goodName": "【20】 Heinz亨氏 婴儿面条优加面条全素套餐组合3口味3盒",
	"goodPrice": 39.00,
	"goodSold": 61
}, {
	"id": "21",
	"goodImg": "https://www.mescroll.com/demo/res/img/pd21.jpg",
	"goodName": "【21】  Heinz亨氏 乐维滋果汁泥组合5口味15袋",
	"goodPrice": 69.00,
	"goodSold": 55
}, {
	"id": "22",
	"goodImg": "https://www.mescroll.com/demo/res/img/pd22.jpg",
	"goodName": "【22】  保税区直发澳大利亚Swisse高浓度蔓越莓胶囊30粒",
	"goodPrice": 271.00,
	"goodSold": 19
}, {
	"id": "23",
	"goodImg": "https://www.mescroll.com/demo/res/img/pd23.jpg",
	"goodName": "【23】  挪威Nordic Naturals小鱼婴幼儿鱼油DHA滴剂",
	"goodPrice": 102.00,
	"goodSold": 125
}, {
	"id": "24",
	"goodImg": "https://www.mescroll.com/demo/res/img/pd24.jpg",
	"goodName": "【24】  澳大利亚Bio island DHA for Pregnancy海藻油DHA",
	"goodPrice": 289.00,
	"goodSold": 28
}, {
	"id": "25",
	"goodImg": "https://www.mescroll.com/demo/res/img/pd25.jpg",
	"goodName": "【25】  澳大利亚Fatblaster Coconut Detox椰子水",
	"goodPrice": 152.00,
	"goodSold": 17
}, {
	"id": "26",
	"goodImg": "https://www.mescroll.com/demo/res/img/pd26.jpg",
	"goodName": "【26】  Suitsky舒比奇 高护极薄舒爽纸尿片尿不湿XL60",
	"goodPrice": 99.00,
	"goodSold": 181
}, {
	"id": "27",
	"goodImg": "https://www.mescroll.com/demo/res/img/pd27.jpg",
	"goodName": "【27】  英国JUST SOAP手工皂 玫瑰天竺葵蛋糕皂",
	"goodPrice": 72.00,
	"goodSold": 66
}, {
	"id": "28",
	"goodImg": "https://www.mescroll.com/demo/res/img/pd28.jpg",
	"goodName": "【28】  德国NUK 多色婴幼儿带盖学饮杯",
	"goodPrice": 92.00,
	"goodSold": 138
}]

export default goods;

2.新建一个mock.js文件（代码如下）

// 模拟请求接口假数据
import goods from './goods.js'

// 商品列表 (搜索)
function apiGoods({page,limit,keyword}){
	return new Promise((resolute, reject)=>{
			let data = {
					list:[],//数据列表
					totalCount:0,//总数量
					totalPage:0,//总页数
					hasNext:false
				}
				
				// 符合关键字的记录
				let keywordList = []
				if (!keyword || keyword == "全部") {
					// 搜索全部数据
					keywordList = goods
				} else {
					// 关键字搜索
					if (keyword == "母婴") keyword="婴" //为这个关键词展示多条数据
					for(let i = 0; i < goods.length; i++) {
						let good = goods[i]
						if (good.goodName.indexOf(keyword) !== -1) {
							keywordList.push(good)
						}
					}
				}
				
				// 分页
				for (let i = (page - 1) * limit;i < page * limit; i++) {
					if (i > keywordList.length) break
					data.list.push(keywordList[i])
				}
				
				// 汇总数据
				data.totalCount = keywordList.length //总数量
				// 总页数 = 总数量 / 每月条数
				data.totalPage = Math.ceil(data.totalCount/page) //总页数
				// 判断是否有下一页 
				data.hasNext = page < data.totalPage
				
				// 模拟接口请求成功
				resolute(data)
			}).catch(err=>{
				// 模拟接口请求成功
				reject(err)
			})
		
}
export default {
	apiGoods
}

3.在main.js中引入mock.js文件

import api from 'mock/mock.js'
Vue.prototype.$api = api

4.使用

// 获取模拟的假数据
getData(){
	let data = {
		page:1,
		limit:10
	}
	this.$api.apiGoods(data).then(res=>{
		console.log(res)
	})
}

结果如下
在这里插入图片描述

smounse
关注
专栏目录
前端使用mockjs模拟接口数据
winne雪
06-23 3306
在前后端分离开发中，有时候后台开发比较慢还没有给回接口给前端，那么这时我们可以自己模拟数据（也就是mock数据）。 当然可能你会想到我新建个js文件，把数据模拟好导出再引入请求就可以啦。这个方法虽然可以，但是接口多的时候，需要模拟的数据多的时候就很不方便了，要来回修改差异，效率很低。 现在学会使用mock.js拦截ajax请求，更加方便简洁的构造你需要的假数据。 这里提醒一下，mockjs模拟的接口地址最好不要和后端给你的一致，不然到时候你忘记把mockjs去掉的时候，请求得到的还是拦截的假数据（或者可能会
怎么提供假数据？
learning__java的博客
09-02 2924
这里是修真院后端小课堂，每篇分享文从 【怎么提供假数据？】 大家好，我是IT修真院深圳分院第十期学员，一枚正直纯洁善良的JAVA程序员。 今天给大家分享一下，修真院官网JAVA任务十——怎么提供假数据？ 1.背景介绍 在一个新项目的开发中，允许的开发时间都比较短，需要前后端同时进行开发。后端开发不依赖前端，技术水平决定开发用时。但前端不同，静态页面可以独立开发，但动态页面的开发依赖于后端提供的数据...
【Java】制造假数据（网页爬取）
最新发布
qq_39921135的博客
07-14 1086
例如，如果我要随机点名，那么同学的姓名需要在记事本中提前准备好。如果这些名字让你随便写，肯定很多同学都写不出什么花样。例如：张三、李四、王五、赵六、孙七、周八…这些就是假数据，是我们胡编乱造的虚假数据，虽然这些数据是胡编乱造的，但是在开发中，这些数据尽可能要与实际的情况相吻合。制造假数据的方式有很多，先来介绍第一种：网络爬取。当数据爬取完毕后，将姓氏和名字拼起来，出来的就是我们现在想要的数据。
前端mock假数据
m0_56072671的博客
10-12 604
json-server模块mock假数据；
前端学习（2972）：使用mock假数据
歌谣的博客
05-20 328
前端假数据的获取以及配置路由
weixin_44498188的博客
09-26 488
前端假数据的获取以及配置路由
前端DTO&构造假数据(目的是前端代码可以先写)
qq1099866969的专栏
08-10 1417
/** * 转换前台所需dto。 * @param list * @return MainDTO(前台所需dto) */ private List convertDTO(List list){ if(list != null){ List mainList = new ArrayList(); for(HomeworkStatOfClassDTO dto : li
前端mock模拟假数据
07-28
前端mock模拟假数据可以通过多种方式实现。以下是一些常用的方法： 1. 手动编写假数据：可以在前端代码中直接定义一个对象或数组，手动填充假数据。这种方法适用于简单的数据结构或测试目的。 2. 使用Mock.js库：...
mock.js实现模拟生成假数据功能示例
10-17
Mock.js是一个模拟数据生成器，能够帮助开发者在前端开发过程中生成模拟数据，模拟后端接口返回的数据，从而实现前后端分离的开发模式，进行前端界面的开发和测试。Mock.js的模拟数据生成功能包括了数据模板定义、...
vue实现假数据的传递
04-11
3. **模拟API**：使用工具如JSON Server或Mock.js可以创建模拟的RESTful API，返回预定义的假数据。这对于模拟后端服务非常有用。 4. **Vuex状态管理**：在大型应用中，可以使用Vuex来集中管理应用的状态，包括假...
前端模拟接口工具推荐——Apifox（mock数据）【图解教程】
m0_67403272的博客
03-09 8724
1. 下载安装Apifox https://www.apifox.cn/# 2. 登录Apifox 可以直接微信扫码登录（新用户扫码后，选择生成新账户） 3. 新建团队 4. 新建项目 新建好后，点击项目名称进入项目。 5. 新建分组 鼠标移动到左侧项目概览上时，会出现新建分组按钮，点击它！ 6. 新建接口 鼠标移动到左侧新建的分组上时，会出现新建接口按钮，点击它！ 右上角下拉选择“mock服务”后，输入接口地址，接口名称，保存 切换到【高级mock】选项卡，点击“新建期.
不改任何代码获取假数据，前端开发自给自足
weixin_33802505的博客
05-10 1023
2019独角兽企业重金招聘Python工程师标准>>> ...
《前端》制造假数据引入json
BelleDiao的博客
01-03 1752
制造假数据引入json https://blog.csdn.net/weixin_42118466/article/details/89533922 1、在项目开发的过程中，如果后台接口还未开发完成，这个时候所以我们可以自建一个假数据文件(如data.json)到项目文件夹中，这样我们就可以模仿后台的数据进行开发。但是，如何在一个vue.js 项目中引入本地的json文件呢，下面就将步...
mock.js 生成假数据 前端独立于后台开发
夜
06-12 6364
mock.js的作用是产生假数据，使得前端的开发独立于后台开发，而后台发开者$(document).ready(function() { var template = { 'results|1-4':[{ 'num':'@integer(0,4)', 'sent':'@sentence' }] } Mock.mock("mock/getmockdata", templat
前端不改后台接口地址，也能获取假数据
ChauncyWu的博客
05-12 1859
原文来自：https://my.oschina.net/kalnkaya/blog/3047959， 感谢！ 大家都知道前端要想自己造假数据，可以使用mock.js。 如果你不想把假数据写在代码中，可以借助easymock。 但是即便你使用了easymock，依然需要修改代码中的后台接口基地址，使其暂时指向easymock的地址，这种方法存在如下弊端： 你不得不修改你的baseUrl以便暂时...
（假API）后台API没有设计好之前，前端开发用假API不失进度进行数据层开发
guoyu37974372的博客
07-10 1239
'use strict'; //引入http模块 const http = require('http'); const login = require('./login'); const productList = require('./productList'); const server = http.createServer((request,response)=>{ //G
使用mock造前端假数据
liu3325262991的博客
06-26 894
的GET请求，返回一个包含5个对象的数组，每个对象包含id、name、age和gender属性，其中id自增，name是随机的中文名字，age是18到60之间的随机数，gender是男或女。需要注意的是，使用mockjs只能模拟前端的请求，对于后端接口的请求无法拦截并返回模拟数据。如果需要模拟后端接口的数据，可以使用其他工具，如Postman、Swagger等。其实在实际开发的过程中我们是使用后端写好的接口的，但是在一些没有数据的情况下我们可以自己造！文件中，可以使用mockjs提供的语法来编写模拟数据。
前端如何结合mock模拟假数据
爱吃Java的羊的博客
11-11 167
由于某人不想写后端接口，不想用真数据对接vue-element-admin框架，用以前的接口，改token有点点麻烦，所以咱试试mock.js。
VUE中前端mock假数据的办法
qq_15270921的博客
05-04 3239
使用vue-cli脚手架工具之后生存的目录下找到config\index.js文件替换其中dev字段的代码：    dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/api': { target:...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值