搭建ssm框架，可实现登录和数据展示以及增删改查

最新推荐文章于 2024-07-19 00:12:38 发布

weixin_34284188

最新推荐文章于 2024-07-19 00:12:38 发布

阅读量768

点赞数

文章标签：数据库 java 前端 ViewUI

原文链接：http://www.cnblogs.com/gode/p/8194260.html

版权

需求：

后台使用ssm（spring-springMVC-mybatis）进行整合

前台使用bootstrap框架

前后台交互使用Ajax进行发送

表结构：

登录页面后显示所有用户信息，可对每条进行增删改查

登录时也使用本表的user_name和user_pwd进行校验

项目目录结构

步骤一：搭建框架，进行测试

applicationContext.xml：spring配置文件，内容还包括spring和mybatis整合

mybatis.xml：mybatis配置文件

springmvcServlet-servlet.xml：springMVC配置文件

1.在src目录下新建context包，用来存放配置文件

2.配置web.xml

3.导入需要的jar包

由于本项目还会使用到junit测试，pageHelper等组件，所以有些jar包不是在搭框架的时候所必须的，必须的jar包大家可以问度娘哈

编写web.xml

代码中注释写的很完整，这里直接贴代码了，如果哪里有看不懂的大家可以留言或私信

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
  <display-name>ssm-dynamic</display-name>
  <!-- 启动spring容器 -->
  <context-param>
      <param-name>contextConfigLocation</param-name>
      <!-- 在根目录存在springContext.xml文件 -->
      <param-value>classpath*:contexts/applicationContext.xml</param-value>  
  </context-param>
  <listener>
      <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>  
  </listener>
  
  <!-- 配置log4j -->
  <context-param>  
      <param-name>log4jConfigLocation</param-name>   
      <param-value>WEB-INF/classes/contexts/log4j.properties</param-value>   
  </context-param>  
  <context-param>   
      <param-name>log4jRefreshInterval</param-name>   
      <param-value>60000</param-value>   
  </context-param>   
  <!-- 需要添加spring-web.jar包 -->  
  <listener>   
      <listener-class>org.springframework.web.util.Log4jConfigListener</listener-class>   
  </listener> 
  
  <!-- 配置springmvc前端控制器 -->
  <servlet>
      <!-- 在于web.xml同级目录下存在springmvcServlet-servlet.xml文件 -->
    <servlet-name>springmvcServlet</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>classpath*:contexts/springmvcServlet-servlet.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
      <servlet-name>springmvcServlet</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>
  <!-- 使用Rest风格的URI,将页面普通的post请求转为指定的delete或者put请求 -->
  <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>
</web-app>

applicationContext.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:tx="http://www.springframework.org/schema/tx"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:aop="http://www.springframework.org/schema/aop"
       xmlns:p="http://www.springframework.org/schema/p" 
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
       http://www.springframework.org/schema/beans/spring-beans-4.1.xsd
       http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-4.1.xsd
       http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.1.xsd
       http://www.springframework.org/schema/context
       http://www.springframework.org/schema/context/spring-context-4.1.xsd
       http://www.springframework.org/schema/mvc   
       http://www.springframework.org/schema/mvc/spring-mvc-4.1.xsd"
       default-lazy-init="true">
    <!-- spring配置文件，配置与业务逻辑相关的 -->
    <context:component-scan base-package="com.huaxin">
        <!-- 不扫描控制器 -->
        <context:exclude-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
    </context:component-scan>
    <!-- 引入外部配置文件 -->
    <context:property-placeholder location="classpath:contexts/jdbc.properties"/>
    <!-- ======数据源配置开始====== -->
    <bean id = "dataSource" class="com.zaxxer.hikari.HikariDataSource" destroy-method="close">  
        <property name="driverClassName" value="${jdbc.driver}" />  
        <property name="jdbcUrl" value="${jdbc.url}" />  
        <property name="username" value="${jdbc.username}" />  
        <property name="password" value="${jdbc.password}" />  
        <property name="maximumPoolSize" value="${jdbc.maximumPoolSize}" />  
        <property name="minimumIdle" value="${jdbc.minimumIdle}" />  
        <property name="connectionTestQuery" value="${jdbc.connectionTestQuery}" />  
        <property name="dataSourceProperties">  
            <props>  
                <prop key="cachePrepStmts">${jdbc.cachePrepStmts}</prop>  
                <prop key="prepStmtCacheSize">${jdbc.prepStmtCacheSize}</prop>  
                <prop key="prepStmtCacheSqlLimit">${jdbc.prepStmtCacheSqlLimit}</prop>  
                <prop key="useServerPrepStmts">${jdbc.useServerPrepStmts}</prop>  
            </props>  
        </property>  
    </bean>
    <!-- ======数据源配置结束====== -->

    <!-- ======整合mybatis开始====== -->
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <!-- 指定mybatis全局配置文件位置 -->
        <property name="configLocation" value="classpath:contexts/mybatis.xml"></property>
        <!-- 指定数据源 -->
        <property name="dataSource" ref="dataSource"></property>
        <!-- 指定mybatis的mapper文件的位置 -->
        <property name="mapperLocations" value="classpath:com/huaxin/mapping/*.xml"></property>
    </bean>
    <!-- 配置扫描器，将mybatis接口的实现加入到ioc容器中 -->
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <!-- 扫描所有dao接口的实现，加入到ioc容器中 -->
        <property name="basePackage" value="com.huaxin.dao"></property>
    </bean>
    <!-- ======整合mybatis结束====== -->
    
    <!-- ======配置可执行批量的sqlSession开始====== -->
    <!-- <bean id="sqlSession" class="org.mybatis.spring.SqlSessionTemplate.class">
        <constructor-arg name="sqlSessionFactory" ref="sqlSessionFactory"></constructor-arg>
        <constructor-arg name="executorType" value="BATCH"></constructor-arg>
    </bean> -->
    <!-- ======配置可执行批量的sqlSession结束====== -->
    
    <!-- ======事物控制的配置开始====== -->
    <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <!-- 控制数据源 -->
        <property name="dataSource" ref="dataSource"></property>
        <!-- 开启基于注解的事物，使用xml配置形式的事物（比较主要的使用配置形式） -->
    </bean>
    <aop:config>
        <!-- 切入点表达式
        *[返回值类型]+空格+需要控制事物的包+
        ..[两个点表示其子包也可以]+*[方法]+(..)[两个点表示任意多个参数] -->
        <aop:pointcut expression="execution(* com.huaxin.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>
    
    <!-- ======事物控制的配置结束====== -->
    <!-- Spring配置文件的核心点（数据源，与mybatis的整合，事物控制） -->
</beans>

springmvcServlet-servlet.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:tx="http://www.springframework.org/schema/tx"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:aop="http://www.springframework.org/schema/aop"
       xmlns:p="http://www.springframework.org/schema/p" 
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
       http://www.springframework.org/schema/beans/spring-beans-4.1.xsd
       http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-4.1.xsd
       http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.1.xsd
       http://www.springframework.org/schema/context
       http://www.springframework.org/schema/context/spring-context-4.1.xsd
       http://www.springframework.org/schema/mvc   
       http://www.springframework.org/schema/mvc/spring-mvc-4.1.xsd"
       default-lazy-init="true">
    <!-- springmvc配置文件，包含网站跳转逻辑的控制，配置 -->
    <context:component-scan base-package="com.huaxin" use-default-filters="false">
        <!-- 只扫描控制器 -->
        <context:include-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
    </context:component-scan>
    <!-- 配置视图解析器，方便页面返回 -->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/jsp/"></property>
        <property name="suffix" value=".jsp"></property>
    </bean>
    <!-- 两个标准配置 -->
    <!-- 将springmvc不能处理的请求交给tomcat -->
    <mvc:default-servlet-handler/>
    <!-- 能支持springmvc更高级的功能，JSR303校验，快捷的Ajax等等，映射动态请求 -->
    <mvc:annotation-driven/>
</beans>

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.huaxin.bean"/>
    </typeAliases>
    
    <!-- 配置分页查询 -->
    <plugins>
        <plugin interceptor="com.github.pagehelper.PageInterceptor">
            <!-- 3.3.0版本可用 - 分页参数合理化，默认false禁用 -->
            <!-- 启用合理化时，如果pageNum<1会查询第一页，如果pageNum>pages会查询最后一页 -->
            <property name="reasonable" value="true"/>
        </plugin>
    </plugins>
</configuration>

使用mybatis逆向工程生成bean，dao和mapping

配置mbg.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE generatorConfiguration
  PUBLIC "-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN"
  "http://mybatis.org/dtd/mybatis-generator-config_1_0.dtd">

<generatorConfiguration>
  <context id="DB2Tables" targetRuntime="MyBatis3">
      <!-- 配置是否生成注释 -->
      <commentGenerator>
          <property name="suppressAllComments" value="true" />
    </commentGenerator>
      <!-- 配置数据库连接信息 -->
    <jdbcConnection 
        driverClass="com.mysql.jdbc.Driver"
        connectionURL="jdbc:mysql://127.0.0.1:3306/test"
        userId="root"
        password="1234">
    </jdbcConnection>

    <javaTypeResolver >
      <property name="forceBigDecimals" value="false" />
    </javaTypeResolver>

    <!-- 指定JavaBean生成位置 -->
    <javaModelGenerator 
        targetPackage="com.huaxin.bean" 
        targetProject=".\src">
      <property name="enableSubPackages" value="true" />
      <property name="trimStrings" value="true" />
    </javaModelGenerator>
    
    <!-- 指定sql映射文件生成的位置 -->
    <sqlMapGenerator 
        targetPackage="com.huaxin.mapping"  
        targetProject=".\src">
      <property name="enableSubPackages" value="true" />
    </sqlMapGenerator>

    <!-- 指定dao接口生成的位置，mapper接口生成的位置 -->
    <javaClientGenerator 
        type="XMLMAPPER" 
        targetPackage="com.huaxin.dao"  
        targetProject=".\src">
      <property name="enableSubPackages" value="true" />
    </javaClientGenerator>

    <!-- 指定每个表的生成策略，enable***表示不生成example表 -->
    <table tableName="user" domainObjectName="User" enableCountByExample="false"
        enableUpdateByExample="false" enableDeleteByExample="false" 
        enableSelectByExample="false" selectByExampleQueryId="false"></table>
  </context>
