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




  

    
  

  
  

  
  
      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 success(Object object) {
        ResultData result = new ResultData();
        result.setCode(200);
        result.setMsg("成功");
        result.setPageInfo(object);
        return result;
    }

    /**
     * 成功时,如果没有要返回的对象,调用此方法
     * @return
     */
    public static ResultData success() {
        ResultData result = new ResultData();
        result.setCode(200);
        result.setMsg("成功");
        result.setPageInfo(null);
        //return success(null);
        return result;
    }

    /**
     * 失败时调用的函数
     * @return
     */
    public static ResultData 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




    
    用户管理
    
    
    
    
    
    




用户管理


ID 姓名 性别 城市 年龄 操作
当前第页,总共页,总共条记录

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=$("");
            var id = $("").append(item.id);
            var username = $("").append(item.username);
            var sex = $("").append(item.sex);
            var city = $("").append(item.city);
            var age = $("").append(item.age);

            var button1 = $("").addClass("btn btn-primary btn-sm edit_btn").append($("").addClass("glyphicon glyphicon-pencil").attr("aria-hidden", true)).append("编辑");
            var button2 = $("").addClass("tn btn-danger btn-sm delete_btn").append($("").addClass("glyphicon glyphicon-trash").attr("aria-hidden", true)).append("删除");
            var td_btn = $("").append(button1).append(" ").append(button2);
            $("").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 = $("
    >").addClass("pagination"); var firstPageLi = $("
  • ").append($("").append("首页").attr("href", "#")); var prePageLi = $("
  • ").append($("").append("«").attr("href", "#")); var nextPageLi = $("
  • ").append($("").append("»").attr("href", "#")); var lastPageLi = $("
  • ").append($("").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 = $("
  • ").append($("").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 = $("").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搭建)表单增删改查)