說明

最近有朋友問我有沒有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="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">&times;</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(' + r.id + ')" style="color: #CA0C16;">洗掉' +
                                '</a>&nbsp;&nbsp;<a href="javascript:edit(' + r.id + ')">編輯</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("洗掉成功！");
    }
}

羅漢爺

CSDN認證博客專家 java 資料庫管理員全堆疊工程師

生活不會像你想象的那么好，也不會像你想象的那么糟，人的脆弱和堅強往往超乎了自己的想象，有時候會因為一句話就淚如雨下，而有時候發現自己艱難的走了很遠，
QQ: 2480035622
Email: [email protected]
網站：http://www.luohanye.com/

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/237666.html

標籤：其他

上一篇：使用原生JS實作輪播圖（導航點聯動）

下一篇：書本翻頁效果 html+css

Springboot+Bootstrap實作增刪改查實戰

說明

實作效果

代碼地址

軟體架構

核心功能代碼

前端

后端