ssm小型项目搭建(增删改查功能)

Crud ssm 小型项目搭建

  • 遇到问题
  1. 创建maven项目时pom文件中<packaging>war</packing>报错

原因:缺少相对应的web.xml文件

解决办法:右击创建的maven项目,选择properties下的Project Facets,先去掉Dynamic web Module,然后再重新添加,添加时注意选择路径.

  1. index页面打开之后是页面源码,或运行代码无法进入到Controller中

原因:web.xml文件中springmvc.xml文件的作用路径配置错误.

解决办法:修改相应路径.

  1. @ContextConfiguration无法使用

原因:编写的测试类不在/src/test/java文件下

解决办法:右击项目-选择build path-source-将Contains test source 设置为yes.

   

 

 

 

Crud 流程

  1. 创建maven项目

创建成功后,如图所示,pom.xml文件会报错,原因是缺少web.xml文件:

扫描二维码关注公众号,回复: 4450089 查看本文章

解决办法,如图所示添加web.xml文件:

  1. 导入相关依赖:

<!--  spring MVC-->

   <dependency>

    <groupId>org.springframework</groupId>

    <artifactId>spring-webmvc</artifactId>

    <version>4.3.20.RELEASE</version>

</dependency>

 

<!--spring JDBC 事务控制  -->

<dependency>

    <groupId>org.springframework</groupId>

    <artifactId>spring-jdbc</artifactId>

    <version>4.3.20.RELEASE</version>

</dependency>

 

<!-- spring 面向切面 -->

<dependency>

    <groupId>org.springframework</groupId>

    <artifactId>spring-aspects</artifactId>

    <version>4.3.20.RELEASE</version>

</dependency>

 

<!-- Mybatis -->

<dependency>

    <groupId>org.mybatis</groupId>

    <artifactId>mybatis</artifactId>

    <version>3.4.4</version>

</dependency>

 

<!-- spring-mybatis 适配 -->

<dependency>

    <groupId>org.mybatis</groupId>

    <artifactId>mybatis-spring</artifactId>

    <version>1.3.2</version>

</dependency>

 

<!--数据库,连接池包  -->

<dependency>

    <groupId>c3p0</groupId>

    <artifactId>c3p0</artifactId>

    <version>0.9.1.2</version>

</dependency>

 

<!--驱动  -->

<dependency>

    <groupId>mysql</groupId>

    <artifactId>mysql-connector-java</artifactId>

    <version>5.1.47</version>

</dependency>

 

<!--jstl servlet-api junit  -->

<dependency>

    <groupId>javax.servlet</groupId>

    <artifactId>jstl</artifactId>

    <version>1.2</version>

</dependency>

<dependency>

    <groupId>javax.servlet</groupId>

    <artifactId>javax.servlet-api</artifactId>

    <version>4.0.0</version>

    <scope>provided</scope>

</dependency>

<dependency>

    <groupId>junit</groupId>

    <artifactId>junit</artifactId>

    <version>4.12</version>

    <scope>test</scope>

</dependency>

<dependency>

    <groupId>org.mybatis.generator</groupId>

    <artifactId>mybatis-generator-core</artifactId>

    <version>1.3.7</version>

</dependency>

<dependency>

    <groupId>org.springframework</groupId>

    <artifactId>spring-test</artifactId>

    <version>4.3.17.RELEASE</version>

    <scope>test</scope>

</dependency>

 

<!-- pagehelper -->

<dependency>

    <groupId>com.github.pagehelper</groupId>

    <artifactId>pagehelper</artifactId>

    <version>5.1.7</version>

</dependency>

<!-- jackson -->

<dependency>

    <groupId>com.fasterxml.jackson.core</groupId>

    <artifactId>jackson-databind</artifactId>

    <version>2.9.6</version>

</dependency>

 

<dependency>

    <groupId>com.fasterxml.jackson.core</groupId>

    <artifactId>jackson-core</artifactId>

    <version>2.9.6</version>

</dependency>

 

<dependency>

    <groupId>com.fasterxml.jackson.core</groupId>

    <artifactId>jackson-annotations</artifactId>

    <version>2.9.6</version>

</dependency>

<!-- JSR303数据校验 -->

<dependency>

    <groupId>org.hibernate</groupId>

    <artifactId>hibernate-validator</artifactId>

    <version>6.0.10.Final</version>

</dependency>

 

<!--  log4j相关依赖-->

   <dependency>

<groupId>log4j</groupId>

<artifactId>log4j</artifactId>

<version>1.2.17</version>

</dependency>

 

 

</dependencies>

  1. 编写相关配置文件,包括web.xml,spring.xml,springmvc.xml,spring-mybatis.xml
  1. web.xml

<!-- spring -->

<context-param>

<param-name>contextConfigLocation</param-name>

<param-value>classpath:applicationContext.xml</param-value>

</context-param>

 

<!-- Bootstraps the root web application context before servlet initialization -->

<listener>

<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>

</listener>

 

<!--spring-mvc 前端控制器  -->

<!-- The front controller of this Spring Web application, responsible for handling all application requests -->

<servlet>

<servlet-name>springDispatcherServlet</servlet-name>

<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>

<init-param>

<param-name>contextConfigLocation</param-name>

<param-value>classpath:springmvc.xml</param-value>

</init-param>

