# 员工管理系统 **Repository Path**: mmuwei/Employee_management_system ## Basic Information - **Project Name**: 员工管理系统 - **Description**: 前后端分离项目，前端使用vue，element-ui，后端使用springboot,mybatis - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 0 - **Created**: 2021-10-16 - **Last Updated**: 2022-04-29 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 员工管理系统 #### 介绍 前后端分离项目， 前端使用vue，element-ui， 后端使用springboot,mybatis #### 软件架构 sys_vue_page 项目前端 - src - assets 静态资源 - page 页面代码 - config 配置文件 - main.js - router.js 路由配置 - eslintrc.js 校验语法配置 - vue.config.js 运行配置文件 sys_server 项目后端 - src - main - java - com.hdc.lw - config 配置文件 - controller - mapper - po 实体类 - service - Application 启动类 - resources - mapper - application.yml - webapp #### 安装教程 1. 启动说明 - 前端项目 npm run server - 后端项目 2. xxxx 3. xxxx #### 使用说明 ##### 1、登录功能 ![img](README/img/wps1.jpg) 该功能主要是用于用户登录，用户输入用户名、密码、验证码，点击“登录”进行登录。若验证码输入有误，则会提示用户重新输入并更新验证码。 若用户看不清验证码，则可点击验证码进行刷新。 在点击“登录”时，若用户的用户名、密码、验证码未输入，表单校验未通过，则会提示用户重新输入。表单校验通过后，系统会发送登录信息到后台进行校验。 后台对前台提交的用户名在数据库进行查找，若存在，则匹配密码是否正确，正确则返回用户信息，前端页面跳转至home页。若密码错误，讲返回错误信息，提示用户密码输入错误。若用户不存在，则返回错误信息，前端提示用户不存在。 ##### 2、手机登录功能 ![img](README/img/wps2.jpg) 若用户已注册账号且已绑定手机号，用户可通过手机验证码进行登录，输入手机号，点击“发送验证码”，前端校验手机号通过，则向后端发送请求，后端接受发送验证码请求后，生成随机验证码，并将其存入redis数据库中，并且会调用阿里大于短信验证码接口，向用户发送短信验证码。用户收到短信验证码，填写并点击“立即登录”后，向后端发送手机号登录请求。后端收到请求后，会根据用户手机号在redis数据库中进行查找。若验证码匹配，则登录成功，响应成功信息给前端，前端跳转home页面；验证错误，则提示用户验证码输入错误，请重新输入。 当用户点击“发送验证码”时，前端会将“发送验证码”按钮禁用60s，并且会有倒计时提示。防止用户频繁发送验证码。同时，后端在发送验证码前会查找数据库是否有该手机号，若有则提示用户已经发过验证码，以避免用户频繁发送验证码。 ##### 3、注册功能 ![img](README/img/wps3.jpg) 当用户没有账号时，可以通过登录页面下的“注册”按钮，前往注册页面进行注册。用户输入用户名、密码、验证码进行注册。若用户输入用户名已存在，则会提示用户用户名存在，请重新输入用户名。前端会自动对用户输入的两次密码进行校验，若输入不一致，会提示用户两次密码不一致，请重新输入。若验证码输入错误，也会提示用户重新输入验证码。若所有数据输入无误，后端校验无误，则注册成功，后端返回成功消息。前端跳转到登录页面，并提示用户注册成功，请登录。 ##### 4、数据可视化 ![img](README/img/wps4.jpg) 当用户进入系统时，默认进入index首页，首页可以展示近一周的注册、登录情况，以及绑定手机号的人数。前端通过echarts插件，当页面开始加载时，前端会向后端请求数据，后端返回数据后，通过echarts插件进行渲染，提高用户体验。左侧为功能菜单，主要是该系统的分类管理及用户管理功能。若用户未登录，点击，则会提示用户未登录，并跳转到登录页面。若用户以登录，则可以直接点击对应按钮进入对应页面。用户也可以通过页面右上角的登录按钮进行登录。 ##### 5、分类展示 ![img](README/img/wps5.jpg) 分类管理主要是对分类列表进行展示，分类的添加、编辑、删除。页面主要现实分类名、序号。使用elementui的el-card组件及el-table组件进行展示后端发送的数据。用户点击“删除”按钮，页面弹出询问框是否需要删除，若点击删除，则请求后端，后端完成删除操作会，返回删除成功信息，页面进行刷新，完成删除操作。 ##### 6、添加分类功能 ![img](README/img/wps6.jpg) 添加分类功能，当用户点击添加分类，页面会弹出对话框，用户输入分类名，点击“添加”按钮，前端会发送请求到后端，后端完成添加分类功能，并返回成功消息。添加成功后，页面会进行刷新，重新获取分类列表。 ##### 7、编辑分类功能 ![img](README/img/wps7.jpg) 若用户相对分类进行修改，可点击编辑按钮，对分类进行编辑，页面会弹出对话框，当编辑完成后，点击“确认”按钮，前端请求后端完成编辑操作，后端返回编辑成功消息，页面刷新，完成编辑操作。 ##### 8、用户列表展示 ![img](README/img/wps8.jpg) 用户管理页会展示用户的基本信息，包括用户名、状态、手机号、生日、头像、最后登录时间等信息，同时可以对用户进行操作，如编辑和删除功能。还提供了根据用户名查找功能。用户输入想要查询的用户名，前端携带数据请求后端，后端会通过sql语句拼接查询数据库对应的匹配信息，返回数据给前端展示。分页功能，每次请求用户列表，会携带当前页数及每页显示的条数，后端根据前端的参数，sql语句进行分页查询，返回数据给前端进行展示。 ##### 9、编辑用户功能 ![img](README/img/wps9.jpg) 当用户点击“编辑”按钮时，页面将弹出对话框，用户可对信息中的手机号、状态等信息进行修改，编辑完成，点击“确认”按钮进行提交，前端请求后端对用户信息进行更改，后端编辑成功返回信息。页面将重新请求用户列表进行刷新。 #### 参与贡献 1. Fork 本仓库 2. 新建 Feat_xxx 分支 3. 提交代码 4. 新建 Pull Request #### 特技 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 2. Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com) 3. 你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目 4. [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目 5. Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help) 6. Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)