vue-cli项目中使用mockjs(基础使用和全局配置使用)
参考:vue+mockjs 模拟数据,实现前后端分离开发 (Github-Demo可查看全部代码),Mockjs ,Axios
很多时候前后端分离的项目在开发过程中前端所需数据和后端接口并不会同步开发,此时在接口对接之前就可以使用mockjs来自定义模拟数据
vue项目中的请求一般也是使用Axios进行请求,而axios的的一个特点就是会自动拦截请求,今天搞了一下午,也参考了很多文章,差不多完成了demo
axios的使用参考官网。
脚手架搭建好之后
npm install mockjs // 安装mockjs
npm install axios // 安装axios
一、基础使用(单独页面中使用)
<button @click="getData"> 生成数据 </button>
import Mock from 'mockjs' // node方式引入 (CommonJS) export default {
name: 'HelloWorld',
data () {
return {
mockData: [] // 生成数据
}
},
methods: {
getRandom () {
this.mockData = Mock.mock({ //生成数据规则
'list|1-10': [{
'id|+1': 1
}]
})
document.body.innerHTML += '<pre>' + JSON.stringify(this.mockData, null, 4) + '</pre>' // 展示到页面中
}
}
二、全局配置(main.js中引入)
项目目录构成(myapp下的src文件夹)
先看http---request.js
import axios from 'axios'
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-urlencoded'
const http = axios.create() http.defaults.timeout = 3000 http.interceptors.request.use(config => { // 请求拦截器配置 // 可不配置
// do sth
return config
}, error => {
console.log(error)
return Promise.reject(error)
}) http.interceptors.response.use(response => { // 响应拦截器配置 // 可不配置
// do something
return response
}, error => {
console.log(error)
return Promise.reject(error)
}) export function fetch(url, params) { // 封装axios的post请求
return new Promise((resolve, reject) => { // promise 用法,自行查阅
axios.post(url, params).then(response => {
resolve(response.data) // promise相关
}).catch(error => {
reject(error) // promise相关
})
})
} export default { // 暴露htto_mock方法,即后面页面中用到的方法
http_mock(url, params) {
return fetch(url, params)
}
}
然后配置mock(mock.js文件)
import Mock from 'mockjs' const Random = Mock.Random var listData = function() {
let _data = []
for (let i = 0; i < 20; i++) {
let newList = { // 详细 规则 参照mockjs官网
title: Random.csentence(5, 30), // Random.csentence( min, max )
imgSrc: Random.dataImage('200x160', '这是图片中的文本'), // Random.dataImage( size, text ) 生成图片(base64位数据格式)
author_name: Random.cname(), // Random.cname() 随机生成中文名
date: Random.date() + ' ' + Random.time() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd;Random.time() 返回一个随机的时间字符串
}
_data.push(newList)
}
return {_data: _data}
}
// url为要拦截的请求地址 请求方式 请求数据(规则) (此处api会被mockjs拦截)
Mock.mock('http://route.showapi.com/60-27', 'post', listData)
main.js中 只需引入即可
import mock from './mock'
最后就是页面中的使用了
引入request.js
import request from '@/http/request'
mock拦截并生成,我使用的是created时直接生成,事件触发一样
created () {
this.getData()
},
method: {
getData() { // 假装要使用http_mock发送请求(#手动滑稽#)(mock自动拦截请求并生成数据)
request.http_mock('http://route.showapi.com/60-27','api_id=63114&api_sign=3847b0').then(response => {
console.log(response._data)
})
}
}
最后出现的数据:
完事其他页面中引入下就能使用了,后台接口对接好之后,mockjs直接取消使用就ok了。
vue-cli项目中使用mockjs(基础使用和全局配置使用)的更多相关文章
- Vuex内容解析和vue cli项目中使用状态管理模式Vuex
中文文档:vuex官方中文网站 一.vuex里面都有些什么内容? const store = new Vuex.Store({ state: { name: 'weish', age: }, gett ...
- vue.cli项目中src目录每个文件夹和文件的用法
assets文件夹是放静态资源:components是放组件:router是定义路由相关的配置:view视图:app.vue是一个应用主组件:main.js是入口文件:
- vue cli 项目中设置背景图
https://blog.csdn.net/MoLvSHan/article/details/78204972 不能直接写成相对路径,像下面这这种就会报错 backgroundImage: " ...
- 改造@vue/cli项目为服务端渲染-ServerSideRender
VUE SEO方案二 - SSR服务端渲染 在上一章中,我们分享了预渲染的方案来解决SEO问题,个人还是很中意此方案的,既简单又能解决大部分问题.但是也有着一定的缺陷,所以我们继续来看下一个方案--服 ...
- Vue+Typescript项目中使用echarts
方案一:推荐 在typescript+Vue的项目中引用echarts,为了加强引用,引入echarts和@types/echarts两个包,一个是工程依赖,一个是声明依赖. npm install ...
- 如何在vue-cli项目中结合mockjs模拟假数据
1.前言 在如今前后端分离的开发方式已被广泛采用的今天,前端同学和后端同学各自独立开发,后端提供数据接口,前端调用接口获取数据渲染页面.但是在实际开发中,后端开发由于逻辑相对复杂接口迟迟提供不到位,而 ...
- 在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理
在一些内部OA或者流转的文件,或者给一些客户的报价文件.合同,或者一些医院出示的给保险机构的病历资料等,有时候可能都希望快速的使用电子签章的处理方式来给文件盖上特定的印章,本篇随笔介绍基于Vue&am ...
- 在基于ABP框架的前端项目Vue&Element项目中采用电子签名的处理
在前面随笔介绍了<在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理>的处理,有的时候,我们在流程中或者一些文件签署的时候,需要签上自己的大名,一 ...
- JavaWeb项目中web.xml有关servlet的基本配置
JavaWeb项目中web.xml有关servlet的基本配置: 我们注意到,tomcat下的conf中也有一个web.xml文件,没错的,所有的JavaWeb项目中web.xml都继承自服务器下的w ...
随机推荐
- 小程序-demo:小程序示例-page/common
ylbtech-小程序-demo:小程序示例-page/common 1.返回顶部 0. 1. 2. pages/common返回顶部 1. -lib --weui.wxss /*! * we ...
- UI: 网易新闻实现
#pragma mark-(AppDelegate.H文件)-------------------------------------------------------------------- ...
- HDU 3037 Saving Beans (数论,Lucas定理)
题意:问用不超过 m 颗种子放到 n 棵树中,有多少种方法. 析:题意可以转化为 x1 + x2 + .. + xn = m,有多少种解,然后运用组合的知识就能得到答案就是 C(n+m, m). 然后 ...
- Codeforces Round #382 (Div. 2) (模拟|数学)
题目链接: A:Ostap and Grasshopper B:Urbanization C:Tennis Championship D:Taxes 分析:这场第一二题模拟,三四题数学题 A. 直接模 ...
- bzoj 3629: [JLOI2014]聪明的燕姿【线性筛+dfs】
数论+爆搜 详见这位大佬https://blog.csdn.net/eolv99/article/details/39644419 #include<iostream> #include& ...
- Codeforces 451E Devu and Flowers【容斥原理+卢卡斯定理】
题意:每个箱子里有\( f[i] \)种颜色相同的花,现在要取出\( s \)朵花,问一共有多少种颜色组合 首先枚举\( 2^n \)种不满足条件的情况,对于一个不被满足的盒子,我们至少拿出\( f[ ...
- bzoj2720: [Violet 5]列队春游(概率期望+组合数学)
Description Input Output Sample Input Sample Output HINT 数学题都这么骚的么……怎么推出来的啊……我是真的想不出来…… 首先,要算总的视 ...
- [App Store Connect帮助]八、维护您的 App(4.3)回复顾客评论(iOS、macOS 或 watchOS)
您可以公开回复顾客评论,但在您的 App Store 产品页上每条评论仅会显示一条回复.您可以回复评论.编辑回复,以及删除回复. 在回复和编辑显示在 App Store 上之前(可能需要至多 24 小 ...
- java多线程下模拟抢票
我们设置三个对象分别同时抢20张票,利用多线程实现. public class Web123506 implements Runnable{ private int ticteksNums=20;// ...
- UIAlertController的使用,代替UIAlertView和UIActionSheet
在iOS8以后,UIAlertView就开始被抛弃了. 取而代之是UIAlertController 以前是警示框这样写: UIAlertView *alert = [[UIAlertView all ...