vue2.0:(二)、mock数据
什么是mock数据呢?很多情况下,后台的搭建比起前端来说要麻烦的多,所以,常常是前端写好了页面以后后台接口却没有写好,但是在一个项目中,接口调试确实是最浪费时间的,所以,往往前端需要自己模拟数据。
第一步:这里有一个data.json,用来放置我们模拟的数据:
其格式类似于:
但是最后具体是什么样的数据格式,你还要根据页面的结构,信息和后台来决定。
第二步:我们需要配置来获取到接口里面的数据:
你会在build 文件夹里面找到dev-server.js,打开后,有一个地方有app.express();

接下来我们可以写如下代码:
var app = express()
var appData = require('../data.json');
var seller = appData.seller;
var goods = appData.goods;
var ratings = appData.ratings;
var apiRouter = express.Router();
apiRouter.get('/seller',function (req, res){
res.json({
errno: 0,
data: seller
})
});
apiRouter.get('/goods',function (req, res){
res.json({
errno: 0,
data: goods
})
});
apiRouter.get('/ratings',function (req, res){
res.json({
errno: 0,
data: ratings
})
});
app.use('/api', apiRouter);
var compiler = webpack(webpackConfig)
第三步:现在我们可以启动服务,打开localhost,来测一下我们的api 是否配置成功,如果,打开后,如下的格式是用了google 的jsonview插件将其格式化了。

vue2.0:(二)、mock数据的更多相关文章
- vue2.0 父子组件数据传递prop
vue的一个核心概念就是组件,而组件实例的作用域是孤立的,所以组件之间是不能直接引用其他组件的数据的.极端点举例来说,就是可以在同一个项目中,每一个组件内都可以定义相同名称的数据. data () { ...
- Vue2.0组件间数据传递
Vue1.0组件间传递 使用$on()监听事件: 使用$emit()在它上面触发事件: 使用$dispatch()派发事件,事件沿着父链冒泡: 使用$broadcast()广播事件,事件向下传导给所有 ...
- 关于vue2.0获取后端数据
一.通过vue-rource完成异步请求: 其用法跟ajax用法差不多,也就是改变了一些语法格式.从获取路径到值的获取都是一样的,但是有一点是不同的就是ajax获取到的数据会自动转成json格式,而v ...
- vue2.0中模拟数据的配置
在开发过程中,有时候接口跟不上我们的进度,我们要测试,就需要自测. 现在vue已经升级到2.0版本了,早期在vue构建工程文件在build里面有dev-server.js,但是后来构建去除了该文件集成 ...
- vue2.0 兄弟组件数据传递方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue2.0总结———vue使用过程常见的一些问题
Vue目前的的开发模式主要有两种:1.直接页面级的开发,script直接引入Vue2.工程性开发,webpack+loader或者直接使用脚手架工具Vue-cli,里面的文件都配置好了 webpack ...
- 用Vue2.0实现简单的分页及跳转
用Vue2.0实现简单的分页及跳转 2018年07月26日 20:29:51 Freya_yyy 阅读数 3369 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog ...
- 从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之十二 || 三种跨域方式比较,DTOs(数据传输对象)初探
更新反馈 1.博友@落幕残情童鞋说到了,Nginx反向代理实现跨域,因为我目前还没有使用到,给忽略了,这次记录下,为下次补充.此坑已填 2.提示:跨域的姊妹篇——<三十三║ ⅖ 种方法实现完美跨 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十三║Vue实战:Vuex 其实很简单
前言 哈喽大家周五好,马上又是一个周末了,下周就是中秋了,下下周就是国庆啦,这里先祝福大家一个比一个假日嗨皮啦~~转眼我们的专题已经写了第 23 篇了,好几次都坚持不下去想要中断,不过每当看到群里的交 ...
随机推荐
- 深度学习网络结构中超参数momentum了解
训练网络时,通常先对网络的初始权值按照某种分布进行初始化,如:高斯分布.初始化权值操作对最终网络的性能影响比较大,合适的网络初始权值能够使得损失函数在训练过程中的收敛速度更快,从而获得更好的优化结果. ...
- SQL Server中查询CPU占用高的SQL语句
SQL Server中查询CPU占用高的情况,会用到sys.sysprocesses ,dm_exec_sessions ,dm_exec_requests 一.查看当前的数据库用户连接有多少 USE ...
- linux 中的局部变量、全局变量、shell 变量的总结
系统局部变量和全局变量 一.变量分类局部变量和环境变量,局部变量只适用于当前shell,而环境变量是全局的,它适用于所有当前shell以及其派生出来的任意子进程,有些变量是用户创建的,其他的则是专用 ...
- bzoj4455
容斥原理+dp 首先考虑暴力做法,我们希望点和点一对一,那么自然要保存当前点集的状态,需要状压,据说要3^n,那么自然不行 考虑容斥原理,刚才一一对应的限制太强了,我们不要一一对应,只要满足边存在就行 ...
- python os.system重定向stdout到变量 ,同时获取返回值
Python执行系统命令的方法 os.system(),os.popen(),commands 最近在做那个测试框架的时候发现 Python 的另一个获得系统执行命令的返回值和输出的类. 最开始的时候 ...
- roguelike地图的随机生成算法
如果要想自己设计一个roguelike游戏,那么需要你有一个随机地图生成,我在indienova上看到一篇文章,描述了一个roguelike算法,然后自己用unity实现了一个下. 原文地址:随机生成 ...
- IsPostBack深入探讨
1IsPostBack介绍 IsPostBack是Page类有一个bool类型的属性,用来判断针对当前Form的请求是第一次还是非第一次请求.当IsPostBack=true时表示非第一次请求,我们称 ...
- c# 字符串大小写转换
//小转大 string lower = "converted from lowercase"; Console.WriteLine(lower.ToUpper()); //大转小 ...
- QRegExp解析
正则表达式(regular expression)就是用一个“字符串”来描述一个特征,然后去验证另一个“字符串”是否符合这个特征.比如 表达式“ab+” 描述的特征是“一个 'a' 和 任意个 'b' ...
- extern使用方法总结!(转)
extern 在源文件A里定义的函数,在其它源文件里是看不见的(即不能访问).为了在源文件B里能调用这个函数,应该在B的头部加上一个外部声明: extern 函数原型: 这样,在源文件B里也可以调 ...