vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)


Posted in Javascript onAugust 04, 2017

最近使用vue-cli做了一个小小的项目,在项目中需要使用vue-resource来与后台进行数据交互,所以我使用了本地json数据来模仿后台获取数据的流程。

至于vue-resource的安装和json的准备我就不赘述了、、、

下面是操作方法:

1、首先介绍一下项目的结构:将本地的json文件放在最外层和index.html在一起,姑且叫做data.json。

我的json数据文件大概如此:

{
 "seller": {
   "name": "粥品香坊(回龙观)",
   "description": "蜂鸟专送",
   "bulletin": "会指定餐饮服务商。",
   "avatar": "http://static.galileo.xiaojukeji.com/static/tms/seller_avatar_256px.jpg",
 },
 "goods": [
   {
    "name": "热销榜",
    "type": -1
   },
   {
    "name": "热销榜",
    "type": -1
   }
 ],
 "ratings": [
  {
   "username": "3******c",
   "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
   "recommend": [
    "南瓜粥",
    "皮蛋瘦肉粥"
   ]
  },
  {
   "username": "2******3",
   "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
   "recommend": [
    "扁豆焖面"
   ]
  }
 ]
}

2、接着在build的dev-server.js中进行加入代码:

//模拟服务器返回数据--开始
var appData = require('../data.json');
var seller = appData.seller;
var goods = appData.goods;
var ratings = appData.ratings;

var apiRoutes = express.Router();

apiRoutes.get('/seller', function (req, res) {
 res.json({
  errno: 0,
  data: seller
 });
});

apiRoutes.get('/goods', function (req, res) {
 res.json({
  errno: 0,
  data: goods
 });
});

apiRoutes.get('/ratings', function (req, res) {
 res.json({
  errno: 0,
  data: ratings
 });
});

app.use('/api', apiRoutes);
//模拟服务器返回数据--结束

特别注意:修改好后重新进行cnpm run dev(注意当dev-server.js和db.json改变后都需要进行该步骤)。

解释下以上代码:

1》首先请求根目录下的data.json文件,获取到文件内容并将其赋值给appData变量,然后获取其中的各个字段数据,分别定义变量seller、goods,ratings来赋值。

2》之后,通过express提供的Router对象及其一些方法(这里用的get方法)来设置接口(请求路径)以及请求成功后的回调函数来处理要返回给请求端的数据。(errno这个类似以js请求中的code值)

3》最后,我们要“使用”这个Router对象,为了统一管理api接口,我们在要请求的路由前边都加上‘api/'来表明这个路径是专门用来提供api数据的。在这个“接口”中,当我们访问“http://localhost:8080/api/sites”路径的时候,就会返回db.json里的sites对象给我们。

3、使用resouce获取这些数据,并使用

export default{
 data () {
  return {
   seller: {}
  };
 },
 created () {
  this.$http.get('/api/seller').then((response) => {
   // console.log(response);
   response = response.body;
   const ERR_OK = 0;
   if (response.errno === ERR_OK) {
    let data = response.data;
    console.log(data);
   }
  });
 },
 components: {
  'v-header': header
 }
};

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
解决js中window.open弹出的是上次的缓存页面问题
Dec 29 Javascript
Javascript中拼接大量字符串的方法
Feb 05 Javascript
JQuery实现级联下拉框效果实例讲解
Sep 17 Javascript
javascript学习指南之回调问题
Apr 23 Javascript
深入浅析Bootstrap列表组组件
May 03 Javascript
ES6新特性之解构、参数、模块和记号用法示例
Apr 01 Javascript
vue元素实现动画过渡效果
Jul 01 Javascript
p5.js实现斐波那契螺旋的示例代码
Mar 22 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
Sep 28 Javascript
微信小程序+腾讯地图开发实现路径规划绘制
May 22 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
May 09 Javascript
html中创建并调用vue组件的几种方法汇总
Nov 17 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 #jQuery
vue修改vue项目运行端口号的方法
Aug 04 #Javascript
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
Aug 04 #Javascript
微信小程序 本地图片按照屏幕尺寸处理
Aug 04 #Javascript
Javascript实现跨域后台设置拦截的方法详解
Aug 04 #Javascript
微信小程序 五星评分的实现实例
Aug 04 #Javascript
JavaScript中in和hasOwnProperty区别详解
Aug 04 #Javascript
You might like
?生?D片??C字串
2006/12/06 PHP
PHP 字符串分割和比较
2009/10/06 PHP
PHP中图片等比缩放的实例
2013/03/24 PHP
根据中文裁减字符串函数的php代码
2013/12/03 PHP
使用swoole扩展php websocket示例
2014/02/13 PHP
php实现的网页版剪刀石头布游戏示例
2016/11/25 PHP
php使用正则表达式获取字符串中的URL
2016/12/29 PHP
javascript知识点收藏
2007/02/22 Javascript
javascript 折半查找字符在数组中的位置(有序列表)
2010/12/09 Javascript
jqPlot 基于jquery的画图插件
2011/04/26 Javascript
JS教程:window.location使用方法的区别介绍
2013/10/04 Javascript
ExtJS[Desktop]实现图标换行示例代码
2013/11/17 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
2014/09/23 Javascript
基于jquery实现人物头像跟随鼠标转动
2015/08/23 Javascript
JS获取url参数、主域名的方法实例分析
2016/08/03 Javascript
js实现砖头在页面拖拉效果
2020/11/20 Javascript
js获取地址栏中传递的参数(两种方法)
2017/02/08 Javascript
详解express与koa中间件模式对比
2017/08/07 Javascript
深入理解Vue2.x的虚拟DOM diff原理
2017/09/27 Javascript
详解微信小程序网络请求接口封装实例
2019/05/02 Javascript
django js 实现表格动态标序号的实例代码
2019/07/12 Javascript
Python中os.path用法分析
2015/01/15 Python
python学习必备知识汇总
2017/09/08 Python
Python数据分析之双色球基于线性回归算法预测下期中奖结果示例
2018/02/08 Python
Python制作exe文件简单流程
2019/01/24 Python
使用 css3 transform 属性来变换背景图的方法
2019/05/07 HTML / CSS
使用Canvas操作像素的方法
2018/06/14 HTML / CSS
应用化学专业职业生涯规划书
2013/12/31 职场文书
一份婚庆公司创业计划书
2014/01/11 职场文书
竞聘自述材料
2014/08/25 职场文书
装配出错检讨书
2014/09/23 职场文书
股份转让协议书范本
2015/01/27 职场文书
个人总结格式范文
2015/03/09 职场文书
采购部2015年度工作总结
2015/07/24 职场文书
省级三好学生主要事迹材料
2015/11/03 职场文书
SpringBoot读取Resource下文件的4种方法
2021/07/02 Java/Android