vue中使用mockjs
第一步安装mockjs:npm i mockjs -S
在src目录下新建mock文件夹,文件夹添加test.js
test.js内容如下:
import Mock from 'mockjs';
const List = [];
const count = 20;
for (let i = 0; i < count; i++) {
List.push(Mock.mock({
id: '@id',
title: '@ctitle(10, 20)',
'status|1': ['published', 'draft'],
author: '@cname',
display_time: '@datetime',
pageviews: '@integer(300, 5000)'
}));
}
const nowPeople = {
"errcode": "0",
"errmsg": "success",
"data": {
"expo_audience": "@integer(100, 5000)",
}
}
const viewNumber = {
"errcode": "0",
"errmsg": "success",
"data": { "desk_num": 24, "desk_duration": 105.50, "per_desk_duration": 25.20 }
}
export const nowPeopleData = Mock.mock('http://compony.com/api/v1/t1', nowPeople);
export const viewNumberData = Mock.mock('http://compony.com/api/v1/t2', viewNumber);
在main.js中引入:
import * as expo from './mock/test.js'
axios.defaults.baseURL = 'http://compony.com/api/v1'
在组件中使用:
this.axios.get('/t1').then((data) => {
}
等到后台开发好api后,只需要注释掉import * as expo from './mock/test.js' 即可,其他代码都不用动
vue中使用mockjs的更多相关文章
- 如何在Vue中使用Mockjs模拟数据的增删查改
之前一直使用json-server在前端开发时,搭建本地数据接口测试,但有时又需要将做好的项目放于 github page上做项目演示.在本地时,json server很好使用,但一旦放在github ...
- vue中如何使用mockjs摸拟接口的各种数据
mockjs的作用 生成模拟数据 模拟 Ajax 请求,返回模拟数据 基于 HTML 模板生成模拟数据(后续更新) 帮助编写单元测试(后续更新) Vue 中使用 mock 有两种使用方式,一种是仅编写 ...
- mockjs在vue中的使用
mockjs在vue中的使用 安装好vue-cli后 加载模块: npm install mockjs 创建mock.js文件到src目录下的任一合适文件内新建mockjs.js,设置好拦截信息,设置 ...
- vue+vuecli+webpack中使用mockjs模拟后端数据
前言 使用mockjs可以事先模拟数据,前提是和后端约定好了数据接口,怎样的数据.使用mock就可以生成你要的数据了,从而实现开发时前后端分离. 其主要功能是: 基于数据模板生成模拟数据. 基于HTM ...
- vue项目中使用mockjs模拟接口返回数据
Mock.js 是一个模拟数据生成器,利用它,可以拦截ajax请求,直接模拟返回数据,这样前后端只要约定好数据格式,前端就不需要依赖后端的接口,可以直接使用模拟的数据了. 网上介绍mock的教程也较多 ...
- vue中如何不通过路由直接获取url中的参数
前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接 ...
- vue中的重要特性
一.vue中的自定义组件 html的代码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- Vue中comoputed中的数据绑定
Vue中的数据实现响应式绑定是在初始化的时候利用definePrototype的定义set和get过滤器,在进行组件模板编译时实现water的监听搜集依赖项,当数据发生变化时在set中通过调用dep. ...
- vue中使用stompjs实现mqtt消息推送通知
最近在研究vue+webAPI进行前后端分离,在一些如前端定时循环请求后台接口判断状态等应用场景用使用mqtt进行主动的消息推送能够很大程度的减小服务端接口的压力,提高系统的效率,而且可以利用mqtt ...
随机推荐
- 将url参数转为json对象
/** * 将url参数转为json对象 * * @param str * @returns {{}} */ function parseQueryString(str){ arr = [], len ...
- 微信小程序——template的循环嵌套
上一篇我们有写到 template的使用方法 .在实际运用中,需要做到template里面再嵌套一层循环.我们先看一下数据结构: 模板是用于循环list,现在的需求是在模板里面嵌套一个orderIte ...
- Java设计模式(4)原型模式(Prototype模式)
Prototype模式定义:用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象. Prototype模式允许一个对象再创建另外一个可定制的对象,根本无需知道任何如何创建的细节,工作原理是: ...
- 【转】MySQL count(*)速度慢优化
select count(*)是MySQL中用于统计记录行数最常用的方法. count方法可以返回表内精确的行数,每执行一次都会进行一次全表扫描, 以避免由于其他连接进行delete和insert引起 ...
- [hadoop读书笔记]前言
hadoop2.0+主要变化: 全新的MapReduce 2,它建立在一个新的分布式资源管理系统之上,该系统称之为YARN. YARN:分布式资源管理系统
- Google ProtocolBuffers2.4.1应用说明(一)
1.概念 Protocol buffers是一个用来序列化结构化数据的技术,支持多种语言诸如C++.Java以及Python语言,可以使用该技术来持久化数据或者序列化成网络传输的数据.相比较一些其他的 ...
- WM_CONCAT字符超过4000的处理办法
参考网址: http://stackoverflow.com/questions/11541383/ordering-by-list-of-strings-in-oracle-sql-without- ...
- SAP HR模块的基础数据表和增强配置
信息类型是SAP HR模块数据单元,用于对人员数据的记录和维护,是HR的基础.信息类型按照其创建方式的不同可以分为:人事信息类型.组织信息类型.信息类型数据的维护主要在事物码PA30.PA40.po1 ...
- 第三百四十三节,Python分布式爬虫打造搜索引擎Scrapy精讲—scrapy模拟登陆和知乎倒立文字验证码识别
第三百四十三节,Python分布式爬虫打造搜索引擎Scrapy精讲—scrapy模拟登陆和知乎倒立文字验证码识别 第一步.首先下载,大神者也的倒立文字验证码识别程序 下载地址:https://gith ...
- fence-agents kvm 实验
1, Method of installing fence-agents on linux: $ git clone https://github.com/ClusterLabs/fence-agen ...