盒子
盒子
文章目录
  1. 谈谈思路
    1. 文章相关
      1. 博文存放
      2. 归档
      3. 博文解析渲染/markdown 渲染插件
      4. 后台管理/markdown 编辑器插件
      5. 后台管理/管理员登录
    2. 其他
      1. 分类,标签
      2. 留言
      3. 归档
      4. 登录注册
  2. 最后

写博客的过程

写博客

本来四月份就该总结一下的,但是当时觉得还可以完善,就打算做好了再写,结果理所应当地后来就没动过…刚好 有点时间 ,稍微写写过程.

不过说实话,这个项目一开始并不是基于需求,我只是想整合一下自己的最近学习的一些东西,通过做个项目熟悉一下.

不过后来我有了些异想天开的想法(虽然做到一半没继续做了),项目又开始基于需求加了些东西.

不过事情总是这样,我这种人总是以己及人,觉得自己解决了什么了不起的痛点而疯狂造轮子.实际上不过是空想般创造一些无意义的需求.

前言略去.

谈谈思路

因为一开始我的目的是练习自己最近学的一些东西,所以首先考虑的并不是博客的功能,而是用什么技术…

那就前后端分离,通过 json 来交互,前端用 vue 相关技术栈,后端用 springboot 相关技术栈.

然后考虑需求,一个博客需要有哪些功能呢…其次,我需要哪些功能?

文章相关

最基本的,需要个文章归档展示,文章内容展示吧.

再加点,可以做个文章后台管理,对文章进行增删改.

博文存放

首先,文章展示怎么做?

文章要是就简单的文字,而且不考虑格式的话,那就可以直接展示出来.

我之前用 php 写过一次…

不过现在我想整好点,最好能直接解析出标题,图片这类东西…

这里涉及到 富文本 的展示.而谈到富文本的展示,自然也离不开富文本的储存.

到这里先停一下.你瞟一眼觉得没啥意思也可以直接跳到下面.

我写项目时参考的是自己现在这个博客——基于 hexo ,是个静态博客.

大概工作原理是把以 markdown 格式编写的博文放在本地,通过某种手段把它们转换为 html(网页) 文件——这些 html 文件包含了文章数据.

所谓静态,大概意思就是博客文章的数据是固定在网页文件里面的.

与此对应的 WordPress 等博客,则是把文章数据存放在数据库.

静态博客打开一个文章页面,文章数据直接就随着操作(一次请求)出来了,而动态博客则还会有一个与数据库交互的过程.

回到前面,我已经用过 markdown 了,所以这个项目也用 markdown 来保存博文吧!!

好!用 markdown 来保存!

保存到哪里呢?

显然,保存的位置也就是读取数据的位置.

前面提到我想搞前后端分离,前端从后端提供的 api 获取数据.

但是实际上如果我把 md 文件保存到本地的话,也阔以直接前端 用 js 从 本地 读取 md 文件嘛.

而且保存到本地,像静态博客那样,增删改就在本地操作——这就相当于后台管理了.

也很方便诶!!!

只是在静态博客中,md 文件存放在本地,编译为 html 后,只需要把 html 上传到容器(一般是服务器)里.

而按我这个思路,md 文件需要和前端网页一起放到容器里,比之静态博客,多了一个 js 读取 md 文件的步骤.

不过我的目标主要是练习 Java 开发,前面这种操作根本就没啥”后端”的事了嘛…

于是我规定自己数据必须从 后端 提供的接口获取.

同理,我也可以在后端通过读取本地 md 文件,字符串拼接后返回给前端.

室友最近也在写自己的博客项目,就是这样做的.

前面这两种做法的好处是 md 博文迁移方便,可以和 静态博客 互通.毕竟一篇博文就是一个文件嘛,也很直观.

FarBox 的逻辑大概类似如此

不过前面强调了,我的目的是练习…

所以就不考虑什么方便了,用数据库存放 md 博文吧!!

当然还是用 MySQL…

有两个小伙伴都觉得很惊讶,文章那么大的内容直接存放到数据库…?

…..

别小看数据库啊…

数据库很强大的,直接存博文这种操作也并不算反模式…

归档

现在的逻辑大致是这样的.

MySQL 存放了 md 格式的 博文,SpringBoot 写好 api,取出博文数据,返回给前端.

当然实际操作肯定是前端点击归档页面的信息,然后才会请求博文数据.

这里涉及到归档,简单提一下.

关键点是归档的实现方式是依赖于文章的存放方式的.

如果文章以 md 存放在本地,那么归档可能就是遍历自己的本地文件夹.

