(免费分享)基于springboot,vue公司财务系统

该系统是一个简单的公司财务管理系统，包含用户基本信息管理（员工管理，管理员管理），工资管理（员工工资管理，管理员工资管理），业务管理（员工业务管理，管理员业务管理），系统管理（系统留言公告，用户管理，公告留言管理），收入汇总五个模块。

后台 SpringBoot2.x，JWT 鉴权，Druid连接池，数据库 Mysql
前台 vue-cli 3.0，vue-element-ui

Vue前端框架应用
1.程序框架，主要包含以下依赖内容：
“dependencies”: {
“axios”: “0.18.1”,
“core-js”: “3.6.5”,
“echarts”: “^4.8.0”,
“element-ui”: “2.13.2”,
“file-saver”: “^2.0.5”,
“js-cookie”: “2.2.0”,
“normalize.css”: “7.0.0”,
“nprogress”: “0.2.0”,
“path-to-regexp”: “2.4.0”,
“vue”: “2.6.10”,
“vue-router”: “3.0.6”,
“vuex”: “3.1.0”,
“xlsx”: “^0.16.9”
},
UI样式主要是采用了 element-ui.scss 做统一样式处理，echarts.js 实现图表统计样式
基本框架采用 element-ui 2.13.2，vue2.6.0，vue-router3.0.6，vuex3.1.0

2.部分功能示例

2.1 员工管理（个人信息查询），如下图，点击员工管理可以查询当前用户信息：

核心代码如下：

Controller 接收前端请求

Service 做查询处理，返回当前用户信息：

2.2 修改用户信息，输入用户信息，点击提交修改可以修改用户信息，如下图：

核心代码如下：

2.3 添加部门
点击添加部门，输入部门信息，即可添加部门，如下图：

点击添加，添加成功：

核心代码如下：

更新部门：

核心代码如下：

删除部门：

核心代码如下：

可视化图表应用
后端采用 Mysql 数据库，前台图表采用 el-table，请求后端接口服务，获取数据，在前端渲染，完成图表可视化，示例代码如下：

系统的图表数据皆为请求后端接口，后端从数据库中查询数据得到，封装成 json 数据返回给前端，前端在浏览器对图表进行渲染，完成数据展示。
后台服务应用
系统后台采用 Springboot 开发，采用Jwt 做鉴权处理，使用 springboot-jpa 与数据库交互

Project 截图：

核心代码配置截图：
CrosConfig跨域配置截图，防止前端无法跨域请求：

Druid连接池配置类 DruidConfig：

WebConfig配置，配置静态资源映射，添加鉴权拦截器

AuthenticationInterceptor，鉴权拦截器，处理登录鉴权

SysUserController，系统用户Controller，处理系统用户相关的前端请求，实现增删查改，其他模块与之类似

结论
通过此次大作业，让我很好的掌握了前端 vue 的相关组件的使用以及常见的 api 使用，加深了我对 vue 的理解，同时也较为熟练的掌握了 vue-element-ui 脚手架的使用，可以帮助我快速构建出美观大方的前端页面，不用被各种繁琐的样式困扰，能够专心于业务逻辑的开发。同时我也学会了springboot的使用方式，学会了开发后台服务接口供前端调用，深入理解了前后端分离的思想，前端后端各司其职，便于系统解耦。

该系统整体功能比较简单，基本都是一些简单的增删查改功能，没有复杂的业务逻辑，这一点是本次大作业的不足之处。

以后要更加深入学习前端和后端技术，争取能够独立开发出可用性高，功能全面丰富，有一定业务复杂度的系统，提升自己的技术水平和业务理解能力。
源码获取：关注底部gongzhonghao，输入019领取下载链接