<load-on-startup>1</load-on-startup>

</servlet>

 

<!-- Map all requests to the DispatcherServlet for handling -->

<servlet-mapping>

<servlet-name>springDispatcherServlet</servlet-name>

<url-pattern>/</url-pattern>

</servlet-mapping>

 

<!--字符编码过滤器,所有过滤器之前  -->

<filter>

<filter-name>CharacterEncodingFilter</filter-name>

<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>

<init-param>

<param-name>encoding</param-name>

<param-value>utf-8</param-value>

</init-param>

<init-param>

<param-name>forceRequestEncoding</param-name>

<param-value>true</param-value>

</init-param>

<init-param>

<param-name>forceResponseEncoding</param-name>

<param-value>true</param-value>

</init-param>

 

</filter>

 

<filter-mapping>

<filter-name>CharacterEncodingFilter</filter-name>

<url-pattern>/*</url-pattern>

</filter-mapping>

 

<filter>

<filter-name>HiddenHttpMethodFilter</filter-name>

<filter-class> org.springframework.web.filter.HiddenHttpMethodFilter</filter-class>

</filter>

 

<filter-mapping>

<filter-name>HiddenHttpMethodFilter</filter-name>

<url-pattern>/*</url-pattern>

</filter-mapping>

 

 

<filter>

<filter-name>HttpPutFormContentFilter</filter-name>

<filter-class>org.springframework.web.filter.HttpPutFormContentFilter</filter-class>

</filter>

<filter-mapping>

<filter-name>HttpPutFormContentFilter</filter-name>

<url-pattern>/*</url-pattern>

</filter-mapping>

 

  1. dbconfig.properties

jdbc.jdbcUrl=jdbc:mysql://localhost:3306/ssm_crud?useSSL=true

jdbc.driverClass=com.mysql.jdbc.Driver

jdbc.user=root

jdbc.password=root

  1. spring.xml

<context:component-scan base-package="com.ssm.maven"></context:component-scan>

 

<!--spring的配置文件,主要配置和业务逻辑有关的  -->

<!--数据源 事务控制 -->

<context:property-placeholder location="classpath:dbconfig.properties"/>

<bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">

<property name="jdbcUrl" value="${jdbc.jdbcUrl}"/>

<property name="driverClass" value="${jdbc.driverClass}"/>

<property name="user" value="${jdbc.user}"/>

<property name="password" value="${jdbc.password}"/>

</bean>

 

<!--mybatis和spring  -->

<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">

<property name="dataSource" ref="dataSource" />

<property name="configLocation" value="classpath:spring-mybatis.xml" />

<property name="mapperLocations"value="classpath:/com/ssm/maven/mapper/*.xml" />

</bean>

 

<!--配置扫描器:将mybatis接口加入到IOC容器中-->

<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">

<property name="basePackage" value="com.ssm.maven.mapper" />

</bean>

 

<!-- 配置批量插入sqlSession -->

<bean id="sqlSession" class="org.mybatis.spring.SqlSessionTemplate">

<constructor-arg name="sqlSessionFactory" ref="sqlSessionFactory" />

<constructor-arg name="executorType" value="BATCH"/>

</bean>

<!-- 配置事务管理器 -->

<bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">

<property name="dataSource" ref="dataSource" />

</bean>

 

<!--开始基于注解的配置,使用xml配置形式的事务(主要的都是使用配置式)  -->

<aop:config>

<aop:pointcut expression="execution(public * com.ssm.maven.service..*(..))" id="txPoint"/>

<aop:advisor advice-ref="txAdvice" pointcut-ref="txPoint"/>

</aop:config>

 

<!--配置事务增强,事务如何切入  -->

<tx:advice id="txAdvice" transaction-manager="transactionManager">

<tx:attributes>

<!-- 切入的所有方法都是事务方法 -->

<tx:method name="*"/>

<!-- 切入的所有以get开始的方法都是事务方法 -->

<tx:method name="get" read-only="true"/>

</tx:attributes>

</tx:advice>

  1. springmvc.xml

<mvc:annotation-driven></mvc:annotation-driven>

<mvc:default-servlet-handler/>

<context:component-scan base-package="com.ssm.maven">

</context:component-scan>

 

<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">

<property name="prefix" value="/WEB-INF/views/"></property>

<property name="suffix" value=".jsp"></property>

</bean>

  1. spring-mybatis.xml

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE configuration

  PUBLIC "-//mybatis.org//DTD Config 3.0//EN"

  "http://mybatis.org/dtd/mybatis-3-config.dtd">

  <configuration>

   <settings>

   <setting name="mapUnderscoreToCamelCase" value="true"/>

   </settings>

   <typeAliases>

   <package name="com.ssm.maven.pojo"/>

   </typeAliases>

  

   <!-- 分页插件 -->

   <plugins>

   <plugin interceptor="com.github.pagehelper.PageInterceptor">

   <!--使分页信息合理化参数  -->

   <property name="reasonable" value="true"/>

   </plugin>

   </plugins>

  </configuration>

  1. log4j.properties:打印日志

 ### \u8BBE\u7F6E###

log4j.rootLogger = debug,stdout,D,E

 

### \u8F93\u51FA\u4FE1\u606F\u5230\u63A7\u5236\u62AC ###

log4j.appender.stdout = org.apache.log4j.ConsoleAppender

log4j.appender.stdout.Target = System.out

log4j.appender.stdout.layout = org.apache.log4j.PatternLayout

log4j.appender.stdout.layout.ConversionPattern = [%-5p] %d{yyyy-MM-dd HH:mm:ss,SSS} method:%l%n%m%n

  1. 用mybaties generator生成数据mapper,mapper.xml,pojo文件

参考:

http://www.mybatis.org/generator/running/runningWithJava.html

  1. 引入bootstrap前端框架

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

过程:

首页-发送ajax请求-ajax请求员工json数据-解析json数据-在页面进行展示.

页面展示:

  1. 增加员工信息
  1. 在index.jsp页面点击”新增”按钮.
  2. 去数据库查询部门列表.
  3. 弹出新增模态框.(参考bootstrap中文文档组件)

<!-- Modal:增加员工模态框 -->

<div class="modal fade" id="myAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

  <div class="modal-dialog" role="document">

    <div class="modal-content">

      <div class="modal-header">

        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>

        <h4 class="modal-title" id="myModalLabel">增加员工</h4>

      </div>

      <div class="modal-body">

        <form class="form-horizontal" id="add_form">

          <div class="form-group" >

    <label for="empName_input" class="col-sm-2 control-label">empName</label>

    <div class="col-sm-10" id="add_empName_div">

      <input type="text" name="empName" class="form-control" id="empName_input" placeholder="empName">

    </div>

  </div>

  <div class="form-group">

    <label for="email_add" class="col-sm-2 control-label">Email</label>

    <div class="col-sm-10">

      <input type="email" name="email" class="form-control" id="email_add" placeholder="Email">

    </div>

  </div>

  <div class="form-group">

  <label class="col-sm-2 control-label">gender</label>

  <div class="col-sm-10">

  <label class="radio-inline">

  <input type="radio" name="gender" id="gender_input_1" value="1"> 男

 </label>

 <label class="radio-inline">

  <input type="radio" name="gender" id="gender_input_2" value="0"> 女

 </label>

 </div>

 </div>

 <div class="form-group">

    <label for="add_select" class="col-sm-2 control-label">deptName</label>

    <div class="col-sm-10">

      <select class="form-control" name="dId" id="add_select">

</select>

    </div>

  </div>

</form>

      </div>

      <div class="modal-footer">

        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

        <button type="button" class="btn btn-primary" id="add_save">保存</button>

      </div>

    </div>

  </div>

</div>

  1. 用户输入数据.
  2. 点击”保存”按钮,jquery前端校验(用户名是否合法等)或JSR303后端校验(用户名是否合法等),还有后端校验用户名是否重复等.
  3. 发送ajax请求,完成保存.

页面展示:

注意:

用户名是否重复与用户名合法校验信息统一

模态框关闭之后,再次弹出,信息重置

  1. 修改员工信息
  1. 点击”编辑”按钮.
  2. 在数据库中查询部门信息,填充下拉列表.然后查询员工信息,选择下拉列表内容.
  3. 弹出更新模态框.
  4. 修改用户信息,点击”保存”按钮.
  5. 进行信息校验,发送ajax请求,完成保存.
  6. 关闭模态框.
  7. 跳到当前页

页面展示:

注意:

Ajax同步:async:false:ajax发送请求并得到返回结果,再进行下一步

Ajax异步:async:true:ajax发送请求,进行下一步

更新按钮点击事件,发送ajax请求,使用put请求时,需要配置HttpPutFormContentFilter过滤器.

  1. 删除员工信息

删除单个员工:

  1. 点击单个删除按钮.
  2. 弹出是否确认删除.
  3. 发送ajax请求.
  4. 删除数据.
  5. 成功,跳转到最后一页.

页面展示:

删除多个员工:

  1. 创建复选框,用于多选.
  2. 点击总删除按钮,弹出是否确认删除.
  3. 确认,发送ajax请求,删除数据.
  4. 成功,跳转到最后一页.

页面展示:

注意:

  1. 对于dom原生的属性,用prop获取属性的值;attr获取自定义属性的值.eg.”checked”属性值的读取和设置,用prop.
  2. :checked 选择器.匹配所有被选中的复选框.
  1. 代码

Index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<% 

pageContext.setAttribute("APP_PATH",request.getContextPath());

%>

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

<link href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">

<script src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

</head>

<body>

<!-- Modal:增加员工模态框 -->

<div class="modal fade" id="myAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

  <div class="modal-dialog" role="document">

    <div class="modal-content">

      <div class="modal-header">

        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>

        <h4 class="modal-title" id="myModalLabel">增加员工</h4>

      </div>

      <div class="modal-body">

        <form class="form-horizontal" id="add_form">

          <div class="form-group" >

    <label for="empName_input" class="col-sm-2 control-label">empName</label>

    <div class="col-sm-10" id="add_empName_div">

      <input type="text" name="empName" class="form-control" id="empName_input" placeholder="empName">

    </div>

  </div>

  <div class="form-group">

    <label for="email_add" class="col-sm-2 control-label">Email</label>

    <div class="col-sm-10">

      <input type="email" name="email" class="form-control" id="email_add" placeholder="Email">

    </div>

  </div>

  <div class="form-group">

  <label class="col-sm-2 control-label">gender</label>

  <div class="col-sm-10">

  <label class="radio-inline">

  <input type="radio" name="gender" id="gender_input_1" value="1"> 男

 </label>

 <label class="radio-inline">

  <input type="radio" name="gender" id="gender_input_2" value="0"> 女

 </label>

 </div>

 </div>

 <div class="form-group">

    <label for="add_select" class="col-sm-2 control-label">deptName</label>

    <div class="col-sm-10">

      <select class="form-control" name="dId" id="add_select">

</select>

    </div>

  </div>

</form>

      </div>

      <div class="modal-footer">

        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

        <button type="button" class="btn btn-primary" id="add_save">保存</button>

      </div>

    </div>

  </div>

</div>

 

<!-- 员工更新模态框 -->

<div class="modal fade" id="myUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

  <div class="modal-dialog" role="document">

    <div class="modal-content">

      <div class="modal-header">

        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>

        <h4 class="modal-title" id="myModalLabel">更新员工</h4>

      </div>

      <div class="modal-body">

        <form class="form-horizontal" id="update_form">

          <div class="form-group" >

    <label for="empName_input" class="col-sm-2 control-label">empName</label>

    <div class="col-sm-10" id="add_empName_div">

      <p class="form-control-static" id="update_empName_static"></p>

    </div>

  </div>

  <div class="form-group">

    <label for="email_update" class="col-sm-2 control-label">Email</label>

    <div class="col-sm-10">

      <input type="email" name="email" class="form-control" id="email_update" placeholder="Email">

    </div>

  </div>

  <div class="form-group">

  <label class="col-sm-2 control-label">gender</label>

  <div class="col-sm-10">

  <label class="radio-inline">

  <input type="radio" name="gender" id="gender_update_1" value="1"> 男

 </label>

 <label class="radio-inline">

  <input type="radio" name="gender" id="gender_update_2" value="0"> 女

 </label>

 </div>

 </div>

 <div class="form-group">

    <label for="update_select" class="col-sm-2 control-label">deptName</label>

    <div class="col-sm-10">

      <select class="form-control" name="dId" id="update_select">

</select>

    </div>

  </div>

</form>

      </div>

      <div class="modal-footer">

        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

        <button type="button" class="btn btn-primary" id="update_save">保存</button>

      </div>

    </div>

  </div>

</div>

 

 

<!-- 查询列表 -->

<div class=".container">

<div class="row">

<div class="col-md-12" align="center"><h1>员工管理</h1></div>

</div>

<div class="row">

<div class="col-md-4 col-md-offset-8">

<button class="btn btn-info" id="add_buttun">增加</button>

<button class="btn btn-danger" id="delete_buttun">删除</button>

</div>

</div>

<div class="row" >

<div class="col-md-12">

<table class="table table-hover" id="emp_table">

<thead>

<tr>

<th><input type="checkbox" id="check_all"></th>

<th>EmpId</th>

<th>EmpName</th>

<th>Gender</th>

<th>Email</th>

<th>Department</th>

<th>操作</th>

</tr>

</thead>

<tbody>

 

</tbody>

</table>

</div>

</div>

<!-- 分页 -->

<div class="row">

<div  class="col-md-6" id="page_info"></div>

<div  class="col-md-6" id="page_nav"></div>

</div>

</div>

<script type="text/javascript">

 

//首先进入第一页

 

var pages;

var currentNum;

$(function(){

to_page(1);

});

 

//去到第几页

function to_page(pn){

$.ajax({

url:"${APP_PATH}/emps",

data:"pn="+pn,

type:"GET",

success:function(result){

//alert(1);

emp_table_info(result);

 

emp_page_info(result);

 

emp_page_nav(result);

}

 

});

}

 

//显示员工列表信息

function emp_table_info(result){

$("#emp_table tbody").empty();

$.each(result.extend.pageInfo.list,function(index,item){

var checked=$("<td></td>").append("<input type='checkbox' class='check_item'>");

var empIdTd=$("<td></td>").append(item.empId);

var empNameTd=$("<td></td>").append(item.empName);

var genderTd=$("<td></td>").append(item.gender==1?'男':'女');

var emailTd=$("<td></td>").append(item.email);

var deptTd=$("<td></td>").append(item.dept.deptName);

var editButtun=$("<buttun></buttun>").addClass("btn btn-info btn-sm edit-bu").append("编辑");

editButtun.attr("edit_id",item.empId);

var delButtun=$("<buttun></buttun>").addClass("btn btn-danger btn-sm del-bu").append("删除");

delButtun.attr("del_id",item.empId);

var operateTd=$("<td></td>").append(editButtun).append("  ").append(delButtun);

$("<tr></tr>").append(checked).append(empIdTd).append(empNameTd).append(genderTd).append(emailTd).append(deptTd).append(operateTd).appendTo($("#emp_table tbody"));

});

}

 

//页码信息显示

function emp_page_info(result){

$("#page_info").empty();

$("#page_info").append("当前第"+result.extend.pageInfo.pageNum+"页;总共"+result.extend.pageInfo.pages+"页;总共"+result.extend.pageInfo.total+"条记录");

currentNum = result.extend.pageInfo.pageNum;

}

 

//分页信息显示

function emp_page_nav(result){

$("#page_nav").empty();

var ul = $("<ul></ul>").addClass("pagination");

var firstPage = $("<li></li>").append($("<a></a>").attr("href","#").append("首页"));

var prePage =$("<li></li>").append($("<a></a>").attr("href","#").append($("<span></span>").append("«")));

var lastPage = $("<li></li>").append($("<a></a>").attr("href","#").append("末页"));

var nextPage =$("<li></li>").append($("<a></a>").attr("href","#").append($("<span></span>").append("»")));

if(result.extend.pageInfo.hasPreviousPage==false){

firstPage.addClass("disabled");

prePage.addClass("disabled");

}else{

firstPage.click(function(){

to_page(1);

});

prePage.click(function(){

to_page(result.extend.pageInfo.pageNum-1);

});

}

ul.append(firstPage).append(prePage);

$.each(result.extend.pageInfo.navigatepageNums,function(index,item){

numli=$("<li></li>").append($("<a></a>").attr("href","#").append(item));

if(item==result.extend.pageInfo.pageNum){

numli.addClass("active");

}else{

numli.click(function(){

to_page(item);

});

}

ul.append(numli);

});

if(result.extend.pageInfo.hasNextPage==false){

nextPage.addClass("disabled");

lastPage.addClass("disabled");

}else{

lastPage.click(function(){

to_page(result.extend.pageInfo.pages);

});

nextPage.click(function(){

to_page(result.extend.pageInfo.pageNum+1);

});

}

ul.append(nextPage).append(lastPage);

ul.appendTo("#page_nav");

}

 

 

//获得部门列表

function get_depts(ele){

//清空下拉列表的内容

$(ele).empty();

//发送ajax请求得到部门信息

//{"code":100,"msg":"处理成功!","extend":{"depts":[{"deptId":1,"deptName":"KF"},{"deptId":2,"deptName":"XS"}]}}

$.ajax({

url:"${APP_PATH}/depts",

type:"GET",

async : false,

success:function(result){

$.each(result.extend.depts,function(index,item){

$("<option></option>").append(item.deptName).attr("value",item.deptId).appendTo($(ele));

});

}

});

}

//增加用户信息模态框

$("#add_buttun").click(function(){

//重置模态框表单

form_reset("#add_form");

 

//获得部门列表

get_depts("#add_select");

 

//弹出模态框

$("#myAddModal").modal({

backdrop:"static"

});

});

 

//重置模态框表单

function form_reset(ele){

//清空表单内容

$(ele)[0].reset();

//清空错误提示框

$(ele).find("*").removeClass("has-success has-error");

//清空错误提示信息

$(ele).find(".help-block").text("");

 

}

 

$("#add_save").click(function(){

//验证表单数据是否输入正确

 if(!validate_add_form_empName()){

return false;

}  

 if(!validate_add_form_email()){

return false;

}  

 if($("#empName_input").attr("ajax-validate")=="error"){

return false;

}  

 $.ajax({

url:"${APP_PATH}/emp",

type:"POST",

data:$("#add_form").serialize(),

success:function(result){

//判断状态码

if(result.code==200){

if(result.extend.user_msg.empName != undefined){

add_validate_info("#empName_input","error",result.extend.user_msg.empName);

}

if(result.extend.user_msg.email != undefined){

add_validate_info("#email_add","error",result.extend.user_msg.email);

}

}else if(result.code==100){

//关闭模态框

$("#myAddModal").modal("hide");

//跳到最后一页

to_page(result.extend.pageInfo.pages);

}

}

});

});

 

 

//验证表单数据

function validate_add_form_empName(){

eN = /^[a-zA-Z0-9_-]{3,6}$/;

empName = $("#empName_input").val();

if(!eN.test(empName)){

add_validate_info("#empName_input","error","用户名不可用,用户名由3-6位数字和字母组成!");

return false;

}else{

add_validate_info("#empName_input","success","用户名输入正确!");

return true;

}

 

}

 

function validate_add_form_email(){

eM = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;

email = $("#email_add").val();

if(!eM.test(email)){

add_validate_info("#email_add","error","邮箱格式不正确!");

return false;

}else{

add_validate_info("#email_add","success","邮箱格式正确!");

return true;

}

 

}

 

function validate_update_form_email(){

eM = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;

email = $("#email_update").val();

if(!eM.test(email)){

add_validate_info("#email_update","error","邮箱格式不正确!");

return false;

}else{

add_validate_info("#email_update","success","邮箱格式正确!");

return true;

}

 

}

//校验信息

function add_validate_info(ele,status,msg){

$(ele).parent().removeClass("has-success has-error");

$(ele).next("span").remove();

if(status=="success"){

$(ele).parent().addClass("has-success");

message = $("<span></span>").addClass("help-block").text(msg);

$(ele).parent().append(message);

}else{

$(ele).parent().addClass("has-error");

message = $("<span></span>").addClass("help-block").text(msg);

$(ele).parent().append(message);

}

}

 

//验证用户名是否重用

 $("#empName_input").change(function(){

//发送ajax请求,判断用户名是否重复

var empName=$("#empName_input").val();

$.ajax({

url:"${APP_PATH}/userCkeck",

type:"GET",

data:"empName="+empName,

success:function(result){

if(result.code==100){

     if(validate_add_form_empName()){

      $("#empName_input").attr("ajax-validate","success");

     }else{

      $("#empName_input").attr("ajax-validate","error");

     }

 

}else{

add_validate_info($("#empName_input"),"error","用户名重复,不可用!");

$("#empName_input").attr("ajax-validate","error");

}

}

});

});  

 

 

$(document).on("click",".edit-bu",function(){

form_reset("#update_form");

//得到部门信息

get_depts($("#update_select"));

 

//获取当前按钮的id值

var id = $(this).attr("edit_id");

$("#update_save").attr("id",$(this).attr("edit_id"));

//得到要更新的员工信息

get_emp(id);

 

//弹出模态框

$("#myUpdateModal").modal({

backdrop: "static"

});

/* //发送ajax请求

$.ajax({

url:"${APP_PATH}/emp/"+id,

type:"put",

data:$("#update_form").serialize(),

success:function(result){

//弹出模态框

$('#myModal').modal({

backdrop: "static"

});

}

 

});  */

});

 

 

