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系统时,你 ...
随机推荐
- C# winform截图、web Cropper图片剪切、上传
今天又来一弹,写了个小功能,windows 桌面截图,web剪切图片上传的功能. 废话不多说,直接上图: 1.winform 截屏功能 图1 主窗体 点击全屏截图,就已经全屏截图了,截图后,图片保存在 ...
- C# 中多态和重载的区别
一.多态性意味着有多重形式. 在面向对象编程范式中,多态性往往表现为"一个接口,多个功能". using System; using System.Collections.Gene ...
- 限制html文本框input只能输入数字和小数点
代码: <input type="text" class="txt" name="qty" value="" on ...
- java—ThreadLocal模式与OSIV模式(53)
ThreadLocal: 维护线程局部的变量. ThreadLocal 不是线程.它就是一个Map.可以保存对象. 它保存的对象,只与当前线程相关. 当一个线程还没有运行完成时,如果不想传递数据,可以 ...
- NOIp2018提高组游记
Day1 T1 积木大赛 NOIp2013D2T1.....看到的时候我还以为我记错了,以为原题是一次可以随便加,这题只能加一,出考场后查了下发现一模一样. #include <iostream ...
- jquery源码解析:jQuery数据缓存机制详解1
jQuery中有三种添加数据的方法,$().attr(),$().prop(),$().data().但是前面两种是用来在元素上添加属性值的,只适合少量的数据,比如:title,class,name等 ...
- mxonline实战9,我要学习功能块,机构详情展示,收藏功能
对应github地址:第9天 一. 实现我要学习功能
- 使用java执行ffmpeg命令进行推流操作
视频网站中提供的在线视频播放功能,播放的都是FLV格式的文件,它是Flash动画文件,可通过Flash制作的播放器来播放该文件.项目中用制作的player.swf播放器. 多媒体视频处理工具FFmpe ...
- LeetCode 101 对称二叉树的几种思路(Python实现)
对称二叉树 给定一个二叉树,检查它是否是镜像对称的. 例如,二叉树 [1,2,2,3,4,4,3] 是对称的. 1 / \ 2 2 / \ / \3 4 4 3 但是下面这个 [1,2,2 ...
- day01 --class --home
# 1.简述变量命名规范# 2.name = input(“>>>”) name变量是什么数据类型?# 3.if条件语句的基本结构? # 4.用print打印出下面内容:# ⽂能提笔 ...