首先在框架中需要安装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 模拟数据在框架中的简单使用的更多相关文章

  1. 深入浅出的webpack4构建工具---比mock模拟数据更简单的方式(二十一)

    如果想要了解mock模拟数据的话,请看这篇文章(https://www.cnblogs.com/tugenhua0707/p/9813122.html) 在实际应用场景中,总感觉mock数据比较麻烦, ...

  2. vue-cli实现异步请求返回mock模拟数据

    在前后端分离开发的过程中,前端开发过程中,页面的数据显示一般都是写死的静态数据,也就是没有经过接口,直接写死在代码中的,在后端给出接口后,再替换为接口数据,为了减少对接成本,mock就出现了.通过预先 ...

  3. Mock模拟数据,前后端分离

    安装 使用npm安装: npm install mockjs; 或直接<script src="http://mockjs.com/dist/mock.js">< ...

  4. Spring Boot(九)Swagger2自动生成接口文档和Mock模拟数据

    一.简介 在当下这个前后端分离的技术趋势下,前端工程师过度依赖后端工程师的接口和数据,给开发带来了两大问题: 问题一.后端接口查看难:要怎么调用?参数怎么传递?有几个参数?参数都代表什么含义? 问题二 ...

  5. vue+iview+mock模拟数据遍历

    下载安装iview, 进入根目录,用命令行启动 npm install npm run build npm run dev 安装mock.js和axios npm install mock.js -s ...

  6. Fiddler使用 断点 模拟返回 AutoResponder Mock 模拟数据 相关学习记录

    断点 测试中有时需要改变发出去的请求信息,需要用到打断点的方法.断点包含两种方式: before response:在request请求的时候,未到达服务器之前,一般用来修改请求参数 after re ...

  7. 【vue】vue +element 搭建项目,mock模拟数据(纯干货)

    1.安装mockjs依赖 (c)npm install mockjs --save-dev 2.安装axios(Ajax) (c)npm install --save axios 3.项目目录 4.设 ...

  8. querylist 在laravel框架中的简单采集数据(专业5)

    //爬虫网站路由Route::get('/querylist/list','querylistControllers@querylist'); //控制器 <?phpnamespace App\ ...

  9. Struts2(三)——数据在框架中的数据流转问题

    一款软件,无在乎对数据的处理.而B/S软件,一般都是用户通过浏览器客户端输入数据,传递到服务器,服务器进行相关处理,然后返回到指定的页面,进行相关显示,完成相关功能.这篇博客重点简述一下Struts2 ...

随机推荐

  1. PlayJava Day024

    造型Cast补充: 子类的对象可以赋值给父类的变量 注意:Java中不存在对象对对象的赋值 父类的对象不能赋值给子类的变量 例: Vechicle v ; Car c = new Car() ; v ...

  2. How to: Display a List of Non-Persistent Objects in a Popup Dialog 如何:在弹出对话框中显示非持久化对象列表

    This example demonstrates how to populate and display a list of objects that are not bound to the da ...

  3. epub.js的使用

    epub.js的使用 npm安装 npm install epubjs epub阅读器开发 ePub电子书解析和渲染 生成Book对象 this.book = new Epub(DOWNLOAD_UR ...

  4. druid链接数据库

    所用jar包 commons-beanutils-1.8.0.jarcommons-logging-1.1.3.jardruid-1.0.9.jarmysql-connector-java-5.1.1 ...

  5. report for PA1

    说明:最近特别忙,都没有时间写blog,好多遇到的问题都没能记下来,下面是PA1的报告主要记录了nemu debuger一些功能的实现方式和实现中遇到的问题,代替一下blog (申明:This is ...

  6. 通过pipeline实现jenkins的ci/cd功能

    pipeline是基于groove进行实现的,不过从jenkins官方的说明中,pipeline分为脚本式和声明式,参见链接.经过对两种的比较,个人比较偏向脚本式的方法.也就是 Jenkinsfile ...

  7. Zeus:1 Vulnhub Walkthrough

    主机层面扫描: ╰─ nmap -p1-65535 -sV -A 10.10.202.14 PORT STATE SERVICE VERSION21/tcp open ftp vsftpd 2.0.8 ...

  8. DSP开发程序相关问题总结

    1. 定义Class总是出错,原来是这样的class SCM_DRV_API CSERCOS{}:后来改为class CSERCOS{}:就可以了. 类的一般定义格式如下:    class < ...

  9. ssdb make 失败 autoconf required

    ERROR! autoconf required! install autoconf first Makefile:4: build_config.mk: No such file or direct ...

  10. 游戏《Minecraft》IntelliJ下模组开发环境ForgeGradle的使用教程

    嗯,当你想搞个模组的时候,肯定需要用到FG. 就比如编译模组的时候. 很好,首先下载源码去. files.minecraftforge.net/ 然后打开命令行到源码目录下 执行命令~ Win:   ...