下文按照时间的流逝叙述
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)。
- 小结一下
- 外联的js和css，还是别偷懒，下载下来用吧。
- 不管用什么组件库，总会碰到满足不了需求的时候,自己写样式是跑不掉哒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
网友评论