bootstrap+Ajax+SSM(maven搭建)表單增刪改查
阿新 • • 發佈:2018-09-22
shee mapping oda 順序 images 子集 update -- common
前後端分離,前端利用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
*/
@Repository
public 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
@Transactional
public 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
如有疑問可聯系
bootstrap+Ajax+SSM(maven搭建)表單增刪改查