使用Nuxt升级改造Excel理财记账本

序：改造背景

过去几年里我一直有购买基金和银行理财的习惯，在支付宝App里有比较清晰的基金收益界面，方便我根据持有和收益情况进行快速决策(加仓/减仓/卖出)。银行理财则不同，有些IT基建好的民营银行App，收益展示和查询都很方便，而四大行的App基本只能看到收益和收益率，更有一些二类卡理财产品(早先的互联网理财，从手机厂商的钱包App中购买)，在业务下线后只能查看到持有天数和收益。因此，这也导致我对银行理财产品的收益管理比较混乱。

某付宝和某些民营银行在IT建设方面还是比较好的

于是从2023年11月开始，我会在每月月初创建一份Excel表格，统计上月各行的理财收益情况，辅助我了解在各个银行持有的理财产品收益情况。

针对每个银行的月度收益汇总表格

表格里记录了每月的购买金额、赎回金额以及月末的持仓金额，并通过Excel公式计算出收益和收益率。

表格内容

今年年初的时候，我又发现根据不同银行下的产品总收益和总收益率，来调整该行下的理财产品也比较困难。于是又进一步改进表格，增加了产品明细表。

新增了一张记录产品收益明细的表格

从银行维度细化到产品维度后，能够清晰了解到某个产品的月收益和月收益率。这也使得我能轻易的找出那些不赚钱的理财产品并把它卖掉！但是这也带来一个问题：每月维护2张Excel表有些费力。有时候甚至还会遇到拖拽单元格生成的Excel公式有误、两张表数据对照不一致<等问题，这需要花费不少时间去校对验证。

维度更细，可以看到每只产品的月收益和月收益率

那么，是时候改进它了！

一、技术选型

最初的技术设想是Vue3+ElementUI Plus+IndexedDB，原因如下：

1. 对IndexedDB观感不错：21年的时候写过一个Txt的WebApp小说阅读器，实现过切割长文本→转json格式→存入IndexedDB的功能。
2. 技术栈更新：上一份工作用的Vue2+ElementUI，现在Vue2停止维护、ElementUI也出了Plus版。那我也该与时俱进用用新版本了。
3. 为下一份工作做技术储备：最近刷了圈Boss，基本上招聘要求都是Vue3。那Vue3就属于可以不用，不能没有的条件了。

后来又觉得存储在浏览器本地似乎不是很安全，于是打算存到sqlite中，原因如下：

1. 结构简单：全部数据存储在*.sqlite文件中，通过Prisma可以很方便的进行操作。
2. 可靠性高：单机运行时效率和性能都很高，例如微信App的聊天数据就是使用sqlite存储。

但是开发一会后才发现sqlite没法设置用户名密码，只能对sqlite文件本身加密或者对数据表中的敏感数据加密，这意味着默认sqlite运行时是裸奔的。最终想想还是采用Mysql吧，后端框架用Nuxt（好评，简直是Node界的ThinkPHP！），这样可以用一套语言搞定。然后中途又看到一款UI框架——PrimeVue的样式很好看，于是临时换了UI框架（看我前几个月的文章应该也能猜到吧？），最终技术选型为：Vue3+PrimeVue+Nuxt+Mysql。

二、开发中遇到的几个问题

2.1 过度设计

在项目的一开始，根据之前开发SaaS产品的工作经验，我觉得应该设计一套多用户系统：有用户操作前台、管理员查看的管理后台、还可以结合Oauth开发三方登录、二次验证功能、甚至用户还可以生成自己的API_KEY，通过API接口读写数据等等。找了一堆诸如 nuxt-auth 的第三方插件，想要实现非常“宏伟”的工程，然后鼓捣了三天发现连登录还没搞好。

想的太多....

这时候才发现，我没有去实现和项目有关的功能，反而为一些边边角角投入了太多精力，甚至现在开发这个小项目的想法都在逐渐减弱。痛定思痛，于是第一版直接砍掉用户体系，这才进入主要功能的开发。

2.2 安装Nuxt就出错了

查阅官方文档进行安装，运行npx nuxi@latest init <project-name>的第一步就遇到了报错（即使是我开启了全局代理仍然拉取失败？？感觉本地DNS有问题呢）

2.3 Prisma Studio缓存问题

最初觉得Prisma提供的网页版数据库工具挺好用的，然后遇到了一个问题：运行迁移表结构后，Prisma Studio不展示最新的表结构和数据。即使执行npx prisma migrate reset、npx prisma db push进行重置也不生效。

新增的字段没有同步到Prisma Studio

后面发现执行npx prisma studio启动一个新的Prisma Studio就好了，但是老的5555端口仍然被占用！

解决方法：

使用netstat -ano|findstr 5555查找占用的进程ID，然后使用taskkill /F /pid <PID标识号>来强制结束进程，最后执行npx run dev重启项目就恢复正常了

结束被占用的PID

2.4 在nuxt中集成tailwind、PrimeVue

已发文，见 在nuxt3中同时使用PrimeVue和TailwindCSS。

2.5 自定义PrimeVue的组件样式

已发文，见 [记录]PrimeVue Theme的自定义方式。

三、成品效果

仪表盘页面基于PrimeVue的Apollo模板仿的，结合我的实际需求调整了一些卡片样式，使其能够展示范围时间内的持有金额、产品数量、年化收益以及银行维度、产品维度下的产品收益情况和趋势。

仪表页

理财产品页

在持有理财页面实现了批量录入功能，能够从产品/时间维度批量录入收益信息。还增加了一个Popover卡片，可以点击名称查看产品信息。

产品维度-批量录入功能

月份维度-批量录入功能

目前这个版本的功能已经满足现有需求，记录耗时预计将从30分钟降至10分钟内。计划先试录入几次，再进行其它的功能迭代。

真的是结尾了：
从2月底启动项目开发到现在，中间又陆续经历了考驾照和买车，项目开发也断断续续的，好在最终也做出了一个半成品😝。是时候再休整一番，俺先去厦门度个假，回来开始找工作嘿嘿~

有了车就想到处去露营！！！