需求：

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

前臺使用bootstrap框架

前后臺交互使用Ajax進行發(fā)送

表結構：

登錄頁面后顯示所有用戶信息，可對每條進行增刪改查

登錄時也使用本表的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/beanshttp://www.springframework.org/schema/beans/spring-beans-4.1.xsdhttp://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-4.1.xsdhttp://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.1.xsdhttp://www.springframework.org/schema/contexthttp://www.springframework.org/schema/context/spring-context-4.1.xsdhttp://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.1.xsd"default-lazy-init="true"><!-- spring配置文件，配置與業(yè)務邏輯相關的 --><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"/><!-- ======數(shù)據源配置開始====== --><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><!-- ======數(shù)據源配置結束====== --><!-- ======整合mybatis開始====== --><bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean"><!-- 指定mybatis全局配置文件位置 --><property name="configLocation" value="classpath:contexts/mybatis.xml"></property><!-- 指定數(shù)據源 --><property name="dataSource" ref="dataSource"></property><!-- 指定mybatis的mapper文件的位置 --><property name="mapperLocations" value="classpath:com/huaxin/mapping/*.xml"></property></bean><!-- 配置掃描器，將mybatis接口的實現(xiàn)加入到ioc容器中 --><bean class="org.mybatis.spring.mapper.MapperScannerConfigurer"><!-- 掃描所有dao接口的實現(xiàn)，加入到ioc容器中 --><property name="basePackage" value="com.huaxin.dao"></property></bean><!-- ======整合mybatis結束====== --><!-- ======配置可執(zhí)行批量的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> --><!-- ======配置可執(zhí)行批量的sqlSession結束====== --><!-- ======事物控制的配置開始====== --><bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager"><!-- 控制數(shù)據源 --><property name="dataSource" ref="dataSource"></property><!-- 開啟基于注解的事物，使用xml配置形式的事物(比較主要的使用配置形式) --></bean><aop:config><!-- 切入點表達式 *[返回值類型]+空格+需要控制事物的包+ ..[兩個點表示其子包也可以]+*[方法]+(..)[兩個點表示任意多個參數(shù)] --><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開始的所有方法,認為都是查詢方法，進行調優(yōu) --><tx:method name="get*" read-only="true"/></tx:attributes></tx:advice><!-- ======事物控制的配置結束====== --><!-- Spring配置文件的核心點(數(shù)據源，與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/beanshttp://www.springframework.org/schema/beans/spring-beans-4.1.xsdhttp://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-4.1.xsdhttp://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.1.xsdhttp://www.springframework.org/schema/contexthttp://www.springframework.org/schema/context/spring-context-4.1.xsdhttp://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等等，映射動態(tài)請求 --><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><!-- 配置駝峰命名規(guī)則 --><settings><setting name="mapUnderscoreToCamelCase" value="true"/></settings><!-- 配置類型別名 --><typeAliases><package name="com.huaxin.bean"/></typeAliases><!-- 配置分頁查詢 --><plugins><plugin interceptor="com.github.pagehelper.PageInterceptor"><!-- 3.3.0版本可用 - 分頁參數(shù)合理化，默認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><!-- 配置數(shù)據庫連接信息 --><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("生成代碼成功"); }}執(zhí)行后刷新項目，即可看到生成的代碼

測試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.創(chuàng)建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;@Controllerpublic 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, // 向前臺頁面?zhèn)鞯闹捣湃雖odel中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：目前頁面樣式沒有調整，還比較丑，大家可以自己調整一下，還有記住用戶名密碼功能尚未實現(xiàn))

登錄成功，顯示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柵格系統(tǒng)搭建顯示頁面 --><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><!-- 新增模態(tài)框 --><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;@Controllerpublic 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){// 分頁參數(shù)/* 配置分頁查詢 ** 引入PageHelper分頁插件，即pagehelper-5.1.2.jar和jsqlparser-0.9.1.jar ** mybatis.xml中配置分頁 ** 調用PageHelper.startPage(pageNum[第幾頁], pageSize[每頁顯示多少條數(shù)據]); **/ PageHelper.startPage(pn, 7); // startPage后緊跟的查詢即為分頁查詢List<User> list = userLogic.getUserList(); // 使用pageInfo包裝查詢后的結果集,封裝詳細的分頁信息,5是連續(xù)顯示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;@Servicepublic class UserLogic { @Autowired private UserMapper userMapper; /** * 查詢用戶列表(分頁查詢) * @return*/public List<User> getUserList(){ return userMapper.selectAll(); } /** * 用戶新增 * @param user */public void addUser(User user) { // id為自動生成的uuidString uid = UUID.randomUUID().toString().replaceAll("-", ""); user.setUserId(uid); userMapper.insertSelective(user); }}由于前后臺使用ajax進行提交

編寫list.js

var basePath = getRootPath();$(function () { // 頁面加載完成之后，直接發(fā)送ajax請求，要到分頁數(shù)據doQuery(1); // 將按鈕綁定事件 bindEvent();});// 查詢方法function doQuery(pn) { $.ajax({ url:basePath + "/user", data:"pn=" + pn, type:"GET", success:function(result){ //console.log(result);// 解析并顯示員工數(shù)據 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); } });}// 解析并顯示員工數(shù)據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(); // navvar pageNav = $("<nav></nav>").attr("aria-label","Page navigation"); // ulvar 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{ // 點擊時發(fā)送ajax請求，獲取當前頁數(shù)據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"); } // 點擊時發(fā)送ajax請求，獲取當前頁數(shù)據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{ // 點擊時發(fā)送ajax請求，獲取當前頁數(shù)據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-dynamicfunction getRootPath(){ //獲取當前網址，如： http://localhost:8083/ssm-dynamic/jsp/jsonList.jspvar curWwwPath=window.document.location.href; //獲取主機地址之后的目錄，如： ssm-dynamic/jsp/jsonList.jspvar pathName=window.document.location.pathname; var pos=curWwwPath.indexOf(pathName); //獲取主機地址，如： http://localhost:8080var localhostPaht=curWwwPath.substring(0,pos); //獲取帶"/"的項目名，如：/ssm-dynamicvar projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1); return(localhostPaht+projectName);}//將按鈕綁定事件function bindEvent(){ //將新增按鈕綁定click事件$("#userAddBtn").click(function(){ $("#userAddModal").modal({ // 點擊背景模態(tài)框不關閉backdrop:"static" }); }) //將刪除按鈕綁定click事件$("#userDelBtn").click(function(){ $("#userDelModal").modal({ }); }); //將保存按鈕綁定click事件$("#userAddModalSaveBtn").click(function(){ // 獲取頁面輸入的數(shù)據var formData = $("#userAddModalForm").serialize(); // 執(zhí)行新增方法//doAdd(formData); alert(formData); $.ajax({ url:basePath + "/user", data:$("#userAddModalForm").serialize(), type:"POST", success:function(result){ alert(0); } }); });}啟動項目，目前可顯示列表及新增用戶

效果如下

點擊新增按鈕效果圖

目前項目進度(2018-1-4)：

登錄：

未實現(xiàn)功能：保存用戶名密碼，頁面樣式

展示頁面(分頁查詢)：已完成

新增：只完成了點擊保存會插入到數(shù)據庫，細節(jié)部分都沒做處理(點擊保存關閉彈窗，id設置為隱藏，頁面進行長度內容check等)

編輯和刪除未完成

總結

以上是生活随笔為你收集整理的ssm框架sql换成MySQL_搭建ssm框架，可实现登录和数据展示以及增删改查的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。