vue+webpack项目中使用dev-server搭建虚拟服务器,请求json文件数据,实现前后台分离开发
在项目开发中,前后台分离,做了假数据,项目使用vue2.0重构,后台也推到重来了,为了不耽误开发进程,我做了虚拟的数据请求,使用vue-cli脚手架搭建的项目文件中dev-server搭建虚拟api请求,访问自己mock的假数据虚拟请求后台的模式,具体做法如下
在build/dev-server.js文件中
在var app = express()这个实例的下面添加如下代码
// 本地json-server服务器搭建代码
// 引入数据库文件
var appData = require('../mock.json')
// 引入数据库
var getBoardList = appData.getBoardList
var apiRoutes = express.Router()
// 使用api的方法来创建连接时候的请求
apiRoutes.post('/getBoardList', function (req, res) {
res.json({
errno: ,
data: getBoardList
});
})
// 调用api
app.use('/api', apiRoutes)
其中
appData 依赖的mock.json文件是自己mock的假数据的文件,根据前后台需求自己mock或者使用mock.js制作假数据
数据大概格式如下
{
"getBoardList": {
"logn":"0",
"msg": {
"name": "精灵",
"sign": "一只可爱的小精灵",
"src": "",
"phoneNub": "",
"six": "未知",
"job": "私人金融专家",
"add": "北京市 朝阳区 将台"
}
}
}
getBoardList是一个接口,
var getBoardList = appData.getBoardList 就是在appData定义了这一个接口数据。
var apiRoutes = express.Router() 是创建了一个api的路由,apiRoutes.post是创建一个post接口,这个post接口有一个req和一个res参数,分别执行请求和返回,当返回的时候会给我们一个
json,这个json包括一个状态码errno和返回的数据data(data指向了接口数据getBoardList)。 然后当我们调用api的时候app.use('/api', apiRoutes),就能正常使用这个服务了 这里我使用了vue2.0推荐的axios请求数据,代码如下
this.$http.post('/api/getBoardList')
.then(function (response) {
console.log(response.data.data);
alert('成功了');
})
.catch(function (code) {
alert('失败了');
console.log(code);
});
打开浏览器的控制台的network,你会发现已经产生了网络请求
同时,数据也愉快的返回回来了:
如果想添加接口数据,继续在dev-server.js中添加就可以了,post,get等等都可以。
注意,每次更改dev-server.js后需要重新npm run dev启动项目
vue+webpack项目中使用dev-server搭建虚拟服务器,请求json文件数据,实现前后台分离开发的更多相关文章
- Vue+webpack项目中,运行报错Cannot find module 'chalk'的处理
刚开始用vue + webpack新建项目,在github上下载了一个示例,输入npm init >>>npm run dev 后报错 Cannot find module 'cha ...
- vue+webpack项目中px2rem的例子
项目环境搭建此处省略,不再赘述,需要的请查阅相关资料. 本篇只介绍,如果在vue+webpack的项目中配置,把px自动转为rem 第一步安装 npm install postcss-px2r ...
- Vue+webpack项目中实现跨域的http请求
目前Vue项目中对json数据的请求一般使用两个插件vue-resource和axios, 但vue-resource已经不再维护, 而axios是官方推荐的且npm下载量已经170多万,github ...
- 如何在vue && webpack 项目中的单文件组件中引入css
引入方式很简单,就是在script下使用require()即可. 因为import 是import...from 的形式,所以是不需要的. <script> import {mapStat ...
- vue+webpack项目打包后背景图片加载不出来问题解决
在做VUE +的WebPack脚手架项目打包完成后,在IIS服务器上运行发现项目中的背景图片加载不出来检查项目代码发现是因为CSS文件中,背景图片引用的路径问题;后来通过修改配置文件,问题终于解决了, ...
- Vue+Typescript项目中使用echarts
方案一:推荐 在typescript+Vue的项目中引用echarts,为了加强引用,引入echarts和@types/echarts两个包,一个是工程依赖,一个是声明依赖. npm install ...
- 在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理
在一些内部OA或者流转的文件,或者给一些客户的报价文件.合同,或者一些医院出示的给保险机构的病历资料等,有时候可能都希望快速的使用电子签章的处理方式来给文件盖上特定的印章,本篇随笔介绍基于Vue&am ...
- 在基于ABP框架的前端项目Vue&Element项目中采用电子签名的处理
在前面随笔介绍了<在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理>的处理,有的时候,我们在流程中或者一些文件签署的时候,需要签上自己的大名,一 ...
- 用开源 ASP.NET MVC 程序 Bonobo Git Server 搭建 Git 服务器(转)
用开源 ASP.NET MVC 程序 Bonobo Git Server 搭建 Git 服务器 现在不用Git,都不好意思说自己是程序员. 当你想用Git,而源代码服务器是Windows系统时,你 ...
随机推荐
- shell中调用jenkins API批量运行历史任务
shell中调用jenkins API批量运行jenkins带参数的任务: #!/bin/sh #startdate=20150127 startdate=20150201 while [ " ...
- UWP开发入门(五)——自定义Panel
各位好,终于讲到自定义Panel了.当系统自带的几个Panel比如Gird,StackPanel,RelativePanel不能满足我们的特定要求时(其实不常见啦),自定义Panel就显得非常必要,而 ...
- django系列5.3--ORM数据库的多表操作
首先来创建一个模型,数据库的关系就清楚了 models.py from django.db import models # Create your models here. class Author( ...
- linux网络流量实时监控工具之iptraf 【个人比较喜欢用的流量监控软件】
linux网络流量实时监控工具之iptraf IPTraf是一个网络监控工具,功能比nload更强大,可以监控所有的流量,IP流量,按协议分的流量,还可以设置过滤器等,如下图 对监控网络来说,这个更适 ...
- python 项目自动生成 requirements.txt 文件
生成 requirements.txt 文件的目的: 安装 pthon 项目时需要把此项目所有依赖的第三方包安装完成.项目依赖的第三方包统一放到 requirements.txt 文件中即可. 怎么自 ...
- java的堆,栈,静态代码区 详解
面试中,有家公司做数据库开发的,对内存要求比较高,考到了这个 一:在JAVA中,有六个不同的地方可以存储数据: 1. 寄存器(register). 这是最快的存储区,因为它位于不同于其他存储区的地方— ...
- javascript解决getElementById()的bug以及getElementsByClassName的兼容性写法
<a name="target" href="#">链接</a> <p id="target">文字说明 ...
- 【性能分析】使用Intel VTune Amplifier
本文转自 https://software.intel.com/zh-cn/blogs/2010/11/10/amplxe-cl/版权归原作者所有,如原作者有任何不允许转载之理由,本文将自行删除. I ...
- delphi 10.2 ---treeview 基本用法
unit Unit2; interface uses Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, System ...
- react onclick传递参数
最近在做react项目的时候,被一个小问题绊了一脚,记录一下 onClick 传入参数 onClick={e=>{this.Mallclose(e,index)} onClick={this.M ...