Project RC

一只腊鸡的技术成长。

给博客换了新的前端和域名

创建于
分类:Dev
标签:BlogBlogNGBlogAFrontendBackend

前几天学长 ntzyz 也开始写一个博客框架,然后他是前后端分开的,后端用 Node.js,前端用 Vue.js,源码在 这里,然后我看了也心痒了,于是决定把之前的 BlogA 改一改,让它支持作为独立的后端,然后再写个前端,于是就有了 BlogA 的 API 模式和 BlogNG。

BlogA API 模式

这个其实是得益于 Flask 里面使用模板的方式,BlogA 在处理请求时是把数据全部收集到一个字典对象,然后传给 render_template 函数来渲染模板,因此我直接在配置项里面加了一个模式选项,可以选择「web-app」「api」「mixed」三种模式,然后在原来调用 render_template 的前面判断当前的模式,如果是开启了「api」模式,那就不调用 render_template,而是调用 jsonify 来把字典转换成 JSON 返回,而如果是「web-app」模式那就像以前那样返回 HTML,如果是「mixed」模式就通过 HTTP 请求头的「Accept」选项或者 URL 里面的「format」参数来确定是返回 JSON 还是 HTML,于是基本上在不修改以前的使用方式和 URL 路径的情况下,做到了完美的 API 支持。

BlogNG

然后后端弄好就弄前端了,看学长那个博客前端用 Vue.js,然后去了解了一下,感觉挺不错的,配合 vue-router 可以比较轻松地做到整站无刷新。然后页面的整体框架肯定是用 Bootstrap 了,先是用 Pingendo 拖了个大致的模板,然后去把左边的主要内容和右边的侧边栏抽成模板,这样基本的结构就出来了。因为用了 vue-router 和 vue-resource,处理页面切换很方便,直接在 BaseComponent 里面让它在访问每个 URL 的时候都直接请求相对应的 API 地址,然后具体的不同内容比如博文、自定义页面、分类和标签归档去基于 BaseComponent 分别写模板。因为其实每个页面的处理逻辑都是一样的:请求 API、渲染模板,所以这些基础性的东西都抽离在 BaseComponent 来做会清楚很多。然后这么一下整体样子就基本出来了。

但是在写侧边栏时遇到坑,因为想弄一个音乐播放器,尝试网易云音乐的外链,不好用,不仅没有完全 HTTPS,而且很多歌因为版权原因会导致播放器停住点播放没反应,于是另外找了一个播放器,但是播放器初始化显然是需要跑 JavaScript 代码的,Vue 的模板里面插入 <script> 标签是没有效果的,于是折腾了不少时间找到一个 workaround:在 Component 的 readybeforeDestroy 回调里面调用三个固定的方法 handleReady()handleLoadedAll()handleBeforeDestroy(),分别在页面切换完成、请求 API 完成、即将销毁时候调用,于是就在 index.html 里面包含一个 custom.js 在这里面去实现那三个函数就好了。

前后配合

JavaScript 里面不能直接跨站请求,但是 BlogA 的 API 模式跟普通模式的 URL 是一样的(这可能是个问题,也许要去改一下让 API 模式处理 /api/ 下的 URL),所以得在 Web 服务器的配置文件里面去把 /api/ 开头的请求反代到 BlogA 的地址。并且,因为是用 vue-router 做成了单页应用,所以还需要改一下 rewrite 规则,来把所有除 /api/ 以外的链接全部引导到 index.html 来处理。全部弄完,就大功告成了。

这里给一下 GitHub 上的项目链接:BlogABlogNG,觉得不错的话,求个 star。

新域名

全写完,一兴奋,就买了个新域名 stdrc.cc(其实一年才 16 块钱),这域名配合博客副标题 #include <stdrc.h> 简直完美哈哈(cc 是 C++ 的一种文件后缀)。

评论