什么是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数据的更多相关文章

  1. vue2.0 父子组件数据传递prop

    vue的一个核心概念就是组件,而组件实例的作用域是孤立的,所以组件之间是不能直接引用其他组件的数据的.极端点举例来说,就是可以在同一个项目中,每一个组件内都可以定义相同名称的数据. data () { ...

  2. Vue2.0组件间数据传递

    Vue1.0组件间传递 使用$on()监听事件: 使用$emit()在它上面触发事件: 使用$dispatch()派发事件,事件沿着父链冒泡: 使用$broadcast()广播事件,事件向下传导给所有 ...

  3. 关于vue2.0获取后端数据

    一.通过vue-rource完成异步请求: 其用法跟ajax用法差不多,也就是改变了一些语法格式.从获取路径到值的获取都是一样的,但是有一点是不同的就是ajax获取到的数据会自动转成json格式,而v ...

  4. vue2.0中模拟数据的配置

    在开发过程中,有时候接口跟不上我们的进度,我们要测试,就需要自测. 现在vue已经升级到2.0版本了,早期在vue构建工程文件在build里面有dev-server.js,但是后来构建去除了该文件集成 ...

  5. vue2.0 兄弟组件数据传递方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Vue2.0总结———vue使用过程常见的一些问题

    Vue目前的的开发模式主要有两种:1.直接页面级的开发,script直接引入Vue2.工程性开发,webpack+loader或者直接使用脚手架工具Vue-cli,里面的文件都配置好了 webpack ...

  7. 用Vue2.0实现简单的分页及跳转

    用Vue2.0实现简单的分页及跳转 2018年07月26日 20:29:51 Freya_yyy 阅读数 3369    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog ...

  8. 从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之十二 || 三种跨域方式比较,DTOs(数据传输对象)初探

    更新反馈 1.博友@落幕残情童鞋说到了,Nginx反向代理实现跨域,因为我目前还没有使用到,给忽略了,这次记录下,为下次补充.此坑已填 2.提示:跨域的姊妹篇——<三十三║ ⅖ 种方法实现完美跨 ...

  9. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十三║Vue实战:Vuex 其实很简单

    前言 哈喽大家周五好,马上又是一个周末了,下周就是中秋了,下下周就是国庆啦,这里先祝福大家一个比一个假日嗨皮啦~~转眼我们的专题已经写了第 23 篇了,好几次都坚持不下去想要中断,不过每当看到群里的交 ...

随机推荐

  1. Js常见的六种报错

    EvalError: raised when an error occurs executing code in eval() EvalError:当一个错误发生在()执行的代码RangeError: ...

  2. AutoIT:界面与自动化操作结合来简化日常劳动: .Net Reactor验证License,设置License,创建License,截图AutoIt自动化实现。(七)

    版本六中存在一个显著问题是: 当exe文件生存之后,运行的时候,通过consoleWrite函数打印出来的数据是无法展示出来的.这就存在一个问题:当运行失败的时候,我还是看不到任何log信息. 于是, ...

  3. Mutual information and Normalized Mutual information 互信息和标准化互信息

    实验室最近用到nmi( Normalized Mutual information )评价聚类效果,在网上找了一下这个算法的实现,发现满意的不多. 浙江大学蔡登教授有一个,http://www.zju ...

  4. c++ _宏与内联函数

    第一部分:宏为什么要使用宏呢?因为函数的调用必须要将程序执行的顺序转移到函数所存放在内存中的某个地址,将函数的程序内容执行完后,再返回到转去执行该函数前的地方.这种转移操作要求在转去执行前要保存现场并 ...

  5. Interval query

    题意: 给出数轴上的N个区间,M个询问"QUERY(a, b)", 意为[a, b]之间不相交的集合的最大数量是多少. 解法: 考虑 $O(n)$ 的贪心做法,预处理出对于每一个位 ...

  6. C++11: Multi-core Programming – PPL Parallel Aggregation Explained

    https://katyscode.wordpress.com/2013/08/17/c11-multi-core-programming-ppl-parallel-aggregation-expla ...

  7. CodeForces 359D Pair of Numbers (暴力)

    题意:给定一个正整数数组,求最长的区间,使得该区间内存在一个元素,它能整除该区间的每个元素. 析:暴力每一个可能的区间,从数组的第一个元素开始考虑,向两边延伸,设延伸到的最左边的点为l, 最右边的点为 ...

  8. E20190402-hm

    porxy n. 代理服务器; 代表权; 代理人,代替物; 委托书; enroll  v. 招收; 注册; 登记; 加入; enrollment n. 注册; 登记; 入会;

  9. HDU1598【最小生成树拓展】

    参考自 http://www.cnblogs.com/nanke/archive/2012/02/13/2350008.html PS: 没想到最小生成树的kruskal算法从小到大枚举边,然后MAX ...

  10. 51nod1459【二级最短路】

    标签说的是BFS... 太菜,不知道怎么BFS...是不是spfa写,就叫BFS...感觉不是.... 只是二级最短路的写法,直接搞就很容易了,简单题: #include <bits/stdc+ ...