Vue2.5知乎日报单页应用
Switch branches/tags
Nothing to show
Clone or download
Latest commit 4906a8d Nov 14, 2018
Permalink
Failed to load latest commit information.
build rewrite homepage Dec 22, 2017
config 修改端口 Jun 5, 2017
demogif 重新上传gif图 Jun 21, 2017
src update May 12, 2018
static rewrite homepage Dec 22, 2017
.babelrc first commit Apr 11, 2017
.editorconfig first commit Apr 11, 2017
.gitignore first commit Apr 11, 2017
.postcssrc.js first commit Apr 11, 2017
README.md del online address Nov 14, 2018
index.html rewrite homepage Dec 22, 2017
package.json rewrite homepage Dec 22, 2017

README.md

Vue-News

一个基于vue全家桶开发的仿知乎日报单页应用

项目github地址:https://github.com/biaodigit/vue-news

如果觉得做得还不错 , 或者项目源码对您有帮助 , 希望您小抬右手到右上角点一个star , 您的支持是作者长期更新维护的动力^_^

最新公告

毕设已完成,对这个项目开始重构 —————— 2017.12.17

声明

『知乎』是 知乎. Inc 的注册商标。本软件与其代码非由知乎创作或维护。软件中所包含的信息与内容皆违反版权与知乎用户协议。本项目所有文字图片等稿件内容均由知乎提供,获取与共享之行为或有侵犯知乎权益的嫌疑。若被告知需停止共享与使用,本人会及时删除整个项目。请您了解相关情况,并遵守知乎协议。

项目起源

从二月份开始学习vue学习了一个半月后去跟着滴滴黄轶老师学习他的Vue.js高仿饿了么外卖App课程,做完后收获颇丰,对vue的实际项目应用有了基本的了解,同时也学习到了移动端布局,例如flex,1px边框,正方形背景图等等,做完整个课程后决定自己再去做一个小东西去加深巩固vue知识树,因此又花了数天去阅读vuex文档,vue-router文档,axios,以及饿了么前端团队开发的mint-ui,最后在博哥的推荐下选择了仿知乎日报作为独立demo的prototype,原因吗很简单,标准的单页面应用,没有太多复杂的交互效果,以及现成的api接口,然后,就开工啦!

技术栈

vue2+vue-router+vuex+axios+better-scroll+mint-ui+stylus

功能

  • 首页
  • 首页滑动图
  • 图片懒加载
  • 侧边栏过渡动画
  • 侧边栏主题列表上下滑动
  • 首页下拉刷新
  • 首页上拉加载
  • 收藏页
  • 新闻详情页
  • 收藏新闻
  • 点赞
  • 评论页面
  • 评论收起/展开
  • 主题页面
  • 查看主题主编列表
  • 查看主题主编个人主页

截图

首页

homepage.gif

新闻详情页

newdetail.gif

评论页

comments.gif

收藏页

collect.gif

主题页

themedetail.gif

主题主编列表页

editorlist

主题主编个人主页

editor.gif

存在的bug

  • 下拉刷新时会出现空白
  • 收藏路由过渡动画生硬,且动画只执行了一半
  • 新闻详情页过渡动画出现加载数据量大回退卡顿【此交互已取消,日后或采用weex解决】
  • 加载下一篇新闻若加载到已加载新闻数组id最后一篇则无法加载下一篇
  • 侧边栏显示滑动穿透

Todo

  • 流畅的路由过渡动画
  • 手势滑动显示/隐藏侧边栏
  • 加载下一篇新闻
  • 消息页面
  • 设置页面
  • 夜间模式
  • 下拉加载上一篇
  • 上拉加载下一篇
  • vuex重构
  • stylus重构
  • 替换mint-ui组件
  • localStorage
  • 主题页面头部背景图片
  • 手势滑动切换路由页面
  • 解决上述bug

总结

知乎接口跨域问题(在此感谢yatecssss前辈做出的贡献)

调用知乎API时遇到了跨域问题,但是知乎的接口好像不支持jsonp,谷歌一波发现可以使用vue-cli自带的config的proxyTable文件配置进行解决,配置非常简单:

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

此时请求api/xxx将会代理成http://news-at.zhihu.com/api/4/xxx 这样就不会有跨域问题了,当然这只适用于开发环境。

图片防盗链问题

知乎API返回的数据中的图片都是存储在知乎服务器上的url地址,直接请求会返回403,所以需要进行一些处理,这里我采用了yatessss前辈在使用vue完成知乎日报web版的解决方案,使用Images.weserv.nl进行缓存图片,并在需要使用图片url的地方进行相应的替换。

 attachImageUrl(srcUrl) {
   if(srcUrl !== undefined){
      return srcUrl.replace(/http\w{0,1}:\/\/p/g,'https://images.weserv.nl/?url=p')
   }
 }

 attachImageUrl: function(body) {
    return body.replace(/src="http\w{0,1}:\/\//g, 'src="https://images.weserv.nl/?url=')
  }

参考

感谢izzyleung前辈整理的 知乎日报API分析

感谢yatecssss 前辈的使用vue完成知乎日报web版总结

感谢鹏神,康哥,陈老板,自然哥在开发过程中给予的帮助,心怀感恩,铭记于心!