自己手撸了一个博客系统,采用Nuxt+Express构建

自己手撸了一个博客系统,采用Nuxt+Express构建

之前的博客是基于WordPress当后台,然后用Nuxt服务端渲染当前端。这样子使用了一段时间,但是时间久了就不是很满意,主要有以下几点原因:

  • WordPress 太过于臃肿
  • 我不太会PHP所以很多WordPress的API不会修改
  • 部分我自己写功能不太好和WordPress合并起来(例如 之前的说说界面)
  • 后台编辑器 古登堡不太适合,默认的是html编辑器,不太喜欢
  • 速度慢
  • 前端代码混乱,状态管理混乱,速度慢
  • 不支持文章设置密码

所以这次打算自己写一个博客系统。还是采取NuxtJS来写。本来还是打算使用python作为后台,但是之后在NuxtJS发现了Express框架。并且在官网上看到了这个

ExpressJS + Nuxt.js = ⚡️

所以就打算使用NuxtJS+Express来开发。

至于功能,就照着WordPress来模仿。为了方便之后导入数据,所以我的数据库的字段和WordPress比较类似,但是也增加、删除了一些字段。然后也修改了一部分的数据库关系。(因为我没系统学过SQL,所有的了解都来自我的实践,所以数据库的安排可能并不是很妥当。)

另外,小程序的Api都要重新改过了。。。。++目前小程序废了++。 RSS 订阅地址改了 改成了这个在新标签页中打开

后台开发

用户系统

登录页面
登录页面
后台概览
后台概览
  • 用户登录 登录后记录最后登录时间 登录频率限制 是否记录登录状态
  • 用户注册 因为目前没打算开源,所以一般情况下,只会有我一个用户,也不会开放注册,所以偷了一下懒,只把用户注册的功能放在了后台,只能在后台添加用户 多用户、用户权限这些虽然我用不到,但还是做了,例如一个用户拥有发布文章的权限,那么发布的文章会显示他的信息,用户回复评论时,也会发送邮件通知文章作者
用户管理页面
用户管理页面
  • 用户信息修改 目前就只有改昵称、修改密码、修改用户网址的功能,我也只收集这些信息
  • 刷新后用户登录状态保持 之前的实现都是先跳转到判断权限页面,然后在通过异步请求判断用户是否登录,如果登录再跳转回想要的页面。这中间就会出现频繁的页面跳转,和延迟。体验很不好。所以这次通过NuxtServerInit直接现在后台判断,并把状态保存在VueX。
  • 后台请求权限验证 肯定要的呀。不然api请求地址或者方法被试出来了怎么办?或者开源了之后,后台api没权限验证肯定不行。

Articles

文章管理页面
文章管理页面

建立了用户系统,然后建立的是Articles(文章和页面管理),主要实现的功能点有

文章撰写
文章撰写
  • 发布新文章 使用MarkDown来书写(在读取时,后台转成html) 文章分类目录寻选择 文章标签(自动建议已经使用过的标签,自动建立未使用过的新标签。)这个功能真的想了好久,怎么设计数据库和逻辑 文章状态:发布、置顶(本来想做个首页carousel,但是设计上没想法,感觉效果不好看)、页面 文章特色图 文章密码(如果管理员登录、或者是该文章作者登录,则会直接显示文章内容,还支持无刷新哦) 文章版权信息支持自定义(万一要转载呢) 是否允许评论
  • 文章列表展示 主要显示文章信息,然后提供删除编辑的入口
  • 文章编辑、删除 编辑页面和发布新文章类似即可,增加了一个修改时间项 删除只需要加一个确认提示框,防止误删即可
  • 文章分类(Category)管理 添加新分类 修改分类(分类特色图) 删除分类(对应的文章自动归入暂未分类分类)
  • 文章用户删除的处理 判断用户是否存在,不存在设为User Deleted

Comments

评论管理页面
评论管理页面

用来管理评论

  • 编辑评论 可以编辑用户名、用户邮箱、用户链接、用户评论、评论状态、被点赞的次数
  • 显示评论列表 后台评论分成All、待审核、私密三栏 显示ip、ua等信息,便于查看
  • 删除评论

Links

友情链接管理页面
友情链接管理页面

用来管理友情链接

  • 友情链接列表显示
  • 添加友情链接
  • 编辑友情链接 目前只支持通过邮箱来显示链接图像,因为这样加载最稳定,如果用每个网站自己放的链接,可访问性不可保证
  • 删除友情链接

Moments

Moments管理页面
Moments管理页面

