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 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' hidden='hidden' th:value='${#request.getContextPath()}'> <div class='search'> <div class='input-group col-md-8'> <button type='button' id='add'>添加 </button> <input type='text' placeholder='請輸入賬號，按回車鍵'> <span class='input-group-btn'><button type='button' id='search'>查詢</button></span> </div> </div> <div class='row'> <div class='col-md-12'> <div class='portlet'><div class='category-list'> <table 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 style='position: fixed; bottom: 20%;'> <!-- 分頁控件，標簽必須是<ul> --> <ul class='pagination-centered'></ul> </div> </div></div><!--編輯框--><div tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'> <div class='modal-dialog'> <div class='modal-content'> <div class='modal-header'><h5 id='exampleModalLabel'>修改用戶</h5><button type='button' data-dismiss='modal' aria-label='Close'> <span aria-hidden='true'>×</span></button> </div> <div class='modal-body'><input type='text' hidden='hidden'><div class='form-group'> <label for='m_username'>用戶名：</label> <input type='text' placeholder=''></div><div class='form-group'> <label for='m_email'>郵箱：</label> <input type='text' placeholder=''></div><div class='form-group'> <label for='m_truename'>姓名：</label> <input type='text' placeholder=''></div> </div> <div class='modal-footer'><button type='button' data-dismiss='modal'>關閉</button><button type='button' 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='http://www.aoyou183.cn/bcjs/@{/js/bootstrap-paginator.js}'></script><script src='http://www.aoyou183.cn/js/util.js' th:src='http://www.aoyou183.cn/bcjs/@{/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(’ + r.id + ’)' rel='external nofollow' style='color: #CA0C16;'>刪除’ +’</a> <a href='javascript:edit(’ + r.id + ’)' 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')@Controllerpublic 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增刪改查內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！
相關文章：
網公網安備