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

  4.0.0

  com.ssm.demo
  ssm-demo
  1.0-SNAPSHOT
  war

  ssm-demo Maven Webapp
  
  http://www.example.com

  
    UTF-8
    UTF-8
    1.7
    1.7

    4.2.4.RELEASE
    1.8
    3.2.5
    1.2.2
    5.1.38
    1.7.4
    3.1.0
    2.2
    1.2
    1.0.25
    2.7
  

  
    
      junit
      junit
      4.11
      test
    

    
    
    
      org.springframework
      spring-core
      ${org.springframework.version}
    
    
      org.springframework
      spring-beans
      ${org.springframework.version}
    
    
      org.springframework
      spring-context
      ${org.springframework.version}
    

    
    
      org.springframework
      spring-jdbc
      ${org.springframework.version}
    
    
      org.springframework
      spring-tx
      ${org.springframework.version}
    
    
    
      org.springframework
      spring-web
      ${org.springframework.version}
    
    
      org.springframework
      spring-webmvc
      ${org.springframework.version}
    
    
    
      org.springframework
      spring-test
      ${org.springframework.version}
    

    
    
      commons-collections
      commons-collections
      3.2.2
    
    
    
      commons-fileupload
      commons-fileupload
      1.3.2
    
    
      commons-io
      commons-io
      2.5
    

    
    
      mysql
      mysql-connector-java
      ${jdbc.driver.version}
      runtime
    
    

    
    
      com.alibaba
      druid
      ${com.alibaba.druid.version}
    

    
    
      com.fasterxml.jackson.core
      jackson-core
      2.5.2
    

    
      com.fasterxml.jackson.core
      jackson-databind
      2.5.2
    

    
    
      org.mybatis
      mybatis
      ${mybatis.version}
    
    
      org.mybatis
      mybatis-spring
      ${mybatis-spring.version}
    
    

      
      
          com.github.pagehelper
          pagehelper
          5.1.2
      

    
    
      org.aspectj
      aspectjrt
      ${aspectj.version}
    
    
      org.aspectj
      aspectjweaver
      ${aspectj.version}
    
    

      
      
          javax.servlet
          javax.servlet-api
          ${javax.servlet-api.version}
          provided
      
      
          javax.servlet.jsp
          jsp-api
          ${jsp-api.version}
      

    
    
      taglibs
      standard
      1.1.2
    
    
      jstl
      jstl
      1.2
    
      

      
      
          com.fasterxml.jackson.core
          jackson-core
          2.8.5
      
      
          com.fasterxml.jackson.core
          jackson-annotations
          2.8.5
      
      
          com.fasterxml.jackson.core
          jackson-databind
          2.8.5
      

    
    
  

  
    ssm-demo
    
      
        
          org.apache.maven.plugins
          maven-compiler-plugin
          3.6.1
          
            
            utf-8
          
        
      
    
  

首先是配置文件，applicationContext.xml,springmvc.xml,mybatis-config.xml,web.xml

applicationContext

springmvc.xml

mybatis-config.xml 为了配置分页插件

web.xml

  Archetype Created Web Application

  
  
    index.html
  
  

  
  
    org.springframework.web.context.ContextLoaderListener
  
  
  
    contextConfigLocation
    classpath:applicationContext.xml
  

  
  
    encodingFilter
    org.springframework.web.filter.CharacterEncodingFilter
    
      encoding
      UTF-8
    
  
  
    encodingFilter
    /*
  
  

  
  
    springmvc
    org.springframework.web.servlet.DispatcherServlet
    
      contextConfigLocation
      classpath:springmvc.xml
    
    1
  

  
    springmvc
    /
  
  

  
  
    DruidStatView
    com.alibaba.druid.support.http.StatViewServlet
  
  
    DruidStatView
    /druid/*
  
  
    druidWebStatFilter
    com.alibaba.druid.support.http.WebStatFilter
    
      exclusions
      /public/*,*.js,*.css,/druid*,*.jsp,*.swf
    
    
      principalSessionName
      sessionInfo
    
    
      profileEnable
      true
    
  
  
    druidWebStatFilter
    /*
  

实体类

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 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

  

    
  
    SELECT * FROM USER
  

  
  
    SELECT * FROM USER WHERE username=#{username}
  

  
  
      INSERT INTO USER(username,sex,city,age) VALUES(#{username},#{sex},#{city},#{age})
  

  
  
    UPDATE USER SET username=#{username},sex=#{sex},city=#{city},age=#{age} WHERE id=#{id}
  

  
  
      DELETE FROM USER WHERE id=#{id}
  

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 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 getAllUser() {
        List 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形式了
     * @return
     */
    @RequestMapping(value = "/getAllUser",method = RequestMethod.GET)
    @ResponseBody
    public ResultData getAllUser(@RequestParam(defaultValue="1",required=true,value="pn") Integer pn){
        Map map = new HashMap<>();
        /**
         * 每页显示记录数
         *
         */
        Integer pageSize=5;
        /**
         * 分页查询，注意顺序，startPage()方法放前面
         */
        PageHelper.startPage(pn, pageSize);
        /**
         * 获取所用用户信息
         */
        List allUser = userService.getAllUser();
        /**
         * 使用pageInfo包装查询后的结果，只需要将pageInfo交给页面就行了。
         * 封装了详细的分页信息,传入连续显示的页数
         */
        PageInfo 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{
    /**
     * 信息状态码，0表示成功，1表示失败
     */
    private Integer code;
    /**
     * 提示信息
     */
    private String msg;
    /**
     * 返回的对象,因为有分页信息，方便返回json数据见名之意，这里直接变量名为pageInfo。
     */
    private T pageInfo;

    /**
     * 成功时调用的函数
     * @param object 要返回的对象
     * @return
     */
    public static ResultData