function get_emp(ele){

$.ajax({

url:"${APP_PATH}/emp/"+ele,

type:"GET",

success:function(result){

$("#update_empName_static").append(result.extend.employee.empName);

$("#email_update").val(result.extend.employee.email);

$("#myUpdateModal input[name=gender]").val([result.extend.employee.gender]);

$("#update_select").val(result.extend.employee.dId);

}

});

}

 

$("#update_save").click(function(){

//判断输入邮箱是否合法

 if(!validate_update_form_email()){

return false;

}

 console.log($("#update_form").serialize());

//发送ajax请求

   $.ajax({

url:"${APP_PATH}/emp/"+$(this).attr("id"),

type:"PUT",

data:$("#update_form").serialize(),

success:function(result){

//关闭模态框

$("#myUpdateModal").modal('hide');

//跳到当前页

to_page(currentNum);

}

 

});   

});

 

 

//点击删除,跳出确认框,确认是否删除?

 

$(document).on("click",".del-bu",function(){

var del_id = $(this).attr("del_id");

var empName = $(this).parents("tr").find("td:eq(2)").text();

if(confirm("确认删除["+empName+"]吗?")){

$.ajax({

url:"${APP_PATH}/emp/"+del_id,

type:"DELETE",

success:function(result){

to_page(result.extend.pageInfo.pages);

}

});

}

});

 

