一、技术路线：

开发语言：Java

使用框架：spring boot

前端技术：JavaScript、VUE.js（2.X）、css3

数据库：MySQL 5.7

数据库管理工具：Navicat或sqlyog

开发工具：IDEA或Ecplise

二、项目介绍：

视频加载中...

三、运行截图：

3.1用户客户端功能实现

用户注册通过注册窗口，进行在线填写自己的用户账号、密码、联系电话、电子邮箱等，信息编辑完成后核对信息无误后进行选择注册，系统核对用户所输入的账号信息是否准确，核对信息准确无误后系统进入到操作界面。

用户通过登录进入到系统操作界面后，可以根据需求对首页、消费详情、收入详情、我的等模块进行管理维护操作。

如图3-1所示。

图3-1用户注册界面图

用户登录通过账号、密码行页面，进入到家庭记账本小程序主界面，进入到操作界面，进行相对应操作，如图3-2所示。

图3-2用户登录界面图

用户在首页页面可以填写首页、消费详情、收入详情、我的等信息，进行提交操作，如图3-3所示。

图3-3首页界面图

用户进入新闻资讯页面可以填写标题、内容等信息，进行查看操作，如图3-4所示。

图3-4新闻资讯界面图

用户进入消费详情页面可以填写标题、食物消费、购物消费、交通消费、学习消费、其他消费、总消费、用户账号、角色、登记时间、封面等信息，进行提交操作，如图3-3-所示。

图3-5消费详情界面图

用户进入收入详情页面可以填写标题、工资收入、奖金收入、其他、总收入、用户账号、角色、登记时间、封面等信息，进行提交操作，如图3-6-所示。

图3-6收入详情界面图

用户进入我的页面可以填写消费详情、收入详情等信息，进行提交操作，如图3-7-所示。

图3-7我的界面图

3.2 管理员服务端功能实现

管理员通过家庭记账本小程序进行确认，管理员进入到家庭记账本小程序主界面，管理员进入到操作界面，通过登录窗口进行在线填写自己的用户名和密码、角色进行登录，登录成功后进入到系统操作界面进行相应信息的获取，如图3-8所示。

图3-8管理员登录主界面图

管理员进入到界面，通过界面的任务大厅，登录成功后进入到系统可以进行查看首页、个人中心、用户管理，消费详情管理、收入详情管理、系统管理等功能模块，进行相对应操作，如图3-9所示。

图3-9管理员功能界面图

管理员点击个人信息进入页面可以填写用户名等信息，进行详情、修改、删除操作，如图3-10示。

图3-10个人信息界面图

管理员进入用户管理界面，通过界面的任务大厅，登录成功后进入到系统可以进行查看用户账号、密码、性别、年龄、联系电话、电子邮箱等信息，进行相对应操作，如图3-11所示。

图3-12用户管理界面图

管理员进入到消费详情管理界面，通过界面的任务大厅，登录成功后进入到系统可以查看标题、食物消费、购物消费、交通消费、学习消费、其他消费、总消费、用户账号、角色、登记时间、封面等信息，进行相对应操作，如图3-13所示。

图3-13消费详情管理界面图

管理员进入到收入详情管理界面，通过界面的任务大厅，登录成功后进入到系统可以查看标题、工资收入、奖金收入、其他、总收入、用户账号、角色、登记时间、封面等信息，进行相对应操作，如图3-14所示。

图3-14收入详情管理界面图

轮播图；该页面为轮播图管理界面。管理员可以在此页面进行首页轮播图的管理，通过新建操作可在轮播图中加入新的图片，还可以对以上传的图片进行修改操作，以及图片的删除操作，如图3-15所示。

图3-15轮播图管理界面图

管理员进入系统公告界面，通过界面的任务大厅，登录成功后进入到系统可以查看标题、图片等信息，进行相对应操作，如图3-16所示。

图3-16系统公告界面图