Vue开发掘金WebApp(仿掘金App)

12,019 阅读4分钟

本菜在掘金的处女作,希望各位大佬多多包涵

先来一波彩虹屁

掘金是我见过几个技术博客网站中最好用的的一个,相比于某csdn和某简书真的是良心太多,页面简洁颜值高,广告少干货多,不像某csdn,广告随处可见,水货文章特别多,文章质量参差不齐。掘金就不一样了,没有两把刷子都不好意思发表文章(本菜属于脸皮特别厚的,一把刷子都没有,但厚着脸皮发表一篇水货文章)。因此为了表达本菜对掘金的敬意和支持,本菜使用仿(chao)造(xi)掘金手机客户端使用Vue开发了一个掘金WebApp,希望各位掘友大佬们提点提点。

正文

介绍

该项目是抄袭仿照掘金客户端使用Vue开发的WebApp。里面所有的API均来自官方Android。页面基本上和掘金App差不多,不过由于里面的一些图片本菜使用的是阿里的iconfont,因此会和掘金App上面的图片有点不一样,但是整体的功能和掘金App还是差不多的。

该项目源码已经开源在gayhubgithub, 点击可查看源码,希望各位掘友大大给个star

效果图

(前面一大波长gif来袭)

  • 首页
    首页效果
  • 沸点
    沸点列表
  • 搜索
  • 小册
    小册页面
  • 我的
    我的
  • 用户主页
    用户主页
  • 话题主页
    话题主页
  • 文章详情
    文章详情
  • 沸点详情
    沸点详情

完成度

本来以为仿照App实现的话应该很快就可以全部昨晚,可做起来才发现APP 里面的东西实在是不少(有一些是本菜实在做不了,比如支付),包括页面和交互,要完全照抄实现确实需要一些时间和精力,UI 之类的都是简单测量+肉眼调试实现的,下面列出页面和交互的完成度,这里应该只是列出了绝大部分。未列出、未实现的后续会根据时间、精力来实现。 实际完成度请以代码为主

  • 启动页 不做
  • 登录、未登录跳转和页面数据刷新(逻辑还不够眼睛)
  • 上拉加载、下拉锁芯
  • HOME 完成
    • TAB切换
    • TAB编辑
    • 关注的作者发布的文章
    • 点赞
  • 沸点
    • TAB切换
    • TAB编辑
    • 关注的作者发布的动态
    • 点赞
    • 沸点详情
  • 搜索 完成
    • 按照综合、文章、用户、标签搜索
  • 小册
    • 小册列表
    • 小册详情
    • 小册章节详情
    • 购买小册 (臣妾做不到啊)
  • 我的
    • 个人主页
      • 编辑
      • 活动
      • 原创文章
      • 沸点
      • 收藏集
        • 收藏集详情页
      • 喜欢的文章
      • 关注的标签
        • 标签详情页
    • 消息中心
    • 赞过的文章和沸点
    • 收藏集
      • 创建的
      • 已关注的
    • 已购小册 (不知道有没有问题)
    • 阅读过的文章
    • 标签管理
      • 已关注标签
      • 所有标签
        • 推荐标签
        • 所有标签
      • 关注标签
    • 夜间模式
    • 设置 完成一些
      • 修改密码
    • 登录页
    • 作者榜
      • 用户主页
        • 关注
        • 活动
        • 原创文章
        • 沸点
        • 收藏集
          • 收藏集详情页
            • 关注收藏集
            • 收藏集文章列表
        • 喜欢的文章
        • 关注的标签
          • 标签详情页
    • 话题榜
      • 更多话题
      • 已关注话题
      • 话题详情
        • 关注话题
    • 文章详情页
      • 文章内容
      • 显示评论
      • 文章作者其他系列文章
      • 关注作者
      • 收藏文章、分享文章
      • 评论
      • 其他
    • 沸点详情页
      • 文章内容
      • 显示评论
      • 推荐沸点
      • 关注作者
      • 分享沸点
      • 评论
      • 其他
  • ... 应该还有一些完成的没有列举出来,大家clone下来跑一遍试试吧 点击此下载源码

交互完成度

评论、留言、关注、添加到收藏集、发表沸点等暂时均没有实现,因为 APP 里面的东西实在是不少......

  • 评论
  • 留言
  • 未完待续部分...

后续

  1. 话说掘金的 API 域名(二级)真是多啊,使用webpack-dev-server的proxy配置代理都让node报possible EventEmiter memory leak deteceted的警告了。
  2. 富文本部分是直接拷贝掘金web官网的富文本样式
  3. 有些页面的显示还不够丝滑,后续需要改进
  4. 认真的看效果图的话,可以看出某些页面还是有一些bug的,
  5. 关于页面切换动画似乎还不够连贯,不知道是代码的问题(绝对是代码的问题),还是浏览器的问题
  6. 登录的token好像有一些问题,在两个app登录同一个账号不会报token异常,但是在该项目中在两个浏览器中登录会出问题。
  7. html节点的font-size设置太小了,因此有些忘记设计font-size的元素可能会显示不出文字。
  8. 后续会不停的完善该项目,把一些能够开发的功能都开发出来,希望各位朋友们多多支持。