</generatorConfiguration>

编写生成类

package com.huaxin.test;

import java.io.File;
import java.util.ArrayList;
import java.util.List;
import org.mybatis.generator.api.MyBatisGenerator;
import org.mybatis.generator.config.Configuration;
import org.mybatis.generator.config.xml.ConfigurationParser;
import org.mybatis.generator.internal.DefaultShellCallback;

public class MBGTest {
    public static void main(String[] args) throws Exception {
        List<String> warnings = new ArrayList<String>();
        boolean overwrite = true;
        File configFile = new File("mbg.xml");
        ConfigurationParser cp = new ConfigurationParser(warnings);
        Configuration config = cp.parseConfiguration(configFile);
        DefaultShellCallback callback = new DefaultShellCallback(overwrite);
        MyBatisGenerator myBatisGenerator = new MyBatisGenerator(config, callback, warnings);
        myBatisGenerator.generate(null);
        System.out.println("生成代码成功");
    }
}

执行后刷新项目，即可看到生成的代码

测试dao层以及项目基本配置是否成功

编写测试类MapperTest.java

package com.huaxin.test;

import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.test.context.ContextConfiguration;
import org.springframework.test.context.junit4.SpringJUnit4ClassRunner;
import com.huaxin.bean.User;
import com.huaxin.dao.UserMapper;

/**
 * 测试dao层
 * @author ws
 * Spring项目可以使用spring的单元测试，可以自动注入我们需要的组件
 * 1.导入SpringTest模块spring-test-4.1.7.RELEASE.jar
 * 2.@ContextConfiguration指定配置文件位置
 *   @RunWith(SpringJUnit4ClassRunner.class)指定使用spring的单元测试
 * 3.直接autowired要使用的组件即可
 */
@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration(locations={"classpath:contexts/applicationContext.xml"})
public class MapperTest {
    @Autowired
    UserMapper userMapper;
    
    /*@Autowired
    SqlSession sqlSession;*/

    public static void main(String[] args) {
        /*// 1.创建SpringIOC容器
        ApplicationContext ioc = new ClassPathXmlApplicationContext("springContext.xml");
        // 2.从容器中获取mapper
        UserMapper bean = ioc.getBean(UserMapper.class);*/
    }
    
    
    @Test
    public void testC(){
        System.out.println(">>>>>>>>>>>>>>>>>>>>" + userMapper);
        User user = new User();
        user.setUserId("testCRUD3");
        user.setUserName("李小龙");
        user.setUserPwd("qwer123");
        user.setAge(231);
        userMapper.insertSelective(user);
        /*for(int i = 0;i < 500;i++){
            String uid = UUID.randomUUID().toString().substring(0, 5);
            userMapper.insertSelective(new User(uid, uid, uid, i));
            System.out.println("插入成功！");
        }*/
        System.out.println("插入完成");
    }
    
    @Test
    public void testCs(){
        /*UserMapper userMapper = sqlSession.getMapper(UserMapper.class);
        for(int i = 0;i < 1000;i++){
            String uid = UUID.randomUUID().toString().substring(0, 5);
            String id = UUID.randomUUID().toString().substring(5,10);
            userMapper.insertSelective(new User(id, uid, uid, i));
        }*/
    }
}

编写login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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>登录页面</title>
<!-- 获取项目名称 -->
<%
    pageContext.setAttribute("PATH", request.getContextPath());
%>

<!-- 
web路径
不以/开始的相对路径，找资源以当前路径为基准（容易出问题）
以/开始的相对路径，找资源以服务器的路径（http://localhost:8080）为标准,需要加项目名
 -->
<script type="text/javascript" src="${PATH}/static/jquery/jquery-1.12.4.min.js"></script>
<link href="${PATH }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="${PATH }/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<%-- <link href="${PATH }/static/css/login.css" rel="stylesheet"> --%>

<style type="text/css">
.container{
   display:table;
   height:100%; 
}

.row{
   display: table-cell;
   vertical-align: middle;
}
</style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-2">
                <form action="login" method="post">
                      <div class="form-group">
                        <label>用户名</label>
                        <input type="text" class="form-control input-sm" name="username">
                    </div>
                      <div class="form-group">
                        <label>密码</label>
                        <input type="password" class="form-control input-sm" name="password">
                    </div>
                      <div class="checkbox">
                        <label>
                          <input type="checkbox">记住用户名密码
                        </label>
                    </div>
                      <button type="submit" class="btn btn-default">提交</button>
                    <div>${msg}</div>
                </form>
            </div>
        </div>
    </div>
</body>
</html>

LoginController.java

package com.huaxin.controller;

import javax.servlet.http.HttpServletRequest;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import com.huaxin.bean.User;
import com.huaxin.dao.UserMapper;

@Controller
public class LoginController {
    
    @Autowired
    private UserMapper userMapper;
    
    /**
     * 访问时跳转登录页面
     * @param model
     * @return
     */
    @RequestMapping(value="/",method=RequestMethod.GET)
    public String index(Model model){
        model.addAttribute("msg", "");
        return "login";
    }
    
    @RequestMapping(value="/login")
    public String login(Model model, // 向前台页面传的值放入model中
            HttpServletRequest request // 从前台页面取得的值
            ){
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        boolean flag = LoginCheck(username, password);
        if(flag){
            return "uerList";
        }else{
            model.addAttribute("msg", "用户名或密码不正确，请重新登录");
            return "login";
        }
    }
    
    /**
     * 检查用户名密码是否正确
     * @param username
     * @param password
     * @return
     */
    private boolean LoginCheck(String username,String password){
        User user = userMapper.selectByUserName(username);
        if(user == null || "".equals(user)){
            return false;
        }
        if(user.getUserPwd().equals(password)){
            return true;
        }else{
            return false;
        }
    }
}

这里在userMapper中新增了根据username查询该记录的信息

sql写在UserMapper.xml中

<select id="selectByUserName" resultMap="BaseResultMap" parameterType="java.lang.String" >
    select 
    <include refid="Base_Column_List" />
    from user
    where user_name = #{username,jdbcType=VARCHAR}
  </select>

启动项目，本项目使用的是tomcat7.0，jdk1.8

页面效果图（ps：目前页面样式没有调整，还比较丑，大家可以自己调整一下，还有记住用户名密码功能尚未实现）

登录成功，显示user列表信息

uerList.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>json展示页面</title>
<!-- 获取项目名称路径 -->
<%
    pageContext.setAttribute("PATH", request.getContextPath());
%>

<!-- 
web路径
不以/开始的相对路径，找资源以当前路径为基准（容易出问题）
以/开始的相对路径，找资源以服务器的路径（http://localhost:8080）为标准,需要加项目名
 -->
<script type="text/javascript" src="${PATH}/static/jquery/jquery-1.12.4.min.js"></script>
<link href="${PATH }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="${PATH }/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<link href="${PATH }/static/css/list.css" rel="stylesheet">
<script type="text/javascript" src="${PATH }/static/js/list.js"></script>

</head>
<body>
<%-- ${pageInfo } --%>
    <!-- 使用bootstrap栅格系统搭建显示页面 -->
    <div class="container">
        <!-- 标题 -->
        <div class="row">
            <div class="col-sm-12">
                <h1>USER INFO</h1>
            </div>
        </div>
        <!-- 增加删除按钮 -->
        <div class="row">
            <!-- 使用列偏移 -->
            <div class="col-sm-4 col-sm-offset-10">
                <!-- 使用按钮样式 -->
                <button type="button" class="btn btn-primary btn-sm" id="userAddBtn">增加</button>
                <button type="button" class="btn btn-primary btn-sm" id="userDelBtn">删除</button>
            </div>
        </div>
        <!-- 列表信息 -->
        <div class="row">
            <div class="col-sm-12">
                <table class="table table-hover" id="user_table">
                    <thead>
                        <tr>
                            <th width="20%">id</th>
                            <th width="20%">用户名</th>
                            <th width="20%">密码</th>
                            <th width="20%">年龄</th>
                            <th width="20%">操作</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
        <!-- 分页 -->
        <div class="row">
            <!-- 分页文字信息 -->
            <div class="col-sm-3" id="pageInfo_area"></div>
            <!-- 分页条信息 -->
            <div class="col-sm-5 col-sm-offset-4" id="pageNav_area"></div>
        </div>
    </div>
    <!-- 新增模态框 -->
    <div class="modal fade" id="userAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document" style="width: 35%">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h5 class="modal-title" id="myModalLabel">新增</h5>
          </div>
          <div class="modal-body">
            <form class="form-horizontal" id="userAddModalForm">
              <div class="form-group">
                <label class="col-sm-2 control-label">id</label>
                <div class="col-sm-8">
                  <input type="text" class="form-control" name="userId">
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">用户名</label>
                <div class="col-sm-8">
                  <input type="text" class="form-control" name="userName" placeholder="邮箱或手机号">
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">密码</label>
                <div class="col-sm-8">
                  <input type="password" class="form-control" name="userPwd" placeholder="请输入密码">
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">年龄</label>
                <div class="col-sm-8">
                  <input type="text" class="form-control" name="age" placeholder="请输入年龄">
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary btn-sm" id="userAddModalSaveBtn">保存</button>
          </div>
        </div>
      </div>
    </div>
</body>
</html>

页面样式需做微调

list.css

td,th{
    text-align: center;
}
body{
    overflow:-Scroll;
    overflow-x:hidden;
}

编写UserController.java

