Vue.js的探索之路–知乎日报demo(一)

作者: Jancaelm 分类: Vue.js 发布时间: 2017-08-15 16:12

对一个新工具的最好实践–那就是做项目了.
通过今日对vue.js的学习,决定先从一个简单的demo开始–知乎日报.
本次使用的vux的panel组件进行快速布局,自己只需要使用vue的异步请求(axios)从api取回所需数据进行渲染即可完成任务.
先说说本次遇到的坑:

  1. 数据赋值的问题:
    api返回的数据是一个object对象,含有各种不同意义的键值对.
    而我们所需的数据格式是:
    src:”,
    title:”
    返回的数据中并没有直接声明src 而是放在了images数组中,我的解决方法:

    for(let images of resdata.stories){
       var reslist = images; //包含图片的条目,是对象
       reslist['src']=reslist.images[0];
       this.list.push(reslist);
    }
    

    通过循环查找含有images图像的结果,并且新声明一个结果集,再给这个结果集新增一个’src’属性,并使用images数组中的值来进行赋值.
    最后使用

    this.list.push(reslist);

    将所需的结果集推入list列表集中即可渲染.

  2. 知乎日报api中对图像的链接进行了防盗链处理,在经过一番查找得到了解决方案:
    在头文件中添加

    具体方法,在index.html的head中新增一行

      
    

以上就是本次初次demo的踩坑,这个demo尚不完善,还需

  1. 增加点击可访问文章的功能
  2. 增加一直下滑可以显示更早前的知乎日报

下面附上效果截图:

发表评论

电子邮件地址不会被公开。 必填项已用*标注