《迹》webApp开发日记

今天是2019.12.29，终于在年前把《迹（账）》的功能写完了。其实这个webapp的功能从去年就在构思了（出于对魅族钱包的失望+担心），之前一直觉得掌握的技能树不足以完成这个side project。今天它终于来了。

0x01 技术选型

pc网站 or h5网站

最初的想法是制作一个web网站通过电脑端记账，毕竟爷可是php+jq一把梭。
后来想着，对平时（周末+法定节假日）的我来说，使用手机的概率比使用PC的概率高多了。那不如只做一个h5站吧

记账后台API git提交记录：

是否需要API实时读写

最初做的是通过API请求增改删查记录，同时对于列表页数据做了缓存优化。

之后在测试过程中发现，这样做除了会导致前端数据缓存的代码难以维护，还对后端处理API请求有不小的压力（比如删除或者修改一条记录，后台除了需要对记录表做操作外，还要重新计算诸如第一次记录的创建时间、账户的支出和结余、月支出和结余等缓存操作）。

最主要的是一个人在2个ide+数据库之间来回切换写，实在是太麻烦了。

所以，有没有更好的方案？

前端读写，定期同步账本到云端

最后的最后，我终于敲定使用这种方案。好处是整个账本逻辑全在前端，相对于后端只要处理账本的备份和下载功能，甚至于不用后端，只是前端数据导入导出也可以！

这样2个端的任务相对独立开，同时只要关注一个端的代码逻辑就好了。

最后使用的技术栈和工具

vue全家桶 vue + vuex + vue Router
数据导出 FileSaver.js
报表功能 ECharts
php + mysql + oss (账本云同步和存储)

0x02 账本存储方式与安全性设计

前端的存储有这么几种：

基于vuex的持久化+账本数据量的估算，localStorage的存储空间足够我保存20年的账本数据了。相信20年之后我已经找到更好的实现方式了，所以这次的webapp采用localstorage来存储。

关于安全性，因为数据存在自己的浏览器本地存储中，所以不需要担心黑客入侵xxx数据泄露的问题（如果都黑进我手机了，那账本显然不是他们最care的数据了）。如果实现要按照基本法来做，那就引入一个aes或者rsa在数据外面再套一层嘛。

0x03 代码规范和结构设计

这次webApp开发，算是对前端方向学习的预热。在这个side project立项之后的半年里，也在工作中实际应用到了vue、echarts和element-ui等模板框架。

站在现在的角度看这个项目的代码，除了文件和变量的命名比较满意，对于components的设计和剥离还存在着很大的问题。
比如对传入变量是使用props还是使用init(params)还有些疑惑，究竟这2种方式更适合哪些场景还在探索中。

希望这些问题能在明年的side project得到解惑，让代码有进一步得提升。

0x04 get的一些小技巧

• 使用Object.prototype.toString.call(变量)来获取准确的类型

typeof()对Array和Object都会报object，无法区分具体的类型，而Object.prototype.toString.call会识别为[object Array]和[object Object]。

• 底部Tabbar的实现

中间的创建记录按钮其实是css实现的，原理是两层div。
父div通过absolute定位设置负top,画一个大的白色圆。
子div通过absolute定位设置负top,画一个小的的蓝底白色图标，垂直居中。

DEMO展示和离线部署

注：在线Demo加入了百度统计查看访问量，请不要输入真实数据。离线安装包已去掉了所有外部链接引用，可放心安装。

demo网址：https://cdn.kejijie.vip/project/wallet/

离线部署教程：https://blog.kejijie.vip/web/wallet_install.html

本项目遵循GPL协议,用户可以免费使用。禁止修改/破解版权信息后的复制/商用

注：2021年1月1日后将在GITHUB开放源代码，并将GPL协议更改为Apache Licence协议。

git开源地址 2021.1.4更新

https://github.com/wantsget/offline-cashbook

参考

检测某一个网页下localStorage的剩余容量
使用localStorage必须了解的点 - 腾讯Web前端 IMWeb 团队社区
Web Storage Support Test