//dom原有属性,用prop来返回或设定属性值

$(document).on("click",".check_item",function(){

if($(".check_item:checked").length==$(".check_item").length){

$("#check_all").prop("checked",true);

}else{

$("#check_all").prop("checked",false);

}

});

 

//点击check_all按钮,页面所有复选框都被选中

$("#check_all").click(function(){

$(".check_item").prop("checked",$(this).prop("checked"));

})

 

//点击总删除按钮.删除选中的所有数据

$("#delete_buttun").click(function(){

empNames="";

empId="";

 $.each($(".check_item:checked"),function(index,item){

empName=$(item).parents("tr").find("td:eq(2)").text();

empNames = empNames+empName+",";

empId = empId + $(item).parents("tr").find("td:eq(1)").text()+",";

});

 empNames=empNames.substring(0,empNames.length-1);

 empId=empId.substring(0,empId.length-1);

 console.log(empId);

if(confirm("确认删除["+empNames+"]吗?")){

$.ajax({

url:"${APP_PATH}/emp/"+empId,

type:"DELETE",

success:function(result){

to_page(result.extend.pageInfo.pages);

}

});

}

});

 

</script>

</body>

</html>

Msg.java

package com.ssm.maven.pojo;

 

import java.util.HashMap;

import java.util.Map;

 

