单页应用已经开始慢慢取代传统网页。而我的博客LO'S BLOG(A9043-BLOG) (opens new window)使用Vue + ElementUI开发,没有使用一些通常的博客框架。即前端所有内容都在 index.html 文件中通过JS结合AJAX生成。 这种网站的优点比起传统WEB网站开发有很大优势,它有更强大的交互能力和使用体验。除此以外,还有
- 良好的前后端工作分离模式
- 减轻服务器压力(传输数据更少)
- 共用一套后端程序代码
- ……等优点
单页应用已经开始慢慢取代传统网页。而我的博客LO'S BLOG(A9043-BLOG) (opens new window)使用Vue + ElementUI开发,没有使用一些通常的博客框架。即前端所有内容都在 index.html 文件中通过JS结合AJAX生成。 这种网站的优点比起传统WEB网站开发有很大优势,它有更强大的交互能力和使用体验。除此以外,还有
起因是在计网的卷子里看到了这个答案

如图,看的我一脸懵逼,颠覆了我学习了那么久web的认知。遂发到计网群讨论,结果一群人竟然认同这个答案? 其实书上关于cookie技术的解析是没错的,但是这个答案的说法完全就是瞎几把写了,如果你对着未来老板说cookie是保存在后端的,老板估计会后悔为什么录取这个傻逼。。呵呵
博客的图片点击放大是很常见的需求. 今天突发奇想有了实现这个功能的思路, 就先把它撸出来吧.
首先这个博客系统用的是markdown语法, 解析成html后得到一堆html字符串. 由于要在上绑定事件, 就不可以简单的v-html插入了, 于是转换另一种思路实现.
捉摸了一下, 由于<img/>不是固定的, 于是需要动态绑定, 而动态构建和动态组件可以让我实现这一功能.
以下是实现方法.
const pattern = new RegExp('src=(\'.+\'|".+")');
const html = `${parser
.makeHtml(res.content) //原本的markdown字符串
.split(/[ ]/) //空格分开
.map(el => { //分开后遍历 寻找img标签
//正则匹配
if(pattern.test(el)) {
const urls = el.split('=');
const url = urls[urls.length - 1].substr(1, urls[urls.length - 1].length - 2);
// eslint-disable-next-line no-param-reassign
// 绑定事件
return `${el} @click="showImgDialog('${url};')"`;
}
//不是img标签则直接返回
return el;
})
.join(' ') //重新拼接成字符串
}
//增加模态框
<el-dialog
:visible.sync="dialog.visible"
width="80%">
<el-row type="flex" justify="center">
<span>
<img :src="dialog.url"/>
</span>
</el-row>
</el-dialog>`;
感觉是时候开始给博客写一个后端了.
一开始在考虑使用多页应用做后端还是单页应用做后端呢. 多页应用的话需要另开一个url做, 可以申请多一个域名或者用现用域名的新的资源路径. 但是我想这个博客也不大, 目前优化过后打包的大小才几十kb, 就干脆写在一个单页应用上好了.
然后我在博客的某一个私密的地方偷偷加了一个登录入口, 如果你找到了欢迎在contact页面联系我hhhhhh. 然后就是在路由上在加一个路由页面了, 这个路由url被看到了也无妨, 没有获得登录令牌的话是没有用处的.
修改router 如图, 新建新路由 该路由页面为管理主页面 同时新增子路由用于嵌套路由 (详见 vue-router : nested-routes (opens new window) )

本来想着简单的直接nohup node 运行这个博客的后台,结果它就在我考操作系统的今天挂了。琢磨着如何给他做成一个service或者其它一边支持服务的自动重启,看到了网上有更好的守护进程pm2,就学着用pm2部署了,也非常简单。
话不多说,首先需要有node环境,没有的现在VPS上安装并配置环境变量。
npm install pm2 -g # 全局安装