mock 模拟数据在框架中的简单使用
首先在框架中需要安装mock模块
cnpm i mockjs -S
其次在src文件夹下新建mock文件夹,在mock文件夹中新建一个index.js文件
代码如下:
const Mock = require('mockjs'); function getBannerFn () {
let arr = [];
for (var i = 0; i < 10; i++) {
arr.push({
id: 'banner' + i,
imgSrc: Mock.Random.image('100x100', Mock.mock('@color()')),
alt: '',
href: ''
})
}
return {
code: 200,
message: 'ok',
data: arr
}
} function getProlist () {
let arr = [] for(var i = 0; i < 50; i++){
arr.push({
id: 'pro' +i,
name: Mock.mock('@ctitle()'),
imgSrc: Mock.Random.image('100x100', Mock.mock('@color()')),
price: Math.random() * 450 + 50,
color: Mock.mock('@color()')
address: Mock.mock('@county(true)')
})
}
return arr
} Mock.mock('http://47.103.82.2:3000/getBanner', 'get' ,getBannerFn)
Mock.mock('http://47.103.82.2:3000/getList', 'get' ,getProlist)
在main.js中引入mock import './mock/index'
在需要请求的数据中直接使用
axios.get('http://47.103.82.2:3000/getBanner').then(res => {
console.log(res.data)
// 后续的业务逻辑
})
mock 模拟数据在框架中的简单使用的更多相关文章
- 深入浅出的webpack4构建工具---比mock模拟数据更简单的方式(二十一)
如果想要了解mock模拟数据的话,请看这篇文章(https://www.cnblogs.com/tugenhua0707/p/9813122.html) 在实际应用场景中,总感觉mock数据比较麻烦, ...
- vue-cli实现异步请求返回mock模拟数据
在前后端分离开发的过程中,前端开发过程中,页面的数据显示一般都是写死的静态数据,也就是没有经过接口,直接写死在代码中的,在后端给出接口后,再替换为接口数据,为了减少对接成本,mock就出现了.通过预先 ...
- Mock模拟数据,前后端分离
安装 使用npm安装: npm install mockjs; 或直接<script src="http://mockjs.com/dist/mock.js">< ...
- Spring Boot(九)Swagger2自动生成接口文档和Mock模拟数据
一.简介 在当下这个前后端分离的技术趋势下,前端工程师过度依赖后端工程师的接口和数据,给开发带来了两大问题: 问题一.后端接口查看难:要怎么调用?参数怎么传递?有几个参数?参数都代表什么含义? 问题二 ...
- vue+iview+mock模拟数据遍历
下载安装iview, 进入根目录,用命令行启动 npm install npm run build npm run dev 安装mock.js和axios npm install mock.js -s ...
- Fiddler使用 断点 模拟返回 AutoResponder Mock 模拟数据 相关学习记录
断点 测试中有时需要改变发出去的请求信息,需要用到打断点的方法.断点包含两种方式: before response:在request请求的时候,未到达服务器之前,一般用来修改请求参数 after re ...
- 【vue】vue +element 搭建项目,mock模拟数据(纯干货)
1.安装mockjs依赖 (c)npm install mockjs --save-dev 2.安装axios(Ajax) (c)npm install --save axios 3.项目目录 4.设 ...
- querylist 在laravel框架中的简单采集数据(专业5)
//爬虫网站路由Route::get('/querylist/list','querylistControllers@querylist'); //控制器 <?phpnamespace App\ ...
- Struts2(三)——数据在框架中的数据流转问题
一款软件,无在乎对数据的处理.而B/S软件,一般都是用户通过浏览器客户端输入数据,传递到服务器,服务器进行相关处理,然后返回到指定的页面,进行相关显示,完成相关功能.这篇博客重点简述一下Struts2 ...
随机推荐
- 大数据-hadoop-MapReduce计算流程
MapReduce计算流程 1 首先是通过程序员所编写的MR程序通过命令行本地提交或者IDE远程提交 2 一个MR程序就是一个Job,Job信息会给Resourcemanger,向Resourcem ...
- JS基础语法---基本包装类型
基本包装类型 普通变量不能直接调用属性或者方法 对象可以直接调用属性和方法 基本包装类型: 本身是基本类型, 但是在执行代码的过程中, 如果这种类型的变量调用了属性或者是方法, 那么这种类型就 ...
- jeecg代码生成器配置及常见问题
jeecg_database.properties 以mysql为例: diver_name=com.mysql.jdbc.Driver url=jdbc:mysql://192.168.*.*:33 ...
- 企业级堡垒机 jumpserver
环境准备 系统:CentOS 7 IP:192.168.10.101 关闭selinux 和防火墙 # CentOS $ setenforce # 可以设置配置文件永久关闭 $ systemctl s ...
- Oracle 11gR2中HR用户安装说明
1.脚本下载: 链接: 1,脚本放在这个目录下$ORACLE_HOME/demo/schema/human_resources hr_analz.sql hr_code.sq ...
- 使用ping网络工具编写Shell脚本程序实现网络连接故障初步排查
在学习ping命令的时候,突发奇想:为何不使用ping命令对网络连接故障进行排查? 具体思路: 1. ping 127.0.0.1 (虚拟网卡地址)以检查主机的TCP/IP协议栈是否正常. 2. p ...
- jQuery 源码解析(二十二) DOM操作模块 复制元素 详解
本节说一下DOM操作模块里的复制元素子模块,该模块可以复制一个DOM节点,并且可选择的设置是否复制其数据缓存对象(包含事件信息)和是否深度复制(子孙节点等),API如下: $.clone(elem, ...
- rmi与rpc的区别
这里简单说一下RMI和RPC的区别. 什么是RMI RMI(Remote Method Invocation,远程方法调用),能够让在客户端Java虚拟机上的对象像调用本地对象一样调用服务端Java虚 ...
- OpenWrite插件上架Google商店,插件安装更加容易!用户安全更有保障!
随着越来越多用户加入OpenWrite写作与快速发布文章到各大技术社区,不少非程序员童鞋经常会卡在插件安装这一步. 这是因为之前我们没有把插件上架到Google商店,所以需要用比较硬核的方式来安装. ...
- [Spring cloud 一步步实现广告系统] 5. 投放系统配置+启动+实体类
广告投放系统启动主类说明 /** * SponsorApplication for 广告赞助商/投递服务启动类 * 添加注解{@link EnableFeignClients}之后,当前微服务就可以调 ...