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

 更新时间:2017年08月04日 14:21:30   作者:undefinedCheng  
这篇文章主要介绍了vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据),具有一定的参考价值,感兴趣的小伙伴们可以参考一下

最近使用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
 }
};

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

相关文章

  • VUE如何将方法名字作为变量进行调用

    VUE如何将方法名字作为变量进行调用

    这篇文章主要介绍了VUE如何将方法名字作为变量进行调用问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue生命周期详解

    Vue生命周期详解

    这篇文章详细介绍了Vue的生命周期,文中通过代码示例介绍的非常详细。对大家的学习有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • 如何让别人访问本地运行的vue项目

    如何让别人访问本地运行的vue项目

    这篇文章主要介绍了如何让别人访问本地运行的vue项目,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • 解决element-ui的下拉框有值却无法选中的情况

    解决element-ui的下拉框有值却无法选中的情况

    这篇文章主要介绍了解决element-ui的下拉框有值却无法选中的情况,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • 详解vue 组件注册

    详解vue 组件注册

    这篇文章主要介绍了vue 组件注册的相关资料,帮助大家更好的理解和学习vue 组件的相关知识,感兴趣的朋友可以了解下
    2020-11-11
  • 在vue中使用inheritAttrs实现组件的扩展性介绍

    在vue中使用inheritAttrs实现组件的扩展性介绍

    这篇文章主要介绍了在vue中使用inheritAttrs实现组件的扩展性介绍,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-12-12
  • vue 使用v-for进行循环的实例代码详解

    vue 使用v-for进行循环的实例代码详解

    这篇文章主要介绍了vue 使用v-for进行循环的实例代码详解,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-02
  • vue实例配置对象中el、template、render的用法

    vue实例配置对象中el、template、render的用法

    这篇文章主要介绍了vue实例配置对象中el、template、render的用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • vue watch中如何获取this.$refs.xxx节点

    vue watch中如何获取this.$refs.xxx节点

    这篇文章主要介绍了vue watch中获取this.$refs.xxx节点的方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • 误引用vuex-persistedstate导致用户信息无法清除问题及解决

    误引用vuex-persistedstate导致用户信息无法清除问题及解决

    这篇文章主要介绍了误引用vuex-persistedstate导致用户信息无法清除问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04

最新评论