用来添加个人状态用

  • 添加新的状态
  • 显示状态列表
  • 编辑状态 可以编辑内容和设置是否自己可见 目前这个功能没有适配多用户(懒
  • 删除状态

Settings

网站设置页面
网站设置页面

设着网站的基本信息,和功能开关

  • SEO 网站名、描述、关键词
  • 功能开关、样式开关 例如网站公告、文章默认图、评论显示文字头像、详情页头部背景图设置等。

前端开发

总体功能

  • 使用了Ant-design-vue框架
  • 游客登录 用来文章评分、发表评论、点赞
  • 黑暗模式、字体修改 全新的暗黑模式引擎。 逻辑如下: 如果系统支持黑暗模式,且没有手动指定模式,则自动切换 如果系统不支持黑暗模式,且没有手动指定模式,则根据时间切换 不管系统是否支持黑暗模式,且有手动指定模式,则以手动模式为准 监听系统黑暗模式切换,如果监测到模式切换,且没有手动指定模式,则根据系统状态自动切换。 很搞脑子,这个。 为了解决首次访问会从白到黑的变化,或者切换字体后,刷新会出现从默认字体到选择的字体的切换,所以这次也都通过后台直接判断输出解决了。但如果系统不支持黑暗模式,还是会出现白到黑的变化,无解。
  • keep-alive 复用组件,加快访问速度
  • ServiceWorker 加快访问速度,尽量app化

首页

  • Card形式展示 覆盖会显示文章 Summary
  • 分页 本来打算还是每一页有独立的url,但是后来发现这个和底部的翻页控件有冲突。还是改成了ajax方式

文章页

  • 总体参考了少数派的文章页面设计
  • 两种头部样式 另外一种长这样
头部二
头部二
  • 文章链接自动加图标
  • 文章图片懒加载
  • 文章目录 也是仿照少数派的文章目录
  • 文章左侧便捷操作 包含分享海报(新增小程序海报)、分享微博等、快速到达评论区
  • 文章评分 之前的评分数据不要了
  • 文章浏览量统计 刷新才计算一次,如果没刷新,仅仅通过重复点击链接是不会增加计数的。
  • 文章浏览时间估计 其实就一行代码。。。。
  • 文章代码高亮 用上markdown,插入代码终于舒服了。
  • LaTex数学公式支持
  • 中英文自动加空格
  • 上下篇文章
  • 小程序码自动生成并上传到七牛

评论区

  • 样式参照少数派评论区
  • Gavatar或者文字头像 文字版本长这样
文字头像
文字头像
  • 发表评论 当新评论发表、如果已经该用户有评论已经通过审核,则直接通过审核。不然的话,需要等待审核,在审核期间,只有该用户可以看到自己评论,而且会显示waiting approval。 如果发表私密评论,只有评论者和网站管理员可以看到。评论者只要以游客身份登录即可查看之前自己发表的私密评论。
  • 还是两种表情包 但是改了一下code,所以之前的表情不会显示(我手贱
  • 评论点赞
  • 多种评论排序方式 可以选择从旧到新、从新到旧、按照点赞数量排序
  • 评论通知 评论通知邮件会发送给网站管理员和文章作者,如果为同一人,只发送一封邮件。如果是回复评论,则还会发一封邮件给被回复者。
  • 无限评论嵌套 用到了MySql 8.0的新特性!打破WordPress评论嵌套限制。

搜索页面

其实算不上是一个页面

  • 动态加载搜索结果 看上去更高级
  • 搜索结果高亮 文章内容预览(显示有匹配的部分内容)
  • 基于分词技术 更加高效和聪明
  • 全文搜索 可以搜索标题和文章内容

浏览历史页面

从顶部右侧图标进入

  • 动态排序 会按照最近浏览时间重新排序
  • 可以清空

其他页面

  • 没啥变化 甚至还变丑了(赶进度

看不到的变化

这次打包后,分析了一下,把能后台处理的东西都放后台了,例如 markdown转html,代码高亮,ip地址转真实地址等等。我的小鸡只有1M带宽,所以增加后端处理时间比增加js大小合算的多。

打包分析
打包分析

另外这次前端采用了cdn,所有的前端 webpack 后的js、fonts、icon等都走cdn,应该会快很多。

部署

首先采用了ubuntu, 默认ubuntu不是root权限,所以要先创建一个root用户用来sftp客户端上传文件。

sudo passwd root

输入两次密码即可。 然后要配置sshd

sudo vi /etc/ssh/sshd_config
PermitRootLogin yes     #(默认为#PermitRootLogin prohibit-password)

重启服务器,或

service ssh restart

安装npm、nodejs和lnmp

直接上代码

Node.js v12.x:

# Using Ubuntu
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
sudo apt-get install -y nodejs

# Using Debian, as root
curl -sL https://deb.nodesource.com/setup_12.x | bash -
apt-get install -y nodejs

lnmp安装略过。

安装pm2和启动项目

npm i pm2 -g
pm2 start npm --name "lareina" -- run start

导入数据

用mysql命令,很快就能导完。一个insert into ... select ... from ...就能解决。但是把之前WordPress的文章改成markdown是真的累。只能手动一个一个改。

Lareina1.0.0

Bugs

  • 暂未发现

Improvements

  • 首页卡片样式有点丑
  • iPad等移动设备在夜间模式下,反弹会出现白色底色
  • 首页顶部图片还是增加一下吧
  • Links页面在移动端改成两列显示
  • 后台增加 moments 全局开关
  • 加载进度条太不明显了
  • 在手机端改成serif的情况下,评论排序按钮会错位
  • 阅读进度,和返回顶部结合
  • 文章链接加图标的判断改进,目测可以通过加.解决
  • 图片fancybox、一行显示imalan