数据来源方式:

为什么要用mockjs

实际开发中,前后端分离,前端需要后端的接口去完成页面的渲染,但是并不能等到后端成员写完接口再开始进行测试。大部分情况下,前后端需要同时进行开发。因此便需要mockjs制造随机数据来进行后端接口模拟。
看了官方文档之后一脸懵逼,这些都是什么鬼?????因此总结了一篇文章,来介绍mockjs的简单使用。

首先搭建一个vue项目

这里不介绍了

安装mockjs

npm install mockjs --save-dev

启动项目

npm run dev

创建mock.js文件

  • 在src路径下创建mock.js文件
  • 在main.js引入mock.js文件

mock.js使用

  • 在mock.js文件中写入测试代码

此处箭头函数中的代码可以根据mock的Git官网来进行修改随机数据及属性名称

//引入mockjs
const Mock = require('mockjs')
// 获取 mock.Random 对象
const Random = Mock.Random;
//使用mockjs模拟数据
Mock.mock('/api/data', (req, res) => {//当post或get请求到/api/data路由时Mock会拦截请求并返回上面的数据
let list = [];
for(let i = ; i < ; i++) {
let listObject = {
title: Random.csentence(, ),//随机生成一段中文文本。
company: Random.csentence(, ),
attention_degree: Random.integer(, ),//返回一个随机的整数。
photo: Random.image('114x83', '#00405d', '#FFF', 'Mock.js')
}
list.push(listObject);
}
return {
data: list
}
})

  • 在xxxxx.vue文件中使用axios获取mock.js中的随机数据
import axios from 'axios'

export default {
data() {
return {
data:[]
}
},
mounted:function() {
axios.get('/api/data').then(res => {//get()中的参数要与mock.js文件中的Mock.mock()配置的路由保持一致
this.data = res.data.data;
console.log(res.data);//在console中看到数据
}).catch(res => {
alert('wrong');
})
},
methods:{ }
}

  • <template></template>结构

  • 效果展示

.

Mock.js数据模拟的更多相关文章

  1. mock.js的真实数据模拟

    哈哈,怎么说,这应该是我的第一个随笔了,毕竟前端之路上一直在学习并且各位大神们的经验,虽然也有不少的坑,但是总是收获比较多,所以我也想把一些收获记录下来,有需要的可以参考参考. 网上看了不少大神很多例 ...

  2. 使用RAP2和Mock.JS实现Web API接口的数据模拟和测试

    最近一直在思考如何对Web API的其接口数据进行独立开发的问题,随着Web API的越来越广泛应用,很多开发也要求前端后端分离,例如统一的Web API接口后,Winform团队.Web前端团队.微 ...

  3. Mock.js 虚拟接口 数据模拟

    Mock.js 是一款前端开发中拦截Ajax请求再生成随机数据响应的工具.可以用来模拟服务器响应. 优点是非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型. 大概记录下使用过程, 详细使用可以参 ...

  4. 使用mock.js进行数据模拟

    mock.js的文档真的是无力吐槽,只说明API怎么使用,完全不说明mock.js这个工具怎么用到项目里面,最有意思的是google的大部分文章复制官网的API,不管是react还是Vue都是下面的流 ...

  5. dva框架使用mock.js模拟数据 + fetch请求数据

    what DVA? Dva是基于Redux做了一层封装,对于React的state管理,有很多方案,我选择了轻量.简单的Dva. dva 可以很方便就使用mock.js进行数据的模拟. 只需要三步,即 ...

  6. mock.js 模拟数据

    1. 劫持请求,返回模拟数据: 用于前后台对接前数据模拟 相比于静态json文件而言:代码完成后不必修改源文件对应的接口调用.可模拟增删改查 2.实例代码 <!doctype html> ...

  7. json-server 和mock.js生成大量json数据

    JSON-server和mock.jsmock文件夹下 db.json db.jsjson-sever使用 安装:npm install json-server -g/mock 目录下执行json-s ...

  8. 五、Vue:使用axios库进行get和post、用拦截器对请求和响应进行预处理、Mock(数据模拟)

    一.axios [应用]进行请求和传表单 [axios中文档]:https://www.kancloud.cn/yunye/axios/234845 [vue-axios]:https://cn.vu ...

  9. mock.js

    mock.js http://mockjs.com/ https://github.com/nuysoft/Mock/wiki 为了完成angularjs的karma测试,看到这个好东东,这货能拦截a ...

随机推荐

  1. js中VO解析

    执行环境(环境) 执行环境的用处 执行环境定义了变量或函数有权访问的其他数据,每一个执行环境都存在一个关联的变量对象(VO),代码无法访问,内部解析器会使用它,如果环境为函数,则将函数的AO作为VO, ...

  2. oracle--表空间故障

    一,错误问题描述 ERROR: ORA: cannot identify - see DBWR trace file ORA: data : '/u01/oracle/TEST/oratmp01/te ...

  3. C# socket ipv6初体验

    Server: serverSocket = new Socket(AddressFamily.InterNetworkV6, SocketType.Stream, ProtocolType.Tcp) ...

  4. .NET Core:中间件

    中间件是组装到应用程序管道中以处理请求和响应的软件,功能上更贴合系统的使用中间件. 每个组件: 选择是否将请求传递给管道中的下一个组件. 可以在调用管道中的下一个组件之前和之后执行工作. 请求委托(R ...

  5. react 16 Hooks渲染流程

    useState react对useState进行了封装,调用了mountState. function useState<S>( initialState: (() => S) | ...

  6. NodeJS添加Jquery依赖

    NodeJS使用时有时候需要JQuery依赖. 新版正确的依赖方式 var jsdom = require('jsdom'); const {JSDOM} = jsdom; const {docume ...

  7. Android ADB 实用总结

    一.背景 从系统架构上来说,Android是基于Linux系统基础上,做了进一步的定制与修改,并融入了自身的特有功能,且向应用层提供应用程序接口,供开发者使用.系统内核层面,主体依然是Linux内核. ...

  8. 提高性能,MySQL 读写分离环境搭建(一)

    这是松哥之前一个零散的笔记,整理出来分享给大伙! MySQL 读写分离在互联网项目中应该算是一个非常常见的需求了.受困于 Linux 和 MySQL 版本问题,很多人经常会搭建失败,今天松哥就给大伙举 ...

  9. 【华为云实战开发】8.如何快速搭建C#网站并实现持续集成?【华为云技术分享】

    1 概述 1.1 文章目的 本文通过一个实例介绍如何使用软件开发服务DevCloud完成一个C#Web项目的开发. 1.2 项目详情 1. 项目名称:超级冷笑话网站 2. 项目简介:一个Web网站,包 ...

  10. PyTorch中MaxPool的ceil_mode属性

    PyTorch中的MaxPool(最大池化)有一个属性:ceil_mode,默认为False(地板模式),为True时是天花板模式.