需求: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">×</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(" ").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("«").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("»").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(" ").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("«").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("»").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">×</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(" ").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("«").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("»").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">×</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">×</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(" ").append(delBtn); $("<tr></tr>").append(chkboxTd) .append(userIdTd) .append(userNameTd) .append(passwordTd) .append(ageTd) .append(operate) .appendTo("#user_table tbody"); }); }
至此,完整的ssm框架,登陸,增刪改查所有完成