package com.huaxin.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
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.huaxin.bean.Msg;
import com.huaxin.bean.User;
import com.huaxin.logic.UserLogic;

@Controller
public class UserController {
    
    @Autowired
    private UserLogic userLogic;
    
    /**
     * 分页获取用户信息
     * @ResponseBody 需导入jackson包
     * @param pn
     * @return
     */
    @RequestMapping(value="/user",method=RequestMethod.GET)
    @ResponseBody
    public Msg getUser(
            @RequestParam(value="pn",defaultValue="1")Integer pn){// 分页参数
        
        /* 配置分页查询
        ** 引入PageHelper分页插件，即pagehelper-5.1.2.jar和jsqlparser-0.9.1.jar
        ** mybatis.xml中配置分页
        ** 调用PageHelper.startPage(pageNum[第几页], pageSize[每页显示多少条数据]);
        **/
        PageHelper.startPage(pn, 7);
        // startPage后紧跟的查询即为分页查询
        List<User> list = userLogic.getUserList();
        // 使用pageInfo包装查询后的结果集,封装详细的分页信息,5是连续显示5页
        PageInfo pageInfo = new PageInfo(list,5);
        return Msg.success().add("pageInfo",pageInfo);
    }
    
    @RequestMapping(value="/user",method=RequestMethod.POST)
    @ResponseBody
    public Msg addUser(User user){
        userLogic.addUser(user);
        return Msg.success();
    }
}

在usermapper中新增selectAll方法，查询所有用户信息

sql如下

<select id="selectAll" resultMap="BaseResultMap" parameterType="java.lang.String" >
    select 
    <include refid="Base_Column_List" />
    from user
  </select>

logic包其实就是service层

UserLogic.java代码如下

package com.huaxin.logic;

import java.util.List;
import java.util.UUID;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.web.bind.annotation.RequestParam;

import com.huaxin.bean.User;
import com.huaxin.dao.UserMapper;

@Service
public class UserLogic {
    
    @Autowired
    private UserMapper userMapper;
    
    /**
     * 查询用户列表（分页查询）
     * @return
     */
    public List<User> getUserList(){
        return userMapper.selectAll();
    }

    /**
     * 用户新增
     * @param user
     */
    public void addUser(User user) {
        // id为自动生成的uuid
        String uid = UUID.randomUUID().toString().replaceAll("-", "");
        user.setUserId(uid);
        userMapper.insertSelective(user);
    }
}

由于前后台使用ajax进行提交

编写list.js

var basePath = getRootPath();
$(function () {
    // 页面加载完成之后，直接发送ajax请求，要到分页数据
    doQuery(1);
    // 将按钮绑定事件
    bindEvent();
});
// 查询方法
function doQuery(pn) {
    $.ajax({
        url:basePath + "/user",
        data:"pn=" + pn,
        type:"GET",
        success:function(result){
            //console.log(result);
            // 解析并显示员工数据
            build_user_table(result);
            // 解析并显示分页信息
            build_page_info(result);
            // 解析并显示分页条
            build_page_nav(result);
        }
    });
}
//新增方法
function doAdd(formData){
    alert(formData);
    $.ajax({
        url:basePath + "/user",
        data:formData,
        type:"POST",
        success:function(result){
            console.log(result);
        }
    });
}


// 解析并显示员工数据
function build_user_table(result) {
    // 清空表格
    $("#user_table tbody").empty();
    var users = result.data.pageInfo.list;
    $.each(users,function(index,item){
        var userIdTd = $("<td></td>").append(item.userId);
        var userNameTd = $("<td></td>").append(item.userName);
        var passwordTd = $("<td></td>").append(item.userPwd);
        var ageTd = $("<td></td>").append(item.age);
        var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm")
                                .append($("<span></span>").addClass("glyphicon glyphicon-pencil"))
                                .append("编辑");
        var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm")
                                .append($("<span></span>").addClass("glyphicon glyphicon-remove"))
                                .append("删除");
        var operate = $("<td></td>").append(editBtn).append("&nbsp;").append(delBtn);
        $("<tr></tr>").append(userIdTd)
                    .append(userNameTd)
                    .append(passwordTd)
                    .append(ageTd)
                    .append(operate)
                    .appendTo("#user_table tbody");
    });
}

// 解析并显示分页信息
function build_page_info(result){
    // 清空
    $("#pageInfo_area").empty();
    $("#pageInfo_area").append("当前第"+ result.data.pageInfo.pageNum 
            +"页,共"+ result.data.pageInfo.pages +"页,"
            + result.data.pageInfo.total +"条记录");
}


// 解析并显示分页条
function build_page_nav(result) {
    // 清空
    $("#pageNav_area").empty();
    // nav
    var pageNav = $("<nav></nav>").attr("aria-label","Page navigation");
    // ul
    var pageUl = $("<ul></ul>").addClass("pagination");
    // 首页
    var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
    // 前一页
    var previousPageLi = $("<li></li>").append($("<a></a>").append("&laquo;").attr("href","#"));
    
    // 如果没有前一页，首页和前一页设置为不可点
    if(!result.data.pageInfo.hasPreviousPage){
        firstPageLi.addClass("disabled");
        previousPageLi.addClass("disabled");
    }else{
        // 点击时发送ajax请求，获取当前页数据
        firstPageLi.click(function(){
            doQuery(1);
        });
        previousPageLi.click(function(){
            doQuery(result.data.pageInfo.pageNum - 1);
        });
    }
    
    // 将首页和前一页加入到ul标签中
    pageUl.append(firstPageLi).append(previousPageLi);
    // 遍历得到中间页码号
    $.each(result.data.pageInfo.navigatepageNums,function(index,item){
        var numsLi = $("<li></li>").append($("<a></a>").append(item).attr("href","#"));
        // 所在页设置为高亮
        if(result.data.pageInfo.pageNum == item){
            numsLi.addClass("active");
        }
        // 点击时发送ajax请求，获取当前页数据
        numsLi.click(function(){
            doQuery(item);
        });
        // 将每个li页加入到ul标签中
        pageUl.append(numsLi);
    })
    // 后一页
    var NextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;").attr("href","#"));
    // 末页
    var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
    // 如果没有后一页，末页和后一页设置为不可点
    if(!result.data.pageInfo.hasNextPage){
        NextPageLi.addClass("disabled");
        lastPageLi.addClass("disabled");
    }else{
        // 点击时发送ajax请求，获取当前页数据
        NextPageLi.click(function(){
            doQuery(result.data.pageInfo.pageNum + 1);
        });
        lastPageLi.click(function(){
            doQuery(result.data.pageInfo.pages);
        });
    }
    
    // 将后一页和末页加入到ul标签中
    pageUl.append(NextPageLi).append(lastPageLi);
    // 将ul标签加到nav标签中
    pageNav.append(pageUl);
    // 将nav标签加入到指定div中
    $("#pageNav_area").append(pageNav);
}

//获取项目根路径，如： http://localhost:8083/ssm-dynamic
function getRootPath(){
    //获取当前网址，如： http://localhost:8083/ssm-dynamic/jsp/jsonList.jsp
    var curWwwPath=window.document.location.href;
    //获取主机地址之后的目录，如： ssm-dynamic/jsp/jsonList.jsp
    var pathName=window.document.location.pathname;
    var pos=curWwwPath.indexOf(pathName);
    //获取主机地址，如： http://localhost:8080
    var localhostPaht=curWwwPath.substring(0,pos);
    //获取带"/"的项目名，如：/ssm-dynamic
    var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
    return(localhostPaht+projectName);
}

//将按钮绑定事件
function bindEvent(){
    //将新增按钮绑定click事件
    $("#userAddBtn").click(function(){
        $("#userAddModal").modal({
            // 点击背景模态框不关闭
            backdrop:"static"
        });
    })
    //将删除按钮绑定click事件
    $("#userDelBtn").click(function(){
        $("#userDelModal").modal({
            
        });
    });
    //将保存按钮绑定click事件
    $("#userAddModalSaveBtn").click(function(){
        // 获取页面输入的数据
        var formData = $("#userAddModalForm").serialize();
        // 执行新增方法
        //doAdd(formData);
        alert(formData);
        $.ajax({
            url:basePath + "/user",
            data:$("#userAddModalForm").serialize(),
            type:"POST",
            success:function(result){
                alert(0);
            }
        });
    });
}

启动项目，目前可显示列表及新增用户

效果如下

点击新增按钮效果图

目前项目进度（2018-1-4）：

未实现功能：保存用户名密码，页面样式

展示页面（分页查询）：已完成

新增：只完成了点击保存会插入到数据库，细节部分都没做处理（点击保存关闭弹窗，id设置为隐藏，页面进行长度内容check等）

编辑和删除未完成

======================================2018-1-5新增部分完善============================================================

id设置为隐藏

userList.jsp增加如下加下划线部分代码

<div class="form-group" style="display: none;">
                <label class="col-sm-2 control-label">id</label>
                <div class="col-sm-8">
                  <input type="text" class="form-control" name="userId">
                </div>
              </div>

点击保存关闭弹窗

list.js增加如下加下划线部分代码

//新增方法
function doAdd(formData){
    $.ajax({
        url:basePath + "/user",
        data:$("#userAddModalForm").serialize(),
        type:"POST",
        success:function(result){
            //1.关闭模态框
            $("#userAddModal").modal("hide");
            alert(result.msg);
        },
        error: function() {
            alert("处理失败");
        },
    });
}

增加页面验证

首先要在jsp中对应位置加message的显示位置和id，以及input框的id

userList.jsp

