前後端分離，前端利用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">&times;</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">&times;</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("&laquo;").attr("href", "#"));
        var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;").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搭建)表單增刪改查