如果要显示摘要的话,还得读取文件的数据.

这样的 IO 效率想想很差劲…

但是博文存在 数据库,那就没啥说的了.

博文解析渲染/markdown 渲染插件

重复一下,MySQL 存放了 md 格式的 博文,SpringBoot 写好 api,取出博文数据,返回给前端.

前端怎么解析 md 数据呢?

当然,可以自己解析.

但想当然,这种东西应该有轮子了…

vue-cli3 使用 marked 渲染 mdarkdown 格式数据

后台管理/markdown 编辑器插件

既然博文数据存放在数据库,那么对博文的 增删改 也就得搞个后台管理…

实际上也就和其它的什么管理系统一般无二了…

关键点还是在于 富文本的编辑 .

如果 md 博文存放在本地,那就可以用 Typora 等编辑器很方便地可视化编辑文章.

但是现在 文章 放在数据库.

当然,我们可以在前端提供一个 input 或者 textarea 来让用户写文章,但那样效果也太差了…

没有格式约束,也不能实时看见效果…

当然,你也可以让用户在本地编辑,确保 OK 后复制到文本框…

一点用户体验都没得…

同样的,这种需求也应该有人实现了.

搜索了一下 markdown 编辑器插件.

hinesboy/mavonEditor

选择了这个.

后台管理/管理员登录

涉及到管理员信息…

说实话…

如果就管理员信息的话,不如把账号密码写死…

其他

博客,最基本的也就是博文的展示,其次的话,博文的管理也算是重点.

上面已经提到了,也稍微讲了一下用到的解决方案.

虽然这个小项目我没做出个啥,但我其实考虑了不少东西…

一本正经地这样说,总感觉像是在找借口.😥 :-D

稍微提一下.

分类,标签

一开始我觉得没必要要分类,标签就足够组织了.

毕竟一篇文章可以打上多个标签,如果本来有个 “生活” 的分类,那我只需要把之前的文章都给加上一个 “生活” 的标签,也就达到了分类的效果.

不过这是我之前的想法,虽然现在也觉得之前这个想法很合理.

不过我现在这个用 hexo 搭建的博客用上了 分类,主要是为了把 生活类 的博文与 学习类 的区分一下…

其实没啥差别,仁者见仁啦…

留言

一种方式是调用第三方留言…

一种方式是给博客做个注册登录模块,登陆的用户才能留言.

一种方式自己实现个通用的留言 : 网址,昵称,邮箱,留言内容 这种.

一开始就没考虑做注册登录…

如果自己实现,会涉及到嵌套回复.

当然,这不是难点…主要是我想,如果做个通用的留言的话,不如做成插件的形式,让我这个静态博客也能调用就好了.

沙不沙雕,想得倒是多,结果啥都没做.

归档

归档一开始就没考虑分页,因为就我使用情况来看,几百条归档信息,一路不分页展示也没啥不妥…

登录注册

后来我还是把登录注册做了,不过并不是为了留言.

讲一哈我的异想天开.

一开始,我想的是多用户写文章.

但是之前数据库建表时博文没有 用户 字段.

那就再引一张表存放 文章 与 作者 的关系吧.

(我真是沙雕. :-D

突然意识到,前端之前是按单用户写的,这样的话,前端也得改很多逻辑.

并非如此,看下面…

然后我异想天开,不如做成为用户提供 api…

什么意思呢,就是用户注册后,把 后端的 api 提供给用户,用户就可以通过我提供的 api 去操作自己的信息了!甚至能基于这个 api 去搭建自己的博客!

🤔🤔🤔🤔🤔

讲讲具体实现吧,前面提到了 管理员登录,这里又有用户,涉及到用户的权限管理了…

使用了 shiro + jwt 做权限控制 : 集成JWT实现接口权限认证

做到这一步,突然意识到前端其实不用改啥.

请求头里带上 token,后端返回的数据根据 token 来过滤…

可以达到不改变 api 实现获得不同数据的效果!!

其实也就是在本来的 通过 api 划分获取数据的逻辑,这个步骤里,加了一层 token 来过滤数据…

比如本来的 /api/getAirchives() 是 “获取文章归档”

现在 /api/getAirchives() 就可以是 “获取用户的文章归档”

而注册,我为了尝试一下没接触过的技术,使用了 队列 来异步发送邮件,用户通过点击 邮件 里的链接实现注册…

rabbitMQ 实现注册异步发送邮件 : rabbitMQ 安装,基本操作,与 Spring Boot 整合

最后

大概如此了…