员工信息管理系统

使用SSM框架搭建的一个简单的员工信息管理系统,实现了基本的增删改查流程

这是完整使用SSM框架开发的一个项目,项目来源于尚硅谷的SSM框架整合教程,其中加入了一些自己的理解,增加了一个搜索功能,这个项目总体来说对于新手是很友好的,涉及到了简单的ajax和jquery,UI搭建,后端SSM环境搭建,简单的业务流程设计(使用JSON交互)

界面UI

在这里插入图片描述

系统架构

在这里插入图片描述
在这里插入图片描述

功能分解

  1. 查询和分页显示

  2. 新增员工信息功能
    数据校验,需要校验用户名和邮箱是否合法
    前端使用jquery校验,后端使用JSR303校验

  3. 修改员工信息功能

  4. 单个删除员工

  5. 批量删除员工

  6. 使用Rest风格的URI

    URI:
    /emp/{id}  GET  查询员工
    /emp  POST  保存员工
    /emp/{id}  PUT  修改员工
    /emp/{id}  DELETE  删除员工

  7. 高级搜索功能

技术点

  • 基础框架:SpringMVC+Spring+MyBatis
  • 数据库:MySQL
  • 前端框架:BootStrap快速搭建
  • 项目依赖管理:Maven
  • 分页:pagehelper(Mybatis的工具)
  • 逆向工程:MyBatis Generator

数据库表设计

在这里插入图片描述

基础环境搭建

  1. 创建一个maven工程

  2. 引入项目依赖的jar包

    spring
    springmvc
    mybatis
    数据库连接池,驱动包
    其他(jstl,servlet-api,junit)

  3. 引入bootstrap前端框架

  4. 编写ssm整合的关键配置文件

    web.xml,spring,springmvc,mybatis,使用mybatis的逆向工程生成对应的bean以及mapper

  5. 测试mapper

功能实现

查询

  1. 访问index.jsp页面
  2. index.jsp页面发送出查询员工列表请求
  3. EmployeeController来接受请求,查出员工数据
  4. 来到list.jsp页面进行展示
  5. pageHelper分页插件完成分页查询功能

查询-ajax

  1. index.jsp页面直接发送ajax请求进行员工分页数据的查询
  2. 服务器将查出的数据,以json字符串的形式返回给浏览器
  3. 浏览器收到js字符串。可以使用js对json进行解析,使用js通过dom增删改改变页面。
  4. 返回json。实现客户端的无关性。

在这里插入图片描述

新增

  1. 在index.jsp页面点击”新增”
  2. 弹出添加员工模态框
  3. 去数据库查询部门列表,显示在对话框中
  4. 用户输入数据,并进行校验
  • jquery前端校验,ajax用户名重复校验,重要数据(后端校验(JSR303),唯一约束);
  1. 完成保存

在这里插入图片描述

修改

  1. 点击编辑
  2. 弹出修改员工的模态框(显示员工信息)
  3. 点击更新,完成员工修改

在这里插入图片描述

删除

  1. 单个删除
  2. 批量删除

在这里插入图片描述

搜索

  1. 点击搜索
  2. 弹出高级搜索的模态框
  3. 用户填写需要搜索的员工信息
  4. 点击搜索,查询出员工信息
  5. 点击返回,可返回所有员工信息的首页

在这里插入图片描述

搜索出所有开发部的男性员工

Logo

开源、云原生的融合云平台

更多推荐