貴州網站建設公司bootstrap+Ajax+SSM(maven搭建)表單增刪改查
前后端分離，搭單增前端利用ajax調用后端API接收json數據,建表進行表單的增刪改查
軟件架構
- IDE：IDEA
- 數據庫：mysql
- jdk:1.8
- tomcat:9
- 后端：springmvc，mybatis
- 前端：bootstrap
項目地址：https://gitee.com/smfx1314/ssm-demo
效果圖：
項目結構：
pom.xml
<?刪改xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.ssm.demo</groupId> <artifactId>ssm-demo</artifactId> <version>1.0-SNAPSHOT</version> <packaging>war</packaging> <name>ssm-demo Maven Webapp</name> <!-- FIXME change it to the project's website --> <url>http://www.example.com</url> <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding> <maven.compiler.source>1.7</maven.compiler.source> <maven.compiler.target>1.7</maven.compiler.target> <org.springframework.version>4.2.4.RELEASE</org.springframework.version> <java.version>1.8</java.version> <mybatis.version>3.2.5</mybatis.version> <mybatis-spring.version>1.2.2</mybatis-spring.version> <jdbc.driver.version>5.1.38</jdbc.driver.version> <aspectj.version>1.7.4</aspectj.version> <javax.servlet-api.version>3.1.0</javax.servlet-api.version> <jsp-api.version>2.2</jsp-api.version> <jstl.version>1.2</jstl.version> <com.alibaba.druid.version>1.0.25</com.alibaba.druid.version> <com.google.gson.version>2.7</com.google.gson.version> </properties> <dependencies> <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>4.11</version> <scope>test</scope> </dependency> <!-- 3.Spring --> <!-- 1)Spring核心 --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-core</artifactId> <version>${ org.springframework.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-beans</artifactId> <version>${ org.springframework.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-context</artifactId> <version>${ org.springframework.version}</version> </dependency> <!-- 2)Spring DAO層 --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-jdbc</artifactId> <version>${ org.springframework.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-tx</artifactId> <version>${ org.springframework.version}</version> </dependency> <!-- 3)Spring web --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-web</artifactId> <version>${ org.springframework.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>${ org.springframework.version}</version> </dependency> <!-- 4)Spring test --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-test</artifactId> <version>${ org.springframework.version}</version> </dependency> <!-- Map工具類 --> <dependency> <groupId>commons-collections</groupId> <artifactId>commons-collections</artifactId> <version>3.2.2</version> </dependency> <!--文件上傳工具--> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.2</version> </dependency> <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>2.5</version> </dependency> <!-- Begin: 數據庫依賴包 --> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>${ jdbc.driver.version}</version> <scope>runtime</scope> </dependency> <!-- End: 數據庫依賴包 --> <!--druid==>阿里巴巴數據庫連接池--> <dependency> <groupId>com.alibaba</groupId> <artifactId>druid</artifactId> <version>${ com.alibaba.druid.version}</version> </dependency> <!--json--> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-core</artifactId> <version>2.5.2</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.5.2</version> </dependency> <!-- Begin: mybatis依賴 --> <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis</artifactId> <version>${ mybatis.version}</version> </dependency> <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis-spring</artifactId> <version>${ mybatis-spring.version}</version> </dependency> <!-- End: mybatis依賴 --> <!--引入分頁插件--> <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper</artifactId> <version>5.1.2</version> </dependency> <!-- Begin: aspectj相關jar包--> <dependency> <groupId>org.aspectj</groupId> <artifactId>aspectjrt</artifactId> <version>${ aspectj.version}</version> </dependency> <dependency> <groupId>org.aspectj</groupId> <artifactId>aspectjweaver</artifactId> <version>${ aspectj.version}</version> </dependency> <!-- End: aspectj相關jar包--> <!-- Begin: Servlet相關依賴包 --> <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <version>${ javax.servlet-api.version}</version> <scope>provided</scope> </dependency> <dependency> <groupId>javax.servlet.jsp</groupId> <artifactId>jsp-api</artifactId> <version>${ jsp-api.version}</version> </dependency> <!-- 2.Servlet web --> <dependency> <groupId>taglibs</groupId> <artifactId>standard</artifactId> <version>1.1.2</version> </dependency> <dependency> <groupId>jstl</groupId> <artifactId>jstl</artifactId> <version>1.2</version> </dependency> <!-- End: Servlet相關依賴包 --> <!--json數據格式--> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-core</artifactId> <version>2.8.5</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-annotations</artifactId> <version>2.8.5</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.8.5</version> </dependency> <!--excle導入導出--> <!--<dependency> <groupId>com.alibaba</groupId> <artifactId>easyexcel</artifactId> <version>1.0.2</version> </dependency>--> </dependencies> <build> <finalName>ssm-demo</finalName> <pluginManagement><!-- lock down plugins versions to avoid using Maven defaults (may be moved to parent pom) --> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-compiler-plugin</artifactId> <version>3.6.1</version> <configuration> <!-- <source>1.8</source> 源代碼使用的開發版本 <target>1.8</target> 需要生成的目標class文件的編譯版本 --> <encoding>utf-8</encoding> </configuration> </plugin> </plugins> </pluginManagement> </build></project>首先是配置文件，applicationContext.xml,搭單增springmvc.xml,mybatis-config.xml,web.xml
applicationContext
<?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:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx" xmlns:context="http://www.springframework.org/schema/context" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd"> <!-- 自動掃描 --> <context:component-scan base-package="com.ssm.dao"/> <context:component-scan base-package="com.ssm.service"/> <!--配置數據源--> <bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource"> <property name="driverClassName" value="com.mysql.jdbc.Driver"/> <property name="url" value="jdbc:mysql://localhost:3306/ssm-demo"/> <!-- 改為你的地址即可 --> <property name="username" value="root"/> <property name="password" value="1234"/> </bean> <!--配置SessionFactoryBean--> <bean id="sqlSessionFactoryBean" class="org.mybatis.spring.SqlSessionFactoryBean"> <property name="dataSource" ref="dataSource"></property> <property name="mapperLocations" value="classpath:mappers/*.xml"></property> <property name="configLocation" value="classpath:mybatis-config.xml"></property> </bean> <!--Mapper接口掃描：DAO接口所在包名，Spring會自動查找其下的建表類--> <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer"> <property name="basePackage" value="com.ssm.dao"></property> <property name="sqlSessionFactoryBeanName" value="sqlSessionFactoryBean"></property> </bean> <!--事務管理transaction manager--> <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager"> <property name="dataSource" ref="dataSource"></property> </bean> <!--開啟注解事務--> <tx:annotation-driven transaction-manager="transactionManager"></tx:annotation-driven></beans>springmvc.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:context="http://www.springframework.org/schema/context" xmlns:mvc="http://www.springframework.org/schema/mvc" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd"> <!-- 使用注解的包，包括子集 --> <context:component-scan base-package="com.ssm.controller"/> <!--兩個標配--> <!-- 解決映射器處理器和映射器適配器 --> <mvc:annotation-driven/> <!-- 處理靜態資源 --> <mvc:default-servlet-handler/> <!-- 視圖解析器 這里可以不用配置，刪改因為是搭單增通過ajax異步調用，本人習慣配置上，建表根據需要更改--> <bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <property name="prefix" value="/WEB-INF/jsp/"/> <property name="suffix" value=".jsp"></property> </bean></beans>mybatis-config.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> <!-- Globally enables or disables any caches configured in any mapper under this configuration --> <setting name="cacheEnabled" value="false"/> <!-- Sets the number of seconds the driver will wait for a response from the database --> <setting name="defaultStatementTimeout" value="5"/> <!-- Enables automatic mapping from classic database column names A_COLUMN to camel case classic Java property names aColumn --> <setting name="mapUnderscoreToCamelCase" value="true"/> <!-- Allows JDBC support for generated keys. A compatible driver is required. This setting forces generated keys to be used if set to true, as some drivers deny compatibility but still work --> <setting name="useGeneratedKeys" value="true"/> </settings> <!-- Continue editing here --> <typeAliases> <package name="com.ssm.entity"/> </typeAliases> <!-- 引入 pageHelper插件 --> <plugins> <plugin interceptor="com.github.pagehelper.PageInterceptor"> <!--reasonable：分頁合理化參數，默認值為false。搭單增 當該參數設置為 true 時，建表pageNum<=0 時會查詢第一頁，刪改 pageNum>pages（超過總數時），搭單增會查詢最后一頁。建表 默認false 時，刪改直接根據參數進行查詢。--> <property name="reasonable" value="true"/> </plugin> </plugins></configuration>web.xml
<?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:web="http://java.sun.com/xml/ns/javaee" 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>Archetype Created Web Application</display-name> <!--Start 歡迎頁--> <welcome-file-list> <welcome-file>index.html</welcome-file> </welcome-file-list> <!--End 歡迎頁--> <!--Start spring監聽器 --> <listener> <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> </listener> <!--End Start spring監聽器 --> <context-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:applicationContext.xml</param-value> </context-param> <!--Start 編碼過濾器 解決亂碼問題--> <filter> <filter-name>encodingFilter</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> </filter> <filter-mapping> <filter-name>encodingFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> <!--End 編碼過濾器 解決亂碼問題--> <!--Start spring mvc servlet--> <servlet> <servlet-name>springmvc</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:springmvc.xml</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>springmvc</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping> <!--End servlet-mapping --> <!--druid ==> WEB方式監控配置--> <servlet> <servlet-name>DruidStatView</servlet-name> <servlet-class>com.alibaba.druid.support.http.StatViewServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>DruidStatView</servlet-name> <url-pattern>/druid/*</url-pattern> </servlet-mapping> <filter> <filter-name>druidWebStatFilter</filter-name> <filter-class>com.alibaba.druid.support.http.WebStatFilter</filter-class> <init-param> <param-name>exclusions</param-name> <param-value>/public/*,*.js,*.css,/druid*,*.jsp,*.swf</param-value> </init-param> <init-param> <param-name>principalSessionName</param-name> <param-value>sessionInfo</param-value> </init-param> <init-param> <param-name>profileEnable</param-name> <param-value>true</param-value> </init-param> </filter> <filter-mapping> <filter-name>druidWebStatFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping></web-app>實體類
User
package com.ssm.entity;import com.alibaba.excel.metadata.BaseRowModel;import java.io.Serializable;/** * Created by jiangfeixiang on 2018/9/4 * @author smfx1314 * */public class User extends BaseRowModel implements Serializable { private Integer id; private String username; private String sex; private String city; private Integer age; public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } public String getSex() { return sex; } public void setSex(String sex) { this.sex = sex; } public String getCity() { return city; } public void setCity(String city) { this.city = city; } public Integer getAge() { return age; } public void setAge(Integer age) { this.age = age; } @Override public String toString() { return "User{ " + "id=" + id + ", username='" + username + '\'' + ", sex='" + sex + '\'' + ", city='" + city + '\'' + ", age=" + age + '}'; }}dao層
UserMapper接口
package com.ssm.dao;import com.ssm.entity.User;import org.springframework.stereotype.Repository;import java.util.List;/** * Created by jiangfeixiang on 2018/9/4 * @author smfx1314 */@Repositorypublic interface UserMapper { /** * 查詢所有用戶 * @return */ List<User> getAllUser(); /** * * @param username * @return */ User checkUserName(String username); /** * 保存用戶 * @param user * @return */ int saveUser(User user); /** * 根據id刪除用戶 * @param id * @return */ int deleteUser(Integer id); /** * 修改用戶 * @param user */ void updateUser(User user);}對應的UserMapper.xml
<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" ><mapper namespace="com.ssm.dao.UserMapper" > <!--<resultMap id="BaseResultMap" type="User" > <id column="id" property="id" jdbcType="INTEGER" /> <result column="username" property="username" jdbcType="VARCHAR" /> <result column="password" property="password" jdbcType="VARCHAR" /> </resultMap>--> <!--查詢所有用戶--> <select id="getAllUser" resultType="User"> SELECT * FROM USER </select> <!--根據用戶名查詢，校驗用戶名--> <select id="checkUserName" resultType="User" parameterType="String"> SELECT * FROM USER WHERE username=#{ username} </select> <!--保存用戶--> <insert id="saveUser" parameterType="User"> INSERT INTO USER(username,sex,city,age) VALUES(#{ username},#{ sex},#{ city},#{ age}) </insert> <!--修改用戶--> <update id="updateUser" parameterType="User"> UPDATE USER SET username=#{ username},sex=#{ sex},city=#{ city},age=#{ age} WHERE id=#{ id} </update> <!--根據id刪除用戶--> <delete id="deleteUser" parameterType="Integer"> DELETE FROM USER WHERE id=#{ id} </delete></mapper>service層
UserService接口
package com.ssm.service;import com.ssm.entity.User;import java.util.List;/** * Created by jiangfeixiang on 2018/9/4 */public interface UserService { /** * 返回所有用戶 * @return */ List<User> getAllUser(); /** * 校驗用戶名 * @param username * @return */ User checkUserName(String username); /** * 保存用戶 * @param user * @return */ int saveUser(User user); /** * 刪除用戶根據id * @param id * @return */ int deleteUser(Integer id); /** * 修改用戶 * @param user */ void updateUser(User user);}UserServiceImpl實現類
package com.ssm.service.impl;import com.ssm.dao.UserMapper;import com.ssm.entity.User;import com.ssm.service.UserService;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Service;import org.springframework.transaction.annotation.Transactional;import java.util.List;/** * Created by jiangfeixiang on 2018/9/4 */@Service@Transactionalpublic class UserServiceImpl implements UserService { @Autowired private UserMapper userMapper; /** * 查詢所有用戶 * @return */ @Override public List<User> getAllUser() { List<User> allUser = userMapper.getAllUser(); return allUser; } /** * 校驗用戶名 * @param username * @return */ @Override public User checkUserName(String username) { return userMapper.checkUserName(username); } /** * 保存用戶 * @param user * @return */ @Override public int saveUser(User user) { int i = userMapper.saveUser(user); return i; } /** * 修改用戶 */ @Override public void updateUser(User user) { userMapper.updateUser(user); } /** * 根據id刪除用戶 * @param id * @return */ @Override public int deleteUser(Integer id) { return userMapper.deleteUser(id); }}Controller層
UserController
package com.ssm.controller;import com.github.pagehelper.PageHelper;import com.github.pagehelper.PageInfo;import com.ssm.common.ResultData;import com.ssm.entity.User;import com.ssm.service.UserService;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.*;import java.util.HashMap;import java.util.List;import java.util.Map;/** * Created by jiangfeixiang on 2018/9/4 * @author */@Controller@RequestMapping(value = "/user")public class UserController { @Autowired private UserService userService; /** *這里統一返回ResultData封裝的json數據格式，不在用Map<String,Object>形式了 * @return */ @RequestMapping(value = "/getAllUser",method = RequestMethod.GET) @ResponseBody public ResultData getAllUser(@RequestParam(defaultValue="1",required=true,value="pn") Integer pn){ Map<String, Object> map = new HashMap<>(); /** * 每頁顯示記錄數 * */ Integer pageSize=5; /** * 分頁查詢，注意順序，startPage()方法放前面 */ PageHelper.startPage(pn, pageSize); /** * 獲取所用用戶信息 */ List<User> allUser = userService.getAllUser(); /** * 使用pageInfo包裝查詢后的結果，只需要將pageInfo交給頁面就行了。 * 封裝了詳細的分頁信息,傳入連續顯示的頁數 */ PageInfo<User> pageInfo=new PageInfo(allUser);// map.put("code",100);// map.put("msg","成功");// map.put("pageInfo",pageInfo); //return map; return ResultData.success(pageInfo); } /** * 校驗用戶名 * @param username * @return */ @RequestMapping(value = "/checkUser/{ username}",method = RequestMethod.POST) @ResponseBody public ResultData checkUserName(@PathVariable("username") String username){ //校驗用戶名 User user = userService.checkUserName(username); System.out.println(user); return ResultData.success(user); } /** * 保存用戶信息 * @param user * @return */ @RequestMapping(value = "/saveUser",method = RequestMethod.POST) @ResponseBody public ResultData saveUser(@RequestBody User user){ int i = userService.saveUser(user); return ResultData.success(); } /** * 修改員工信息（更新） */ @RequestMapping(value = "/updateUser",method = RequestMethod.POST) @ResponseBody public ResultData updateUser(@RequestBody User user){ System.out.print(user); userService.updateUser(user); return ResultData.success(); } /** * 根據id刪除用戶 */ @RequestMapping(value = "/deleteUser/{ id}",method = RequestMethod.DELETE) @ResponseBody public ResultData deleteUser(@PathVariable("id")Integer id){ //保存用戶 int i = userService.deleteUser(id); System.out.println(i); return ResultData.success(); }}為了Controller統一返回json數據格式，所以封裝了ResultData
ResultData
package com.ssm.common;/** * @Author: 姜飛祥 * @Description: 封裝結果集成統一的json樣式 * @Date: Create in 2018/9/15 12:08 * @param: $params$ * @return: $returns$ */public class ResultData<T>{ /** * 信息狀態碼，0表示成功，1表示失敗 */ private Integer code; /** * 提示信息 */ private String msg; /** * 返回的對象,因為有分頁信息，方便返回json數據見名之意，這里直接變量名為pageInfo。 */ private T pageInfo; /** * 成功時調用的函數 * @param object 要返回的對象 * @return */ public static ResultData<Object> success(Object object) { ResultData result = new ResultData(); result.setCode(200); result.setMsg("成功"); result.setPageInfo(object); return result; } /** * 成功時，如果沒有要返回的對象，調用此方法 * @return */ public static ResultData<Object> success() { ResultData result = new ResultData(); result.setCode(200); result.setMsg("成功"); result.setPageInfo(null); //return success(null); return result; } /** * 失敗時調用的函數 * @return */ public static ResultData<Object> fail() { ResultData result = new ResultData(); result.setCode(100); result.setMsg("失敗"); return result; } public Integer getCode() { return code; } public void setCode(Integer code) { this.code = code; } public String getMsg() { return msg; } public void setMsg(String msg) { this.msg = msg; } public T getPageInfo() { return pageInfo; } public void setPageInfo(T pageInfo) { this.pageInfo = pageInfo; } @Override public String toString() { return "ResultData{ " + "code=" + code + ", msg='" + msg + '\'' + ", pageInfo=" + pageInfo + '}'; }}下面是前端代碼
- bootstrap官網：https://v3.bootcss.com/getting-started/#download
下載后整個復制到static下。 - jquery官網：http://jquery.com/download/
下載后復制到static>js下即可，并創建index.js文件
index.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>用戶管理</title> <!--引入jquery --> <script src="./static/js/jquery-3.3.1.js"></script> <!-- 引入樣式--> <link rel="stylesheet" href="./static/bootstrap-3.3.7-dist/css/bootstrap.min.css"> <script src="./static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> <script type="text/javascript" src="./static/js/index.js"></script></head><body><!--使用bootstrap搭建頁面 --><div class="container"> <!--標題 --> <div class="row"> <div class="col-md-12"> <h1>用戶管理</h1> </div> </div> <!--按鈕 --> <div class="row"> <div class="col-md-3 col-md-offset-8 col-sm-4 col-sm-offset-8"> <button class="btn btn-primary" id="user_add_modal_btn">新增</button> <button class="btn btn-danger" id="user_delete_all_btn">刪除</button> </div> </div> <br> <!--顯示表格數據 --> <div class="row"> <div class="table-responsive col-md-12"> <table class="table table-hover" id="users_table"> <thead> <tr> <th> <input type="checkbox" id="check_all"/> </th> <th>ID</th> <th>姓名</th> <th>性別</th> <th>城市</th> <th>年齡</th> <th>操作</th> </tr> </thead> <tbody> </tbody> </table> </div> </div> <!--顯示分頁信息 --> <div class="row"> <!--分頁文字信息 --> <div class="col-md-6 col-sm-6" id="page_info_area"> 當前第頁，總共頁，總共條記錄 </div> <!--分頁導航條信息 --> <div class="col-md-6 col-sm-6" id="page_nav_area"> </div> </div></div><!-- 添加用戶彈出的模態框 --><div class="modal fade" id="userAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" 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> <h4 class="modal-title" id="userAddModalLabel">添加用戶</h4> </div> <div class="modal-body"> <form class="form-horizontal"> <div class="form-group"> <label class="col-sm-2 control-label">姓名</label> <div class="col-sm-10"> <input type="text" name="username" class="form-control" id="username_add_input" placeholder="姓名2-16位中英文、數字"> <span class="help-block"></span> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">性別</label> <div class="col-sm-10"> <label class="radio-inline"> <input type="radio" name="sex" id="sex1_add_input" value="男" checked="checked"> 男 </label> <label class="radio-inline"> <input type="radio" name="sex" id="sex2_add_input" value="女"> 女 </label> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">城市</label> <div class="col-sm-10"> <input type="text" name="city" class="form-control" id="city_add_input" placeholder="請輸入城市"> <span class="help-block"></span> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">年齡</label> <div class="col-sm-10"> <input type="text" name="age" class="form-control" id="age_add_input" placeholder="請輸入年齡"> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> <button type="button" class="btn btn-primary" id="user_save_btn">保存</button> </div> </div> </div></div><!--修改用戶彈出的模態框 --><div class="modal fade" id="userReviseModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" 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> <h4 class="modal-title" id="userReviseModalLabel">修改用戶</h4> </div> <div class="modal-body"> <form class="form-horizontal"> <div class="form-group"> <label class="col-sm-2 control-label">姓名</label> <div class="col-sm-10"> <input type="text" name="username" class="form-control" id="username_revise_input" placeholder="姓名是2-5位中文或6-16位英文和數字的組合"> <span class="help-block"></span> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">性別</label> <div class="col-sm-10"> <label class="radio-inline"> <input type="radio" name="sex" id="sex1_revise_input" value="男" checked="checked"> 男 </label> <label class="radio-inline"> <input type="radio" name="sex" id="sex2_revise_input" value="女"> 女 </label> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">城市</label> <div class="col-sm-10"> <input type="text" name="city" class="form-control" id="city_revise_input" placeholder="城市"> <span class="help-block"></span> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">年齡</label> <div class="col-sm-10"> <input type="text" name="age" class="form-control" id="age_revise_input" placeholder="年齡"> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> <button type="button" class="btn btn-primary" id="user_revise_btn">修改</button> </div> </div> </div></div></body></html>index.js
$(function () { var totalRecord,currentPage; //1.顯示所有數據 to_page(1); //2.添加用戶 addUser(); //3.修改用戶 reviseUser(); //4.單個刪除用戶 deleteUser(); /** * 1.顯示所用用戶 * @param pn */ function to_page(pn) { $.ajax({ url: "/user/getAllUser", data:"pn="+pn, type: "GET", dataType: "json", contentType:"application/json;charset=UTF-8", success: function (data) { //alert(data.msg); //解析并顯示員工數據表 build_users_table(data) //2.解析并顯示分頁信息 build_page_info(data); //3.解析并顯示分頁條數據 build_page_nav(data); } }) } /** * 解析并顯示員工數據表 * @param data */ function build_users_table(data) { //清空table表格 $("#users_table tbody").empty(); var users = data.pageInfo.list; //遍歷元素 $.each(users, function (index, item) { var checkBox=$("<td><input type='checkbox' class='check_item'/></td>"); var id = $("<td></td>").append(item.id); var username = $("<td></td>").append(item.username); var sex = $("<td></td>").append(item.sex); var city = $("<td></td>").append(item.city); var age = $("<td></td>").append(item.age); var button1 = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn").append($("<span></span>").addClass("glyphicon glyphicon-pencil").attr("aria-hidden", true)).append("編輯"); var button2 = $("<button></button>").addClass("tn btn-danger btn-sm delete_btn").append($("<span></span>").addClass("glyphicon glyphicon-trash").attr("aria-hidden", true)).append("刪除"); var td_btn = $("<td></td>").append(button1).append(" ").append(button2); $("<tr></tr>").append(checkBox).append(id).append(username).append(sex).append(city).append(age) .append(td_btn ).appendTo("#users_table tbody"); }) } /** * 解析顯示分頁信息 * @param data */ function build_page_info(data) { $("#page_info_area").empty(); $("#page_info_area").append("當前" + data.pageInfo.pageNum + "頁,總共" + data.pageInfo.pages + "頁，總共" + data.pageInfo.total + "條記錄"); totalRecord = data.pageInfo.total; currentPage=data.pageInfo.pageNum; } /** * 解析顯示分頁導航條 * @param data */ function build_page_nav(data) { $("#page_nav_area").empty(); var ul = $("<ul></ul>>").addClass("pagination"); var firstPageLi = $("<li></li>").append($("<a></a>").append("首頁").attr("href", "#")); var prePageLi = $("<li></li>").append($("<a></a>").append("«").attr("href", "#")); var nextPageLi = $("<li></li>").append($("<a></a>").append("»").attr("href", "#")); var lastPageLi = $("<li></li>").append($("<a></a>").append("末頁").attr("href", "#")); //如果沒有前一頁，前一頁和首頁就不能點 if (data.pageInfo.hasPreviousPage == false) { firstPageLi.addClass("disabled"); prePageLi.addClass("disabled"); } else { //首頁 firstPageLi.click(function () { to_page(1); }); prePageLi.click(function () { to_page(data.pageInfo.pageNum - 1); }); } if (data.pageInfo.hasNextPage == false) { nextPageLi.addClass("disabled"); lastPageLi.addClass("disabled"); } else { //構建點擊事件 nextPageLi.click(function () { to_page(data.pageInfo.pageNum + 1); }); lastPageLi.click(function () { to_page(data.pageInfo.lastPage); }) } //添加首頁和前一頁 ul.append(firstPageLi).append(prePageLi); //遍歷添加頁碼 $.each(data.pageInfo.navigatepageNums, function (index, item) { var numLi = $("<li></li>").append($("<a></a>").append(item).attr("href", "#")); //如果是當前選中頁面，添加active標識 if (data.pageInfo.pageNum == item) { numLi.addClass("active"); } //給每個頁碼添加點擊就跳轉 numLi.click(function () { to_page(item); }); ul.append(numLi); }); //添加下一頁和末頁 ul.append(nextPageLi).append(lastPageLi); var navEle = $("<nav></nav>").append(ul); navEle.appendTo("#page_nav_area"); } /** * 2.實現新增功能 * @returns { boolean} */ function addUser() { //為新增按鈕添加modal $("#user_add_modal_btn").click(function () { //清除表單數據 $("#userAddModal form")[0].reset(); $("#userAddModal").modal({ backdrop: "static" }) }); /** * 2.保存用戶信息 * 校驗該用戶是否存在,如果存在就不能添加該用戶 */ $("#username_add_input").change(function () { var username = $("#username_add_input").val(); //發送Ajax請求校驗姓名是否可用 $.ajax({ url: "/user/checkUser/"+username, //data: "username=" + username, type: "POST", success: function (data) { //alert(data.pageInfo.username); //表示成功，用戶名可用 if (data.code == 200 && data.pageInfo != null) { alert("用戶名**"+ data.pageInfo.username +"**已經存在"); $("#user_save_btn").attr("ajax-va", "error"); } else if (data.code == 200 && data.pageInfo == null) { //為保存按鈕添加屬性 $("#user_save_btn").attr("ajax-va", "success"); } } }) }); /** * 保存用戶信息 */ $("#user_save_btn").click(function () { var username = $("#username_add_input").val(); var sex =$("input[name=sex]:checked").val(); var city =$("#city_add_input").val(); var age =$("#age_add_input").val(); //2.發送ajax請求保存員工 $.ajax({ url: "/user/saveUser", type: "POST", data: JSON.stringify({ username:username,sex:sex,city:city,age:age}), dataType:"json", contentType:"application/json;charset=UTF-8", success: function (data) { if (data.code == 200){ //1.關閉modal框 $("#userAddModal").modal('hide'); //2.來到最后一頁，顯示剛才保存的數據 to_page(totalRecord); } } }); }); } /** * 3.修改用戶 */ function reviseUser() { //為編輯按鈕綁定彈出modal框事件 //1.因為在按鈕創建之前就綁定了click，所以用普通click方法綁定不上 $(document).on("click",".edit_btn",function () { //清除表單數據 $("#userReviseModal form")[0].reset(); $("#username_revise_input").next("span").text(""); //修改框中用戶信息回顯 var id= $(this).parent().parent().children("td").eq(1).text(); //將id的值傳遞給修改按鈕的屬性，方便發送Ajax請求 $("#user_revise_btn").attr("edit-id",id); var username=$(this).parent().parent().children("td").eq(2).text(); var sex=$(this).parent().parent().children("td").eq(3).text(); var city=$(this).parent().parent().children("td").eq(4).text(); var age=$(this).parent().parent().children("td").eq(5).text(); $("#username_revise_input").val(username); $("#userReviseModal input[name=sex]").val([sex]); $("#city_revise_input").val(city); $("#age_revise_input").val(age); $("#userReviseModal").modal({ backdrop: "static" }) }); //2.為模態框中的修改按鈕綁定事件，更新員工信息 $("#user_revise_btn").click(function () { //2.驗證通過后發送ajax請求保存更新的員工數據 //如果要直接發送PUT之類的請求 //在WEB.xml配置HttpPutFormContentFilter過濾器即可 //這里未使用如上所述方法 var id = $(this).attr("edit-id"); var username = $("#username_revise_input").val(); var sex = $("#userReviseModal input[name=sex]").val(); var city =$("#city_revise_input").val(); var age =$("#age_revise_input").val(); $.ajax({ url:"/user/updateUser", type:"POST", data:JSON.stringify({ id:id,username:username,sex:sex,city:city,age:age}), dataType:"json", contentType:"application/json;charset=UTF-8", success:function () { //1.關閉modal框 $("#userReviseModal").modal('hide'); //2.來到當前頁，顯示剛才保存的數據 to_page(currentPage); } }) }) } /** * 4.刪除用戶 */ function deleteUser() { $(document).on("click",".delete_btn",function () { //1.彈出確認刪除對話框 var username=$(this).parents("tr").find("td:eq(2)").text(); var id=$(this).parents("tr").find("td:eq(1)").text(); if(confirm("確認刪除【"+username+"】嗎？")){ // alert(id); //確認，發送ajax請求刪除 $.ajax({ url:"/user/deleteUser/"+id, type:"DELETE", success:function (data) { alert(data.msg); to_page(currentPage); } }) } }) }});本文參考：https://www.jianshu.com/p/d76316b48e3e
如有疑問可聯系
作者：姜飛祥
來源鏈接：https://www.cnblogs.com/smfx1314/p/9689817.html
未經允許不得轉載：>貴州網站建設公司 » bootstrap+Ajax+SSM(maven搭建)表單增刪改查
