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

需求:

后台使用ssm(spring-springMVC-mybatis)举行整合

前台使用bootstrap框架

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

表结构:

 图片 1

登陆页面后展现全数用户新闻,可对每条实行增加和删除改查

签到时也接纳本表的user_name和user_pwd进行校验

体系目录结构

图片 2图片 3

 

 步骤一:搭建框架,实行测量检验

 applicationContext.xml:spring配置文件,内容还饱含spring和mybatis整合

mybatis.xml:mybatis配置文件

springmvcServlet-servlet.xml:springMVC配置文件

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

 2.配置web.xml

 3.导入要求的jar包

出于本项目还可能会利用到junit测验,pageHelper等零件,所以有个别jar包不是在搭框架的时候所必须的,必须的jar包大家能够问度娘哈

图片 4

图片 5

   图片 6

编写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:近年来页面样式未有调节,还好丑,我们能够和谐调节一下,还会有记住用户名密码功用尚未落到实处)

 图片 7

报到成功,突显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">&times;</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($("").addClass("glyphicon glyphicon-pencil"))
                                .append("编辑");
        var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm")
                                .append($("").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);
            }
        });
    });
}

开端项目,近日可兆示列表及新扩大用户

功能如下

图片 8

点击新添按键效果图

图片 9

 

 近期项目进程(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;
        }
    });

页面效果图

图片 10

图片 11

 

 图片 12

图片 13

 

 由于管理成功后直接跳转到当前页面,在此无法截到全体表明通过的图纸

======================================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="邮箱或手机号">

                </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;
    }
}

效果图

图片 14

图片 15

利用此措施页面看起来轻松了几许(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($("").addClass("glyphicon glyphicon-pencil"))
                                .append("编辑");
        var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm")
                                .append($("").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>

页面效果图

图片 16

时至明日,前端验证基本造成

 扩展后端验证,假设任凭输入啥都去查一遍数据库作用太低了,给配备成假若根据前端的印证过不了,直接重临给前台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新扩充部分完善============================================================

动用JS途乐303进行新扩大部分后台验证

虽说前端验证都有了,但为了幸免前端js跳过,后台也必要举办认证

那边运用JSTucson303进行表达

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

图片 17

图片 18

图片 19

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">&times;</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>

                </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="请输入密码">

                </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="请输入年龄">

                </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($("").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($("").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);
}

页面效果图

图片 20图片 21

图片 22

图片 23

修改形成

 单一剔除

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">&times;</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">&times;</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="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($("").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($("").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框架,登入,增加和删除改查全体达成

 

 

 

 

 

 

 

 

相关文章