# 高可玩性私人记账前后端程序 **Repository Path**: Karw/Narrastory_Bill ## Basic Information - **Project Name**: 高可玩性私人记账前后端程序 - **Description**: 该程序是一个网页端应用，会根据不同的设备展示不同的操作页面 前端使用了React框架，后端采取的语言是Node.js和Express框架，数据库为MySQL 这个项目非常适合新手入门，若你正好是以Nodejs作为后端语言，可以拿此项目为模板练手 如果您不熟悉Nodejs后端框架或者React，没有关系，只要您会Mysql，Linux基础，Nginx web服务器以及有一台自己的服务器即可搭建此程序 - **Primary Language**: JavaScript - **License**: MulanPSL-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 1 - **Created**: 2023-11-13 - **Last Updated**: 2023-11-13 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # [开源]高可玩性私人记账小程序 `NarrastoryBill` *2023.01.10* ------ > 该程序是一个网页端应用，会根据不同的设备展示不同的操作页面 > > 该程序的前端使用了React框架，后端采取的语言是Node.js和Express框架，数据库为MySQL > > 这个项目非常适合新手入门，如果你正好是以Nodejs作为后端语言，可以拿此项目为模板练练手 > > 如果您不熟悉Nodejs后端框架或者React，没有关系，只要您会Mysql，Linux基础，Nginx web服务器以及有一台自己的服务器即可搭建此程序 ### 页面展示 (`图中数据均为随机生成`) #### PC端： 1 2 ![c](https://cui-storage-1313346470.cos.ap-shanghai.myqcloud.com/Main/NarrastoryBill/c.gif) #### PE端： 3 ### 程序介绍 此记账程序可以根据手机和电脑端的浏览器做出不同反应 想要进入此私人记账网站就一定要输入密码，这个密码的设置具体在`程序运行环境搭建教程`中仔细讲解，cookie会保存为时一个星期的用户信息；若连续输错三次密码，则该区域网络ip将会被永远静止登录此网站，除非重启后端服务 #### PE端 若是用手机端浏览器打开此网站，那么会显示为夜间黑客风格的手机端适配界面，但手机端因为屏幕太小，操作起来不方便，就只做了一个添加账单记录的功能和简易查询已往账单记录的功能，通过点击`Add`按钮来添加账单记录,点击`Search`按钮来跳转到账单查询界面，该页面会有三个区域，第一个名为`Records in the last month`的区域展示最近一个月的账单详情记录,名为`Remarks`的区域展示账单备忘录(投资表)的内容,名为`Monthly detailed record`展示系统统计的每月净收入和花在餐饮上的钱。 #### PC端 若是在PC端打开此网站，那么首先映入眼帘的就是一个超级大且详细的账单记录表格，里面有数据库中所记录的所有账单记录，在右侧可以对数据库进行增删改查等操作。对于查询操作，有非常多的配置，可以查询任意组合的数据。点击最下方的`Chart Page`可以转到图标分析界面 图表分析界面的左边区域展示了使用者的**总资产**和**现可用资产**，还有每月的净利润和花在餐饮上的钱的统计；中间区域是备忘录，也可以是说借钱/投资表，在此处记录您的投资记录，可以当作关于钱的备忘录使用【注意：**总资产**减去投资表中的钱的总和即为**现可用资产**】，下方为收入的二级分类的饼图；右边区域有三个图表，第一个是每月消费次数表【消费频率】，第二的图表统计了每月净利润，每月花费在饮食上的钱，每月非公事饮食支出，第三个图表统计了各个分类的详细支出总和 ### 详细使用说明 `以PC端为例，PE端同理` > 此账单的统计部分主要依靠每笔消费的分类来计算的，每笔账单都必须划分一个分类，有一级和二级分类，一级分类包含二级分类，二级分类是一级分类的细分。同时一级分类必须要有**收入**，**公事**，**餐饮**三项。这些分类的详细均有用户自定义，详情见`程序运行环境搭建教程` > > **收入(income)**：顾名思义，没什么好解释的，可以在此分类下设置许多二级分类，详细到不同的收入来源 > > **公事(business)**：某些场合不是出于自己意愿不得不花的钱，比如社交，水电费，医疗，证件考试，人情.... > > **餐饮(diet)**：可以在下面分多个二级分类，比如零食，正餐，饮料等 #### 增删改查： - 增加：将日期，一级分类，二级分类，支出（负数），和这笔支出的缘由输入到对应输入框内即可 - 改：填写要更改的记录的id，以及相应字段，再输入更改后的内容即可 - 删：填写相应id即可删除 【==注意：超过两个月以外的记录不可更改，不可更改/删除当次登录添加的记录==】 - 查：也叫筛选，勾选那一列就筛选哪一列，可以多选。日期和收支列均为范围筛选，事件列为字符串包含筛选 #### 图表界面： 左上侧的`T-Assets`为总资产，`E-Assets`为现在拿得出手的资产 中间的部分为金钱备忘录，也可以叫做投资表。`T-Assets`减去投资表中的钱的总和即为`E-Assets`。下方为详细的收入二级分类饼图 右侧区域有三个图表，第一个是每月消费次数表【消费频率】，第二的图表统计了每月净利润，每月在饮食上的支出，以及每月**非公事饮食**支出，第三个图表统计了各个分类的详细支出总和 ### 程序运行环境搭建教程 > 确保本机中有nodejs环境，在命令行输入`node -v`,若显示出版本号即为已经有了nodejs环境，否则就要在其[官网](https://nodejs.org/en/)下载nodejs程序。同时在服务器中安装mysql。 #### 前端文件配置 1. 仓库中的`NBill.zip`为前端React文件，解压后在此文件夹中输入输入命令`npm install`,稍等片刻 2. 修改`NBill/src/functionLibrary/caxios.js`中的`localhost`为你自己服务器的ip地址 3. 如果你想改变此程序的语言（默认为英语），可以自行翻译同目录下的`language_Chinese.js`文件中的字符串 4. 最后在此文件根目录输入`npm run build`，稍等片刻会在此目录下生成一个名为`build`的文件夹，此文件夹即为打包好的前端静态文件 5. 静态文件可以放在Nginx上或其它web服务器上均可 #### 后端文件配置 - 仓库中的`NBillServer.zip`为后端文件，解压后进入此文件夹 - 进入`functionLibrary`文件夹输入`node passwordSet.js`命令开始设置登录密码 - 打开`mysqlCmd/mysqlForm.js`文件，将自己mysql数据库的详细信息填写上去 #### 数据库配置 1. 新建一个名为`narrastory_bill`的数据库，在此数据库中执行本仓库中的`narrastory_bill.sql`文件即可创建好表格 2. 在`total_assets`表中填写唯一一个记录（double），表示你开始使用此账单的初始总资产金额，就是你现在拥有的总资产，包括负债/投资。 3. 在`first_classification`表中填入你自己设定的一级分类，在`second_classification`表中填入相应一级分类下的二级分类，如下图所示： 4 一切准备就绪，打开mysql服务，进入后端文件根目录，输入`node index.js`即可打开后端服务,把前端静态文件布置好，就可以开始使用啦!