public class Msg {

 

private Integer code;

private String msg;

private Map<String,Object> extend = new HashMap<String,Object>();

 

public static Msg success(){

Msg ms=new Msg();

ms.setCode(100);

ms.setMsg("处理成功!");

return ms;

}

 

public static Msg fail(){

Msg ms=new Msg();

ms.setCode(200);

ms.setMsg("处理失败!");

return ms;

}

 

public  Msg add(String key,Object value) {

this.getExtend().put(key,value);

return this;

}

public Integer getCode() {

return code;

}

 

public void setCode(Integer code) {

this.code = code;

}

 

public String getMsg() {

return msg;

}

 

public void setMsg(String msg) {

this.msg = msg;

}

 

public Map<String, Object> getExtend() {

return extend;

}

 

public void setExtend(Map<String, Object> extend) {

this.extend = extend;

}

 

}

 

MyController.java

package com.ssm.maven.controller;

 

import java.util.HashMap;

import java.util.List;

import java.util.Map;

 

import javax.validation.Valid;

 

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Controller;

import org.springframework.ui.Model;

import org.springframework.validation.BindingResult;

import org.springframework.validation.FieldError;

import org.springframework.validation.ObjectError;

import org.springframework.web.bind.annotation.PathVariable;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RequestMethod;

import org.springframework.web.bind.annotation.RequestParam;

