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

网站网页

文

发布于

本文导览

发布于约11分钟

自己手撸了一个博客系统，采用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等信息，便于查看
删除评论

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