Vue开发掘金WebApp(仿掘金App)
2020/4/17 11:06:36
本文主要是介绍Vue开发掘金WebApp(仿掘金App),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
本菜在掘金的处女作,希望各位大佬多多包涵
先来一波彩虹屁
掘金是我见过几个技术博客网站中最好用的的一个,相比于某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编辑
- 关注的作者发布的动态
- 点赞
- 沸点详情
- 搜索 完成
- 按照综合、文章、用户、标签搜索
- 小册
- 小册列表
- 小册详情
- 小册章节详情
- 购买小册 (臣妾做不到啊)
- 我的
- 个人主页
- 编辑
- 活动
- 原创文章
- 沸点
- 收藏集
- 收藏集详情页
- 喜欢的文章
- 关注的标签
- 标签详情页
- 消息中心
- 赞过的文章和沸点
- 收藏集
- 创建的
- 已关注的
- 已购小册 (不知道有没有问题)
- 阅读过的文章
- 标签管理
- 已关注标签
- 所有标签
- 推荐标签
- 所有标签
- 关注标签
- 夜间模式
- 设置 完成一些
- 修改密码
- 登录页
- 作者榜
- 用户主页
- 关注
- 活动
- 原创文章
- 沸点
- 收藏集
- 收藏集详情页 -[x] 关注收藏集 -[x] 收藏集文章列表
- 喜欢的文章
- 关注的标签
- 标签详情页
- 用户主页
- 话题榜
- 更多话题
- 已关注话题
- 话题详情
- 关注话
- 文章详情页
- 文章内容
- 显示评论
- 文章作者其他系列文章
- 关注作者
- 收藏文章、分享文章
- 评论
- 其他
- 沸点详情页
- 文章内容
- 显示评论
- 推荐沸点
- 关注作者
- 分享沸点
- 评论
- 其他
- 个人主页
- ... 应该还有一些完成的没有列举出来,大家clone下来跑一遍试试吧 点击此下载源码
交互完成度
评论、留言、关注、添加到收藏集、发表沸点等暂时均没有实现,因为 APP 里面的东西实在是不少......
- 评论
- 留言
- 未完待续部分...
后续
- 话说掘金的 API 域名(二级)真是多啊,使用webpack-dev-server的proxy配置代理都让node报
possible EventEmiter memory leak deteceted
的警告了。 - 富文本部分是直接拷贝掘金web官网的富文本样式
- 有些页面的显示还不够丝滑,后续需要改进
- 认真的看效果图的话,可以看出某些页面还是有一些bug的,
- 关于页面切换动画似乎还不够连贯,不知道是代码的问题(绝对是代码的问题),还是浏览器的问题
- 登录的token好像有一些问题,在两个app登录同一个账号不会报token异常,但是在该项目中在两个浏览器中登录会出问题。
- html节点的font-size设置太小了,因此有些忘记设计font-size的元素可能会显示不出文字。
- 后续会不停的完善该项目,把一些能够开发的功能都开发出来,希望各位朋友们多多支持。
这篇关于Vue开发掘金WebApp(仿掘金App)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南