搭建ssm框架,可实现登录和数据展示以及增删改查
需求:
后台使用ssm(spring-springMVC-mybatis)进行整合
前台使用bootstrap框架
前后台交互使用Ajax进行发送
表结构:
登录页面后显示所有用户信息,可对每条进行增删改查
登录时也使用本表的user_name和user_pwd进行校验
项目目录结构
步骤一:搭建框架,进行测试
applicationContext.xml:spring配置文件,内容还包括spring和mybatis整合
mybatis.xml:mybatis配置文件
springmvcServlet-servlet.xml:springMVC配置文件
1.在src目录下新建context包,用来存放配置文件
2.配置web.xml
3.导入需要的jar包
由于本项目还会使用到junit测试,pageHelper等组件,所以有些jar包不是在搭框架的时候所必须的,必须的jar包大家可以问度娘哈
编写web.xml
代码中注释写的很完整,这里直接贴代码了,如果哪里有看不懂的大家可以留言或私信
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0"> <display-name>ssm-dynamic</display-name> <!-- 启动spring容器 --> <context-param> <param-name>contextConfigLocation</param-name> <!-- 在根目录存在springContext.xml文件 --> <param-value>classpath*:contexts/applicationContext.xml</param-value> </context-param> <listener> <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> </listener> <!-- 配置log4j --> <context-param> <param-name>log4jConfigLocation</param-name> <param-value>WEB-INF/classes/contexts/log4j.properties</param-value> </context-param> <context-param> <param-name>log4jRefreshInterval</param-name> <param-value>60000</param-value> </context-param> <!-- 需要添加spring-web.jar包 --> <listener> <listener-class>org.springframework.web.util.Log4jConfigListener</listener-class> </listener> <!-- 配置springmvc前端控制器 --> <servlet> <!-- 在于web.xml同级目录下存在springmvcServlet-servlet.xml文件 --> <servlet-name>springmvcServlet</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath*:contexts/springmvcServlet-servlet.xml</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>springmvcServlet</servlet-name> <!-- 拦截所有请求 --> <url-pattern>/</url-pattern> </servlet-mapping> <!-- 字符编码过滤器,一定要放在所有过滤器之前 --> <filter> <filter-name>CharacterEncodingFilter</filter-name> <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class> <init-param> <param-name>encoding</param-name> <param-value>utf-8</param-value> </init-param> <init-param> <param-name>forceRequestEncoding</param-name> <param-value>true</param-value> </init-param> <init-param> <param-name>forceResponseEncoding</param-name> <param-value>true</param-value> </init-param> </filter> <filter-mapping> <filter-name>CharacterEncodingFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> <!-- 使用Rest风格的URI,将页面普通的post请求转为指定的delete或者put请求 --> <filter> <filter-name>HiddenHttpMethodFilter</filter-name> <filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class> </filter> <filter-mapping> <filter-name>HiddenHttpMethodFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> </web-app>
applicationContext.xml
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:tx="http://www.springframework.org/schema/tx" xmlns:context="http://www.springframework.org/schema/context" xmlns:aop="http://www.springframework.org/schema/aop" xmlns:p="http://www.springframework.org/schema/p" xmlns:mvc="http://www.springframework.org/schema/mvc" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.1.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-4.1.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.1.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.1.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.1.xsd" default-lazy-init="true"> <!-- spring配置文件,配置与业务逻辑相关的 --> <context:component-scan base-package="com.huaxin"> <!-- 不扫描控制器 --> <context:exclude-filter type="annotation" expression="org.springframework.stereotype.Controller"/> </context:component-scan> <!-- 引入外部配置文件 --> <context:property-placeholder location="classpath:contexts/jdbc.properties"/> <!-- ======数据源配置开始====== --> <bean id = "dataSource" class="com.zaxxer.hikari.HikariDataSource" destroy-method="close"> <property name="driverClassName" value="${jdbc.driver}" /> <property name="jdbcUrl" value="${jdbc.url}" /> <property name="username" value="${jdbc.username}" /> <property name="password" value="${jdbc.password}" /> <property name="maximumPoolSize" value="${jdbc.maximumPoolSize}" /> <property name="minimumIdle" value="${jdbc.minimumIdle}" /> <property name="connectionTestQuery" value="${jdbc.connectionTestQuery}" /> <property name="dataSourceProperties"> <props> <prop key="cachePrepStmts">${jdbc.cachePrepStmts}</prop> <prop key="prepStmtCacheSize">${jdbc.prepStmtCacheSize}</prop> <prop key="prepStmtCacheSqlLimit">${jdbc.prepStmtCacheSqlLimit}</prop> <prop key="useServerPrepStmts">${jdbc.useServerPrepStmts}</prop> </props> </property> </bean> <!-- ======数据源配置结束====== --> <!-- ======整合mybatis开始====== --> <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean"> <!-- 指定mybatis全局配置文件位置 --> <property name="configLocation" value="classpath:contexts/mybatis.xml"></property> <!-- 指定数据源 --> <property name="dataSource" ref="dataSource"></property> <!-- 指定mybatis的mapper文件的位置 --> <property name="mapperLocations" value="classpath:com/huaxin/mapping/*.xml"></property> </bean> <!-- 配置扫描器,将mybatis接口的实现加入到ioc容器中 --> <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer"> <!-- 扫描所有dao接口的实现,加入到ioc容器中 --> <property name="basePackage" value="com.huaxin.dao"></property> </bean> <!-- ======整合mybatis结束====== --> <!-- ======配置可执行批量的sqlSession开始====== --> <!-- <bean id="sqlSession" class="org.mybatis.spring.SqlSessionTemplate.class"> <constructor-arg name="sqlSessionFactory" ref="sqlSessionFactory"></constructor-arg> <constructor-arg name="executorType" value="BATCH"></constructor-arg> </bean> --> <!-- ======配置可执行批量的sqlSession结束====== --> <!-- ======事物控制的配置开始====== --> <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager"> <!-- 控制数据源 --> <property name="dataSource" ref="dataSource"></property> <!-- 开启基于注解的事物,使用xml配置形式的事物(比较主要的使用配置形式) --> </bean> <aop:config> <!-- 切入点表达式 *[返回值类型]+空格+需要控制事物的包+ ..[两个点表示其子包也可以]+*[方法]+(..)[两个点表示任意多个参数] --> <aop:pointcut expression="execution(* com.huaxin.service..*(..))" id="txPoint"/> <!-- 配置事物增强 --> <aop:advisor advice-ref="txAdvice" pointcut-ref="txPoint"/> </aop:config> <!-- 配置事物增强,事物如何切入 --> <tx:advice id="txAdvice" transaction-manager="transactionManager"> <tx:attributes> <!-- *表示所有方法都是事物方法 --> <tx:method name="*"/> <!-- 以get开始的所有方法,认为都是查询方法,进行调优 --> <tx:method name="get*" read-only="true"/> </tx:attributes> </tx:advice> <!-- ======事物控制的配置结束====== --> <!-- Spring配置文件的核心点(数据源,与mybatis的整合,事物控制) --> </beans>
springmvcServlet-servlet.xml
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:tx="http://www.springframework.org/schema/tx" xmlns:context="http://www.springframework.org/schema/context" xmlns:aop="http://www.springframework.org/schema/aop" xmlns:p="http://www.springframework.org/schema/p" xmlns:mvc="http://www.springframework.org/schema/mvc" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.1.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-4.1.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.1.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.1.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.1.xsd" default-lazy-init="true"> <!-- springmvc配置文件,包含网站跳转逻辑的控制,配置 --> <context:component-scan base-package="com.huaxin" use-default-filters="false"> <!-- 只扫描控制器 --> <context:include-filter type="annotation" expression="org.springframework.stereotype.Controller"/> </context:component-scan> <!-- 配置视图解析器,方便页面返回 --> <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <property name="prefix" value="/WEB-INF/jsp/"></property> <property name="suffix" value=".jsp"></property> </bean> <!-- 两个标准配置 --> <!-- 将springmvc不能处理的请求交给tomcat --> <mvc:default-servlet-handler/> <!-- 能支持springmvc更高级的功能,JSR303校验,快捷的Ajax等等,映射动态请求 --> <mvc:annotation-driven/> </beans>
mybatis.xml
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-config.dtd"> <configuration> <!-- 配置驼峰命名规则 --> <settings> <setting name="mapUnderscoreToCamelCase" value="true"/> </settings> <!-- 配置类型别名 --> <typeAliases> <package name="com.huaxin.bean"/> </typeAliases> <!-- 配置分页查询 --> <plugins> <plugin interceptor="com.github.pagehelper.PageInterceptor"> <!-- 3.3.0版本可用 - 分页参数合理化,默认false禁用 --> <!-- 启用合理化时,如果pageNum<1会查询第一页,如果pageNum>pages会查询最后一页 --> <property name="reasonable" value="true"/> </plugin> </plugins> </configuration>
使用mybatis逆向工程生成bean,dao和mapping
配置mbg.xml
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE generatorConfiguration PUBLIC "-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN" "http://mybatis.org/dtd/mybatis-generator-config_1_0.dtd"> <generatorConfiguration> <context id="DB2Tables" targetRuntime="MyBatis3"> <!-- 配置是否生成注释 --> <commentGenerator> <property name="suppressAllComments" value="true" /> </commentGenerator> <!-- 配置数据库连接信息 --> <jdbcConnection driverClass="com.mysql.jdbc.Driver" connectionURL="jdbc:mysql://127.0.0.1:3306/test" userId="root" password="1234"> </jdbcConnection> <javaTypeResolver > <property name="forceBigDecimals" value="false" /> </javaTypeResolver> <!-- 指定JavaBean生成位置 --> <javaModelGenerator targetPackage="com.huaxin.bean" targetProject=".\src"> <property name="enableSubPackages" value="true" /> <property name="trimStrings" value="true" /> </javaModelGenerator> <!-- 指定sql映射文件生成的位置 --> <sqlMapGenerator targetPackage="com.huaxin.mapping" targetProject=".\src"> <property name="enableSubPackages" value="true" /> </sqlMapGenerator> <!-- 指定dao接口生成的位置,mapper接口生成的位置 --> <javaClientGenerator type="XMLMAPPER" targetPackage="com.huaxin.dao" targetProject=".\src"> <property name="enableSubPackages" value="true" /> </javaClientGenerator> <!-- 指定每个表的生成策略,enable***表示不生成example表 --> <table tableName="user" domainObjectName="User" enableCountByExample="false" enableUpdateByExample="false" enableDeleteByExample="false" enableSelectByExample="false" selectByExampleQueryId="false"></table> </context> </generatorConfiguration>
编写生成类
package com.huaxin.test; import java.io.File; import java.util.ArrayList; import java.util.List; import org.mybatis.generator.api.MyBatisGenerator; import org.mybatis.generator.config.Configuration; import org.mybatis.generator.config.xml.ConfigurationParser; import org.mybatis.generator.internal.DefaultShellCallback; public class MBGTest { public static void main(String[] args) throws Exception { List<String> warnings = new ArrayList<String>(); boolean overwrite = true; File configFile = new File("mbg.xml"); ConfigurationParser cp = new ConfigurationParser(warnings); Configuration config = cp.parseConfiguration(configFile); DefaultShellCallback callback = new DefaultShellCallback(overwrite); MyBatisGenerator myBatisGenerator = new MyBatisGenerator(config, callback, warnings); myBatisGenerator.generate(null); System.out.println("生成代码成功"); } }
执行后刷新项目,即可看到生成的代码
测试dao层以及项目基本配置是否成功
编写测试类MapperTest.java
package com.huaxin.test; import org.junit.Test; import org.junit.runner.RunWith; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.test.context.ContextConfiguration; import org.springframework.test.context.junit4.SpringJUnit4ClassRunner; import com.huaxin.bean.User; import com.huaxin.dao.UserMapper; /** * 测试dao层 * @author ws * Spring项目可以使用spring的单元测试,可以自动注入我们需要的组件 * 1.导入SpringTest模块spring-test-4.1.7.RELEASE.jar * 2.@ContextConfiguration指定配置文件位置 * @RunWith(SpringJUnit4ClassRunner.class)指定使用spring的单元测试 * 3.直接autowired要使用的组件即可 */ @RunWith(SpringJUnit4ClassRunner.class) @ContextConfiguration(locations={"classpath:contexts/applicationContext.xml"}) public class MapperTest { @Autowired UserMapper userMapper; /*@Autowired SqlSession sqlSession;*/ public static void main(String[] args) { /*// 1.创建SpringIOC容器 ApplicationContext ioc = new ClassPathXmlApplicationContext("springContext.xml"); // 2.从容器中获取mapper UserMapper bean = ioc.getBean(UserMapper.class);*/ } @Test public void testC(){ System.out.println(">>>>>>>>>>>>>>>>>>>>" + userMapper); User user = new User(); user.setUserId("testCRUD3"); user.setUserName("李小龙"); user.setUserPwd("qwer123"); user.setAge(231); userMapper.insertSelective(user); /*for(int i = 0;i < 500;i++){ String uid = UUID.randomUUID().toString().substring(0, 5); userMapper.insertSelective(new User(uid, uid, uid, i)); System.out.println("插入成功!"); }*/ System.out.println("插入完成"); } @Test public void testCs(){ /*UserMapper userMapper = sqlSession.getMapper(UserMapper.class); for(int i = 0;i < 1000;i++){ String uid = UUID.randomUUID().toString().substring(0, 5); String id = UUID.randomUUID().toString().substring(5,10); userMapper.insertSelective(new User(id, uid, uid, i)); }*/ } }
编写login.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>登录页面</title> <!-- 获取项目名称 --> <% pageContext.setAttribute("PATH", request.getContextPath()); %> <!-- web路径 不以/开始的相对路径,找资源以当前路径为基准(容易出问题) 以/开始的相对路径,找资源以服务器的路径(http://localhost:8080)为标准,需要加项目名 --> <script type="text/javascript" src="${PATH}/static/jquery/jquery-1.12.4.min.js"></script> <link href="${PATH }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"> <script type="text/javascript" src="${PATH }/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> <%-- <link href="${PATH }/static/css/login.css" rel="stylesheet"> --%> <style type="text/css"> .container{ display:table; height:100%; } .row{ display: table-cell; vertical-align: middle; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-sm-2"> <form action="login" method="post"> <div class="form-group"> <label>用户名</label> <input type="text" class="form-control input-sm" name="username"> </div> <div class="form-group"> <label>密码</label> <input type="password" class="form-control input-sm" name="password"> </div> <div class="checkbox"> <label> <input type="checkbox">记住用户名密码 </label> </div> <button type="submit" class="btn btn-default">提交</button> <div>${msg}</div> </form> </div> </div> </div> </body> </html>
LoginController.java
package com.huaxin.controller; import javax.servlet.http.HttpServletRequest; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import com.huaxin.bean.User; import com.huaxin.dao.UserMapper; @Controller public class LoginController { @Autowired private UserMapper userMapper; /** * 访问时跳转登录页面 * @param model * @return */ @RequestMapping(value="/",method=RequestMethod.GET) public String index(Model model){ model.addAttribute("msg", ""); return "login"; } @RequestMapping(value="/login") public String login(Model model, // 向前台页面传的值放入model中 HttpServletRequest request // 从前台页面取得的值 ){ String username = request.getParameter("username"); String password = request.getParameter("password"); boolean flag = LoginCheck(username, password); if(flag){ return "uerList"; }else{ model.addAttribute("msg", "用户名或密码不正确,请重新登录"); return "login"; } } /** * 检查用户名密码是否正确 * @param username * @param password * @return */ private boolean LoginCheck(String username,String password){ User user = userMapper.selectByUserName(username); if(user == null || "".equals(user)){ return false; } if(user.getUserPwd().equals(password)){ return true; }else{ return false; } } }
这里在userMapper中新增了根据username查询该记录的信息
sql写在UserMapper.xml中
<select id="selectByUserName" resultMap="BaseResultMap" parameterType="java.lang.String" > select <include refid="Base_Column_List" /> from user where user_name = #{username,jdbcType=VARCHAR} </select>
启动项目,本项目使用的是tomcat7.0,jdk1.8
页面效果图(ps:目前页面样式没有调整,还比较丑,大家可以自己调整一下,还有记住用户名密码功能尚未实现)
登录成功,显示user列表信息
uerList.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!-- 引入标签库 --> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>json展示页面</title> <!-- 获取项目名称路径 --> <% pageContext.setAttribute("PATH", request.getContextPath()); %> <!-- web路径 不以/开始的相对路径,找资源以当前路径为基准(容易出问题) 以/开始的相对路径,找资源以服务器的路径(http://localhost:8080)为标准,需要加项目名 --> <script type="text/javascript" src="${PATH}/static/jquery/jquery-1.12.4.min.js"></script> <link href="${PATH }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"> <script type="text/javascript" src="${PATH }/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> <link href="${PATH }/static/css/list.css" rel="stylesheet"> <script type="text/javascript" src="${PATH }/static/js/list.js"></script> </head> <body> <%-- ${pageInfo } --%> <!-- 使用bootstrap栅格系统搭建显示页面 --> <div class="container"> <!-- 标题 --> <div class="row"> <div class="col-sm-12"> <h1>USER INFO</h1> </div> </div> <!-- 增加删除按钮 --> <div class="row"> <!-- 使用列偏移 --> <div class="col-sm-4 col-sm-offset-10"> <!-- 使用按钮样式 --> <button type="button" class="btn btn-primary btn-sm" id="userAddBtn">增加</button> <button type="button" class="btn btn-primary btn-sm" id="userDelBtn">删除</button> </div> </div> <!-- 列表信息 --> <div class="row"> <div class="col-sm-12"> <table class="table table-hover" id="user_table"> <thead> <tr> <th width="20%">id</th> <th width="20%">用户名</th> <th width="20%">密码</th> <th width="20%">年龄</th> <th width="20%">操作</th> </tr> </thead> <tbody></tbody> </table> </div> </div> <!-- 分页 --> <div class="row"> <!-- 分页文字信息 --> <div class="col-sm-3" id="pageInfo_area"></div> <!-- 分页条信息 --> <div class="col-sm-5 col-sm-offset-4" id="pageNav_area"></div> </div> </div> <!-- 新增模态框 --> <div class="modal fade" id="userAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document" style="width: 35%"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</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框架,登录,增删改查全部完成