<div class="form-group">
                <label class="col-sm-2 control-label">用户名</label>
                <div class="col-sm-8">
                  <input type="text" class="form-control" id="userAddModal_userName" name="userName" placeholder="邮箱或手机号">
                </div>
                <div class="col-sm-8 col-sm-offset-2" id="user_add_modal_username_msg"></div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">密码</label>
                <div class="col-sm-8">
                  <input type="password" class="form-control" id="userAddModal_userPwd" name="userPwd" placeholder="请输入密码">
                </div>
                <div class="col-sm-8 col-sm-offset-2" id="user_add_modal_userpwd_msg"></div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">年龄</label>
                <div class="col-sm-8">
                  <input type="text" class="form-control" id="userAddModal_age" name="age" placeholder="请输入年龄">
                </div>
                <div class="col-sm-8 col-sm-offset-2" id="user_add_modal_age_msg"></div>
              </div>

在js中增加验证

// 对添加页面form表单进行验证
function checkAddFormData(){
    if(checkUserName() & checkUserPwd() & checkAge()){
        return true;
    }
    return false;
}
// 验证用户名是否合法
function checkUserName(){
    // 清空
    $("#user_add_modal_username_msg").empty();
    if($("#userAddModal_userName").val() == ""){
        $("#user_add_modal_username_msg").append("用户名不能为空").attr("style","color:red");
        return false;
    }
    if(checkEmail($("#userAddModal_userName").val())){
        $("#user_add_modal_username_msg").append("邮箱格式正确").attr("style","color:#00FA9A;font-weight:bold");
        return true;
    }else if(checkMobile($("#userAddModal_userName").val())){
        $("#user_add_modal_username_msg").append("手机号码格式正确").attr("style","color:#00FA9A;font-weight:bold");
        return true;
    }else{
        $("#user_add_modal_username_msg").append("请输入正确的邮箱或手机号").attr("style","color:red");
        return false;
    }
}
//验证密码是否合法
function checkUserPwd(){
    //清空
    $("#user_add_modal_userpwd_msg").empty();
    if($("#userAddModal_userPwd").val() == ""){
        $("#user_add_modal_userpwd_msg").append("密码不能为空").attr("style","color:red");
        return false;
    }if(checkPwd($("#userAddModal_userPwd").val())){
        $("#user_add_modal_userpwd_msg").append("密码格式正确").attr("style","color:#00FA9A;font-weight:bold");
        return true;
    }else{
        $("#user_add_modal_userpwd_msg").append("密码由6-12位数字字母组合").attr("style","color:red");
        return false;
    }
}
// 验证年龄是否合法
function checkAge(){
    //清空
    $("#user_add_modal_age_msg").empty();
    if($("#userAddModal_age").val() == ""){
        $("#user_add_modal_age_msg").append("年龄不能为空").attr("style","color:red");
        return false;
    }if(checkZeroToOneHundred($("#userAddModal_age").val())){
        $("#user_add_modal_age_msg").append("年龄格式正确").attr("style","color:#00FA9A;font-weight:bold");
        return true;
    }else{
        $("#user_add_modal_age_msg").append("请输入合法的年龄").attr("style","color:red");
        return false;
    }
}

//=======================================工具方法==============================================
/** 
验证邮箱是否输入合法 
验证规则：把邮箱地址分成“第一部分@第二部分”这样 
第一部分：由字母、数字、下划线、短线“-”、点号“.”组成， 
第二部分：为一个域名，域名由字母、数字、短线“-”、域名后缀组成， 
而域名后缀一般为.xxx或.xxx.xx，一区的域名后缀一般为2-4位，如cn,com,net，现在域名有的也会大于4位 
*/
function checkEmail(str){  
    re = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/  
    if(re.test(str)){  
       return true;  
    }else{  
       return false;  
    }  
} 
/** 
验证手机号码是否输入合法 
验证规则：11位数字，以1开头 
*/  
function checkMobile(str){  
     var re=/^1\d{10}$/;  
     if(re.test(str)){  
        return true;  
     }else{  
        return false;  
     }  
} 
/**
 * 验证6-12位数字字母组合
 */
function checkPwd(str){
    var re=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
    if(re.test(str)){  
        return true;  
     }else{  
        return false;  
     }
}
/**
 * 验证数值范围0-100，限制开头输入0的数字
 */
function checkZeroToOneHundred(str){
    var re=/^(?:[1-9]?\d|100)$/;
    if(re.test(str)){  
        return true;  
    }else{  
        return false;  
    }
}

在执行新增的ajax方法之前，做页面验证

//将保存按钮绑定click事件
    $("#userAddModalSaveBtn").click(function(){
        // 获取页面输入的数据
        var formData = $("#userAddModalForm").serialize();
        // 进行页面校验
        if(checkAddFormData()){
            // 执行新增方法
            doAdd(formData);
        }else{
            return false;
        }
    });

页面效果图

由于处理成功后直接跳转到当前页面，在此无法截到全部验证通过的图片

======================================2018-1-5新增部分完善============================================================

由于之前不了解bootstrap提供了表单验证的样式，现修改样式，使用bootstrap

jsp中对应input框下加span标签

<div class="form-group">
                <label class="col-sm-2 control-label">用户名</label>
                <div class="col-sm-8">
                  <input type="text" class="form-control" id="userAddModal_userName" name="userName" placeholder="邮箱或手机号">
                  <span class="help-block"></span>
                </div>
              </div>

js中对应验证部分代码修改

// 验证用户名是否合法
function checkUserName(){
    //移除样式
    $("#userAddModal_userName").parent().removeClass("has-error");
    $("#userAddModal_userName").parent().removeClass("has-warning");
    $("#userAddModal_userName").parent().removeClass("has-success");
    
    if($("#userAddModal_userName").val() == ""){
        $("#userAddModal_userName").parent().addClass("has-error");
        $("#userAddModal_userName").next("span").text("用户名不能为空");
        return false;
    }
    if(checkEmail($("#userAddModal_userName").val())){
        $("#userAddModal_userName").parent().addClass("has-success");
        $("#userAddModal_userName").next("span").text("邮箱格式正确");
        return true;
    }else if(checkMobile($("#userAddModal_userName").val())){
        $("#userAddModal_userName").parent().addClass("has-success");
        $("#userAddModal_userName").next("span").text("手机号码格式正确");
        return true;
    }else{
        $("#userAddModal_userName").parent().addClass("has-warning");
        $("#userAddModal_userName").next("span").text("请输入正确的邮箱或手机号");
        return false;
    }
}
//验证密码是否合法
function checkUserPwd(){
    //移除样式
    $("#userAddModal_userPwd").parent().removeClass("has-error");
    $("#userAddModal_userPwd").parent().removeClass("has-success");
    $("#userAddModal_userPwd").parent().removeClass("has-warning");
    
    if($("#userAddModal_userPwd").val() == ""){
        $("#userAddModal_userPwd").parent().addClass("has-error");
        $("#userAddModal_userPwd").next("span").text("密码不能为空");
        return false;
    }if(checkPwd($("#userAddModal_userPwd").val())){
        $("#userAddModal_userPwd").parent().addClass("has-success");
        $("#userAddModal_userPwd").next("span").text("密码格式正确");
        return true;
    }else{
        $("#userAddModal_userPwd").parent().addClass("has-warning");
        $("#userAddModal_userPwd").next("span").text("密码由6-12位数字字母组合");
        return false;
    }
}
// 验证年龄是否合法
function checkAge(){
    //移除样式
    $("#userAddModal_age").parent().removeClass("has-error");
    $("#userAddModal_age").parent().removeClass("has-success");
    $("#userAddModal_age").parent().removeClass("has-warning");
    
    if($("#userAddModal_age").val() == ""){
        $("#userAddModal_age").parent().addClass("has-error");
        $("#userAddModal_age").next("span").text("年龄不能为空");
        return false;
    }if(checkZeroToOneHundred($("#userAddModal_age").val())){
        $("#userAddModal_age").parent().addClass("has-success");
        $("#userAddModal_age").next("span").text("年龄格式正确");
        return true;
    }else{
        $("#userAddModal_age").parent().addClass("has-warning");
        $("#userAddModal_age").next("span").text("请输入合法的年龄");
        return false;
    }
}

效果图

使用此方式页面看起来简洁了一点（ps:其实也没什么大变化）

增加用户名校验，并整理了一下代码，使其看起来没那么乱了

以下使目前完整的 list.js 代码

var basePath = getRootPath();
$(function () {
    // 页面加载完成之后，直接发送ajax请求，要到分页数据
    doQuery(1);
    // 将按钮绑定事件
    bindEvent();
});
// 查询方法
function doQuery(pn) {
    $.ajax({
        url:basePath + "/user",
        data:"pn=" + pn,
        type:"GET",
        success:function(result){
            //console.log(result);
            // 解析并显示员工数据
            build_user_table(result);
            // 解析并显示分页信息
            build_page_info(result);
            // 解析并显示分页条
            build_page_nav(result);
        }
    });
}
//新增方法
function doAdd(formData){
    $.ajax({
        url:basePath + "/user",
        data:$("#userAddModalForm").serialize(),
        type:"POST",
        success:function(result){
            //1.关闭模态框
            $("#userAddModal").modal("hide");
            alert(result.msg);
        },
        error: function() {
            alert("处理失败");
        },
    });
}
//查询是否存在该用户名
function findRepeatUserName(str){
    $.ajax({
        url:basePath + "/findRepeatUserName",
        data:"userName=" + str,
        type:"GET",
        success:function(result){
            console.log(result);
            if(result.code == 200){
                //返回200说明查到用户名
                $("#userAddModal_userName").attr("user-chk","error");
            }else if(result.code == 100){
                //返回100说明没有查到用户名
                $("#userAddModal_userName").attr("user-chk","success");
            }else{
                alert("系统错误，请联系管理员");
            }
        },
        error: function() {
            alert("处理失败");
        },
    });
}

