ssm个人日常事务管理系统+vue

第4章系统实现

一、技术路线：

开发语言：Java

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

数据库：MySQL 5.7

数据库管理工具：Navicat或sqlyog

开发工具：IDEA或Ecplise

二、项目介绍：

https://www.bilibili.com/video/BV1N94y1b7Ni/

三、运行截图：

3.1系统调试运行

   在电脑上安装Eclpse软件和Mysql软件后，先打开Mysql软件，运行数据库。数据库运行成功后可以看到本系统所创建的所有数据库表。然后打开Eclipse软件，在打开本系统的源码后可以进行运行，运行成功后可以出现系统登录的界面。系统调试运行界面如下图3-1所示：

图3-1系统运行调试界面

3.2登录功能的界面实现

系统运行调试后，需要登录。登录界面设计的目的是保证当前的使用角色等级。管理员同样需要登录后才可以进行操作。在登录界面里加入了权限的选择，在登录时只需要填写用户账号和密码、选择权限就可以实现。用户登录的运行界面如下图3-2所示：

图3-2用户登录的运行界面

在登录的界面中包含的元素有系统题目、输入框、登录按钮、选择框。本系统的使用权限为管理员和用户。权限选择框的运行界面如下图3-3所示：

图3-3权限选择框运行界面

3.3管理员功能的设计实现

3.3.1用户信息管理功能的实现界面

用户的信息可由管理员审核，用户的资料由注册时形成。本功能设计的目的是查询和审核用户的资料，当发现不当的使用用户可以删除其账号。当删除用户信息后相对应的用户信息表里的信息也会随着删除掉。查询用户信息功能的运行界面如下图3-4所示：

图3-4查询用户信息功能的运行界面

3.3.2 个人中心管理功能的实现界面

   个人中心管理的内容包括修改密码和个人信息的修改。本系统中可以拥有多个管理员。个人中心管理功能的运行界面如下图3-5所示：

图3-5个人中心管理功能的运行界面

3.3.3日常安排管理功能的实现界面

  　用户浏览的日常安排都是由管理员在此功能里进行维护添加的，同样当管理员添加、编辑日常安排信息后，数据库表中的日常安排信息表也会发生改变。日常安排信息管理功能的运行界面如下图3-6所示：

图3-6日常安排信息管理功能的运行界面

在添加日常安排信息时可以取消和提交。发布新日常安排的运行界面如下图3-7所示：

图3-7发布新日常安排的运行界面

3.3.4 基础数据管理功能的实现界面

  　管理员可以设置消费类型、提醒类型、安排类型。类型的编号不能为空。设置消费类型功能的运行界面如下图3-8所示：

图3.8设置消费类型运行界面

输入提醒类型可以查询提醒。提醒类型查询运行界面如下图3-9所示：

图3-9提醒类型查询的运行界面展示

3.3.5消费记录管理功能的实现界面

　　管理员可以记录日常的消费信息并查询其它用户发布的消费记录和进行必要的修改、删除。查询消费记录信息功能的实现界面如下图3-10所示：

图3-10查询消费记录信息功能的实现界面

3.3.6重要提醒管理功能的实现界面

管理员可以设置重要提醒的信息，也可以看到其它用户设置的重要提醒内容。管理员查询重要提醒信息的实现界面如下图3-11所示：

图3-11管理员查询重要提醒的实现界面

3.4用户角色功能的界面实现

3.3.1日常安排管理功能的界面实现

  　用户可以查询日常安排详情，也可以输入日常安排标题进行日常安排信息的查询，还要以发布新的日常安排信息，用户发布日常安排信息功能的运行界面如下图3-12所示：

图3-12用户发布新日常安排信息功能的运行界面

3.3.2重要提醒管理功能的实现界面

  　用户可以查询重要提醒的内容也可以设置新的重要提醒信息。查询重要提醒信息功能的运行界面如下图3-13所示：

图3-13查询重要提醒信息功能的运行界面

3.3.3个人资料管理功能的实现界面

　　用户可以修改个人的资料，可以使个人的资料更准确。修改个人资料的实现界面如下图3-14所示：

图3-14修改个人资料的功能实现界面

3.3.4消费记录管理功能的界面实现

用户可以查询自己的消费记录并登记新的消费记录。消费记录查询功能的实现界面如下图3-15所示：

图3-15消费记录查询功能的实现界面