說明

AdminLTE是網路上比較流行的一款Bootstrap模板，包含豐富的樣式、組件和插件，非常適用于后端開發人員做后臺管理系統，
因為最近又做了個后臺管理系統，這次就選的是AdminLTE做主題模板發現效果不錯，這里我把最核心的SpringBoot如何集成AdminLTE實作增刪改查的原始碼提供出來，需要的朋友可以參考而少走彎路，

專案原始碼

需要原始碼的朋友給我來個一鍵三連，留個郵箱后發送！

實作效果

技術選型

• 前端：Thymeleaf+Bootstrap+AdminLTE+插件
• 后端：Spring Boot2.0 + Mybatis-Plus
• 資料庫：MySQL5.7

核心代碼

只講重點，詳細看原始碼，

頁面

dataTables的實戰用法如下：

myTable = $('#dataTable').DataTable(
            {
                language: lang,  //提示資訊
                "iDisplayLength": 10,//默認每頁數量
                //"bPaginate": true, //翻頁功能
                "bLengthChange": false, //改變每頁顯示資料數量
                "bFilter" : false, //過濾功能
                "ordering": false,
                "bSort": false, //排序功能
                //"bInfo" : true,//頁腳資訊
                //"bAutoWidth" : true,//自動寬度
                "stateSave": true,
                "retrieve": true,
                "processing": true,
                "serverSide": true,
                //"bPaginate" : true,
                "bProcessing": true,//服務器端進行分頁處理的意思
                ajax: function (data, callback, settings) {//ajax配置為function,手動呼叫異步查詢
                    // 構造請求引數
                    var param = {};
                    param.draw = data.draw;
                    param.pageSize = data.length;//頁面顯示記錄條數，在頁面顯示每頁顯示多少項的時候
                    param.start = data.start;//開始的記錄序號
                    param.pageNo = (data.start / data.length) + 1;//當前頁碼
                    //param.order = data.order[0];
                    param.username = $("#s_username").val();
                    $.ajax({
                        type: "POST",
                        url: ctx + "/user/list",
                        cache: false, //禁用快取
                        data: param, //傳入已封裝的引數
                        dataType: "json",
                        success: function (res) {
                            // console.log(res)
                            //setTimeout僅為測驗遮罩效果
                            setTimeout(
                                function () {
                                    //封裝回傳資料，這里僅演示了修改屬性名
                                    var returnData = {};
                                    returnData.draw = res.data.draw;//這里直接自行回傳了draw計數器,應該由后臺回傳
                                    returnData.recordsTotal = res.data.total;
                                    returnData.recordsFiltered = res.data.total;//后臺不實作過濾功能，每次查詢均視作全部結果
                                    returnData.data = res.data.records;
                                    //關閉遮罩
                                    //$wrapper.spinModal(false);
                                    //呼叫DataTables提供的callback方法，代表資料已封裝完成并傳回DataTables進行渲染
                                    //此時的資料需確保正確無誤，例外判斷應在執行此回呼前自行處理完畢
                                    callback(returnData);
                                },
                                200);
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            alert("查詢失敗");
                        }
                    });
                },
                "aoColumns": [
                    {
                        sTitle: '序號',
                        data: null,
                        className: 'text-center whiteSpace',
                        render:function(data,type,row,meta) {
                            return meta.row + 1 +
                                meta.settings._iDisplayStart;
                        }
                    },
                    {"data": "username"},
                    {"data": "email"},
                    {"data": "truename"},
                    {"data": "createTime",
                        render: function (data, type, row, meta) {
                            if (data){   // data不為空進行轉換
                                return (new Date(data)).Format("yyyy-MM-dd hh:mm:ss");
                            } else {
                                return data = ''; //data為空時不轉換
                            }
                        }
                    }
                ],

                "columnDefs": [{
                    // 定義操作列,######以下是重點########
                    "targets": 5,//操作按鈕目標列
                    "data": null,
                    "render": function (data, type, row) {
                        var id = '"' + row.id
                            + '"';
                        //<a href='javascript:void(0);'  class='delete btn btn-default btn-xs'  ><i class='fa fa-times'></i> 查看</a>
                        var html = "<button class='btn btn-sm btn-warning' οnclick='edit("
                            + id
                            + ")'><i class='icon-pencil'></i> 編輯</button>"
                        html += "<button class='btn btn-sm btn-danger' οnclick='remove("
                            + id
                            + ")'><i class='icon-remove'></i> 洗掉</button>"
                        return html;
                    }
                }],
                "fnDrawCallback": function(){
                    var api = this.api();
                    //var startIndex= api.context[0]._iDisplayStart;//獲取到本頁開始的條數
                    api.column(0).nodes().each(function(cell, i) {
                        //此處 startIndex + i + 1;會出現翻頁序號不連續，主要是因為startIndex 的原因,去掉即可，
                        //cell.innerHTML = startIndex + i + 1;
                        cell.innerHTML =  i + 1;
                    });
                }
    });

控制器

@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("洗掉成功！");
    }
}

需要原始碼的朋友給我來個一鍵三連，留個郵箱后發送！