Springboot+Bootstrap實現增刪改查實戰
說明
最近有朋友問我有沒有Springboot+Bootstrap實現增刪改查的DEMO,當時沒有,現在他來瞭!
實現效果
代碼地址
https://gitee.com/indexman/bootstrap_curd
水平一般能力有限,覺得有用的朋友給我來個一鍵三連或捐助:)
軟件架構
前端:bootstrap4.5+thymeleaf+分頁插件
後端:spring boot+mybatisPlus
數據庫:mysql
核心功能代碼
前端
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>用戶管理</title> <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet"> <style type="text/css"> .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; } </style> </head> <body> <div class="container"> <input type="text" id="ctx" hidden="hidden" th:value="${#request.getContextPath()}"> <div class="search"> <div class="input-group col-md-8"> <button class="btn btn-success" type="button" id="add"> 添加 </button> <input class="form-control" type="text" id="username" placeholder="請輸入賬號,按回車鍵"> <span class="input-group-btn"> <button class="btn btn-primary" type="button" id="search"> 查詢 </button> </span> </div> </div> <div class="row"> <div class="col-md-12"> <div class="portlet"> <div class="category-list"> <table class="table table-striped table-hover" id="dataTable"> <thead> <tr> <th>用戶名</th> <th>郵箱</th> <th>姓名</th> <th>創建時間</th> <th>操作</th> </tr> </thead> <tbody> </tbody> </table> </div> </div> </div> </div> <div class="row"> <div class="col-md-8" align="center" style="position: fixed; bottom: 20%;"> <!-- 分頁控件,標簽必須是<ul> --> <ul id="pageButton" class="pagination-centered"></ul> </div> </div> </div> <!--編輯框--> <div class="modal fade" id="modify" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">修改用戶</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <input type="text" id="m_id" hidden="hidden"> <div class="form-group"> <label class="control-label" for="m_username">用戶名:</label> <input type="text" class="form-control" id="m_username" placeholder=""> </div> <div class="form-group"> <label class="control-label" for="m_email">郵箱:</label> <input type="text" class="form-control" id="m_email" placeholder=""> </div> <div class="form-group"> <label class="control-label" for="m_truename">姓名:</label> <input type="text" class="form-control" id="m_truename" placeholder=""> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> <button type="button" class="btn btn-primary" onclick="modify()">提交</button> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal --> </div> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script> <script th:src="@{/js/bootstrap-paginator.js}"></script> <script src="../js/util.js" th:src="@{/js/util.js}"></script> <script type="text/javascript"> 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 += '<tr>' + '<td>' + r.username + '</td>' + '<td>' + r.email + '</td><td>' + r.truename + '</td>' ; dataRow += '<td>' + new Date(r.createTime).Format("yyyy-MM-dd hh:mm:ss") + '</td><td><a href="javascript:remove('%20+%20r.id%20+%20')" rel="external nofollow" style="color: #CA0C16;">刪除' + '</a> <a href="javascript:edit('%20+%20r.id%20+%20')" rel="external nofollow" >編輯</a></td></tr>'; }); } // 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(""); } </script> </body> </html>
後端
@RequestMapping("/user") @Controller public class UserController { @Autowired private UserService userService; @RequestMapping public String user(){ return "user"; } @GetMapping("/{id}") @ResponseBody public Result<User> 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<IPage<User>> list(@RequestParam(value = "username", required = false) String username, @RequestParam(defaultValue = "1") Integer pageNo, @RequestParam(defaultValue = "10") Integer pageSize){ // 構造查詢條件 QueryWrapper<User> queryWrapper = new QueryWrapper<>(); if(!StringUtils.isEmpty(username)){ queryWrapper.like("username",username); queryWrapper.orderByDesc("create_time"); } Page<User> page = new Page<>(pageNo,pageSize); IPage<User> result = userService.page(page, queryWrapper); // 設置總記錄數 result.setTotal(userService.count(queryWrapper)); return ResultUtil.ok(result); } @PostMapping("/add") @ResponseBody public Result<String> add(@RequestBody User user){ userService.save(user); return ResultUtil.ok("添加成功!"); } @PostMapping("/modify") @ResponseBody public Result<String> modify(@RequestBody User user){ userService.saveOrUpdate(user); return ResultUtil.ok("修改成功!"); } @PostMapping("/remove") @ResponseBody public Result<String> remove(@RequestParam Integer id){ userService.removeById(id); return ResultUtil.ok("刪除成功!"); } }
到此這篇關於Springboot+Bootstrap實現增刪改查實戰的文章就介紹到這瞭,更多相關Springboot+Bootstrap增刪改查內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- springboot與vue實現簡單的CURD過程詳析
- Django實現jquery select2帶搜索的下拉框
- clipboard.js使用總結
- 詳解servlet調用的幾種簡單方式總結
- SpringBoot+VUE實現數據表格的實戰