// 解析并显示员工数据
function build_user_table(result) {
    // 清空表格
    $("#user_table tbody").empty();
    var users = result.data.pageInfo.list;
    $.each(users,function(index,item){
        var userIdTd = $("<td></td>").append(item.userId);
        var userNameTd = $("<td></td>").append(item.userName);
        var passwordTd = $("<td></td>").append(item.userPwd);
        var ageTd = $("<td></td>").append(item.age);
        var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm")
                                .append($("<span></span>").addClass("glyphicon glyphicon-pencil"))
                                .append("编辑");
        var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm")
                                .append($("<span></span>").addClass("glyphicon glyphicon-remove"))
                                .append("删除");
        var operate = $("<td></td>").append(editBtn).append("&nbsp;").append(delBtn);
        $("<tr></tr>").append(userIdTd)
                    .append(userNameTd)
                    .append(passwordTd)
                    .append(ageTd)
                    .append(operate)
                    .appendTo("#user_table tbody");
    });
}

// 解析并显示分页信息
function build_page_info(result){
    // 清空
    $("#pageInfo_area").empty();
    $("#pageInfo_area").append("当前第"+ result.data.pageInfo.pageNum 
            +"页,共"+ result.data.pageInfo.pages +"页,"
            + result.data.pageInfo.total +"条记录");
}


// 解析并显示分页条
function build_page_nav(result) {
    // 清空
    $("#pageNav_area").empty();
    // nav
    var pageNav = $("<nav></nav>").attr("aria-label","Page navigation");
    // ul
    var pageUl = $("<ul></ul>").addClass("pagination");
    // 首页
    var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
    // 前一页
    var previousPageLi = $("<li></li>").append($("<a></a>").append("&laquo;").attr("href","#"));
    
    // 如果没有前一页，首页和前一页设置为不可点
    if(!result.data.pageInfo.hasPreviousPage){
        firstPageLi.addClass("disabled");
        previousPageLi.addClass("disabled");
    }else{
        // 点击时发送ajax请求，获取当前页数据
        firstPageLi.click(function(){
            doQuery(1);
        });
        previousPageLi.click(function(){
            doQuery(result.data.pageInfo.pageNum - 1);
        });
    }
    
    // 将首页和前一页加入到ul标签中
    pageUl.append(firstPageLi).append(previousPageLi);
    // 遍历得到中间页码号
    $.each(result.data.pageInfo.navigatepageNums,function(index,item){
        var numsLi = $("<li></li>").append($("<a></a>").append(item).attr("href","#"));
        // 所在页设置为高亮
        if(result.data.pageInfo.pageNum == item){
            numsLi.addClass("active");
        }
        // 点击时发送ajax请求，获取当前页数据
        numsLi.click(function(){
            doQuery(item);
        });
        // 将每个li页加入到ul标签中
        pageUl.append(numsLi);
    })
    // 后一页
    var NextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;").attr("href","#"));
    // 末页
    var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
    // 如果没有后一页，末页和后一页设置为不可点
    if(!result.data.pageInfo.hasNextPage){
        NextPageLi.addClass("disabled");
        lastPageLi.addClass("disabled");
    }else{
        // 点击时发送ajax请求，获取当前页数据
        NextPageLi.click(function(){
            doQuery(result.data.pageInfo.pageNum + 1);
        });
        lastPageLi.click(function(){
            doQuery(result.data.pageInfo.pages);
        });
    }
    
    // 将后一页和末页加入到ul标签中
    pageUl.append(NextPageLi).append(lastPageLi);
    // 将ul标签加到nav标签中
    pageNav.append(pageUl);
    // 将nav标签加入到指定div中
    $("#pageNav_area").append(pageNav);
}

//将按钮绑定事件
function bindEvent(){
    //将新增按钮绑定click事件
    $("#userAddBtn").click(function(){
        //清空模态框中的样式和内容
        restAddModal();
        $("#userAddModal").modal({
            // 点击背景模态框不关闭
            backdrop:"static"
        });
    })
    //将删除按钮绑定click事件
    $("#userDelBtn").click(function(){
        $("#userDelModal").modal({
            
        });
    });
    //将用户名输入框绑定change事件
    $("#userAddModal_userName").change(function(){
        //发送ajax请求校验用户名是否存在
        findRepeatUserName($("#userAddModal_userName").val());
    });
    //将保存按钮绑定click事件
    $("#userAddModalSaveBtn").click(function(){
        // 获取页面输入的数据
        var formData = $("#userAddModalForm").serialize();
        // 进行页面校验
        if(checkAddFormData()){
            // 执行新增方法
            doAdd(formData);
        }else{
            return false;
        }
    });
}

// 对添加页面form表单进行验证
function checkAddFormData(){
    if(checkUserName() & checkUserPwd() & checkAge()){
        return true;
    }
    return false;
}
// 验证用户名是否合法
function checkUserName(){
    var userNameId = "#userAddModal_userName";
    var userNameVal = $(userNameId).val();
    
    if(userNameVal == ""){
        changeInfo(userNameId,"has-error","用户名不能为空");
        return false;
    }
    
    if(checkEmail(userNameVal)){
        if(checkRepeatUserName()){
            changeInfo(userNameId,"has-success","邮箱格式正确");
            return true;
        }else{
            changeInfo(userNameId,"has-error","用户名存在");
            return false;
        }
    }else if(checkMobile(userNameVal)){
        if(checkRepeatUserName()){
            changeInfo(userNameId,"has-success","手机号码格式正确");
            return true;
        }else{
            changeInfo(userNameId,"has-error","用户名存在");
            return false;
        }
    }else{
        changeInfo(userNameId,"has-warning","请输入正确的邮箱或手机号");
        return false;
    }
}
//验证用户名是否存在
function checkRepeatUserName(){
    var userNameId = "#userAddModal_userName";
    
    if($(userNameId).attr("user-chk") == "success"){
        return true;
    }else if($(userNameId).attr("user-chk") == "error"){
        return false;
    }
}

//验证密码是否合法
function checkUserPwd(){
    var pwdId = "#userAddModal_userPwd";
    var pwdVal = $(pwdId).val();
    
    if(pwdVal == ""){
        changeInfo(pwdId,"has-error","密码不能为空");
        return false;
    }if(checkPwd(pwdVal)){
        changeInfo(pwdId,"has-success","密码格式正确");
        return true;
    }else{
        changeInfo(pwdId,"has-warning","密码由6-12位数字字母组合");
        return false;
    }
}
// 验证年龄是否合法
function checkAge(){
    var ageId = "#userAddModal_age";
    var ageVal = $(ageId).val();
    
    if(ageVal == ""){
        changeInfo(ageId,"has-error","年龄不能为空");
        return false;
    }if(checkZeroToOneHundred(ageVal)){
        changeInfo(ageId,"has-success","年龄格式正确");
        return true;
    }else{
        changeInfo(ageId,"has-warning","请输入合法的年龄");
        return false;
    }
}
function restAddModal(){
    //[0]是由于jQuery没有reset方法，在此转为dom对象，调用reset方法使表单重置
    $("#userAddModal form")[0].reset();
    //移除样式和msg内容
    removeInfo("#userAddModal_userName");
    removeInfo("#userAddModal_userPwd");
    removeInfo("#userAddModal_age");
}
//=======================================工具方法==============================================
/**
 * 移除样式和显示信息
 */
function removeInfo(ele){
    $(ele).parent().removeClass("has-error has-success has-warning");
    $(ele).next("span").text("");
}

/**
 * 改变样式并显示信息
 */
function changeInfo(ele,style,msg){
    $(ele).parent().removeClass("has-error has-success has-warning");
    $(ele).parent().addClass(style);
    $(ele).next("span").text(msg);
}

/** 
验证邮箱是否输入合法 
验证规则：把邮箱地址分成“第一部分@第二部分”这样 
第一部分：由字母、数字、下划线、短线“-”、点号“.”组成， 
第二部分：为一个域名，域名由字母、数字、短线“-”、域名后缀组成， 
而域名后缀一般为.xxx或.xxx.xx，一区的域名后缀一般为2-4位，如cn,com,net，现在域名有的也会大于4位 
*/
function checkEmail(str){  
    re = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/  
    if(re.test(str)){  
       return true;  
    }else{  
       return false;  
    }  
} 
/** 
验证手机号码是否输入合法 
验证规则：11位数字，以1开头 
*/  
function checkMobile(str){  
     var re=/^1\d{10}$/;  
     if(re.test(str)){  
        return true;  
     }else{  
        return false;  
     }  
} 
/**
 * 验证6-12位数字字母组合
 */
function checkPwd(str){
    var re=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
    if(re.test(str)){  
        return true;  
     }else{  
        return false;  
     }
}
/**
 * 验证数值范围0-100，限制开头输入0的数字
 */
function checkZeroToOneHundred(str){
    var re=/^(?:[1-9]?\d|100)$/;
    if(re.test(str)){  
        return true;  
    }else{  
        return false;  
    }
}

/**
 * 获取项目根路径，如： http://localhost:8083/ssm-dynamic
 * @returns
 */
function getRootPath(){
  //获取当前网址，如： http://localhost:8083/ssm-dynamic/jsp/jsonList.jsp
  var curWwwPath=window.document.location.href;
  //获取主机地址之后的目录，如： ssm-dynamic/jsp/jsonList.jsp
  var pathName=window.document.location.pathname;
  var pos=curWwwPath.indexOf(pathName);
  //获取主机地址，如： http://localhost:8080
  var localhostPaht=curWwwPath.substring(0,pos);
  //获取带"/"的项目名，如：/ssm-dynamic
  var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
  return(localhostPaht+projectName);
}

UserController中增加方法

@RequestMapping(value="/findRepeatUserName",method=RequestMethod.GET)
    @ResponseBody
    public Msg findRepeatUserName(@RequestParam(value="userName")String userName){
        Boolean flag = userLogic.findRepeatUserName(userName);
        if(flag){
            return Msg.success();
        }else{
            return Msg.fail();
        }
    }

UserLogic中增加方法

/**
     * 验证用户名是否存在
     * @param userName
     * @return
     */
    public Boolean findRepeatUserName(String userName) {
        int count = userMapper.selectCountByUserName(userName);
        if(count == 0){
            // 如果没有查到，说明该用户名可用，返回true
            return true;
        }else{
            // 如果查到结果，说明该用户名不可用，返回false
            return false;
        }
    }

