NarrastoryBill
2023.01.10
该程序是一个网页端应用,会根据不同的设备展示不同的操作页面
该程序的前端使用了React框架,后端采取的语言是Node.js和Express框架,数据库为MySQL
这个项目非常适合新手入门,如果你正好是以Nodejs作为后端语言,可以拿此项目为模板练练手
如果您不熟悉Nodejs后端框架或者React,没有关系,只要您会Mysql,Linux基础,Nginx web服务器以及有一台自己的服务器即可搭建此程序
(图中数据均为随机生成
)
此记账程序可以根据手机和电脑端的浏览器做出不同反应
想要进入此私人记账网站就一定要输入密码,这个密码的设置具体在程序运行环境搭建教程
中仔细讲解,cookie会保存为时一个星期的用户信息;若连续输错三次密码,则该区域网络ip将会被永远静止登录此网站,除非重启后端服务
若是用手机端浏览器打开此网站,那么会显示为夜间黑客风格的手机端适配界面,但手机端因为屏幕太小,操作起来不方便,就只做了一个添加账单记录的功能和简易查询已往账单记录的功能,通过点击Add
按钮来添加账单记录,点击Search
按钮来跳转到账单查询界面,该页面会有三个区域,第一个名为Records in the last month
的区域展示最近一个月的账单详情记录,名为Remarks
的区域展示账单备忘录(投资表)的内容,名为Monthly detailed record
展示系统统计的每月净收入和花在餐饮上的钱。
若是在PC端打开此网站,那么首先映入眼帘的就是一个超级大且详细的账单记录表格,里面有数据库中所记录的所有账单记录,在右侧可以对数据库进行增删改查等操作。对于查询操作,有非常多的配置,可以查询任意组合的数据。点击最下方的Chart Page
可以转到图标分析界面
图表分析界面的左边区域展示了使用者的总资产和现可用资产,还有每月的净利润和花在餐饮上的钱的统计;中间区域是备忘录,也可以是说借钱/投资表,在此处记录您的投资记录,可以当作关于钱的备忘录使用【注意:总资产减去投资表中的钱的总和即为现可用资产】,下方为收入的二级分类的饼图;右边区域有三个图表,第一个是每月消费次数表【消费频率】,第二的图表统计了每月净利润,每月花费在饮食上的钱,每月非公事饮食支出,第三个图表统计了各个分类的详细支出总和
以PC端为例,PE端同理
此账单的统计部分主要依靠每笔消费的分类来计算的,每笔账单都必须划分一个分类,有一级和二级分类,一级分类包含二级分类,二级分类是一级分类的细分。同时一级分类必须要有收入,公事,餐饮三项。这些分类的详细均有用户自定义,详情见
程序运行环境搭建教程
收入(income):顾名思义,没什么好解释的,可以在此分类下设置许多二级分类,详细到不同的收入来源
公事(business):某些场合不是出于自己意愿不得不花的钱,比如社交,水电费,医疗,证件考试,人情....
餐饮(diet):可以在下面分多个二级分类,比如零食,正餐,饮料等
左上侧的T-Assets
为总资产,E-Assets
为现在拿得出手的资产
中间的部分为金钱备忘录,也可以叫做投资表。T-Assets
减去投资表中的钱的总和即为E-Assets
。下方为详细的收入二级分类饼图
右侧区域有三个图表,第一个是每月消费次数表【消费频率】,第二的图表统计了每月净利润,每月在饮食上的支出,以及每月非公事饮食支出,第三个图表统计了各个分类的详细支出总和
确保本机中有nodejs环境,在命令行输入
node -v
,若显示出版本号即为已经有了nodejs环境,否则就要在其官网下载nodejs程序。同时在服务器中安装mysql。
仓库中的NBill.zip
为前端React文件,解压后在此文件夹中输入输入命令npm install
,稍等片刻
修改NBill/src/functionLibrary/caxios.js
中的localhost
为你自己服务器的ip地址
如果你想改变此程序的语言(默认为英语),可以自行翻译同目录下的language_Chinese.js
文件中的字符串
最后在此文件根目录输入npm run build
,稍等片刻会在此目录下生成一个名为build
的文件夹,此文件夹即为打包好的前端静态文件
静态文件可以放在Nginx上或其它web服务器上均可
仓库中的NBillServer.zip
为后端文件,解压后进入此文件夹
进入functionLibrary
文件夹输入node passwordSet.js
命令开始设置登录密码
打开mysqlCmd/mysqlForm.js
文件,将自己mysql数据库的详细信息填写上去
新建一个名为narrastory_bill
的数据库,在此数据库中执行本仓库中的narrastory_bill.sql
文件即可创建好表格
在total_assets
表中填写唯一一个记录(double),表示你开始使用此账单的初始总资产金额,就是你现在拥有的总资产,包括负债/投资。
在first_classification
表中填入你自己设定的一级分类,在second_classification
表中填入相应一级分类下的二级分类,如下图所示:
一切准备就绪,打开mysql服务,进入后端文件根目录,输入node index.js
即可打开后端服务,把前端静态文件布置好,就可以开始使用啦!
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。