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 let nowPeopleData = Mock.mock('http://compony.com/api/v1/t1', nowPeople);
export let 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相关推荐

mock模拟的数据能增删改查吗_如何在Vue中使用Mockjs模拟数据的增删查改
之前一直使用json-server在前端开发时,搭建本地数据接口测试,但有时又需要将做好的项目放于 github page上做项目演示.在本地时,json server很好使用,但一旦放在github ...
【Mockjs】Vue中使用Mockjs，语法规范，常用方法
这篇文章是学习Mockjs的一些实践和个人笔记,文章又臭又长请多担待
vue中如何使用mockjs摸拟接口的各种数据
mockjs的作用生成模拟数据模拟 Ajax 请求,返回模拟数据基于 HTML 模板生成模拟数据(后续更新) 帮助编写单元测试(后续更新) Vue 中使用 mock 有两种使用方式,一种是仅编写 ...
mockjs vue ajax,mockjs在vue中的使用
mockjs在vue中的使用 mockjs在vue中的使用前后端分工协作是一个非常高效的做法,但是有时前后端分离不彻底会很痛苦.前后端应该是异步进行的,进度互不影响,但是在没有mock的时候,前端却 ...
vue+vuecli+webpack中使用mockjs模拟后端数据
前言使用mockjs可以事先模拟数据,前提是和后端约定好了数据接口,怎样的数据.使用mock就可以生成你要的数据了,从而实现开发时前后端分离. 其主要功能是: 基于数据模板生成模拟数据. 基于HTM ...
vue 前端显示图片加token_前端甩锅神器：vue中的mock使用
首先声明,本文所介绍的方法,只是用于,在做好前端联调的本分工作之余,把前后端联调责任划清界限,并不用于帮后端定位问题(当然,mock也有更全面的方法促进项目的进行,小女不才,在此不提供介绍): 跟陌生 ...
vue尚品汇商城项目-day03【vue插件-19.mockjs模拟数据（开发Home首页当中的ListContainer组件与Floor组件）】
文章目录 19.mockjs模拟数据(开发Home首页当中的ListContainer组件与Floor组件) 本人其他相关文章链接 19.mockjs模拟数据(开发Home首页当中的ListConta ...
vue如何使用mockjs摸拟接口数据
mockjs的作用生成模拟数据模拟 Ajax 请求,返回模拟数据基于 HTML 模板生成模拟数据(后续更新) 帮助编写单元测试(后续更新) Vue 中使用 mock 有两种使用方式,一种是仅编写 ...
怎么将vue模板转换为html,vue中自定义html文件的模板
如果默认生成的 HTML 文件不适合需求,可以创建/使用自定义模板. 一是通过 inject 选项,然后传递给定制的 HTML 文件.html-webpack-plugin 将会自动注入所有需要的 C ...

vue中使用mockjs

vue中使用mockjs相关推荐

最新文章

热门文章