SSM-员工系统管理平台

基于SSM的员工后台管理系统

一、项目总体介绍

员工后台管理系统是主要用于对员工信息和部门信息的管理，他的主要功能为查询、修改、增加、和删除。页面简洁不失优雅，没有花里胡哨。

后台主要基于Spring+SpringMvc+Mybatis三大框架。
前端页面显示由bootstrap快速搭建而成，有着简洁美观的界面。
主要功能点：
分页
数据校验
jQuery前端校验+Ajax用户名重复校验+JSR303后端校验
ajax
rest风格的URL：使用http协议请求方式的动词来表示对资源的操作
（GET（查询）POST（增加）DELETE（删除）PUT（修改））
技术点：
项目管理：MAVEN
开发工具：Intellij IDEA
开发环境：Windows
基础框架-ssm（spring+springmvc+mybatis）
数据库：MySQL
前端框架：-bootstrap 快速搭建jsp页面
项目的依赖管理：maven
分页：pagehelper
逆向工程：mybatis generator

首先是项目的总体架构：
在这里插入图片描述

二、项目搭建准备

1、数据库准备：



CREATE TABLE `tbl_dpt` (
  `dpt_id` int(11) NOT NULL AUTO_INCREMENT,
  `dpt_name` varchar(255) NOT NULL,
  PRIMARY KEY (`dpt_id`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=gbk




CREATE TABLE `tbl_emp` (
  `emp_id` int(11) NOT NULL AUTO_INCREMENT,
  `emp_name` varchar(255) NOT NULL,
  `gender` char(10) DEFAULT NULL,
  `email` varchar(255) DEFAULT NULL,
  `d_id` int(11) DEFAULT NULL,
  PRIMARY KEY (`emp_id`),
  KEY `fk_emp_dpt` (`d_id`),
  CONSTRAINT `fk_emp_dpt` FOREIGN KEY (`d_id`) REFERENCES `tbl_dpt` (`dpt_id`)
) ENGINE=InnoDB AUTO_INCREMENT=1005 DEFAULT CHARSET=gbk

2、基础环境搭建：
a、创建maven工程
b、引入项目相关依赖
spring依赖，springmvc依赖，mybatis依赖，数据库连接池，驱动包，jsr303数据校验支持，pagehelper，单元测试，jstl等等。
这里只贴一小段：

<!--spring框架中实现事务管理-->
      <groupId>org.springframework</groupId>
      <artifactId>spring-tx</artifactId>
      <version>5.2.5.RELEASE</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-jdbc</artifactId>
      <version>5.2.5.RELEASE</version>
    </dependency>
    <!--spring切面编程的依赖-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-aspects</artifactId>
      <version>5.2.5.RELEASE</version>
    </dependency>
    <!--mybatis整合spring依赖-->
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis-spring</artifactId>
      <version>1.3.1</version>
    </dependency>
    <!--mybatis整合依赖-->
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis</artifactId>
      <version>3.5.1</version>
    </dependency>
      <!--数据库连接池，驱动-->
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>5.1.9</version>
    </dependency>

c、编写ssm整合关键配置文件
在这里插入图片描述

d、使用mybatis的逆向工程生成bean和mapper文件，进行测试
：

在这里插入图片描述

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

测试成功：

三、CRUD操作前后端实现

准备登录页面：

后台进行简单的验证
![在这里插入图片描述](/?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ZobGd0,size_16,color_FFFFFF,t_70

1、bootstrap快速搭建员工页面
在这里插入图片描述

//登录判断
    @RequestMapping(value = "/dologin",method = RequestMethod.POST)
    @ResponseBody
    public Msg dologin(HttpServletRequest request){
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        //String up = username+password;
        if (!"admin111111".equals(username+password)){
            return Msg.fail().add("login_error","输入用户名与密码不匹配，请从新输入");
        }
        return Msg.success();
    }

2、员工CRUD操作
首先搭建完初始页面，后台先进行分页查询，把数据库中的数据查询出来，将后台获得的数据传道页面对应的位置进行展示，具体表现为，前端页面发送ajax请求，服务器收到请求后，返回浏览器json字符串，浏览器收到返回的数据后解析json数据展示在对应的位置。（为什么服务器要把数据以json格式返回给客户端？答：因为在客户端与服务器这种模式下，客户端不仅仅只有浏览器，还有安卓，IOS等，而服务器在传递数据时如果单单把页面转发给后两者时，后两者解析数据可能会出现问题，所以为了提高平台的可扩展性，实现客户端的无关性。我们使用Ajax请求数据，接口把数据以json的格式进行返回）
操作：
1、首先创建一个能够返回json数据的相关类
在这里插入图片描述
2、接口把分页数据以json格式进行返回

3、浏览器进行json数据的解析

**======================================================**
1、员工修改（课程功能与员工功能相似不再赘述）

在这里插入图片描述

查询到员工数据，以json形式返回
在这里插入图片描述
js进行数据的解析

查询部门数据：

员工新增：使用jsr303后端校验
![在这里插入图片描述](/?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ZobGd0,size_16,color_FFFFFF,t_70