参考: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(基础使用和全局配置使用)的更多相关文章

  1. Vuex内容解析和vue cli项目中使用状态管理模式Vuex

    中文文档:vuex官方中文网站 一.vuex里面都有些什么内容? const store = new Vuex.Store({ state: { name: 'weish', age: }, gett ...

  2. vue.cli项目中src目录每个文件夹和文件的用法

    assets文件夹是放静态资源:components是放组件:router是定义路由相关的配置:view视图:app.vue是一个应用主组件:main.js是入口文件:

  3. vue cli 项目中设置背景图

    https://blog.csdn.net/MoLvSHan/article/details/78204972 不能直接写成相对路径,像下面这这种就会报错 backgroundImage: " ...

  4. 改造@vue/cli项目为服务端渲染-ServerSideRender

    VUE SEO方案二 - SSR服务端渲染 在上一章中,我们分享了预渲染的方案来解决SEO问题,个人还是很中意此方案的,既简单又能解决大部分问题.但是也有着一定的缺陷,所以我们继续来看下一个方案--服 ...

  5. Vue+Typescript项目中使用echarts

    方案一:推荐 在typescript+Vue的项目中引用echarts,为了加强引用,引入echarts和@types/echarts两个包,一个是工程依赖,一个是声明依赖. npm install ...

  6. 如何在vue-cli项目中结合mockjs模拟假数据

    1.前言 在如今前后端分离的开发方式已被广泛采用的今天,前端同学和后端同学各自独立开发,后端提供数据接口,前端调用接口获取数据渲染页面.但是在实际开发中,后端开发由于逻辑相对复杂接口迟迟提供不到位,而 ...

  7. 在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理

    在一些内部OA或者流转的文件,或者给一些客户的报价文件.合同,或者一些医院出示的给保险机构的病历资料等,有时候可能都希望快速的使用电子签章的处理方式来给文件盖上特定的印章,本篇随笔介绍基于Vue&am ...

  8. 在基于ABP框架的前端项目Vue&Element项目中采用电子签名的处理

    在前面随笔介绍了<在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理>的处理,有的时候,我们在流程中或者一些文件签署的时候,需要签上自己的大名,一 ...

  9. JavaWeb项目中web.xml有关servlet的基本配置

    JavaWeb项目中web.xml有关servlet的基本配置: 我们注意到,tomcat下的conf中也有一个web.xml文件,没错的,所有的JavaWeb项目中web.xml都继承自服务器下的w ...

随机推荐

  1. 【转载】SQL面试题

    [本文转自]http://blog.csdn.net/u012467492/article/details/46790205 1.用一条SQL 语句 查询出每门课都大于80 分的学生姓名 name   ...

  2. bzoj 1072: [SCOI2007]排列perm【状压dp】

    先写了个next_permutation结果T了,于是开始写状压 设f[s][i]为选取状态为s,选的数模d为i的方案数,去重的话直接除以每个数字的出现次数的阶乘即可 #include<iost ...

  3. bzoj 4405: [wc2016]挑战NPC【带花树】

    把每个筐子拆成3个,分别表示放0/1/2个,然后把这三个点两两连起来,每一个可以放在筐里的球都想这三个点连边. 这样可以发现,放0个球的时候,匹配数为1,放1个球的时候,匹配数为1,放2个球的时候,匹 ...

  4. Springboot整合elasticsearch以及接口开发

    Springboot整合elasticsearch以及接口开发 搭建elasticsearch集群 搭建过程略(我这里用的是elasticsearch5.5.2版本) 写入测试数据 新建索引book( ...

  5. GDI+ 加载PNG图片

    #include <GdiPlus.h>#pragma comment(lib, "GdiPlus.lib")using namespace Gdiplus; clas ...

  6. HTML_CSS入门学习

    1 HTML 简介 下面解释什么是HTML,以及HTML标签和HTML文档的含义. 1.1 什么是 HTML? HTML 是用来描述网页的一种语言. HTML 指的是超文本标记语言 (Hyper Te ...

  7. [POI2001]Goldmine

    Description Byteman作为Byteland的The Goldmine(某一公司厂矿)的最有功的雇员之一,即将在年末退休.为了表示对他的 认真勤恳的工作的承认,The Goldmine的 ...

  8. Windows查杀端口

    Windows环境下当某个端口被占用时,通过netstat命令进行查询pid,然后通过taskkill命令杀进程. 一.查询占用端口号的进程信息 netstat -an|findstr 二.杀掉占用端 ...

  9. html下的图片链接有边框的解决方法

    使用dreamweaver创建网页后,上传到网站发现网页的图片链接有非常难看的蓝色边框,而在dw下是没有的 后来查看了一下网上的资料,发现加一个border="0"即可,默认是有边 ...

  10. poj3233Matrix Power Series

    链接 也是矩阵经典题目  二分递归求解 a+a^2+a^3+..+a^(k/2)+a^(k/2+1)+...+a^k = a+a^2+..+a^k/2+a^k/2(a^1+a^2+..+a^k/2)( ...