vue实践---vue配合express实现请求数据mock
mock数据是前端比较常见的技术,这里介绍下vue配合express 实现请求数据mock。
第一步:
安装 express : npm install express -D
第二步:
简历需要mock的数据,在src下新建mock文件夹,文件里面新建两个文件data1.json和data2.json,如下:
data1.json内容如下:
{
"name": "yanyalong",
"title": "测试",
"data": [
{
"field_code": "111", "code": "initiatorDept", "errcode": 0, "errmsg": "ok","mextendData": null, "formId": "processVariable", "formName": "流程字段11", "id": "initiatorDept", "name": "stringsasassa", "system": true,
"type" : { "errcode" : 0,"errmsg" : "ok","id" : null, "code" : null,"name" : "string" },
"relationListType": ["equals","containsIgnoreCase"]
},
{
"field_code": "22", "code": "initiatorDept", "errcode": 0, "errmsg": "ok","mextendData": null, "formId": "processVariable", "formName": "流程字段11", "id": "asdada", "name": "发起人部门", "system": true,
"type" : { "errcode" : 0,"errmsg" : "ok","id" : null, "code" : null,"name" : "reference" },
"relationListType": ["contains","stringNotContains"]
},
{
"field_code" : "33", "errcode" : 0, "errmsg" : "ok","id" : "initiatorUserGroup", "code" : "initiatorUserGroup", "name" : "发起人所属用户组","system" : true,
"type" : {"errcode" : 0,"errmsg" : "ok", "id" : null, "code" : null, "name" : "string" }, "formId" : "processVariable","formName" : "流程字段","extendData" : null,
"relationListType": ["notEquals","containsIgnoreCase", "notContainsIgnoreCase"]
}
]
}
data2.json内容如下:
{
"value": "hello 你好"
}
第三步:
修改 webpack.dev.conf.js 的配置,在devServer里新增如下代码,这样在请求/api1 这个url路径的时候就会返回data1.json, /api2返回data2.json
before (app) {
const express = require('express')
const App = express()
// 加载本地数据文件
var appData1 = require('./../src/mock/data1.json')
var appData2 = require('./../src/mock/data2.json')
var apiRoutes = express.Router()
App.use('/api1', apiRoutes)
App.use('/api2', apiRoutes) app.get('/api1', (req, res) => {
res.json(appData1)
})
app.get('/api2', (req, res) => {
res.json(appData2)
})
}
第四步:
使用方法如下:
<template>
<div id="app">
<img src="./assets/logo.png">
<HelloWorld/>
</div>
</template> <script>
import axios from 'axios'
import HelloWorld from './components/HelloWorld' export default {
name: 'App',
components: {
HelloWorld
},
mounted () {
axios.get('/api1').then((res) => {
console.log(res)
})
axios.get('/api2').then((res) => {
console.log(res)
})
}
}
</script>
具体的代码可以看这里:https://github.com/YalongYan/vue-practice/tree/master/express-axios-mock
补充说明:
现在的vue-cli项目没有了webpack.dev.conf.js文件了,不过有webpack.config.js, 原理是一样的,在webpack.config.js里面找到devServer, 把 before (app) 这段代码放进去效果是一样的。
我这里做了判断,只有开发环境的时候 才启用mock请求数据,生产环境的时候就不需要了,代码如下(这段代码是在webpack.dev.conf.js最后面):
if (process.env.NODE_ENV === 'production') {
// 生产环境的代码
} else {
// express 实现 mock数据
module.exports.devServer.before = (app)=> {
const express = require('express')
const App = express()
// 加载本地数据文件
var appData = require('./src/mock/data1.json')
var apiRoutes = express.Router()
App.use('/api', apiRoutes) app.get('/api', (req, res) => {
res.json(appData)
})
}
}
vue实践系列请看这里:https://github.com/YalongYan/vue-practice
vue实践---vue配合express实现请求数据mock的更多相关文章
- vue实践中的狗血事件之:mock数据引发的血坑
在项目实践中,遇到了这么一档子事 开发环境下,很快乐,什么事儿都没有,于是想打包一下测一下自动登录的效果 好家伙,一开始登录没有效,改来改去,最后连路由都切换不了, 明明开发环境下好好的,为毛打包后就 ...
- Vue.js 2.0 跨域请求数据
Vuejs由1.0更新到了2.0版本.HTTP请求官方也从推荐使用Vue-Resoure变为了 axios .接下来我们来简单地用axios进行一下异步请求.(阅读本文作者默认读者具有使用npm命令的 ...
- Vue框架Element UI教程-axios请求数据
Element UI手册:https://cloud.tencent.com/developer/doc/1270 中文文档:http://element-cn.eleme.io/#/zh-CN gi ...
- vue实践---vue结合 promise 封装原生ajax
有时候不想使用axios这样的外部依赖,想自己封装ajax,这里有两种方法 方法一,在单个页面内使用 封装的代码如下: beforeCreate () { this.$http = (() => ...
- vue实践---vue不依赖外部资源实现简单多语
vue使用多语,最常见的就是 vue-i18n, 但是如果开发中的多语很少,比如就不到10个多语,这样就没必要引入vue-i18n了, 引入了反正导致代码体积大了,这时候单纯用vue实现多语就是比较好 ...
- vue实践---vue动态加载组件
开发中遇到要加载10个或者更多的,类型相同的组件时,如果用普通的 import 引入组件,components注册组件,代码显得太啰嗦了,这时候就需要用到 require.context 动态加载这些 ...
- vue中使用axios进行ajax请求数据(跨域配置)
npm安装axios npm install axios --save 引入axios import axios from 'axios' 使用axios mounted () { this.getH ...
- AFNetworking配合Swift3.0请求数据
首先用桥接或pods将AFNetworking导入项目,在这不再赘述,然后创建一个单例NetWorkTools.swift 继承:AFHTTPSessionManager import UIKit i ...
- $Django 前后端之 跨域问题(同源策略) vue项目(axios跨域请求数据)
1 跨域问题(多个域之间的数据访问) #同源策略(ip port 协议全部相同) #本站的只能请求本站域名的数据 #CORS实现(跨域资源共享) #实现CORS通信的关键是服务器.只要服务器实现了CO ...
随机推荐
- Ubuntu 16.04出现:dpkg: 处理软件包 xxx (--configure)时出错:
如下所示: 解决方法: #将info文件夹更名 sudo mv /var/lib/dpkg/info /var/lib/dpkg/info_old #再新建一个新的info文件夹 sudo mkdir ...
- python3.6使用pickle序列化class
from library.connecter.database.mongo import Op_Mongo a = pickle.dumps(Op_Mongo) #序列化 b = pickle.loa ...
- ES6方面重点摘要
1.变量声明(1)内层变量覆盖外层变量(即后面的覆盖前面的)(2)循环变量的声明,i值在全局范围内有效,所以最后输出的都是最后一轮i的值(3)let.const的引入,为JS增加了块级作用域的概念(c ...
- 10 种机器学习算法的要点(附 Python)(转载)
一.前言 谷歌董事长施密特曾说过:虽然谷歌的无人驾驶汽车和机器人受到了许多媒体关注,但是这家公司真正的未来在于机器学习,一种让计算机更聪明.更个性化的技术 也许我们生活在人类历史上最关键的时期:从使用 ...
- Jquery.data()的值存放再什么地方的问题?
Where is jQuery.data() stored? Where does jQuery store the values of the data() that it sets to DOM ...
- Java程序IP v6与IP v4的设置
Java程序IP v6与IP v4的设置 //Prevent to get IPV6 address,this way only work in debug mode //But you can pa ...
- 转:windows 查找pid并kill进程
找出占用1099端口的进程,进入windows命令,查看什么进程占用了1099端口 使用命令:netstat -aon|findstr 1099 找出占用1099端口的进程,如下图所示:
- Microsoft Sync Framework 2.1 可再发行程序包 Microsoft Sync Framework 1.0 SP1 - 中文(简体)
Sync Framework 2.1 引入了新功能,这些功能支持您计算机上的 SQL Server 或 SQL Server Compact 数据库与 SQL Azure 数据库进行同步.此发行版还引 ...
- http header 具体解释
HTTP(HyperTextTransferProtocol)即超文本传输协议,眼下网页传输的的通用协议. HTTP协议採用了请求/响应模型,浏览器或其它client发出请求,server给与响应. ...
- 系统重装 U盘安装XP操作系统开机出现提示txtsetup.sif怎么办
你的这个问题 是安装xp时把xp做成u盘出现的 原因是xp没有在根本上支持这种安装 到win7后才支持的 解决方法有以下几种 1,刻录成cd 2重新下载xp ghost版的不会出现这个问题 3证实Ul ...