第一步安装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的更多相关文章

  1. 如何在Vue中使用Mockjs模拟数据的增删查改

    之前一直使用json-server在前端开发时,搭建本地数据接口测试,但有时又需要将做好的项目放于 github page上做项目演示.在本地时,json server很好使用,但一旦放在github ...

  2. vue中如何使用mockjs摸拟接口的各种数据

    mockjs的作用 生成模拟数据 模拟 Ajax 请求,返回模拟数据 基于 HTML 模板生成模拟数据(后续更新) 帮助编写单元测试(后续更新) Vue 中使用 mock 有两种使用方式,一种是仅编写 ...

  3. mockjs在vue中的使用

    mockjs在vue中的使用 安装好vue-cli后 加载模块: npm install mockjs 创建mock.js文件到src目录下的任一合适文件内新建mockjs.js,设置好拦截信息,设置 ...

  4. vue+vuecli+webpack中使用mockjs模拟后端数据

    前言 使用mockjs可以事先模拟数据,前提是和后端约定好了数据接口,怎样的数据.使用mock就可以生成你要的数据了,从而实现开发时前后端分离. 其主要功能是: 基于数据模板生成模拟数据. 基于HTM ...

  5. vue项目中使用mockjs模拟接口返回数据

    Mock.js 是一个模拟数据生成器,利用它,可以拦截ajax请求,直接模拟返回数据,这样前后端只要约定好数据格式,前端就不需要依赖后端的接口,可以直接使用模拟的数据了. 网上介绍mock的教程也较多 ...

  6. vue中如何不通过路由直接获取url中的参数

    前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接 ...

  7. vue中的重要特性

    一.vue中的自定义组件 html的代码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  8. Vue中comoputed中的数据绑定

    Vue中的数据实现响应式绑定是在初始化的时候利用definePrototype的定义set和get过滤器,在进行组件模板编译时实现water的监听搜集依赖项,当数据发生变化时在set中通过调用dep. ...

  9. vue中使用stompjs实现mqtt消息推送通知

    最近在研究vue+webAPI进行前后端分离,在一些如前端定时循环请求后台接口判断状态等应用场景用使用mqtt进行主动的消息推送能够很大程度的减小服务端接口的压力,提高系统的效率,而且可以利用mqtt ...

随机推荐

  1. VB6学习笔记

    1.数据库读取 [工程]菜单的[引用]菜单项,打开引用对话框,选中[Microsoft ActiveX Data Objects 6.1 Library] [工程]菜单的[引用]菜单项,打开引用对话框 ...

  2. Repeater 嵌套,子级Repeater获取 父级Repeater 中的值

    第一种方法,子级Repeater中绑定父级的某个字段: <%# DataBinder.Eval((Container.NamingContainer.NamingContainer as Rep ...

  3. SpringBoot 开启 Actuator

    在生产环境中,需要实时或定期监控服务的可用性.spring-boot 的actuator(监控)功能提供了很多监控所需的接口.简单的配置和使用如下: 1.引入依赖: <dependency> ...

  4. [hadoop读书笔记] 第十五章 sqoop1.4.6小实验 - 将mysq数据导入hive

    安装hive 1.下载hive-2.1.1(搭配hadoop版本为2.7.3) 2.解压到文件夹下 /wdcloud/app/hive-2.1.1 3.配置环境变量 4.在mysql上创建元数据库hi ...

  5. 使用VMware将Linux装在物理硬盘上,开机即可进入Linux

    我的笔记本上是双系统Windows和Linux .经常需要在两个系统间切换,很麻烦.于是我想到如果能用VMWare虚拟机加载物理硬盘中的系统,可以在需要时,直接启动另外一个系统.     注意:我的双 ...

  6. USB2.0学习笔记连载(十八):keil实现寄存器的配置及相关函数讲解(二)

    其实之前也有提及过,Cypress公司提供的官方文件和应用手册真的可以解决很多问题.做的也很人性化,操作也及其简单,几乎只要在 TD_int()里面配置一些常用的参数即可,其他都可以不用操作. 作为一 ...

  7. 【转】【CentOS】【Python】Centos7安装Python3的方法

    由于centos7原本就安装了Python2,而且这个Python2不能被删除,因为有很多系统命令,比如yum都要用到. [root@VM_105_217_centos Python-3.6.2]# ...

  8. python 调用 C语言函数

    python可以直接调用C语言的函数,本文记录用ctypes调用c语言的方法. test.c #include <stdio.h> int test(char *temp) { print ...

  9. VC6下OpenGL 开发环境的构建外加一个简单的二维网络棋盘绘制示例

    一.安装GLUT 工具包 GLUT 不是OpenGL 所必须的,但它会给我们的学习带来一定的方便,推荐安装. Windows 环境下的GLUT 本地下载地址:glut-install.zip(大小约为 ...

  10. pyqt5加载网路图片,不本地下载。

    依赖组件: requests class webImg: pass if __name__ == '__main__': import sys from PyQt5.QtWidgets import ...