如何在Springboot中利用Bootstrap实现增删改查操作
创始人
2024-12-26 20:41:38
0次

前端





  
  
  
  用户管理
  

  
    .container {
      padding: 20px;
    }

    .search {
      padding-bottom: 20px;
      border-bottom: 1.5px solid #ddd;
    }

    #add {
      margin-right: 5em;
    }

    #search {
      margin-left: 0.5em;
    }

    .pagination {
      display: flex;
      padding-left: 0;
      margin: 20px 0;
      border-radius: 4px;
    }

    .pagination>li:last-child>a, .pagination>li:last-child>span {
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
    }

    .pagination>li:first-child>a, .pagination>li:first-child>span {
      margin-left: 0;
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
    }

    .pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
      z-index: 3;
      color: #fff;
      cursor: default;
      background-color: #337ab7;
      border-color: #337ab7;
    }

    .pagination>li>a, .pagination>li>span {
      position: relative;
      float: left;
      padding: 6px 12px;
      margin-left: -1px;
      line-height: 1.42857143;
      color: #337ab7;
      text-decoration: none;
      background-color: #fff;
      border: 1px solid #ddd;
      cursor: pointer;
    }
  



  
  
    
      
        添加
      
      
      
					
																		查询
					
			
    
  
                                                                           用户名               邮箱               姓名               创建时间               操作                                                                        
      
    
  
                          
  
                       修改用户                    ×                
                                   用户名:                    
                   邮箱:                                        姓名:                                           关闭         提交                          var ctx = $("#ctx").val();   $(function () {     // 查询第一页数据     getPage(1);     // 新增     $("#add").click(function () {       reset();       $('#modify').modal('show');     });     // 搜索     $("#search").click(function () {       getPage(1);     });     // 回车触发查询     $("#username").keyup(function (event) {       if (event.keyCode == 13) {         $("#search").trigger("click");       }     });   });   // 获取指定页码的数据   function getPage(pageNo) {     var dataRow = "";     $.ajax({         url: ctx + "/user/list",         type: "post",         data: {           "username": $("#username").val(),           "pageNo": pageNo         },         dataType: "json",         success: function (response) {           dataRow = "";           if (response.data.records.length > 0) {             console.log(111)             $.each(response.data.records, function (i, r) {               dataRow += ''                 + ''                 + r.username                 + ''                 + ''                 + r.email                 + ''                 + r.truename + ''               ;               dataRow += '' + new Date(r.createTime).Format("yyyy-MM-dd hh:mm:ss") + '删除' +                 '  编辑';             });           }           // console.log(dataRow);           $("#dataTable tbody").empty();           $("#dataTable tbody").append(dataRow);           // 分页按钮           var element = $('#pageButton');           var options = {             bootstrapMajorVersion: 4,             currentPage: pageNo, // 当前页数             numberOfPages: 5, // 显示按钮的数量             totalPages: response.data.pages, // 总页数             itemTexts: function (type, page, current) {               switch (type) {                 case "first":                   return "首页";                 case "prev":                   return "上一页";                 case "next":                   return "下一页";                 case "last":                   return "末页";                 case "page":                   return page;               }             },             // 点击事件,用于通过Ajax来刷新整个list列表             onPageClicked: function (event, originalEvent, type, page) {               getPage(page);             }           };           element.bootstrapPaginator(options);         }       }     )   }   //删除   function remove(id) {     if (confirm("确定删除数据?")) {       $.ajax({         type: "POST",         url: ctx + "/user/remove",         traditional: true,         data: {           id: id         },         success: function (data) {           getPage(1);         },         error: function (e) {           //alert("ERROR: ", e);           console.log("ERROR: ", e);         }       });     }   }   function edit(id) {     $.ajax({       url: ctx + "/user/" + id,       type: "GET",       success: function (result) {         if (result.success) {           //向模态框中传值           $('#m_id').val(id);           $('#m_username').val(result.data.username);           $('#m_email').val(result.data.email);           $('#m_truename').val(result.data.truename);         } else {           alert(result.data.message);         }       }     });     $('#modify').modal('show');   }   //提交修改   function modify() {     //获取模态框数据     var id = $("#m_id").val();     var username = $("#m_username").val();     var email = $("#m_email").val();     var truename = $("#m_truename").val();     var param = {"id": id, username: username, email: email, truename: truename};     $.ajax({       url: ctx + "/user/modify",       type: "POST",       contentType: "application/json",       dataType: "json",       data: JSON.stringify(param),       success: function (data) {         if (data.success) {           // 清空表单           reset();           $('#modify').modal('hide');           getPage(1);         } else {           alert(data.message);         }       }     });   }      function reset() {     $("#m_id").val("");     $("#m_username").val("");     $("#m_email").val("");     $("#m_truename").val("");   }

后端

@RequestMapping("/user")
@Controller
public class UserController {
  @Autowired
  private UserService userService;

  @RequestMapping
  public String user(){
    return "user";
  }

  @GetMapping("/{id}")
  @ResponseBody
  public Result get(@PathVariable Integer id){
    User user = userService.getById(id);

    return ResultUtil.ok(user);
  }

  /**
   * 分页查询
   * @param username
   * @param pageNo
   * @param pageSize
   * @return
   */
  @PostMapping("/list")
  @ResponseBody
  public Result> list(@RequestParam(value = "username", required = false) String username,
               @RequestParam(defaultValue = "1") Integer pageNo,
               @RequestParam(defaultValue = "10") Integer pageSize){
    // 构造查询条件
    QueryWrapper queryWrapper = new QueryWrapper<>();
    if(!StringUtils.isEmpty(username)){
      queryWrapper.like("username",username);
      queryWrapper.orderByDesc("create_time");
    }
    Page page = new Page<>(pageNo,pageSize);

    IPage result = userService.page(page, queryWrapper);
    // 设置总记录数
    result.setTotal(userService.count(queryWrapper));

    return ResultUtil.ok(result);
  }

  @PostMapping("/add")
  @ResponseBody
  public Result add(@RequestBody User user){
    userService.save(user);

    return ResultUtil.ok("添加成功!");
  }

  @PostMapping("/modify")
  @ResponseBody
  public Result modify(@RequestBody User user){
    userService.saveOrUpdate(user);

    return ResultUtil.ok("修改成功!");
  }

  @PostMapping("/remove")
  @ResponseBody
  public Result remove(@RequestParam Integer id){
    userService.removeById(id);

    return ResultUtil.ok("删除成功!");
  }
}

相关内容

热门资讯

空调连续工作多久需要停机休息 空调连续工作的时间取决于多个因素,包括空调的型号、功率、使用环境和维护情况等。一般来说,空调可以连续...
空调哪个符号是除湿的 空调除湿功能通常用一个水滴形状的符号表示。不同品牌和型号的空调遥控器可能会有所差异,但一般来说,除湿...
格力空调多长时间加一次氟利昂 1、一般情况下,空调对氟利昂的使用量是非常小的,所以在空调使用了四年左右的时候再考虑加也没问题。2、...
空调用多长时间需要加氟一次 一般情况下是五年。当出现以下这几种情况时,空调才需要加氟。1、空调的室内机和室外机各有两个接口,当接...
格调生活·C标思享荟:卡萨帝在... 9月12日的郑州龙湖金融岛,夜风轻拂,灯光璀璨。“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑...
品牌价值破千亿、高端份额持续领... 9月12日,“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑州站”在郑州龙湖金融岛举办。2026...
空调主板坏了修800还是换新的 空调主板坏了是修还是换新,需要考虑多个因素,以下是一些建议:1. 维修成本:如果维修费用较低,比如 ...
空调开多久需要休息多长时间 问题:空调开多久需要休息多长时间回答:1、在使用空调的过程中,一般空调开7~8个小时左右需要休息2~...
中央空调多长时间清洗一次 1、一般空调开机前清洗一次即可,空调开机中间时段再清洗一次,空调关机时清洗一次,这样比较合理。2、空...
中央空调氟利昂多久加一次 看空调制热和制冷程度,很多人的观点认为氟利昂必须一年放一次,其实这个观点是错误的,理解上面有点偏差,...