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

如果发现问题,而且无法提交评论时,可以发邮件 i#xinxuan.me 与我联系。感谢!

微信小程序码
网站网页 介绍网页技术和有意思的网站
——
Total Comments(Loading)
New to Old
defaultimg
Input Your Information to Comment
Loading