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 相关文章推荐
Sample script that deletes a SQL Server database
Jun 16 Javascript
JSQL 基于客户端的成绩统计实现方法
May 05 Javascript
eclipse如何忽略js文件报错(附图)
Oct 30 Javascript
Bootstrap基本模板的使用和理解1
Dec 14 Javascript
Vue 中批量下载文件并打包的示例代码
Nov 20 Javascript
vue项目中添加单元测试的方法
Jul 21 Javascript
vue 中滚动条始终定位在底部的方法
Sep 03 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
Sep 04 Javascript
JS实现图片拖拽交换效果
Nov 30 Javascript
vue项目刷新当前页面的三种方法
Dec 04 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
Jan 03 Javascript
javascript 代码是如何被压缩的示例代码
May 06 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
PHP循环结构实例讲解
2014/02/10 PHP
php 利用socket发送HTTP请求(GET,POST)
2015/08/24 PHP
PHP使用glob方法遍历文件夹下所有文件的实例
2018/10/17 PHP
WordPress 插件——CoolCode使用方法与下载
2007/07/02 Javascript
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
2008/08/14 Javascript
js判断输入是否为正整数、浮点数等数字的函数代码
2010/11/17 Javascript
js左右弹性滚动对联广告代码分享
2014/02/19 Javascript
用javascript将数据导入Excel示例代码
2014/09/10 Javascript
JavaScript的面向对象编程基础
2015/08/13 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
2015/09/07 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
2016/07/12 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
2017/08/16 Javascript
深入浅析vue组件间事件传递
2017/12/29 Javascript
对vue 键盘回车事件的实例讲解
2018/08/25 Javascript
Bootstrap模态对话框用法简单示例
2018/08/31 Javascript
JS实现动态星空背景效果
2019/11/01 Javascript
JS实现点星星消除小游戏
2020/03/24 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
2020/04/10 Javascript
[01:32]寻找你心中的那团火 DOTA2 TI9火焰传递活动今日开启
2019/05/16 DOTA
Python ORM框架SQLAlchemy学习笔记之数据添加和事务回滚介绍
2014/06/10 Python
Python实现简易端口扫描器代码实例
2017/03/15 Python
python机器学习实战之树回归详解
2017/12/20 Python
ubuntu环境下python虚拟环境的安装过程
2018/01/07 Python
python实现蒙特卡罗方法教程
2019/01/28 Python
Python使用pymongo库操作MongoDB数据库的方法实例
2019/02/22 Python
python 上下文管理器及自定义原理解析
2019/11/19 Python
Python selenium自动化测试模型图解
2020/04/15 Python
HTML5几个设计和修改的页面范例分享
2015/09/29 HTML / CSS
联想智利官方网站:Lenovo Chile
2020/06/03 全球购物
中学教师自我鉴定
2014/02/07 职场文书
培训班开班仪式主持词
2014/03/28 职场文书
简单租房协议书
2014/04/09 职场文书
2014年环保局工作总结
2014/12/11 职场文书
干部理论学习心得体会
2016/01/21 职场文书
怎样写好演讲稿题目?
2019/08/21 职场文书
基于Apache Hudi在Google云构建数据湖平台的思路详解
2022/04/07 Servers