本文介绍了基于SpringBoot和Vue开发的OA办公系统，重点讨论了系统的需求分析、设计和实现。系统包括登录验证、部门管理、职位管理、职称管理和权限管理等功能，采用前后端分离架构，利用SpringSecurity和JWT实现安全性，并通过Swagger2进行接口文档管理。数据库设计包括管理员、角色、菜单等实体，实现了基础的管理功能。
目 录
第1章 概述 1
1.1 研究背景 1
1.2 研究意义 2
1.3 国内外研究现状 3
1.4 论文结构安排 4
第2章 系统需求和分析 6
2.1 功能需求 6
2.2 数据需求 8
2.3 其他需求 9
第3章 系统设计 10
3.1 系统设计 10
3.2 数据库设计 13
第4章 实现 26
4.1前端项目搭建 26
4.2登录页面 28
4.3后端项目搭建 37
4.4登录功能后端开发 39
4.5 部门管理、职位管理、职称管理和权限组开发 41
第5章 测试和验证 44
5.1 开发过程中遇到的问题及解决方案 44
第6章 总结 46
6.1 内容 46
致谢 47
参考文献 48
第1章 概述
1.1 研究背景
自国务院在2012年《国家战略性新兴产业十二五发展规划》中明确提出要加快新一代信息技术产业的建设至今已十年有余，在此期间，我国提出了发展数字经济、建设网络强国、促进人工智能发展等一系列信息化发展战略，旨在推动信息技术和实体经济深度融合，誓要加快我国数字化、网络化、智能化、信息化的发展。与此同时，随着互联网、云计算、大数据等一系列信息化技术的发展，加之互联网企业和科技巨头的积极布局，这些成熟的技术在越来越多的行业中得到了应用。这就要求在过去的发展中没能跟上时代的企业逐渐摆脱手工作坊的模式，采用更先进的数字信息化、云端化管理模式。
在疫情时代，多地政府、企事业单位开始推进远程办公，号召员工在家办公、在线办公，在线办公平台呈现飞跃式增长。新冠疫情带来了在线办公市场的爆发式增长，虽然随着全面复产复工以及疫情影响的减弱，在线办公行业可能会面临一定程度的影响，但基于在线办公的固有需求以及用户在线办公习惯的形成，未来仍是智能移动办公市场高速发展的红利期，疫情可能成为推动我国在线办公常态化发展的关键节点。
我国中小企业的信息化程度整体上来说还比较低，存在着信息化水平不高、信息化应用面窄等问题。一方面，许多中小企业还存在着信息化认识不足、经验匮乏等问题，缺乏打造信息化基础设施所需的人才和技术支持。另一方面，中小企业普遍规模较小，相对缺乏品牌、资金、管理等方面的优势，不易在信息化领域进行大规模投资和实现巨变。
互联网极大地降低了信息存储、传输、查询、转换等方面的成本，互联网办公在几乎所有方面优于过去的纸张办公。通过搭建服务器，在相同空间条件下硬盘的空间利用率是纸张存储不可比拟的，而在相同时间内通过网络传输的数据规模是过去的数亿倍，并且得益于5G技术的发展这个数量级还在不断提升，对于数据的处理可以通过数据库转存批量化、规模化重组，以相同内容，新的形式重新呈现出来。高度信息化的企业明显具有更高的竞争力，且在面对日新月异的时代能够做出更快的反应，更量化，直观地的掌握企业发展情况。
1.2 研究意义
OA企业办公系统作为互联网应用的一部分，通过服务器对企业员工信息进行管理，将传统的手动、纸张办公方式转化为数字化、网络化的办公方式，从而实现企业管理的自动化和流程化，提高了企业的工作效率和信息化。具体来说，OA办公系统可以帮助企业实现工作流程的标准化和规范化，促进各部门之间的协作和沟通，提高工作效率，减少人为错误，降低企业成本。此外，OA办公系统还可以为企业提供重要的数据支持，为企业员工提供工资、信息流等与自身密切相关的情况，缩短了企业员工与企业高层之间的交流成本，为企业高层决策提供精准且及时的信息，帮助企业做出更加明智的决策。
从理论角度上，OA系统已经在诸多方面趋于成熟，所具有的功能大同小异，然而在涉及实际技术开发时开发者往往有很多选项，不同的框架、开发模式、在时间成本、先进性、产品可靠性、美观性等方面上有很大差异，尤其是在后期维护方面，添加一个新的功能，或显示页面的更改往往意味着大量业务逻辑、页面代码的修改。因此，一个优秀的技术选型能贯穿整个开发环节，根据企业实际需求，进行多功能同时开发、前后端同时开发，节省大量的时间、人力、物力、财力。
因此，在本系统实际开发中，将使用业内流行的前后端分离开发模式，并分别采用Spring Boot 、VUE作为OA系统前端、后端的技术选型。使得前后端在各自开发过程中互不干扰，后端仅需要将数据接口暴露给前端调用，而这些接口都通过Swagger2接口文档进行统一管理。系统在使用jwt进行验证的同时会使用Spring Security框架保证系统安全性，并用Element UI使得界面更加优美。凭借这些主要框架技术以及其他如Redis数据库、逆向工程等开发手段，可以充分满足企业安全性、可扩展性、低成本性等复杂要求。
1.3 国内外研究现状
当今，世界范围内的OA系统被广泛应用于企业、政府机构、教育机构以及个人等各个领域。其中，企业是OA系统的主要用户，包括各种大小型企业，从小型创业公司到大型跨国企业。在这些企业中，OA系统被广泛应用于日常的文档管理、办公自动化、沟通协作和会议管理等方面，使工作变得更加高效和便捷。而在前沿研究方面，OA系统已经成为学术研究的热点之一。相关研究主要涉及OA系统的功能设计、操作界面、用户体验、机器学习以及其在行业中的应用等方面。同时，也有一些研究人员探索OA系统与人工智能、区块链等前沿技术的结合，以提高OA系统的智能化水平，进一步提升其应用价值。
国内外OA系统基本都包含四个模块：文档管理、流程管理、会议管理和信息发布。在国内，研究机构和企业在研发系统时都会结合自身业务需求和管理模式，对系统架构进行相应调整和优化，例如除了具备基本的功能模块外，还有一些如合同管理、库存管理、职称管理等更符合实际需求的定制化的模块。而在国外，电子邮件和电子会议是目前外企中最常使用的OA工具之一，这些工具可以大大简化协作和沟通的流程，提高企业的工作效率。目前，国外很多的OA系统都强调了对邮件和会议的处理能力，例如微软的Exchange和Outlook办公软件等。
1.4 论文结构安排
本论文基于Springboot与vue开发OA办公系统，采用前后端分离的架构方式进行设计和实现。论文共包含了六个章节，主要内容包括系统需求和分析、系统设计、实现、测试和验证等方面，通过具体的案例示范，展示了系统开发的全过程，并从多个角度对系统进行分析、比较、改进，使得最终的系统功能更加完善、性能更加出色，具备高可用性与可扩展性。
其具体安排如下：
第1章：概述。本章介绍论文研究的背景和意义，阐述OA办公系统的发展现状及存在问题，及本论文的研究目的、内容、方法。
第2章：系统需求和分析。本章重点分析OA办公系统在需求方面，包括用户需求、功能需求和数据需求等，并根据需求提出系统的总体设计和架构设计。
第3章：系统设计。本章重点阐述OA办公系统的架构设计和模块设计，包括前后端系统的设计、数据库的设计、接口设计等，详细说明系统的设计思路和实现方法。
第4章：实现。本章重点介绍OA办公系统的实现过程，包括Spring Boot与VUE的配置、后端与前端代码编写、数据库的搭建、模块的实现过程等。
第5章：测试和验证。本章重点描述OA办公系统的测试与验证过程，包括功能测试、安全测试、他人测试等方式，证明系统具有良好的安全性和可靠性。
第6章：总结。本章重点总结OA办公系统研究的成果和意义，分析系统存在的不足和需要改进的问题，展望未来的研究方向，为后续研究提供参考。
第2章 系统需求和分析
2.1 功能需求
企业员工信息管理系统的内容功能对于企业的决策者和管理者来说都至关重要,所以企业员工信息管理系统应该能够为管理者提供充足的信息和快捷的查询与管理手段。云E办主要具有登陆验证、部门管理、职位管理、职称管理、权限管理五个功能。
（1） 登录验证。
作为整个系统的入口，除了具有基础的验证账号密码的功能，还应具有人机验证功能，以防系统后台遭受到脚本dos攻击。
（2） 部门管理。
大多数情况下，一个企业都由许多大小部门组成，大的部门下可能包含小部门，地区部门下有更小市县级部门等等，对于不同层级的部门，应该具有包含的显示关系。对于部门的操作主要包括添加子部门以及删除部门。由于部门之间的关系比较复杂，有时难以找出需要进行修改的部门，因此该界面还应具有搜索功能，将需要进行管理的部门直接查找出来，便于后续操作。
（3） 职位管理。
企业中具有不同的职位，职位管理模块的作用就是实现对这些职位进行添加、编辑、删除等操作。如若遇到职位过多还可以进行批量删除，在添加一个新的职位却并不确定这个职位未来一定会使用时，可以将这个职位设置成未启用，保证该职位在不从系统丢失的前提下，不发挥作用。
（4） 职称管理。
职称管理模块的基本功能与职位管理类似，都包含添加、编辑、批量删除功能。不同的是，职称等级是固定的若干值，在进行添加时职称等级一栏应当使用选择框添加信息，而非让管理员手动输入。
（5） 权限管理。
对于权限管理应基于RBAC(Role-Based Access Control)即权限与角色相关联，用户通过扮演适当的角色从而得到这些角色的权限。这样管理都是层级相互依赖的，权限赋予给角色，角色又赋予用户，这样的权限设计很清楚，管理起来很方便。
对本系统来说，不同的角色具有的权限是不同的，其可访问资源应当受到约束。如部门经理可以访问所有的资源，而人事专员仅能访问员工资料以及人事管理。
以实际例子来讲，当小王扮演着人事专员的角色，他便具有该角色所具有的权限，在本页面应该进行展示其可访问的资源。后来由于企业内部调度原因人事专员还需要负责薪资管理，此时人事专员便需要薪资管理的权限，我们可以在本界面为其添加权限。 而小王身为人事专员则也拥有了薪资管理的权限。
功能需求用例图如图2.1所示
图2.1 功能需求用例图
2.2 数据需求
用户的个人信息表，包括账号、密码、电话号、地址、是否启用等信息需要存储，以便未来管理、数据验证。
部门表，包括部门路径、父部门id、子部门id等。方便确定部门间包含关系。
职称表，包括职称名称、职称等级、是否启用等信息。
菜单角色表，包括某角色所具有的所有操作功能对应表（一对多）。
菜单表，存放所有的操作功能路径、id，是在被前端调用时的路径。
2.3 其他需求
由于本项目是一个前后端分离项目，在分别开发前后端时往往会出现前后端接口不统一、对接困难等问题。
为更方便地进行前后端分离开发，我们需要使用Api接口文档。接口文档包含了对接口URL，参数以及输出内容的说明，我们参照接口文档就能编写出一个个的测试用例。
第3章 系统设计
3.1 系统设计
（1）网站结构
网站主要由登录页面和主页面两个页面，具体功能模块在第二个页面内进行跳转。
登录页面设计如图3.1所示。
图3.1 登录界面
由于开发重点在后端，前端仅显示效果，预计使用ElementUI进行简单的效果渲染，因此页面主要内容是表单验证，动态生成验证码，进行账号密码以及人机验证，通过点击验证码图片可以刷新验证码。
主页设计如图3.2所示。
图3.2 主页结构示意图
主页面左上角可以放企业的logo，右上角负责显示目前登陆人的名称以及头像如系统管理员，昵称左侧有消息提醒，当有系统消息时会进行红点提示，在系统实现聊天功能后，可以提醒收到了他人消息，跳转到聊天页面。
页面左侧是管理工具栏，根据用户的角色不同，会动态刷新出不同的菜单工具，顶侧显示当前工具路径，如首页>基础信息设置。其余空白部分实现具体功能模块。
部门管理模块如图3.3所示。
图3.3 部门管理模块
通过折叠的方式显示部门间的包含关系，上侧提供查询功能，每个部门右侧都有一个添加部门和删除部门的按钮。
职位职称管理模块如图3.4所示。
图3.4 职位职称管理模块
职位职称两个模块比较相似，这里统一表示。模块主要包含添加职位职称的文本框，负责录入需要添加的部门信息，点击添加部门按钮可以提交信息。对于每一个职位或职称信息都有对应的编辑和删除按钮。
权限组模块如图3.5所示。
图3.5 权限组模块
同样采用折叠的模式，展示该角色下可访问的资源，同时可以对资源权限进行修改，通过修改按钮提交。也可以通过上方的添加文本框输入新角色的信息，并点击添加角色进行提交。
3.2 数据库设计
（1）云E办的数据库E-R模型如图3.6所示。
E-R模型中包含管理员、角色、资源、员工、职位、职称、部门共七个实体，以及隐式的“管理员-角色”和“角色-权限”两个关系表。
图3.6 系统E-R模型图
（2）云E办的数据库实体图如下列图所示。
管理员的实体包含id、名称、联系电话、固定电话、地址、账号、密码、头像、是否启用、地址，如图3.7所示。
图3.7 管理员实体图
权限（角色）的实体包含id、role名称、中文名称，如图3.8所示。
图3.8 权限实体图
资源（菜单）的实体包含id、url、路径、成分、名称、是否启用、父菜单id、是否需要认证、iconCls，保持激活，如图3.9所示。
图3.9 菜单实体图
管理员-角色实体表是对所有管理员具有的角色的记录，包含id、管理员id和角色id，如图3.10所示。
图3.10 管理员-角色实体图
角色-菜单表是对所有角色具有的菜单（资源）的记录，包含id、角色id和管理员id，如图3.11所示。
图3.11 角色-菜单实体图
员工实体包含id、姓名、性别、生日、身份证号码、家庭住址、电子邮箱、电话、部门id、职位id、学历、入职日期、工作id、工资、资历等等信息，如图3.12所示。
图3.12 员工实体图
职称实体包括id、名称、职称等级、是否启用、设立时间，如图3.13所示。
图3.13 职称实体图
职位实体包括id、名称、设立时间、是否启用，如图3.14所示。
图3.14 职位实体图
部门实体包括id、名称、父部门id、部门路径、是否启用、是否父部门，如图3.15所示。
图3.15 部门实体图
（3）逻辑模型
系统逻辑结构设计是将概念模型设计阶段完成的概念模型转化为MySQL系统所支持的数据模型。
1） 管理员表主要字段如表3.1所示。
表3.1 管理员表
字段名 类型 约束 备注
id int 主键、自增 Id
name Varchar(32) 无 姓名
phone Char(11) 无 手机号码
address Varchar(64) 无 联系地址
enable tinyint(1) 无 是否启用
username Varchar(255) 无 用户名
remark Varchar(255) 无 备注
userFace Varchar(255) 无 用户头像
password Varchar(255) 无 密码
telephone Varchar(16) 无 住宅电话
2） 角色表主要字段如表3.2所示。
表3.2 角色表
字段名 类型 约束 备注
id int 主键、自增 Id
name Varchar(64) 无 名称
nameZH Varchar(64) 无 角色名称
3） 菜单表主要字段如表3.3所示。
表3.3 菜单表
字段名 类型 约束 备注
id int 主键、自增 Id
url Varchar(64) 无 url
path Varchar(64) 无 Path
compoment Varchar(64) 无 组件
name Varchar(64) 无 菜单名
iconCls Varchar(64) 无 图标
keepAlive tinyint(1) 无 是否保持激活
requireAuth tinyint(1) 无 是否要求权限
parentId int 无 父id
enabled tinyint(1) 无 是否启用
4） 管理员-角色表主要字段如表3.4所示。
表3.4 管理员-角色表
字段名 类型 约束 备注
id int 主键、自增 Id
adminId int 无 管理员Id
rid int 无 角色Id
5） 角色-菜单表主要字段如表3.5所示。
表3.5 角色-菜单表
字段名 类型 约束 备注
id int 主键、自增 Id
mId int 无 菜单Id
rid int 无 角色Id
6） 员工表主要字段如表3.6所示。
表3.6 员工表
字段名 类型 约束 备注
id int 主键、自增 员工编号
name Varchar(10) 无 员工姓名
gender Char(4) 无 性别
birthday date 无 出生日期
idCard char(18) 无 身份证号
wedlock enum 无 婚姻状况
nationId int 无 民族
nativePlace varchar(20) 无 籍贯
politicId int 无 政治面貌
email varchar(64) 无 邮箱
phone varchar(11) 无 电话号码
address varchar(64) 无 联系地址
departmentId int 无 所属部门
jobLevelId int 无 职称ID
posId int 无 职位ID
engageForm varchar(8) 无 聘用形式
tiptopDegree enum 无 最高学历
specialty varchar(32) 无 所属专业
school varchar(32) 无 毕业院校
beginDate date 无 入职日期
workState enum 无 在职状态
workID char(8) 无 工号
contractTerm double 无 合同期限
conversionTime date 无 转正日期
notWorkDate date 无 离职日期
beginContract date 无 合同起始日期
endContract date 无 合同终止日期
workAge int 无 工龄
salaryId int 无 工资账套ID
7） 职位表主要字段如表3.7所示。
表3.7 职位表
字段名 类型 约束 备注
id int 主键、自增 id
name Varchar(32) 无 职位
createDate timestamp 无 创建时间
enabled Tinyint(1) 无 是否启用
8） 职称表主要字段如表3.8所示。
表3.8 职称表
字段名 类型 约束 备注
id int 主键、自增 id
name Varchar(32) 无 职称名称
titleLevel enum 无 职称等级
createDate timestamp 无 创建时间
enabled Tinyint(1) 无 是否启用
9） 部门表主要字段如表3.9所示。
表3.9 部门表
字段名 类型 约束 备注
id int 主键、自增 id
name Varchar(32) 无 部门名称
parentId int 无 父id
depPath Varchar(255) 无 路径
enabled Tinyint(1) 无 是否启用
isParent Tinyint(1) 无 是否上级
系统的实体类图如图3.16、图3.17所示
图3.16 实体类图（1）
图3.17 实体类图（2）
第4章 实现
4.1前端项目搭建
在编写登录页面之前，首先进行vue项目搭建。
（1）安装vue-cli
使用Node.js下载地址。
黑窗输入以下代码安装 Node.js 淘宝镜像加速器（ cnpm ）
npm install cnpm -g
# 或使用如下语句解决 npm 速度慢的问题 npm install --registry=https://registry.npm.taobao.org npm install -g @vue/cli vue --version
安装 vue-cli
npm install -g @vue/cli
测试是否安装成功
vue --version
（2）创建vue项目
使用管理员模式运行Windows Power Shell，使用cd指令进入想要创建项目的位置
vue create yeb
[如果此处运行显示系统禁止运行未知脚本，则输入指令set-ExecutionPolicy RemoteSigned，并选择Y]
创建项目后会有一些选项，选择Manually select features
==> 选择Babel，Router
==>是否需要使用history模式，否
==>选择配置信息存储位置，package.json
（3）运行项目
cd yeb
npm run serve
运行结果如图4.1所示。
图4.1 项目运行截图
安装并运行成功后在浏览器输入：http://localhost:8080，即可看到vue初始界面。
npm install axios
（4）配置项目npm启动
在idea中配置项目，配置截图如图4.2所示。
图4.2 项目配置截图
4.2登录页面
（1）安装Element-ui
npm i element-ui -S
-s ：将模块安装到项目目录下，并在 package 文件的 dependencies 节点写入依赖
（2）登陆界面以及处理登录事件
login.vue
<template>
<div>
<el-form :rules="rules" ref="loginForm" :model="loginForm" class="loginContainer">
<h3 class="loginTitle">系统登录</h3>
<el-form-item prop="username">
<el-input type="text" auto-complete="false" v-model="loginForm.username" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" auto-complete="false" v-model="loginForm.password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item prop="code">
<el-input type="text" auto-complete="false" v-model="loginForm.code" placeholder="点击图片更换验证码" style="width: 250px;margin-right:5px"></el-input>
<img :src="captchaUrl" @click="updateCaptcha">
</el-form-item>
<el-checkbox v-model="checked" class="loginRemember">记住我</el-checkbox>
<el-button type="primary" style="width: 100%" @click="submitLogin">登录</el-button>
</el-form>
</div>
</template>
<script>
export default {
name: "Login",
data(){
return{
captchaUrl:'/captcha?time='+new Date(),
loginForm:{
username:"admin",
password:"123",
code:""
},
checked:true,
rules:{
username:[{required:true,message:'请输入用户名',trigger:'blur'}],
password:[{required:true,message:'请输入密码',trigger:'blur'}],
code:[{required:true,message:'请输入验证码',trigger:'blur'}]
}
}
},
methods:{
updateCaptcha(){
this.captchaUrl = '/captcha?time'+ new Date();
},
submitLogin(){
this.$refs.loginForm.validate((valid) => {
if (valid) {
alert('submit!');
} else {
this.$message.error('请输入所有字段');
return false;
}
});
}
}
}
</script>
<style>
.loginContainer{
border-radius: 15px;
background-clip: padding-box;
margin: 180px auto;
width: 350px;
padding: 15px 35px 15px 35px;
background: #fff;
border: 1px solid #eaeaea;
box-shadow: 0 0 25px #cac6c6;
}
.loginTitle{
margin: 0px auto 40px auto;
text-align: center;
}
.loginRemember{
text-align: left;
margin: 0px 0px 15px 0px;
}
.el-table-filter__content{
display: flex;
align-items: center;
}
</style>
显示效果如图4.3所示：
图4.3 登录界面截图
（3）调用后端接口完成登录功能
安装Axios
npm install axios
封装请求
每一次网络请求都有可能成功或者失败。成功有成功的处理方式，失败一般都是提示错误信息。我们希望将所有的失败统一进行处理提示错误信息而不是每失败一次处理一次，因此我们将网络请求进行封装达到统一处理失败信息的目的。
utils 目录下新建 api.js
import axios from 'axios'
import {Message} from "element-ui";
import router from "../router";
//响应拦截器
axios.interceptors.response.use(success=>{
//业务逻辑错误
if (success.status && success.status == 200){
if (success.data.code == 500||success.data.code == 401||success.data.code == 403){
Message.error({message:success.data.message});
return;
}
if(success.data.message){
Message.success({message:success.data.message});
}
}
return success.data;
},error => {
if(error.response.code == 504||error.response.code == 404){
Message.error({message:'服务器被吃了＞︿＜'});
}else if(error.response.code == 403){
Message.error({message:'权限不足，请联系管理员！'});
}else if(error.response.code == 401){
Message.error({message:'尚未登录，请登录！'});
router.replace('/')
}else {
if (error.response.data.message){
Message.error({message:error.response.data.message})
}else {
Message.error({message:'未知错误！'})
}
}
return;
});
let base = '';
//传送json格式的post请求
export const postRequest =(url,params)=>{
return axios({
method:'post',
url:'{base}${url}',
data:param
})
}
配置请求转发解决跨域
新建vue.config.js
let proxyObj = {}
proxyObj['/']={
//websocket
ws:false,
//目标地址
target:'http://localhost:8081',
//发送请求头host会被设置target
changeOrigin:true,
//不重写请求地址
pathRewrite:{
'^/':'/'
}
}
module.exports={
devServer:{
host:'localhost',
port:8080,
proxy:proxyObj
}
}
（4）处理验证码
验证码后端直接返回图片，直接通过 img 标签的src属性即可获取。添加图片的点击事件，请求时 time 参数是为了确保验证码能够正确刷新。
<img :src="captchaUrl" @click="updateCaptcha">
对应方法：
<script>
export default {
name: "Login",
data(){
return{
captchaUrl:'/captcha?time='+new Date(),
loginForm:{
username:"admin",
password:"123",
code:""
},
checked:true,
rules:{
username:[{required:true,message:'请输入用户名',trigger:'blur'}],
password:[{required:true,message:'请输入密码',trigger:'blur'}],
code:[{required:true,message:'请输入验证码',trigger:'blur'}]
}
}
},
methods:{
updateCaptcha(){
this.captchaUrl = '/captcha?time'+ new Date();
},
submitLogin(){
this.$refs.loginForm.validate((valid) => {
if (valid) {
alert('submit!');
} else {
this.$message.error('请输入所有字段');
return false;
}
});
}
}
}
</script>
需要后台接口服务器先启动 。验证码错误，提示错误信息（接口返回）。账户名或密码输入错误，提示错误信息（接口返回）。账户名和密码输入正确，弹出用户token（接口返回）。
登录界面完成效果如图4.3所示。
图4.3 登录界面完成效果
4.3后端项目搭建
（1）搭建父项目
由于云E办是一个前后端分离的项目，需要建立一个父项目用来管理所有的子项目，子项目包括前端、后端、以及逆向工程项目。
（2）创建yeb-server子项目
根据图4.4方式建立子项目yeb-server。
图4.4 创建子项目方式
根据项目需要添加依赖，配置该项目的application.yml(.properties)，其中包含了spring的一些参数，如端口、数据源配置。
（3）创建逆向工程
AutoGenerator是MyBatis-Plus的代码生成器，通过 AutoGenerator 可以快速生成 Pojo、Mapper、Mapper XML、Service、Controller 等各个模块的代码。
对于仅需要单表操作的业务功能，AutoGenerator极大的提升了开发效率，让我们有更多的精力关注业务逻辑的实现。
同图4.4方式建立子项目yeb-generator。
由AutoGenerator给出的模板，修改为本项目路径以及配置后运行CodeGenerator.class中的执行main方法，随后在控制台直接输入表名，多个表名用，隔开，生成的代码如图4.5所示。
图4.5 逆向工程生成代码截图
4.4登录功能后端开发
（1）根据Spring Security框架，Jwt验证实现登录
登录页面的后台验证由Spring Security 框架实现，并使用JWT（JSON Web Tokens）实施Token验证方法。
客户端使用用户名跟密码请求登录，服务端收到请求，去验证用户名与密码，验证成功后，服务端会签发一个 Token，再把这个 Token 发送给客户端，客户端收到 Token 以后可以把它存储起来，比如放在 Cookie 里或者 Local Storage 里，客户端每次向服务端请求资源的时候需要带着服务端签发的 Token，服务端收到请求，然后去验证客户端请求里面带着的 Token，如果验证成功，就向客户端返回请求的数据。JWT用户验证流程如图4.6所示
图4.6 JWT用户认证流程图
（2）接口文档
前后端分离项目在对接时往往会遇到各种各样的问题，为使前后端对接更加规范，接口信息更加清晰，开发过程中往往需要使用到接口文档。这里我选用了最热门的Swagger2进行实现。主要是通过对Controller层方法、参数添加注释作为标记，随后Swagger2会对代码进行扫描，将对应的get、post等方法请求生成测试文档。在接口文档中还可以调用测试用例，让后端人员验证自己的代码是否达到预期效果。其原理如图4.7所示
图4.7 接口文档原理图
（3）验证码
验证码生成的方式有很多，我选择了最普遍使用的图像验证码，使用Google Kaptcha 验证码产品实现前台验证码显示功能。根据谷歌官方给出的验证码配置类，稍作修改，并写编写对应的Pojo、Mapper、Mapper XML、Service、Controller层代码。即可实现验证码的后台验证。具体验证时序图如图4.8所示。
图4.8 验证时序图
4.5 部门管理、职位管理、职称管理和权限组开发
由于部门管理、职位管理、职称管理和权限组开发过程重复，且开发流程相对于登录验证并没有太多新的内容。这里仅给出实现效果。部门管理、职位管理、职称管理和权限组效果分别如图4.9、图4.10、图4.11、图4.12所示。
图4.9 部门管理页面实现图
图4.10 职位管理页面实现图
图4.11 职称管理页面实现图
图4.12 权限组页面实现图
第5章 测试和验证
5.1 开发过程中遇到的问题及解决方案
如图5.1所示首次运行时末修改路径，仍是逆向工程模板上的com.xxxx。导致生成的service以及impl文件路径都不对，全部爆红。只好删了重新生成，也可以手动导包。
图5.1 逆向工程路径设置错误截图
后记：在运行application时再次报错具体代码如下。
……Cause: org.apache.ibatis.type.TypeException: Could not resolve type alias 'com.wzh.pojo.Admin'. Cause: java.lang.ClassNotFoundException: Cannot find class: com.wzh.pojo.Admin
直接看最后一句，我建的路径是com.wzh.server.pojo.Admin,而报错中显示并没有.server层，经过逐级排查，最终在xxxxmapper.xml中发现了错误。
<resultMapid="BaseResultMap"type="com.wzh.pojo.SysMsg"></resultMap>
对每一个xxxxmapper.xml中resultMap的type修改为com.wzh.server.pojo.xxx后成功运行。
其他还有很多问题，在解决时也没有截图，不再一一列举，一般都是路径造成的传值失败问题，如后端@RestMapping注册的和前端设置的拿数据路径不一致，以及其他类似sql语句写错、调错方法名等等。
第6章 总结
6.1 内容
云E办，是面向中小型企业的在线办公系统。
云E办主要实现企业内基础信息的管理，具有部门管理、职位管理、职称管理、权限组四个功能。通过软件的方式，方便企业管理，使得管理模式简单化、扁平化，管理操作更高效、规范，从而提高整体的管理运营水平。
本系统后端基于Spring boot开发，底层代码涉及MybatisPlus、SpringSecurity、JWT、Redis、Swagger等工具及框架的使用。前端主要使用Vue、ElementUI等工具及框架。主要使用前后端分离的开发模式。
由于受开发时间及学习成本的限制，云E办最后的完成程度与预期有很大落差，诸多如员工管理、发送邮件、工资套账、个人中心等功能模块都都未能实现。但出于个人对于Java Web的兴趣以及提高自己的目的，其他功能也将会在未来对Spring boot进行系统学习后予以实现，并作为毕业设计以新的面貌重新呈现在老师面前。
扫一扫
7565
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
