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 相关文章推荐
JSON.stringify 语法实例讲解
Mar 14 Javascript
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
Apr 15 Javascript
Javascript倒计时页面跳转实例小结
Sep 11 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
Jan 18 Javascript
JavaScript动态数量的文件上传控件
Nov 18 Javascript
微信小程序 弹窗自定义实例代码
Mar 08 Javascript
angularjs中回车键触发某一事件的方法
Apr 24 Javascript
BootStrap表单控件之文本域textarea
May 23 Javascript
angular中使用Socket.io实例代码
Jun 03 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
Vue中的异步组件函数实现代码
Jul 20 Javascript
vue与iframe之间的信息交互的实现
Apr 08 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
POSIX 风格和兼容 Perl 风格两种正则表达式主要函数的类比(preg_match, preg_replace, ereg, ereg_replace)
2010/10/12 PHP
ThinkPHP3.1基础知识快速入门
2014/06/19 PHP
PHP模板引擎Smarty内建函数详解
2016/04/11 PHP
php中的抽象方法和抽象类
2017/02/14 PHP
form自动提交实例讲解
2017/07/10 PHP
PHP实现可精确验证身份证号码的工具类示例
2018/05/31 PHP
js 加载时自动调整图片大小
2008/05/28 Javascript
JS逆序遍历实现代码
2014/12/02 Javascript
jQuery实现行文字链接提示效果的方法
2015/03/10 Javascript
javascript模拟命名空间
2015/04/17 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
2015/09/27 Javascript
Jquery使用小技巧汇总
2015/12/29 Javascript
AngularJs 国际化(I18n/L10n)详解
2016/09/01 Javascript
ES6新特征数字、数组、字符串
2016/10/01 Javascript
JS使用setInterval实现的简单计时器功能示例
2018/04/19 Javascript
vue-router中scrollBehavior的巧妙用法
2018/07/09 Javascript
vue2过滤器模糊查询方法
2018/09/16 Javascript
通过js给网页加上水印背景实例
2019/06/17 Javascript
ES6基础之字符串和函数的拓展详解
2019/08/22 Javascript
JS实现斐波那契数列的五种方式(小结)
2020/09/09 Javascript
[01:32]寻找你心中的那团火 DOTA2 TI9火焰传递活动今日开启
2019/05/16 DOTA
python基础梳理(一)(推荐)
2019/04/06 Python
python ChainMap 合并字典的实现步骤
2019/06/11 Python
Pytorch中的variable, tensor与numpy相互转化的方法
2019/10/10 Python
Pytorch 实现sobel算子的卷积操作详解
2020/01/10 Python
重写django的model下的objects模型管理器方式
2020/05/15 Python
利用Python如何画一颗心、小人发射爱心
2021/02/21 Python
Python爬虫实例之2021猫眼票房字体加密反爬策略(粗略版)
2021/02/22 Python
纯CSS实现的大小渐变、渐远效果
2014/04/15 HTML / CSS
购买中国最好的电子产品:Geekbuying
2018/03/13 全球购物
劲霸男装广告词改编版
2014/03/21 职场文书
党性心得体会
2014/09/03 职场文书
2014年出纳工作总结与计划
2014/12/09 职场文书
安徽导游词
2015/02/12 职场文书
试用期自我评价怎么写
2015/03/10 职场文书
mybatis 获取无数据的字段不显示的问题
2021/07/15 Java/Android