在项目开发中,前后台分离,做了假数据,项目使用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文件数据,实现前后台分离开发的更多相关文章

  1. Vue+webpack项目中,运行报错Cannot find module 'chalk'的处理

    刚开始用vue + webpack新建项目,在github上下载了一个示例,输入npm init >>>npm run dev 后报错 Cannot find module 'cha ...

  2. vue+webpack项目中px2rem的例子

    项目环境搭建此处省略,不再赘述,需要的请查阅相关资料. 本篇只介绍,如果在vue+webpack的项目中配置,把px自动转为rem 第一步安装   npm install   postcss-px2r ...

  3. Vue+webpack项目中实现跨域的http请求

    目前Vue项目中对json数据的请求一般使用两个插件vue-resource和axios, 但vue-resource已经不再维护, 而axios是官方推荐的且npm下载量已经170多万,github ...

  4. 如何在vue && webpack 项目中的单文件组件中引入css

    引入方式很简单,就是在script下使用require()即可. 因为import 是import...from 的形式,所以是不需要的. <script> import {mapStat ...

  5. vue+webpack项目打包后背景图片加载不出来问题解决

    在做VUE +的WebPack脚手架项目打包完成后,在IIS服务器上运行发现项目中的背景图片加载不出来检查项目代码发现是因为CSS文件中,背景图片引用的路径问题;后来通过修改配置文件,问题终于解决了, ...

  6. Vue+Typescript项目中使用echarts

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

  7. 用开源 ASP.NET MVC 程序 Bonobo Git Server 搭建 Git 服务器(转)

    用开源 ASP.NET MVC 程序 Bonobo Git Server 搭建 Git 服务器   现在不用Git,都不好意思说自己是程序员. 当你想用Git,而源代码服务器是Windows系统时,你 ...

  8. win10用filezilla server搭建ftp服务器一直无法访问

    win10用filezilla server搭建ftp服务器一直无法访问?? 是防火墙导致的,防火墙中允许filezilla server程序的

  9. Windows 2008 Server搭建Radius服务器的方法

    原地址:http://service.tp-link.com.cn/detail_article_1113.html (图拷贝不过来) Windows 2008 Server搭建Radius服务器的方 ...

随机推荐

  1. 动手实验iptables的NAT功能实现流量穿透

    1.NAT和iptables理论见: http://lustlost.blog.51cto.com/2600869/943110 2.引子 近期,有同事抱怨说数据入库时,由于数据库所在的服务器只有内网 ...

  2. Java Session超时设置

    1.jsp页面直接设置                                                                        ); 2.web.xml设置,覆盖 ...

  3. virsh常用命令

    必须启动libvirtd,才能用virsh查看kvm后台. # systemctl start libvirtd 查看网络 # virsh net-list 启动default网络 # virsh n ...

  4. sharepoint SPFolder的使用

    转:http://blog.csdn.net/pclzr/article/details/7591731 SPFolder是SharePoint对象模型中文件夹相关的类,它的使用方法相对比较简单.获取 ...

  5. 三个数从小到大排序—南阳acm

    问题描述: 现在要写一个程序,实现给三个数排序的功能     输入        输入三个正整数    输出       给输入的三个正整数排序       样例输入 20 7 33      样例输 ...

  6. mac下mysql5.6字符集设置

    http://geeksblog.cc/2016/05/28/mac-mysql-unicode/   mac下mysql5.6字符集设置: 在mac下设置mysql5.6字符集时踩过的坑,百分百保证 ...

  7. ZOJ 3940 Modulo Query

    0--M对某个数字取模,相当于把0--M区间进行切割,每次暴力切割一下.结果的算的时候二分一下即可... 看了官方题解才会... #include<cstdio> #include< ...

  8. Nginx 限流

    原文链接:http://colobu.com/2015/10/26/nginx-limit-modules/?utm_source=tuicool&utm_medium=referral 电商 ...

  9. 美丽的Java图表类库

    摘要 在使用java做后台站点的开发张,图表和报表功能都是不可或缺 的.本文推荐了8款最精彩实用的Java图表应用,大部分图表应用的功能都类似,主要在于界面的美观性和使用的灵活性上有一点高低. 正文 ...

  10. AJAX服务器返回数据 连接数据库查询数据

    getcustomer.asp" 中的源代码负责对数据库进行查询,然后用 HTML 表格返回结果: <% response.expires=-1 sql="SELECT * ...