iBlog 项目小结

写在前面

项目源码：iBlog

大部分的页面样式来自17素材网，在原本页面上做了一些修改来作为学习使用。由于我自己写的页面实在是太丑了（参考初期的博客项目），一点也不丝滑 QwQ …

下面把这些素材列出来，大家可以学习使用：

登录注册原网页链接：超有设计感的注册登录页面 (17sucai.com)

人才招聘网址模板原网页链接: 简洁的人才招聘平台页面模板 (17sucai.com)

上传头像原网页链接：html5点击上传头像选取本地图片上传代码 (17sucai.com)

404原网页链接：404月球空间页面动画特效 (17sucai.com)

项目功能介绍

登录注册部分

• 通过邮箱验证码激活账户
  
  

• 登录账户
  

  • 直接通过邮箱和密码登录
  • 忘记密码可通过邮箱验证的方式重新设置密码再登录

• 记住邮箱与密码七天

主页部分

• 顶部导航栏
  

  • 左上角有iBlog的logo，点击跳转主页

  • 其次是博客标签，点击不同的标签可以查看博客根据标签分类的结果

  • 搜索栏

    • 搜索方式是模糊搜索，当博客标题或者博客内容出现搜索的关键字时则会显示，如果没有搜索到相关博客也会有提示信息。
    • 如果当前分类页的则只搜索当前类别中的博客
    • 如果当前是除分类页的则搜索范围为所有博客

  • 如果是未登录状态，则会显示登录 注册
    

  • 如果是登录状态则会显示用户头像，鼠标移入用户头像显示菜单栏:
    

    • 个人主页，内容管理，发表博客，信息修改：在后面详细介绍
    • 设置：还没有想到相关功能，待完善 …
    • 退出 ：点击后退出登陆

• 中间
  

  • 左边显示所有博客
    • 按照发表时间序排列，最前面是最近发表的
    • 写了一个分页，设置的是一页显示3篇博客，一次显示5页，附加一共多少页的提示信息和快捷跳转到哪一页。
  • 热门博客：显示浏览量最高的5篇博客，点击查看更多是博客的一个排行榜，按照浏览量排序的。
  • 热门博主：显示发表博客数量最多的5位，点击查看更多跳转至总榜，按照发表数量排序的。

• 底部导航条

  • 主页的底部导航条在主页内容不够的时候处于底部，在内容较多的时候出现滚动条，紧跟博客内容处于最下面。
    
    

  • 有的其他页面也加了底部，有的没有加。

头像下拉菜单栏部分

• 信息修改

  • 基本信息修改，包括上传新头像，修改昵称，性别，生日，个人简介
    

  • 修改密码
    

    • 通过验证旧密码修改
    • 通过邮箱发送验证码修改

• 发表博客
  

  • 可以上传一个博客封面，如果未上传就用默认封面
  • 可以填入博客标题title，博客类型kind,博客内容content以及为博客选择多个标签tag

• 内容管理
  

  • 右边显示近期哪些人查看过当前用户发表的博客(这部分还没有完成)

  • 左边显示用户发表的博客，对于自己发表的博客可以删除或者进入编辑页面

  • 编辑博客：
    

    • 编辑博客标题title，博客类型kind,博客选标签tag，博客内容content
    • 重新上传一张博客封面
    • 对博客的评论进行删除操作，鼠标放上之后出现删除图标

• 个人主页
  

  • 右边显示的是该用户发表的博客列表，可以点击跳转至详情页面
  • 左边显示个人基本信息的小名片，包括以下内容：
    • 昵称
    • 性别
    • 生日
    • 邮箱地址
    • 累计发表的博客数量
    • 个人简介

写在后面

零碎的历程：

• 从21年12月底写到22年的1月底，磨磨蹭蹭写了一个月，有时效率比较高一天能写好几个部分的功能，有时划水连着划好几天，疫情封校在宿舍人都待麻了。
• 之前也写了博客，算是个小练习，有基本的用户登录注册和博客的增删改查这次是第一次写这样比较完整的项目
• 写注册部分也去了解别人如何做的，短信验证码or邮箱验证码？了解到短信可能要收费，于是选择了邮箱验证，学习了相关的中间件如何使用。
• 又去看视频学习了认证机制，写了一个笔记：前后端的身份认证，Session还是JWT？考虑到前端和node后台都是我一个人在写，我还是选择了Session，看到QQ登录界面有记住账户密码和自动登录选项，我又在想是否也可以加一个？然后学习了node关于cookie的中间件，加了一个记住帐户密码七天，但是我的写法是不合理的，直接把账户和密码放cookie了，很不安全。大家不要参考这种写法，后来的自动登录又不了了之了。
• 写完注册登录就开始写头像下面的菜单栏，这部分的样式还是之前的博客项目的，觉得蛮好的就继续用了，主要就写了四个功能块，个人主页，内容管理，发表博客，信息修改。外加一个退出。
• 最先入手的当然是退出功能，直接清除当前用户的session就可以了。
• 其次是信息修改，因为写完注册登录就有User了，基本信息的修改也就是修改一些基本信息(哈哈哈废话文学)，主要是想写这个上传头像的功能，前端主要就是学习了使用FormData，ajax，后端node使用formidable中间件处理，可以参考一下我的这篇博客：前端上传头像并且使用中间件formidable处理。
• 然后就开始写密码的修改，写了一个验证旧密码来修改。又想到之前登录页面还有一个忘记密码的功能没写，然后加了一个通过邮箱验证码来重新设置一个新密码，解决了忘记密码无法登陆和处在登录状态却忘记密码想要重新设置的问题。
• 接着就开始着手写博客相关的了，先写发表博客，之后主页的博客就可以渲染了，并且写了一个分页的功能。然后写博客的详情页面，再写点赞，浏览量的统计，评论的发表和统计。这部分还是比较顺利的，写完这些就可以写内容管理了，也就是渲染一下当前登录用户发表的博客就行了。添加一个删除和编辑的功能，再去写编辑页面，编辑博客的相关信息和管理删除评论。个人主页也水到渠成，左边是个人基本信息的展示，右边渲染这个博主发表的博客。
• 主页还有一个根据博客标签查看分类的内容，写了一个根据标签来渲染不同的博客，搜索的博客也只出现有当前标签的，实现分类搜索功能。
• 写到这里还剩下主页右边两个热门，热门博客就把按照浏览量排了个序，主页显示了几个，查看更多就是总榜，热门博主也是类似的，本来想热门博主是如何的一共评判标准，最后还是选择了发表的博客数量，其实也不是很合适。这部分有点潦草，热门博客和热门博主的总榜样式也有点潦草，后续可以继续修改。
• 完结

待完善功能：

• 记住帐户密码写的不合理，需要修改
• 自动登录的功能
• 设置模块可以加一个注销账户
• 可以在个人主页加一个给博主发私信的功能，这样右上角的小图标刚好可以点击查看通知和私信…
• 热门博客，博主的页面样式
• 目前就想到这些,后续如果有时间再继续修改