import org.springframework.web.bind.annotation.ResponseBody;

 

import com.github.pagehelper.PageHelper;

import com.github.pagehelper.PageInfo;

import com.ssm.maven.pojo.Department;

import com.ssm.maven.pojo.Employee;

import com.ssm.maven.pojo.Msg;

import com.ssm.maven.service.MyService;

 

@Controller

public class MyController {

 

@Autowired

MyService myService;

@RequestMapping("/testController")

public String testController() {

return "list";

}

 

/*@RequestMapping("/emps")

public String getEmps(@RequestParam(value="pn",defaultValue="1")Integer pn,Model model) {

System.out.println("dsdsfsdfsdf");

PageHelper.startPage(pn, 5);

List<Employee> emps = myService.getAllEmps();

PageInfo<Employee> page = new PageInfo<Employee>(emps,5);

model.addAttribute("pageInfo",page);

//System.out.println(page.getNavigatepageNums());

return "list";

}*/

 

/**

 * 检查用户名是否重用

 * @param empName

 * @return

 */

@ResponseBody

@RequestMapping("/userCkeck")

public Msg userCkeck(String empName) {

boolean flag = myService.userCkeck(empName);

if(flag) {

return Msg.success();

}else {

return Msg.fail();

}

 

}

@ResponseBody

@RequestMapping(value="/emps")

public Msg getEmps(@RequestParam(value="pn",defaultValue="1")Integer pn) {

PageHelper.startPage(pn,5);

List<Employee> emps = myService.getAllEmps();

PageInfo<Employee> list = new PageInfo<Employee>(emps,5);

return Msg.success().add("pageInfo", list);

}

 

@ResponseBody

@RequestMapping(value="/emp",method=RequestMethod.POST)

public Msg addEmp(@Valid Employee employee,BindingResult result) {

Map<String,Object> map = new HashMap<String,Object>();

if(result.getFieldErrorCount()>0) {

 List<FieldError> errors = result.getFieldErrors();

for (FieldError error : errors) {

map.put(error.getField(), error.getDefaultMessage());

}

return Msg.fail().add("user_msg", map);

}else {

myService.addEmp(employee);

PageHelper.startPage(1,5);

List<Employee> emps = myService.getAllEmps();

PageInfo<Employee> page = new PageInfo<Employee>(emps,5);

return Msg.success().add("pageInfo", page);

}

 

}

 

@ResponseBody

@RequestMapping(value="/depts",method=RequestMethod.GET)

public Msg getAllDepts() {

List<Department> depts=myService.getAllDepts();

return Msg.success().add("depts", depts);

}

 

/*@ResponseBody

@RequestMapping(value="/emp/{id}",method=RequestMethod.PUT)

public Msg updateEmpById(@PathVariable("id")Integer id,Employee employee) {

employee.setEmpId(id);

System.out.println(employee.getEmpId());

 

myService.updateEmp(employee);

System.out.println("3333333333333");

return Msg.success();

}

*/

 

/**

 * 更新员工信息

 * 注意从更新模态框的表单中获取的信息中没有empId

 * 解决办法:1.将映射地址中携带的参数改为{empId}

 *    2.将emoloyee的empId的值设置为映射地址中携带的参数值

 * @param employee

 * @return

 */

@ResponseBody

@RequestMapping(value="/emp/{empId}",method=RequestMethod.PUT)

public Msg updateEmpById(Employee employee) {

myService.updateEmp(employee);

System.out.println("3333333333333");

return Msg.success();

}

 

@ResponseBody

@RequestMapping(value="/emp/{id}",method=RequestMethod.GET)

public Msg getEmpById(@PathVariable("id")Integer id) {

System.out.println("1111111111");

Employee employee = myService.getEmpById(id);

System.out.println(employee);

return Msg.success().add("employee", employee);

}

 

/**

 * 删除员工信息

 * @param id

 * @return

 */

@ResponseBody

@RequestMapping(value="/emp/{ids}",method=RequestMethod.DELETE)

public Msg deleteEmpById(@PathVariable("ids") String ids) {

if(ids.contains(",")) {

String[] idl = ids.split(",");

for (String string : idl) {

int id = Integer.parseInt(string);

myService.deleteEmpById(id);

}

}else {

int id = Integer.parseInt(ids);

myService.deleteEmpById(id);

}

PageHelper.startPage(1,5);

List<Employee> emps = myService.getAllEmps();

PageInfo<Employee> page = new PageInfo<Employee>(emps,5);

return Msg.success().add("pageInfo", page);

}

}