UserMapper中增加方法

int selectCountByUserName(String username);

UserMapper.xml中增加一条查询sql

<select id="selectCountByUserName" resultType="Integer" parameterType="java.lang.String" >
    select 
    count(*)
    from user
    where user_name = #{username,jdbcType=VARCHAR}
  </select>

页面效果图

至此，前端验证基本完成

增加后端验证，如果随便输入啥都去查一次数据库效率太低了，给配置成如果按照前端的验证过不了，直接返回给前台fail

修改UserController

@RequestMapping(value="/findRepeatUserName",method=RequestMethod.POST)
    @ResponseBody
    public Msg findRepeatUserName(@RequestParam(value="userName")String userName){
        String emailRe = "^(\\w-*\\.*)+@(\\w-?)+(\\.\\w{2,})+$";
        String mobileRe = "^1\\d{10}$";
        if(userName.matches(emailRe) || userName.matches(mobileRe)){
            Boolean flag = userLogic.findRepeatUserName(userName);
            if(flag){
                return Msg.success();
            }else{
                return Msg.fail();
            }
        }else{
            return Msg.fail();
        }
    }

新增基本完成

======================================2018-1-8新增部分完善============================================================

使用JSR303进行新增部分后台验证

虽然前端验证都有了，但为了避免前端js跳过，后台也需要进行验证

这里使用JSR303进行验证

1.导入 hibernate-validator-5.4.1.Final.jar
validation-api-1.1.0.Final-sources.jar
jboss-logging-3.1.4.GA.jar

2.在bean中对应属性添加校验规则注解
类似 @Pattern(regexp="regexpxxx",message="xxx")

User.java

 　 @Pattern(regexp="(^(\\w-*\\.*)+@(\\w-?)+(\\.\\w{2,})+$)|(^1\\d{10}$)",message="请输入正确的邮箱或手机号")
    private String userName;

    @Pattern(regexp="^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$",message="密码由6-12位数字字母组合")
    private String userPwd;

    @NotNull(message="请输入正确的年龄notnull")
    @Min(value=0,message="请输入正确的年龄min0")
    @Max(value=120,message="请输入正确的年龄max120")
    private Integer age;

3.在Controller中对应的方法参数中加@Valid注解,BindingResult result封装校验结果

UserController.java

@RequestMapping(value="/user",method=RequestMethod.POST)
    @ResponseBody
    public Msg addUser(@Valid User user,BindingResult result){
        if(result.hasErrors()){
            // 校验失败，在模态框中显示错误的校验信息
            Map<String,String> map = new HashMap<String,String>();
            List<FieldError> errors = result.getFieldErrors();
            for(FieldError fieldError:errors){
                System.out.println("错误字段》》》" + fieldError.getField());
                System.out.println("错误信息》》》" + fieldError.getDefaultMessage());
                map.put(fieldError.getField(), fieldError.getDefaultMessage());
            }
            return Msg.fail().add("errors", map);
        }else{
            userLogic.addUser(user);
            return Msg.success();
        }
    }

在list.js中的新增方法success回调函数中做如下修改

//新增方法
function doAdd(formData){
    $.ajax({
        url:basePath + "/user",
        data:$("#userAddModalForm").serialize(),
        type:"POST",
        success:function(result){
            if(result.code == 100){
                //1.关闭模态框
                $("#userAddModal").modal("hide");
                //console.log(result);
            }else{
                //console.log(result);
                // 判断错误信息是否存在，不等于 undefined 表示存在错误信息
                //alert(result.data.errors.userName);
                // 清空样式和span信息
                removeInfo("#userAddModal_age");
                removeInfo("#userAddModal_userName");
                removeInfo("#userAddModal_userPwd");
                if(undefined != result.data.errors.age){
                    // 将错误信息展示
                    changeInfo("#userAddModal_age","has-error",result.data.errors.age);
                }
                if(undefined != result.data.errors.userName){
                    changeInfo("#userAddModal_userName","has-error",result.data.errors.userName);
                }
                if(undefined != result.data.errors.userPwd){
                    changeInfo("#userAddModal_userPwd","has-error",result.data.errors.userPwd);
                }
            }
        },
        error: function() {
            alert("处理失败");
        },
    });
}

removeInfo方法

/**
 * 清空样式和显示信息
 */
function removeInfo(ele){
    $(ele).parent().removeClass("has-error has-success has-warning");
    $(ele).next("span").text("");
}

至此，新增部分验证全部完成。

接下来目标：

修改，删除，批量删除，条件查询，完善登录

修改：

首先在userList.jsp中新加一个模态框

<!-- 修改模态框 -->
    <div class="modal fade" id="userUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document" style="width: 35%">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h5 class="modal-title">修改</h5>
          </div>
          <div class="modal-body">
            <form class="form-horizontal" id="userUpdateModalForm">
              <div class="form-group" style="display: none;">
                <label class="col-sm-2 control-label">id</label>
                <div class="col-sm-8">
                  <input type="text" class="form-control" id="userUpdateModal_userId" name="userId">
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">用户名</label>
                <div class="col-sm-8">
                  <p class="form-control-static" id="userUpdateModal_userName"></p>
                  <span class="help-block"></span>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">密码</label>
                <div class="col-sm-8">
                  <input type="text" class="form-control" id="userUpdateModal_userPwd" name="userPwd" placeholder="请输入密码">
                  <span class="help-block"></span>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">年龄</label>
                <div class="col-sm-8">
                  <input type="text" class="form-control" id="userUpdateModal_age" name="age" placeholder="请输入年龄">
                  <span class="help-block"></span>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary btn-sm" id="userUpdateModalSaveBtn">保存</button>
          </div>
        </div>
      </div>
    </div>

Controller中增加根据id查用户信息的方法，更新的方法

UserController.java

/**
     * 根据id更新user
     */
    @RequestMapping(value="/user",method=RequestMethod.PUT)
    @ResponseBody
    public Msg updateByUserId(@Valid User user,BindingResult result){
        if(result.hasErrors()){
            // 校验失败，在模态框中显示错误的校验信息
            Map<String,String> map = new HashMap<String,String>();
            List<FieldError> errors = result.getFieldErrors();
            for(FieldError fieldError:errors){
                System.out.println("错误字段》》》" + fieldError.getField());
                System.out.println("错误信息》》》" + fieldError.getDefaultMessage());
                map.put(fieldError.getField(), fieldError.getDefaultMessage());
            }
            return Msg.fail().add("errors", map);
        }else{
            userLogic.updateUser(user);
            return Msg.success();
        }
    }
    
    /**
     * 根据id查询user
     * @param id
     * @return
     */
    @RequestMapping(value="/user/{id}",method=RequestMethod.GET)
    @ResponseBody
    public Msg getUserById(@PathVariable()String id){
        User user = userLogic.getUserById(id);
        return Msg.success().add("user", user);
    }

UserLogic.java

public User getUserById(String userId) {
        User user = userMapper.selectByPrimaryKey(userId);
        return user;
    }

    public void updateUser(User user) {
        userMapper.updateByPrimaryKeySelective(user);
    }

list.js

var basePath = getRootPath();
$(function () {
    // 页面加载完成之后，直接发送ajax请求，要到分页数据
    doQuery(1);
    // 将按钮绑定事件
    bindEvent();
});
//更新方法
function doUpdate(updateFormData){
    $.ajax({
        url:basePath + "/user",
        type:"PUT",
        data:updateFormData,
        success:function(result){
            console.log(result);
            if(result.code == 100){
                //1.关闭模态框
                $("#userUpdateModal").modal("hide");
            }else{
                // 清空样式和span信息
                removeInfo("#userUpdateModal_userPwd");
                removeInfo("#userUpdateModal_age");
                // 判断错误信息是否存在，不等于 undefined 表示存在错误信息
                if(undefined != result.data.errors.age){
                    // 将错误信息展示
                    changeInfo("#userUpdateModal_age","has-error",result.data.errors.age);
                }
                if(undefined != result.data.errors.userPwd){
                    changeInfo("#userUpdateModal_userPwd","has-error",result.data.errors.userPwd);
                }
            }
        
        }
    });
}

// 查询方法
function doQuery(pn) {
    $.ajax({
        url:basePath + "/user",
        data:"pn=" + pn,
        type:"GET",
        success:function(result){
            //console.log(result);
            // 解析并显示员工数据
            build_user_table(result);
            // 解析并显示分页信息
            build_page_info(result);
            // 解析并显示分页条
            build_page_nav(result);
        }
    });
}
//根据id查询用户信息
function getUserById(id){
    $.ajax({
        url:basePath + "/user/" + id,
        type:"GET",
        success:function(result){
            //console.log(result);
            // 在模态框相应位置赋值
            $("#userUpdateModal_userId").val(result.data.user.userId);
            $("#userUpdateModal_userName").text(result.data.user.userName);
            $("#userUpdateModal_userPwd").val(result.data.user.userPwd);
            $("#userUpdateModal_age").val(result.data.user.age);
        }
    });
}

