vzhihu-daily

基于vue2.x全家桶实现的知乎日报

版权声明:

App调用知乎日报的接口，仅供学习练习所用，涉及到的知乎相关内容归知乎所有

技术栈

vue2.x --项目前端核心框架

vuex --vue状态管理

vue-router --vue路由控制

axios --vue中ajax实现,官方推荐,vue-resource已停止更新

less --动态样式语言

es6 --js新标准

webpack --打包工具

vue-cli --vue项目构建工具

iconfont --字体图标样式文件

normalize.css --css标准化文件，对html元素预处理

主要使用了vue2.x全家桶，vue路由控制跳转以及访问页面控制，用vuex管理状态，样式方面使用less来布局，用iconfont阿里图片库提供素材，用axios实现与接口通信

难点:

1.知乎api的调用，这里参考了cccyb的知乎日报中开发环境调用接口的方法

具体为在config/index.js里dev下配置vue-cli的proxyTable参数,以解决开发环境下跨域访问问题

   
      proxyTable: {
      '/api':{
        target:'http://news-at.zhihu.com',
        changeOrigin:true,
        pathRewrite:{
          '^/api':'/api/4'
        }

      },
      '/api7':{
        target:'http://news-at.zhihu.com',
        changeOrigin:true,
        pathRewrite:{
          '^/api7':'/api/7'
        }
      }
     

在正式环境中，应该考虑为客户端访问服务器的api，然后服务器通过代理，讲要访问的api转换为外网接口api，从而解决数据获取的问题，或者

考虑CROS方案来实现跨域获取数据

2.知乎Api的开发文档参考的是izzyleung对于知乎api的分析，感谢izzyleung提供了api详情以让我专注于移动端开发

这里是izzyleung关于知乎Api的分析

3.关于知乎获取图片的问题，如果直接访问会返回403 ，这是知乎防盗链机制，在参考cccyb的知乎日报时，用了以下函数替换连接来间接访问知乎的图片，

但依然存在有时加载过慢的情况，会在后续改善

  
        attachImgUrl(url){
           if(url!=undefined){
             //将图片链接替换，直接访问知乎图片会返回403，这是对应知乎防盗链的操作
             return url.replace(/http\w{0,1}:\/\/p/g, 'https://images.weserv.nl/?url=p');
           }
         },
   

说明:

现阶段主要实现通过vue来展现一些从知乎日报中获取的内容数据和评论数据，还有很多地方没有实现，会在后续的版本中完善实现

现在的效果图如下:

项目结构:

(待补充)

By KoimeijiLogi

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

For a detailed explanation on how things work, check out the guide and docs for vue-loader.