MyService.java

package com.ssm.maven.service;

 

import java.util.List;

 

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Service;

 

import com.ssm.maven.mapper.DepartmentMapper;

import com.ssm.maven.mapper.EmployeeMapper;

import com.ssm.maven.pojo.Department;

import com.ssm.maven.pojo.Employee;

import com.ssm.maven.pojo.EmployeeExample;

import com.ssm.maven.pojo.EmployeeExample.Criteria;

 

@Service

public class MyService {

 

@Autowired

EmployeeMapper employeeMapper;

 

@Autowired

DepartmentMapper departmentMapper;

public List<Employee> getAllEmps(){

List<Employee> emps = employeeMapper.selectByExampleWithDept(null);

return emps;

}

public void addEmp(Employee employee) {

// TODO Auto-generated method stub

employeeMapper.insertSelective(employee);

}

public List<Department> getAllDepts() {

// TODO Auto-generated method stub

List<Department> depts = departmentMapper.selectByExample(null);

return depts;

}

/**

 * 检查用户名是否可用

 * @param empName

 * @return

 */

public boolean userCkeck(String empName) {

EmployeeExample example=new EmployeeExample();

Criteria criteria = example.createCriteria();

criteria.andEmpNameEqualTo(empName);

// TODO Auto-generated method stub

 long count = employeeMapper.countByExample(example);

 if(count==0) {

 return true;

 }else {

return false;

}

}

/**

 * 更新员工信息

 * @param employee

 */

public void updateEmp(Employee employee) {

// TODO Auto-generated method stub

employeeMapper.updateByPrimaryKeySelective(employee);

}

public Employee getEmpById(Integer id) {

// TODO Auto-generated method stub

return employeeMapper.selectByPrimaryKeyWithDept(id);

}

public void deleteEmpById(Integer id) {

// TODO Auto-generated method stub

employeeMapper.deleteByPrimaryKey(id);

}

}

 

