基于Vue+SSM+SpringCloudAliababa的员工管理系统

简介: 基于Vue+SSM+SpringCloudAliababa的员工管理系统

环境要求


  1. 根据提供的hr.sql,完成表创建和数据插入
  2. 项目名称:
  1. 网关:exam-gateway-0113
  2. 员工服务:exam-service-emp-0113
  3. 岗位服务:exam-service-job-0113


功能要求

注册功能

访问 http://localhost:8081/#/login 展示登录页面,点击“点击注册”按钮,进入注册页面


671cd633f8c74c8b867db78659f0dd9e.png


注册页面:


输入员工信息,点击【注册】按钮

1f6a180488b340c2a54bb2bcbe79ba8e.png


密码与确认密码不一致:提示“俩次输入的密码不一致”


ee2e607ec1254ea88526973148f785e1.png

  • 发送激活邮件
  1. 需要使用MQ发送邮件
  2. 发送后,提示“邮件已发送”

815685a639924fb98db1f5c0369b4519.png


  • 信息输入正确,注册成功
  1. 提示注册成功
  2. 跳转至登录页面


4c33e71a56f44ca1b04297a0b231b4df.png


登录功能


输入邮箱和密码进行登录:


如果密码错误,给出提示信息


如果密码正确,跳转到主页


邮箱或密码错误:


2b08b3029a6f49ddb074ba1037649e09.png


账号密码正确:跳转到主页


5d8f18da85344663b222c661af9274c2.png

员工列表

  1. 点击【员工管理】-【员工列表】进入员工列表,展示所有员工信息

dcee548554c64561b49bcb6e3ea5c6ff.png

多条件组合查询

  1. 在员工列表页面,可以根据员工姓名模糊查询,以及根据员工出生日期进行范围查询

58d15f98e8b14c4d9a07cc8644151993.png

分页

  1. 商品列表页面可以完成分页功能:展示查询的总条数、可以改变每页展示多少条数据、可以通过点击前后按钮或数字按钮查看每页数据、可以直接跳转到指定页


e35d223148294772b00e6aceb2eda7a2.png


带条件分页

  1. 当根据条件查询后,查看每页结果时,查询条件依然展示。


def976aa136446a99edad7e0b5256c25.png

批量删除

选中商品列表复选框,可以批量删除商品


dbd0b60029124dedb442711577ed7188.png

注意删除商品后还是在当前页

1.删除前

0918bcb8fb63479298a58cc60a176961.png


1.删除后

b214370a74d145bdacabf43405c734d3.png


员工修改

  1. 点击【编辑】按钮,跳转到修改页面,可以对当前行员工进行修改


4839b2b5d41b4f2e881c6d553d794171.png

1.数据回显

646c21c8005045378c6f2972d2131941.png


1.数据操作:显示员工岗位

f7acf3659eb54f52a9a9519fb4b9bd85.png

  1. 1.数据操作:隐藏员工岗位


d99580fa5a514054b4bf3aea17fe05e1.png


  1. 1.点击确定,完成对员工的修改,并跳转到列表页面

fc9d4776c2d94cb7be5a42ac38daea47.png



相关文章
|
7天前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
55 1
|
18天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
2月前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
48 1
vue学习第一章
|
2月前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令,包括基本使用、动态绑定class及style等,希望能为你的前端学习之路提供帮助。持续关注,更多精彩内容即将呈现!🎉🎉🎉
34 1
|
2月前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
2月前
|
JavaScript 前端开发 开发者
Vue是如何劫持响应式对象的
Vue是如何劫持响应式对象的
35 1
|
2月前
|
JavaScript 前端开发 API
介绍一下Vue中的响应式原理
介绍一下Vue中的响应式原理
37 1
|
2月前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之,Vue 数据驱动视图是一种先进的理念和技术,它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性,开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中,数据驱动视图将继续发挥重要作用,推动着应用界面的不断创新和进化。
|
2月前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
2月前
|
存储 JavaScript 前端开发
介绍一下Vue的核心功能
介绍一下Vue的核心功能

热门文章

最新文章