《迹》webApp开发日记
in 项目 with 0 comment

《迹》webApp开发日记

in 项目 with 0 comment

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

2315410010.png

0x01 技术选型

pc网站 or h5网站

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

6af89bc8gw1f8u5wjl6lwj204a04g747.jpg

记账后台API git提交记录:

git-log.png

是否需要API实时读写

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

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

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

所以,有没有更好的方案?

9150e4e5gy1g5yttd0u60j206c03q744.jpg

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

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

9150e4e5ly1fjrj4m9vbfg208c08cwfn.gif

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

最后使用的技术栈和工具

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

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

前端的存储有这么几种:

批注 2019-12-29 132353.png

基于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的一些小技巧

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

批注 2019-12-29 135228.png

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

DEMO展示和离线部署

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

demo网址:https://lab.kejijie.vip/

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

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

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

参考

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

Comments are closed.