//新增方法
function doAdd(addFormData){
    $.ajax({
        url:basePath + "/user",
        //data:$("#userAddModalForm").serialize(),
        data:addFormData,
        type:"POST",
        success:function(result){
            if(result.code == 100){
                //1.关闭模态框
                $("#userAddModal").modal("hide");
                //console.log(result);
            }else{
                //console.log(result);
                // 判断错误信息是否存在，不等于 undefined 表示存在错误信息
                //alert(result.data.errors.userName);
                // 清空样式和span信息
                removeInfo("#userAddModal_age");
                removeInfo("#userAddModal_userName");
                removeInfo("#userAddModal_userPwd");
                if(undefined != result.data.errors.age){
                    // 将错误信息展示
                    changeInfo("#userAddModal_age","has-error",result.data.errors.age);
                }
                if(undefined != result.data.errors.userName){
                    changeInfo("#userAddModal_userName","has-error",result.data.errors.userName);
                }
                if(undefined != result.data.errors.userPwd){
                    changeInfo("#userAddModal_userPwd","has-error",result.data.errors.userPwd);
                }
            }
        },
        error: function() {
            alert("处理失败");
        },
    });
}
//查询是否存在该用户名
function findRepeatUserName(str){
    $.ajax({
        url:basePath + "/findRepeatUserName",
        data:"userName=" + str,
        async:false,//false代表只有在等待ajax执行完毕后才执行
        type:"POST",
        success:function(result){
            //console.log(result);
            if(result.code == 200){
                //返回200说明查到用户名
                $("#userAddModal_userName").attr("user-chk","error");
            }else if(result.code == 100){
                //返回100说明没有查到用户名
                $("#userAddModal_userName").attr("user-chk","success");
            }else{
                alert("系统错误，请联系管理员");
            }
        },
        error: function() {
            alert("处理失败");
        },
    });
}

// 解析并显示员工数据
function build_user_table(result) {
    // 清空表格
    $("#user_table tbody").empty();
    var users = result.data.pageInfo.list;
    $.each(users,function(index,item){
        var userIdTd = $("<td></td>").append(item.userId);
        var userNameTd = $("<td></td>").append(item.userName);
        var passwordTd = $("<td></td>").append(item.userPwd);
        var ageTd = $("<td></td>").append(item.age);
        var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm user-edit-btn")
                                .append($("<span></span>").addClass("glyphicon glyphicon-pencil"))
                                .append("编辑");
        //将编辑按钮添加自定义属性，值为当前数据的id
        editBtn.attr("user-edit-id",item.userId);
        var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm user-del-btn")
                                .append($("<span></span>").addClass("glyphicon glyphicon-remove"))
                                .append("删除");
        //将删除按钮添加自定义属性，值为当前数据的id
        editBtn.attr("user-del-id",item.userId);
        var operate = $("<td></td>").append(editBtn).append("&nbsp;").append(delBtn);
        $("<tr></tr>").append(userIdTd)
                    .append(userNameTd)
                    .append(passwordTd)
                    .append(ageTd)
                    .append(operate)
                    .appendTo("#user_table tbody");
    });
}

// 解析并显示分页信息
function build_page_info(result){
    // 清空
    $("#pageInfo_area").empty();
    $("#pageInfo_area").append("当前第"+ result.data.pageInfo.pageNum 
            +"页,共"+ result.data.pageInfo.pages +"页,"
            + result.data.pageInfo.total +"条记录");
}


// 解析并显示分页条
function build_page_nav(result) {
    // 清空
    $("#pageNav_area").empty();
    // nav
    var pageNav = $("<nav></nav>").attr("aria-label","Page navigation");
    // ul
    var pageUl = $("<ul></ul>").addClass("pagination");
    // 首页
    var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
    // 前一页
    var previousPageLi = $("<li></li>").append($("<a></a>").append("&laquo;").attr("href","#"));
    
    // 如果没有前一页，首页和前一页设置为不可点
    if(!result.data.pageInfo.hasPreviousPage){
        firstPageLi.addClass("disabled");
        previousPageLi.addClass("disabled");
    }else{
        // 点击时发送ajax请求，获取当前页数据
        firstPageLi.click(function(){
            doQuery(1);
        });
        previousPageLi.click(function(){
            doQuery(result.data.pageInfo.pageNum - 1);
        });
    }
    
    // 将首页和前一页加入到ul标签中
    pageUl.append(firstPageLi).append(previousPageLi);
    // 遍历得到中间页码号
    $.each(result.data.pageInfo.navigatepageNums,function(index,item){
        var numsLi = $("<li></li>").append($("<a></a>").append(item).attr("href","#"));
        // 所在页设置为高亮
        if(result.data.pageInfo.pageNum == item){
            numsLi.addClass("active");
        }
        // 点击时发送ajax请求，获取当前页数据
        numsLi.click(function(){
            doQuery(item);
        });
        // 将每个li页加入到ul标签中
        pageUl.append(numsLi);
    })
    // 后一页
    var NextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;").attr("href","#"));
    // 末页
    var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
    // 如果没有后一页，末页和后一页设置为不可点
    if(!result.data.pageInfo.hasNextPage){
        NextPageLi.addClass("disabled");
        lastPageLi.addClass("disabled");
    }else{
        // 点击时发送ajax请求，获取当前页数据
        NextPageLi.click(function(){
            doQuery(result.data.pageInfo.pageNum + 1);
        });
        lastPageLi.click(function(){
            doQuery(result.data.pageInfo.pages);
        });
    }
    
    // 将后一页和末页加入到ul标签中
    pageUl.append(NextPageLi).append(lastPageLi);
    // 将ul标签加到nav标签中
    pageNav.append(pageUl);
    // 将nav标签加入到指定div中
    $("#pageNav_area").append(pageNav);
}

//将按钮绑定事件
function bindEvent(){
    //将新增按钮绑定click事件
    $("#userAddBtn").click(function(){
        //清空模态框中的样式和内容
        restModal("#userAddModal form");
        $("#userAddModal").modal({
            // 点击背景模态框不关闭
            backdrop:"static"
        });
    })
    //将删除按钮绑定click事件
    $("#userDelBtn").click(function(){
        $("#userDelModal").modal({
            
        });
    });
    //将用户名输入框绑定change事件
    $("#userAddModal_userName").change(function(){
        checkUserName("#userAddModal_userName");
    });
    //将密码输入框绑定change事件
    $("#userAddModal_userPwd").change(function(){
        checkUserPwd("#userAddModal_userPwd");
    });
    //将密码输入框绑定change事件
    $("#userUpdateModal_userPwd").change(function(){
        checkUserPwd("#userUpdateModal_userPwd");
    });
    //将年龄输入框绑定change事件
    $("#userAddModal_age").change(function(){
        checkAge("#userAddModal_age");
    });
    //将年龄输入框绑定change事件
    $("#userUpdateModal_age").change(function(){
        checkAge("#userUpdateModal_age");
    });
    //将保存按钮绑定click事件
    $("#userAddModalSaveBtn").click(function(){
        // 获取页面输入的数据
        var addFormData = $("#userAddModalForm").serialize();
        // 进行页面校验
        if(checkAddFormData()){
            // 执行新增方法
            doAdd(addFormData);
        }else{
            return false;
        }
    });
    //将编辑按钮绑定click事件(click事件不起作用：原因是绑定事件时改按钮未创建)
    /*$(".user-edit-btn").click(function(){
        alert("edit");
    });*/
    //解决方案：1.在创建按钮的时候绑定事件【代码比较多，但容易实现】
    //2.使用live方法（该方法即使是在这个方法之后添加尽量的也都有效）【jQuery新版本将此方法删掉了】
    /*$(".user-edit-btn").live(function(){
        alert("edit");
    });*/
    //3.使用on方法替代live
    /*$(".user-edit-btn").on("click",function(){
        alert("edit");
    });*/
    $(document).on("click",".user-edit-btn",function(){
        //1.查出user信息，并赋值到模态框中
        var id = $(this).attr("user-edit-id");
        getUserById(id);
        // 清空样式和span信息
        removeInfo("#userUpdateModal_userPwd");
        removeInfo("#userUpdateModal_age");
        //2.显示模态框
        $("#userUpdateModal").modal({
            // 点击背景模态框不关闭
            backdrop:"static"
        });
    });
    //将更新模态框中保存按钮绑定事件
    $("#userUpdateModalSaveBtn").click(function(){
        //页面验证
        if(checkUpdateFormData()){
            var updateFormData = $("#userUpdateModal form").serialize();
            doUpdate(updateFormData);
        }else{
            return false;
        }
    });
    //将删除按钮绑定事件
    $(document).on("click",".user-del-btn",function(){
        //2.显示模态框
        $("#userDelModal").modal({
            // 点击背景模态框不关闭
            backdrop:"static"
        });
    });
    
}

// 对添加页面form表单进行验证
function checkAddFormData(){
    if(checkUserName("#userAddModal_userName") 
            & checkUserPwd("#userAddModal_userPwd") & checkAge("#userAddModal_age")){
        return true;
    }
    return false;
}
// 对修改页面form表单进行验证
function checkUpdateFormData(){
    if(checkUserPwd("#userUpdateModal_userPwd") & checkAge("#userUpdateModal_age")){
        return true;
    }
    return false;
}
// 验证用户名是否合法
function checkUserName(userNameId){
    var userNameVal = $(userNameId).val();
    
    findRepeatUserName(userNameVal);
    
    if(userNameVal == ""){
        changeInfo(userNameId,"has-error","用户名不能为空");
        return false;
    }
    
    if(checkEmail(userNameVal)){
        if(checkRepeatUserName("#userAddModal_userName")){
            changeInfo(userNameId,"has-success","邮箱格式正确");
            return true;
        }else{
            changeInfo(userNameId,"has-error","用户名存在");
            return false;
        }
    }else if(checkMobile(userNameVal)){
        if(checkRepeatUserName("#userAddModal_userName")){
            changeInfo(userNameId,"has-success","手机号码格式正确");
            return true;
        }else{
            changeInfo(userNameId,"has-error","用户名存在");
            return false;
        }
    }else{
        changeInfo(userNameId,"has-warning","请输入正确的邮箱或手机号");
        return false;
    }
}
//验证用户名是否存在
function checkRepeatUserName(userNameId){
    if($(userNameId).attr("user-chk") == "success"){
        return true;
    }else if($(userNameId).attr("user-chk") == "error"){
        return false;
    }
}

