搭建ssm框架,可實現登陸和數據展現以及增刪改查

需求:javascript

後臺使用ssm(spring-springMVC-mybatis)進行整合css

前臺使用bootstrap框架html

先後臺交互使用Ajax進行發送前端

表結構:java

 

登陸頁面後顯示全部用戶信息,可對每條進行增刪改查mysql

登陸時也使用本表的user_name和user_pwd進行校驗jquery

項目目錄結構git

 

 步驟一:搭建框架,進行測試github

 applicationContext.xml:spring配置文件,內容還包括spring和mybatis整合web

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框架,登陸,增刪改查所有完成

相關文章
相關標籤/搜索