【博客开发】开发进度:基本界面已实现

简介: 【博客开发】开发进度:基本界面已实现

一、首页


image.png

  • 阅读摘要:好记性不如烂笔头,在互联网时代,拥抱个人的互联网记事本。未来将支持云端速递摘要到手机的功能
  • 文章锦集:我们的创作都在这儿,精彩的创作不仅是才华的横溢,更是不朽的人生。未来将支持更多社交特性
  • 图片足迹:旅行过程中的绝美风景将永远定格在记忆深处。未来将支持更多社交特性
  • 成长规划:定下我们的目标,每天更新我们的进度,让成长有迹可循。未来将支持更多社交特性
  • 关注我:与你共同见证一个快乐的 IT 从业者在帝都的逆袭之旅。
  1. 左上角logo:在任意界面回到首页
  2. 右上角个人中心:创作入口
  3. 中间图片,博客内容的分类入口
  4. 右边:个人简介




二、登录界面


image.png

  1. 点击首页的【个人中心】或者其他需要登录权限的界面,就会弹出登录界面
  2. 点击右上角关闭,可关闭登录界面
  3. 正确输入完用户名密码,点击登录,校验成功会关闭登录界面,校验失败会提示登录失败




三、阅读摘要

image.png

阅读摘要


  1. 列表展示从书籍里摘录的句子
  2. 滚动到底部,自动加载数据
  3. 支持搜索



四、文章锦集


image.png



  1. 展示创作的文章
  2. 滚动到底部,自动加载数据
  3. 支持搜索




五、个人中心


image.png

个人中心


  1. 整体布局参考简书,左侧是各项博客内容(后面皆称作:维度)分类入口
  2. 中间是维度列表,支持添加维度(对于【文章锦集】来说,就是写新的文章)
  3. 最右边是文章编辑器,本质上就是个 <textarea/>
  4. 【发布】功能,支持将写的文章公开给其他人阅读
  5. 【预览】功能,支持左侧编辑维度,右侧预览展示效果




image.png



六、代码统计

image.png


image.png



服务端代码只有 1900 行,代码重复率11.6%主要集中在 Graphql 的服务端解析函数未能抽出公用代码(是对GraphQL和go语言本身的不熟练造成),整体来说,自我感觉还是挺干练的,毕竟是需要什么才加什么,并没有使用其他人现成的代码,代码编译出可执行程序是20M 大小。


image.png


image.png



  • 客户端代码 4300 行,代码重复率 6%,看起来实现的界面并不多,但代码量比起服务端可多多了,这也验证了一个事实:服务端比客户端更接近底层,越底层的代码抽象度越高,代码量越少。



七、总结


本次博客开发基本告一段落,个人博客的文章展示、编辑、发布等基础功能已经完成,以后每次简书写完文章,都可以同步到自己的个人博客。


博客开发项目启动时间从 2022 年 12 月 21 日开始算,到今天 2023 年 1 月 7 日,可以算是博客开发项目一期已完结。当然了,各项功能并不是很完善,但半个月时间勉强算是实现了个小需求,将应用开发的前前后后涉及到的各个技术点,再次巩固了一遍。





下一步


实现手机端,计划使用前端技术:Taro,实现手机浏览器访问,和小程序访问;

实现评论功能;

实现阅读量、评论数、点赞量等社交数据统计;


















目录
相关文章
|
5月前
|
小程序 开发者
新功能:个人小程序直接打开公众号链接
新功能:个人小程序直接打开公众号链接
94 0
|
4月前
|
数据库
【博客项目】—登录功能实现( 四)
【博客项目】—登录功能实现( 四)
|
IDE JavaScript 前端开发
个人软件思维导图介绍。下载在以后的博客中。本博客是展示软件页面。(一)
个人软件思维导图介绍。下载在以后的博客中。本博客是展示软件页面。
94 0
个人软件思维导图介绍。下载在以后的博客中。本博客是展示软件页面。(一)
|
应用服务中间件
个人软件思维导图介绍。下载在以后的博客中。本博客是展示软件页面。(二)
个人软件思维导图介绍。下载在以后的博客中。本博客是展示软件页面。
73 0
个人软件思维导图介绍。下载在以后的博客中。本博客是展示软件页面。(二)
|
域名解析 弹性计算 资源调度
工具分享【一】5分钟搭建自己的博客
本文利用vuePress快速构建大气好看的个人博客,vuePress是由Vue 驱动的静态网站生成器,可以基于markdown语法生成网页,君哥的个人博客就是由vuepress构建
354 0
工具分享【一】5分钟搭建自己的博客
|
弹性计算 安全 Linux
如何使用阿里云简单的搭建自己的博客
使用PHP集成工具phpstudy,简易搭建word press个人博客
362 0
如何使用阿里云简单的搭建自己的博客
|
JSON IDE 前端开发
博客升级之在线代码编辑器
最近打算对个人博客进行优化,主要涉及两个方面,文章编辑器和代码展示分享模块,因此就需要考虑选择什么样的在线编辑器,顺道总结一下在线代码编辑及分享一些可能用得上的优秀代码编辑器。
460 0
博客升级之在线代码编辑器
|
数据采集 搜索推荐 Shell
Hexo博客功能扩展 - 菜单,SEO以及作者信息
Hexo博客功能扩展 - 菜单,SEO以及作者信息
178 0
|
JavaScript
【开源博客】三个步骤学会Hexo快速生成精美博客!
最近学委跟小伙伴搞了一个py4ever 开源站点,使用的就是hexo。 下面是站点信息:py4ever开源站
193 0
【开源博客】三个步骤学会Hexo快速生成精美博客!
|
JavaScript 前端开发
【全网最全的博客美化系列教程】07.添加一个分享的按钮吧
全网最全的博客美化系列教程相关文章目录 【全网最全的博客美化系列教程】01.添加Github项目链接 【全网最全的博客美化系列教程】02.添加QQ交谈链接 【全网最全的博客美化系列教程】03.给博客添加一只萌萌哒的小仓鼠 【全网最全的博客美化系列教程】04.
1538 0