EmployeeMapper.java

package com.ssm.maven.mapper;

 

import com.ssm.maven.pojo.Employee;

import com.ssm.maven.pojo.EmployeeExample;

import java.util.List;

import org.apache.ibatis.annotations.Param;

 

public interface EmployeeMapper {

    long countByExample(EmployeeExample example);

 

    int deleteByExample(EmployeeExample example);

 

    int deleteByPrimaryKey(Integer empId);

 

    int insert(Employee record);

 

    int insertSelective(Employee record);

 

    List<Employee> selectByExample(EmployeeExample example);

 

    Employee selectByPrimaryKey(Integer empId);

    

    List<Employee> selectByExampleWithDept(EmployeeExample example);

 

    Employee selectByPrimaryKeyWithDept(Integer empId);

 

    int updateByExampleSelective(@Param("record") Employee record, @Param("example") EmployeeExample example);

 

    int updateByExample(@Param("record") Employee record, @Param("example") EmployeeExample example);

 

    int updateByPrimaryKeySelective(Employee record);

 

    int updateByPrimaryKey(Employee record);

}

EmployeeMapper.java

package com.ssm.maven.mapper;

 

import com.ssm.maven.pojo.Employee;

import com.ssm.maven.pojo.EmployeeExample;

import java.util.List;

import org.apache.ibatis.annotations.Param;

 

public interface EmployeeMapper {

    long countByExample(EmployeeExample example);

 

    int deleteByExample(EmployeeExample example);

 

    int deleteByPrimaryKey(Integer empId);

 

    int insert(Employee record);

 

    int insertSelective(Employee record);

 

    List<Employee> selectByExample(EmployeeExample example);

 

    Employee selectByPrimaryKey(Integer empId);

    

    List<Employee> selectByExampleWithDept(EmployeeExample example);

 

    Employee selectByPrimaryKeyWithDept(Integer empId);

 

    int updateByExampleSelective(@Param("record") Employee record, @Param("example") EmployeeExample example);

 

    int updateByExample(@Param("record") Employee record, @Param("example") EmployeeExample example);

 

    int updateByPrimaryKeySelective(Employee record);

 

    int updateByPrimaryKey(Employee record);

}

Department.java

package com.ssm.maven.pojo;

 

public class Department {

    private Integer deptId;

 

    private String deptName;

 

    

    public Department() {

super();

}

 

public Department(Integer deptId, String deptName) {

super();

this.deptId = deptId;

this.deptName = deptName;

}

 

@Override

public String toString() {

return "Department [deptId=" + deptId + ", deptName=" + deptName + "]";

}

 

public Integer getDeptId() {

        return deptId;

    }

 

    public void setDeptId(Integer deptId) {

        this.deptId = deptId;

    }

 

    public String getDeptName() {

        return deptName;

    }

 

    public void setDeptName(String deptName) {

        this.deptName = deptName == null ? null : deptName.trim();

    }

}

Employee.java

package com.ssm.maven.pojo;

 

import javax.validation.constraints.Pattern;

 

public class Employee {

    private Integer empId;

 

    @Pattern(regexp="^[a-zA-Z0-9_-]{3,6}$",message="用户名不可用!!!")

    private String empName;

 

    private String gender;

 

    @Pattern(regexp="^([a-z0-9_\\.-]+)@([\\da-z\\.-]+)\\.([a-z\\.]{2,6})$",message="邮箱格式不正确!!!")

    private String email;

 

    private Integer dId;

    

    private Department dept;

    

 

    public Employee() {

super();

}

 

public Employee(Integer empId, String empName, String gender, String email, Integer dId) {

super();

this.empId = empId;

this.empName = empName;

this.gender = gender;

this.email = email;

this.dId = dId;

}

 

public Department getDept() {

return dept;

}

 

public void setDept(Department dept) {

this.dept = dept;

}

 

public Integer getEmpId() {

        return empId;

    }

 

    public void setEmpId(Integer empId) {

        this.empId = empId;

    }

 

    public String getEmpName() {

        return empName;

    }

 

    public void setEmpName(String empName) {

        this.empName = empName == null ? null : empName.trim();

    }

 

    public String getGender() {

        return gender;

    }

 

    public void setGender(String gender) {

        this.gender = gender == null ? null : gender.trim();

    }

 

    public String getEmail() {

        return email;

    }

 

    public void setEmail(String email) {

        this.email = email == null ? null : email.trim();

    }

 

    public Integer getdId() {

        return dId;

    }

 

    public void setdId(Integer dId) {

        this.dId = dId;

    }

}

猜你喜欢

转载自blog.csdn.net/weixin_42766327/article/details/84938049