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 相关文章推荐
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
Aug 15 Javascript
JavaScript 函数惰性载入的实现及其优点介绍
Aug 12 Javascript
JavaScript语言对Unicode字符集的支持详解
Dec 30 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
Apr 27 Javascript
JavaScript基本语法讲解
Jun 03 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
Oct 13 Javascript
纯JS实现表单验证实例
Dec 24 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
Feb 17 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
Dec 09 Javascript
Vue3.0 响应式系统源码逐行分析讲解
Oct 14 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
Feb 09 Javascript
微信小程序云函数添加数据到数据库的方法
Mar 04 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
无线电广播与收音机发展的历史回眸
2021/03/02 无线电
水质对咖图啡风味的影响具体有哪些
2021/03/03 冲泡冲煮
基于PHP静态类的原罪详解
2013/05/06 PHP
PHP判断手机是IOS还是Android
2015/12/09 PHP
YII Framework框架教程之安全方案详解
2016/03/14 PHP
php HTML无刷新提交表单
2016/04/05 PHP
PHP实现上传多文件示例代码
2017/02/20 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
firefox和IE系列的相关区别整理 以备后用
2009/12/28 Javascript
JQuery $.each遍历JavaScript数组对象实例
2014/09/01 Javascript
javascript基本类型详解
2014/11/28 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
2016/03/31 Javascript
Ionic如何实现下拉刷新与上拉加载功能
2016/06/03 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
2016/08/23 Javascript
js 获取元素所有兄弟节点的实现方法
2016/09/06 Javascript
AngularJS入门教程之Cookies读写操作示例
2016/11/02 Javascript
学习vue.js条件渲染
2016/12/03 Javascript
nodejs基础应用
2017/02/03 NodeJs
使用vue.js写一个tab选项卡效果
2017/03/25 Javascript
JS简单实现数组去重的方法示例
2017/03/27 Javascript
详解Vue 开发模式下跨域问题
2017/06/06 Javascript
React Native实现进度条弹框的示例代码
2017/07/17 Javascript
vue.js实现简单轮播图效果
2017/10/10 Javascript
nodejs基础之常用工具模块util用法分析
2018/12/26 NodeJs
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
2020/02/03 Javascript
pandas 转换成行列表进行读取与Nan处理的方法
2018/10/30 Python
python3.6 如何将list存入txt后再读出list的方法
2019/07/02 Python
Python-Flask:动态创建表的示例详解
2019/11/22 Python
Windows 平台做 Python 开发的最佳组合(推荐)
2020/07/27 Python
详解python 内存优化
2020/08/17 Python
css3发光搜索表单分享
2014/04/11 HTML / CSS
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
2017/07/24 HTML / CSS
美国女鞋品牌:naturalizer(娜然)
2016/08/01 全球购物
办公室文员岗位职责范本
2014/06/12 职场文书
2015年校长新年寄语
2014/12/08 职场文书
mysql sql常用语句大全
2022/06/21 MySQL