计算机毕业设计 java在线办公小程序springbootvue 毕设76

第五章小程序的详细设计

一、技术路线：

开发语言：Java

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

数据库：MySQL 5.7

数据库管理工具：Navicat或sqlyog

开发工具：IDEA或Ecplise

二、项目介绍：

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

三、运行截图：

3.1小程序首页的设计

该界面是在线办公小程序的首页，界面设置要求界面简洁明了、操作简单、兼容性好。在考虑设计界面时，首先要考虑界面标准化设计，其次是完善界面设计，但不要因对界面的美化使界面的操作变得复杂，用户可在此页面进行登录等操作，页面顶部导航条是各模块的入口。

登录，用户通过输入账号和密码，选择角色并点击登录进行系统登录操作，如图3-1所示。

图3-1用户登录界面图

员工注册，在员工注册页面通过填写账号、密码、确认密码、姓名、年龄、性别、手机、部门名称等详细信息进行注册操作；如图3-2所示。

图3-2员工注册界面图

用户登陆小程序端，可以实现首页、通知公告、部门信息、会议记录、我的等功能进行详细操作，如图3-3所示。

图3-3小程序端首页界面图

通知公告，在通知公告页面可以查看标题、图片、发布时间、点击次数、简介、内容等详细信息；并进行收藏操作；如图3-4所示。

图3-4通知公告界面图

部门信息，在部门信息页面可以查看部门名称、部门编号、图片、部门主管、部门人数、部门电话、点击次数、部门介绍等详细信息；如图3-5所示。

图3-5部门信息界面图

会议记录，在会议记录页面可以查看会议名称、会议编号、地址、会议主题、图片、开始时间、结束时间、点击次数、参会人员等详细信息；并进行收藏操作；如图3-6所示。

图3-6会议记录界面图

员工功能，员工进入我的页面可以对待办事项、工资信息、我的收藏管理、留言板等详细信息进行操作，如图3-7所示。

图3-7员工功能界面图

用户信息，在用户信息页面通过填写账号、密码、姓名、年龄、性别、手机、部门、职位、照片等信息进行保存或退出登录操作，如图3-8所示。

图3-8用户信息界面图

3.2管理员功能模块

管理员登录，通过输入账号、密码，选择角色并点击登录进行系统登录操作，如图3-9所示。

图3-9管理员登录界面图

管理员登陆系统后，可以对首页、个人中心、通知公告管理、员工管理、部门信息管理、职位信息管理、会议记录管理、待办事项管理、工资信息管理、留言板管理、系统管理等功能进行详细操作，如图3-10所示。

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

通知公告管理，在通知公告管理页面可以对索引、标题、发布时间、封面等信息进行详情，修改和删除操作，如图3-11所示。

图3-11通知公告管理界面图

员工管理，在员工管理页面可以对索引、账号、姓名、年龄、性别、手机、部门、职位、入职日期、照片等内容进行详情，修改和删除操作，如图3-12所示。

图3-12员工管理界面图

部门信息管理，在部门信息管理页面可以对索引、部门编号、部门名称、部门主管、部门人数、部门电话、封面等内容进行详情，修改和删除操作，如图3-13所示。

图3-13部门信息管理界面图

职位信息管理，在职位信息管理页面可以对索引、职位等内容进行详情，修改和删除操作，如图3-14所示。

图3-14职位信息管理界面图

会议记录管理，在会议记录管理页面可以对索引、会议编号、会议名称、地址、会议主题、开始时间、结束时间、封面等内容进行详情，修改和删除操作，如图3-15所示。

图3-15会议记录管理界面图

待办事项管理，在待办事项管理页面可以对索引、标题、待办时间、登记日期、账号、姓名、照片等内容进行详情，修改或删除等操作，如图3-16所示。

图3-16待办事项管理界面图

工资信息管理，在工资信息管理页面可以对索引、月份、封面、账号、姓名、部门、基本工资、加班工资、绩效资金、其他补助、扣款金额、实发工资、登记日期等内容进行详情，修改和删除操作，如图3-17所示。

图3-17工资信息管理界面图

留言板管理，在留言板管理页面可以对索引、用户名、留言内容、留言图片、回复内容、回复图片等内容进行详情，修改，回复或删除操作，如图3-18所示。

图3-18留言板管理界面图

系统管理，在轮播图管理页面可以对索引、名称、值等内容进行详情和修改操作，如图3-19所示。

图3-19系统管理界面图