项目github链接: 前端, 后端

下文按照时间的流逝叙述

2017-4-20

• 寻找框架 确定采用前后端分离的开发模式(两个项目)
• 前端
  • 框架: vue project(基于 vuejs, vue-rounter 用 vue-cli 生成)
  • 组件库: vuetify (谷歌风格)
• 后端
  • controller层: sinatra (基于 ruby)
  • database: sqlite3
  • ORM: sinatra activerecord

2017-4-27

• 博客的展示页肯定是最总要的页面，卡片风格大部分模仿了google+。（点开请自备梯子）使用瀑布流+卡片的展示方式。

Paste_Image.png

2017-5-3

• 完成展示页的点击标签自动分类功能，以及去除标签分类功能

Paste_Image.png

2017-5-4

• 完成手机上的响应式布局

Paste_Image.png

2017-5-5

• 完成静态评论的滚动显示

Paste_Image.png

2017-5-25

• 完成登陆注册
  • 登陆状态的管理采用了 json web token 配合 cookie 的方式。这样做的好处是后端避免了使用session，理论上减少了后端的io开销,但过多的对token加密解密会增加cpu的运算。(咳咳,话说这都没人会来注册的小站需要考虑这种问题嘛(: )
  • 为了登陆注册的简洁，登陆注册框都是dialog，不进行页面跳转
  • 注册仅需提供email(用户唯一性验证)和昵称,头像上传可选。

注册框

image.png

登录前

image.png

登录框

image.png

显示信息以及登出

image.png

• 完成对登陆后成员对文章的评论,评论区支持markdown(注意过滤<script>标签防止注入)

image.png

额外

关于图片上传

选择了使用云服务,而不是存在服务器本地。对比了七牛和又拍两家，七牛文档更清晰,使用也更方便(对接代码写得少,特别是html直传云服务的情景)，但需要备案的域名,太麻烦。又拍文档一塌糊涂(反正我用的SDK,看啥文档哦)，但可以提供二级域名，省事！

关于组建库

UI 组建用了 vuetify 还没有到1.0的版本,的确风险很大。前两天发现页面突然炸了。原来是vuetify大更新(为了方便之前我是CND引入)，直接break了好几个原先的组件名，css也大调。应对这种情况，赶紧换成了本地引用之前版本的css和js(谁知道他下次啥时候再更新呢,反正版本号目前还没到1.0)。

• 小结一下
  1. 外联的js和css，还是别偷懒，下载下来用吧。
  2. 不管用什么组件库，总会碰到满足不了需求的时候,自己写样式是跑不掉哒T_T

2017-6-12

完成admin权限的管理页面

• 对图片云服务的查看删除(因为又拍云不能在页面上管理图片,僵硬)

做完这个感觉就是把linux文字接口的路径查看,进入(ls,cd,rm...)转化成了带GUI的操作

image.png

• 完成发表，更新 post 的页面

内容输入框做markdown的转化，支持预览。比较麻烦的是拷贝图片进来自动转化为云服务的图片路径，这边的交互比较多，流程是

 textarea监听黏贴事件 => 构建图片 => 上传到云服务 => 得到回调地址 => 插入地址字符

image.png

• 优化post index页面的显示(代码高亮,滚动), 完成上拉加载
• post index 页面上方的搜索框不再是摆设，可以通过标题或者标签搜索

本来是希望搜索框也可以根据搜出文章内容搜索，但sql优化的还不好，效率一般，这个功能暂时进入TODO lists。

• 更换整个站的配色,主要把原来大红色的 top-bar 换成了灰色, card 也都使用黑白灰的色调，代替了原来花里胡哨的颜色，简单一点（不排除哪天又换回花里胡哨的风格）。

image.png

• 可以先上线了吧
  写得好累。。 4/20 到 6/12 ,靠近两个月,感觉才写了几个页面。管他妈的,先上线了，vps 域名买买，环境一装, nginx搞起来

2016-6-13

• TODO lists
  • 网站搭好了，倒是写几篇东西啊。。
  • 博文点赞（做好了一直是0赞岂不是很僵硬）
  • 图片评论
  • 画廊

2017-9-20

• 完成画廊显示
  • 底部显示所有缩略图，点击缩略图跳转
  • 图片显示主题和相关exif
  • 点击图片翻动

image