# 自己手撸了一个博客系统，采用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

用来添加个人状态用

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

# 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是真的累。只能手动一个一个改。

# Lareina^1.0.0

Bugs

• 暂未发现

Improvements

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