//验证密码是否合法
function checkUserPwd(pwdId){
    var pwdVal = $(pwdId).val();
    
    if(pwdVal == ""){
        changeInfo(pwdId,"has-error","密码不能为空");
        return false;
    }if(checkPwd(pwdVal)){
        changeInfo(pwdId,"has-success","密码格式正确");
        return true;
    }else{
        changeInfo(pwdId,"has-warning","密码由6-12位数字字母组合");
        return false;
    }
}
// 验证年龄是否合法
function checkAge(ageId){
    var ageVal = $(ageId).val();
    
    if(ageVal == ""){
        changeInfo(ageId,"has-error","年龄不能为空");
        return false;
    }if(checkZeroToOneHundred(ageVal)){
        changeInfo(ageId,"has-success","年龄格式正确");
        return true;
    }else{
        changeInfo(ageId,"has-warning","请输入合法的年龄");
        return false;
    }
}
function restModal(ele){
    //[0]是由于jQuery没有reset方法，在此转为dom对象，调用reset方法使表单重置
    $(ele)[0].reset();
    //移除样式和span中的内容
    $(ele).find("*").removeClass("has-error has-success has-warning");
    $(ele).find(".help-block").text("");
}
//=======================================工具方法==============================================
/**
 * 清空样式和显示信息
 */
function removeInfo(ele){
    $(ele).parent().removeClass("has-error has-success has-warning");
    $(ele).next("span").text("");
}

/**
 * 改变样式并显示信息
 */
function changeInfo(ele,style,msg){
    $(ele).parent().removeClass("has-error has-success has-warning");
    $(ele).parent().addClass(style);
    $(ele).next("span").text(msg);
}

/** 
验证邮箱是否输入合法 
验证规则：把邮箱地址分成“第一部分@第二部分”这样 
第一部分：由字母、数字、下划线、短线“-”、点号“.”组成， 
第二部分：为一个域名，域名由字母、数字、短线“-”、域名后缀组成， 
而域名后缀一般为.xxx或.xxx.xx，一区的域名后缀一般为2-4位，如cn,com,net，现在域名有的也会大于4位 
*/
function checkEmail(str){  
    re = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/  
    if(re.test(str)){  
       return true;  
    }else{  
       return false;  
    }  
} 
/** 
验证手机号码是否输入合法 
验证规则：11位数字，以1开头 
*/  
function checkMobile(str){  
     var re=/^1\d{10}$/;  
     if(re.test(str)){  
        return true;  
     }else{  
        return false;  
     }  
} 
/**
 * 验证6-12位数字字母组合
 */
function checkPwd(str){
    var re=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
    if(re.test(str)){  
        return true;  
     }else{  
        return false;  
     }
}
/**
 * 验证数值范围0-100，限制开头输入0的数字
 */
function checkZeroToOneHundred(str){
    var re=/^(?:[1-9]?\d|100)$/;
    if(re.test(str)){  
        return true;  
    }else{  
        return false;  
    }
}

/**
 * 获取项目根路径，如： http://localhost:8083/ssm-dynamic
 * @returns
 */
function getRootPath(){
  //获取当前网址，如： http://localhost:8083/ssm-dynamic/jsp/jsonList.jsp
  var curWwwPath=window.document.location.href;
  //获取主机地址之后的目录，如： ssm-dynamic/jsp/jsonList.jsp
  var pathName=window.document.location.pathname;
  var pos=curWwwPath.indexOf(pathName);
  //获取主机地址，如： http://localhost:8080
  var localhostPaht=curWwwPath.substring(0,pos);
  //获取带"/"的项目名，如：/ssm-dynamic
  var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
  return(localhostPaht+projectName);
}

页面效果图

修改完成

单一删除

UserController.java

/**
     * 根据id删除user
     */
    @ResponseBody
    @RequestMapping(value="/user/{id}",method=RequestMethod.DELETE)
    public Msg deleteUserByUserId(@PathVariable("id")String userId){
        userLogic.deleteUserByUserId(userId);
        return Msg.success();
    }

list.js

//将删除按钮绑定事件
    $(document).on("click",".user-del-btn",function(){
        var id = $(this).attr("user-del-id");
        //2.显示模态框
        $("#userDelModal").modal({
            // 点击背景模态框不关闭
            backdrop:"static"
        });
        $("#userDelModalSaveBtn").click(function(){
            doDelete(id);
        });
    });

//删除方法
function doDelete(id){
    $.ajax({
        url:basePath + "/user/" + id,
        type:"DELETE",
        success:function(result){
            //1.关闭模态框
            $("#userDelModal").modal("hide");
            doQuery(currentPage);
        }
    });
}

userList.jsp

<!-- 单个删除模态框 -->
    <div class="modal fade bs-example-modal-sm" id="userDelModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog modal-sm" 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">&times;</span></button>
            <h5 class="modal-title">删除</h5>
          </div>
          <div class="modal-body">
                确认删除此条数据？
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-danger btn-sm" id="userDelModalSaveBtn">删除</button>
          </div>
        </div>
      </div>
    </div>

测试通过

=========================================================2018-1-9===================================================================

批量删除

修改删除方法

UserController.java

@ResponseBody
    @RequestMapping(value="/user/{ids}",method=RequestMethod.DELETE)
    public Msg deleteUserByUserId(@PathVariable("ids")String userIds){
        // 判断是否存在-,如果存在表示是批量删除
        if(userIds.contains("-")){
            // 将id拆分为String 数组
            String[] str_userIds = userIds.split("-");
            // 调用批量删除方法
            userLogic.deleteUserByUserIds(Arrays.asList(str_userIds));
        }else{
            // 单个删除
            userLogic.deleteUserByUserId(userIds);
        }
        return Msg.success();
    }

UserLogic.java

/**
     * 批量删除
     * @param userIds
     */
    public void deleteUserByUserIds(List<String> userIds) {
        int i = userMapper.deleteUserByUserIds(userIds);
        System.out.println("批量删除" + i + "条数据");
    }

UserMapper.java

int deleteUserByUserIds(List<String> userIds);

UserMapper.xml

<delete id="deleteUserByUserIds" parameterType="java.util.List" >
    delete from user
    where user_id in 
    <foreach collection="list" item="userId" index="index"  
        open="(" close=")" separator=",">  
        #{userId}  
    </foreach>  
  </delete>

前台

userList.jsp

增加第一列checkbox

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

增加批量删除模态框

<!-- 批量删除模态框 -->
    <div class="modal fade bs-example-modal-sm" id="userDelModals" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog modal-sm" 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">&times;</span></button>
            <h5 class="modal-title">删除</h5>
          </div>
          <div class="modal-body">
                <span id="usersDelModalMsg"></span>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-danger btn-sm" id="userDelModalSaveBtns">删除</button>
          </div>
        </div>
      </div>
    </div>

list.js

//全选/全不选check
    $("#chkboxAll").click(function(){
        //使用attr获取的值是undefined
        //alert($(this).attr("checked"));
        //对于自定义属性，使用arrt
        //对于dom原生的属性，建议使用prop
        //alert($(this).prop("checked"));
        $(".check-item").prop("checked",$(this).prop("checked"));
    });
    //将每一个check框绑定click事件
    $(document).on("click",".check-item",function(){
        var flag = $(".check-item:checked").length == $(".check-item").length
        $("#chkboxAll").prop("checked",flag);
    });
    var ids = "";
    //将删除按钮绑定click事件
    $("#usersDelBtn").click(function(){
        ids = "";
        var usersName = "";
        $.each($(".check-item:checked"),function(){
            usersName += $(this).parents("tr").find("td:eq(2)").text() + ",\n";
            ids += $(this).parents("tr").find("td:eq(1)").text() + "-";
        });
        //去除usersName多余的逗号
        usersName = usersName.substring(0,usersName.length-2);
        //去除usersName多余的逗号
        ids = ids.substring(0,ids.length-1);
        $("#usersDelModalMsg").text("确认删除 [" + usersName + "] ?");
        $("#userDelModals").modal({
            // 点击背景模态框不关闭
            backdrop:"static"
        });
        
    });
    $("#userDelModalSaveBtns").click(function(){
        console.log(ids);
        doDelete(ids);
    });

解析并显示员工数据时，在页面添加checkbox框

// 解析并显示员工数据
function build_user_table(result) {
    // 清空表格
    $("#user_table tbody").empty();
    var users = result.data.pageInfo.list;
    $.each(users,function(index,item){
        var chkboxTd = $("<td></td>").append($("<input type='checkbox' class='check-item'/>"));
        var userIdTd = $("<td></td>").append(item.userId).attr("style","display: none;");
        var userNameTd = $("<td></td>").append(item.userName);
        var passwordTd = $("<td></td>").append(item.userPwd);
        var ageTd = $("<td></td>").append(item.age);
        var editBtn = $("<button></button>").addClass("btn btn-success btn-sm user-edit-btn")
                                .append($("<span></span>").addClass("glyphicon glyphicon-pencil"))
                                .append("编辑");
        //将编辑按钮添加自定义属性，值为当前数据的id
        editBtn.attr("user-edit-id",item.userId);
        var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm user-del-btn")
                                .append($("<span></span>").addClass("glyphicon glyphicon-remove"))
                                .append("删除");
        //将删除按钮添加自定义属性，值为当前数据的id
        delBtn.attr("user-del-id",item.userId);
        var operate = $("<td></td>").append(editBtn).append("&nbsp;").append(delBtn);
        $("<tr></tr>").append(chkboxTd)
                    .append(userIdTd)
                    .append(userNameTd)
                    .append(passwordTd)
                    .append(ageTd)
                    .append(operate)
                    .appendTo("#user_table tbody");
    });
}

至此，完整的ssm框架，登录，增删改查全部完成

转载于:https://www.cnblogs.com/gode/p/8194260.html

weixin_34284188

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
搭建ssm框架，可实现登录和数据展示以及增删改查

需求：后台使用ssm（spring-springMVC-mybatis）进行整合前台使用bootstrap框架前后台交互使用Ajax进行发送表结构：登录页面后显示所有用户信息，可对每条进行增删改查登录时也使用本表的user_name和user_pwd进行校验项目目录结构步骤一：搭建框架，进行测试applicationContext.xml：s...
复制链接

扫一扫