Springboot+Bootstrap實(shí)現(xiàn)增刪改查實(shí)戰(zhàn)
最近有朋友問(wèn)我有沒(méi)有Springboot+Bootstrap實(shí)現(xiàn)增刪改查的DEMO，當(dāng)時(shí)沒(méi)有，現(xiàn)在他來(lái)了！
實(shí)現(xiàn)效果
https://gitee.com/indexman/bootstrap_curd
水平一般能力有限，覺(jué)得有用的朋友給我來(lái)個(gè)一鍵三連或捐助：）
軟件架構(gòu)
前端：bootstrap4.5+thymeleaf+分頁(yè)插件后端：spring boot+mybatisPlus數(shù)據(jù)庫(kù)：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='請(qǐng)輸入賬號(hào)，按回車鍵'> <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>創(chuàng)建時(shí)間</th> <th>操作</th> </tr> </thead> <tbody> </tbody> </table></div> </div> </div> </div> <div class='row'> <div style='position: fixed; bottom: 20%;'> <!-- 分頁(yè)控件，標(biāo)簽必須是<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'>關(guān)閉</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.gepszalag.com/bcjs/@{/js/bootstrap-paginator.js}'></script><script src='http://www.gepszalag.com/js/util.js' th:src='http://www.gepszalag.com/bcjs/@{/js/util.js}'></script><script type='text/javascript'> var ctx = $('#ctx').val(); $(function () { // 查詢第一頁(yè)數(shù)據(jù) getPage(1); // 新增 $('#add').click(function () { reset(); $(’#modify’).modal(’show’); }); // 搜索 $('#search').click(function () { getPage(1); }); // 回車觸發(fā)查詢 $('#username').keyup(function (event) { if (event.keyCode == 13) {$('#search').trigger('click'); } }); }); // 獲取指定頁(yè)碼的數(shù)據(jù) 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); // 分頁(yè)按鈕 var element = $(’#pageButton’); var options = { bootstrapMajorVersion: 4, currentPage: pageNo, // 當(dāng)前頁(yè)數(shù) numberOfPages: 5, // 顯示按鈕的數(shù)量 totalPages: response.data.pages, // 總頁(yè)數(shù) itemTexts: function (type, page, current) { switch (type) {case 'first': return '首頁(yè)';case 'prev': return '上一頁(yè)';case 'next': return '下一頁(yè)';case 'last': return '末頁(yè)';case 'page': return page; } }, // 點(diǎn)擊事件，用于通過(guò)Ajax來(lái)刷新整個(gè)list列表 onPageClicked: function (event, originalEvent, type, page) { getPage(page); } }; element.bootstrapPaginator(options);} } ) } //刪除 function remove(id) { if (confirm('確定刪除數(shù)據(jù)？')) { $.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) { //向模態(tài)框中傳值 $(’#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() { //獲取模態(tài)框數(shù)據(jù) 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); } /** * 分頁(yè)查詢 * @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){ // 構(gòu)造查詢條件 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); // 設(shè)置總記錄數(shù) 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('刪除成功！'); }}
到此這篇關(guān)于Springboot+Bootstrap實(shí)現(xiàn)增刪改查實(shí)戰(zhàn)的文章就介紹到這了,更多相關(guān)Springboot+Bootstrap增刪改查內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！
相關(guān)文章：
1. HTML <!DOCTYPE> 標(biāo)簽2. 使用EF Code First搭建簡(jiǎn)易ASP.NET MVC網(wǎng)站并允許數(shù)據(jù)庫(kù)遷移3. 低版本IE正常運(yùn)行HTML5+CSS3網(wǎng)站的3種解決方案4. HTML5 Canvas繪制圖形從入門到精通5. Django中如何使用Channels功能6. php對(duì)gb編碼動(dòng)態(tài)轉(zhuǎn)utf-8編碼的幾種方法評(píng)測(cè)7. Vue ElementUI實(shí)現(xiàn):限制輸入框只能輸入正整數(shù)的問(wèn)題8. 基于JavaScript實(shí)現(xiàn)大文件上傳后端代碼實(shí)例9. .NET Core中使用gRPC的方法10. 基于Python下載網(wǎng)絡(luò)圖片方法匯總代碼實(shí)例
網(wǎng)公網(wǎng)安備