後臺使用spring boot和spring cloud等。前端使用bootstrap框架進行基本操作，項目采用前後端分離。

1、查詢

<!-- HTML中代碼  此中是簡寫-->

<script src="....js"></script>

<div class="table-responsive">
    <table id="ttCompanyDemoDataTable" class="table">
    </table>
</div>

//對應以上HTML的js中的代碼
 $(‘#ttCompanyDemoDataTable
 
‘).bootstrapTable({
        silent: true,
        sidePagination: "server",
        queryParamsType: ‘‘, //默認值為 ‘limit‘ ,在默認情況下 傳給服務端的參數為：offset,limit,sort -----> 設置為 ‘‘  在這種情況下傳給服務器的參數為：pageSize,pageNumber
        search: true, //搜索框
        formatSearch: function () {
            return ‘道路名稱,區域名稱‘
 
;
        },
        striped: true, //是否顯示行間隔色
        showRefresh: true, //刷新按鈕
        minimumCountColumns: 2, //最少允許的列數
        clickToSelect: true, //點擊選中
        singleSelect: true,
        pagination: true, //分頁
        pageNumber: 1, //初始化加載第一頁，默認第一頁
        pageSize: 20, //每頁的記錄行數（*）
        pageList: [20, 50
 
, 100, 200],  //可供選擇的每頁的行數（*）
        paginationLoop: false, //循環翻頁
        sortable: false, //是否啟用排序
        escape: true, //html字符轉義
        toolbar: ‘#toolbar‘,
        columns: [
            {field: ‘state‘, checkbox: true},
            {field: ‘userName‘, title: ‘用戶名‘, sortable: false, align: ‘left‘},
            {field: ‘userPassword‘, title: ‘密碼‘, sortable: false, align: ‘left‘},
            {field: ‘userRealname‘, title: ‘真實姓名‘, sortable: false, align: ‘left‘},
            {
                field: ‘dataEnable‘, title: ‘數據狀態‘, sortable: false, align: ‘left‘,
                formatter: function (value) {
                    if (value) {
                        if (value == 1) {
                            return ‘有效‘;
                        } else if (value == -1) {
                            return ‘無效‘;
                        } else {
                            return ‘未知‘;
                        }
                    }
                }
            }

        ],
        ajax: function (params) {
            //定義條件
            var pageSize=params.data.pageSize;
            var pageNumber=params.data.pageNumber;
            var dataEnable=$(‘#dataEnableSelect‘).val();
            var searchText=params.data.searchText;
            //發起請求
            $.ajax({
                url: EW_API_BASE_PATH + ‘/udp/api/service/ttCompanyDemo/list‘, <!--後端控制臺路徑 -->
                type: ‘POST‘,
                async: true,
                //contentType: "application/json;charset=utf-8",
                dataType: "json",
                //data: JSON.stringify(params.data),
                data: {dataEnable:dataEnable,searchText:searchText,pageSize:pageSize,pageNumber:pageNumber},
                headers: {
                    ‘companyUserToken‘: getToken(),
                    ‘rmsServiceCode‘: ‘WHJT_SERVICE_TtCompanyDemo_list‘  <!-- 接口路徑 -->
                },
                success: function (data) {
                    params.success(data.result);
                }
            });
        }
    });

2、新增

  <a id="addTtCompanyDemoBtn" class="waves-effect waves-button" href="javascript:;">
            <i class="zmdi zmdi-plus"></i>
            新增
      </a>
//新增按鈕
    $(‘#addTtCompanyDemoBtn‘).click(function () {
        //彈框
        $.confirm({
            title: ‘新增‘,
            content: ‘url:/whjt-ui/module/whjt/xtgl/ttCompanyDemo/add.html‘,
            closeIcon: true,
            boxWidth: ‘300px‘,
            useBootstrap: false,
            buttons: {
                save: {
                    text: ‘保存‘,
                    btnClass: ‘waves-effect waves-button‘,
                    action: function () {
                        //拼裝對象
                        var dataForm=$(‘#dataForm‘).serialize();
                        var userName=$(‘#userName‘).val();
                        var userPassword=$(‘#userPassword‘).val();
                        var userRealname=$(‘#userRealname‘).val();
                        //定義返回值
                        var rv = false;
                        //數據校驗
                        if(userName==‘‘||userName==null) {
                            $(‘#userName‘).focus();
                            showToastr({
                                "positionClass": "toast-top-center",
                            }, "warning", "提醒", "請輸入用戶名");
                            return rv;
                        }
                        if(userPassword==‘‘||userPassword==null) {
                            $(‘#userPassword‘).focus();
                            showToastr({
                                "positionClass": "toast-top-center",
                            }, "warning", "提醒", "請輸入密碼");
                            return rv;
                        }
                         if(userRealname==‘‘||userRealname==null){
                             $(‘#userRealname‘).focus();
                             showToastr({
                                 "positionClass": "toast-top-center",
                             },"warning","提醒","請輸入真實姓名");
                             return rv;

                        } else{
                        //發起請求
                        $.ajax({
                            url: EW_API_BASE_PATH + ‘/udp/api/service/ttCompanyDemo/save‘,
                            type: ‘POST‘,
                            async: false,
                            //contentType: "application/json;charset=utf-8",
                           // dataType: "json",  //Ajax無返回值時，設置dataType會報錯
                            headers: {
                                ‘companyUserToken‘: getToken(),
                                ‘rmsServiceCode‘: ‘WHJT_SERVICE_TtCompanyDemo_save‘
                            },
                            data: dataForm,
                            success: function () {
                                rv = true;
                                $(‘#ttCompanyDemoDataTable‘).bootstrapTable(‘refresh‘);
                            }
                        });
                        //返回
                        return rv;
                       }

                    }
                }
            }
        });
    });
add.html代碼部分

<div id="addTtCompanyDemoDiv">
    <form id="dataForm">
        <div class="form-group">
            <label class="form-label" for="userName">用戶名:</label>
            <input id="userName" name="userName" type="text" class="form-control" placeholder="請填寫用戶名"/>
        </div>
        <div class="form-group">
            <label class="form-label" for="userPassword">密碼:</label>
            <input id="userPassword" name="userPassword" type="text" class="form-control" placeholder="請填寫密碼"/>
        </div>
        <div class="form-group">
            <label class="form-label" for="userRealname">真實姓名:</label>
            <input id="userRealname" name="userRealname" type="text" class="form-control" placeholder="請填寫真實姓名"/>
        </div>

        <input type="hidden" id="dataEnable" name="dataEnable" value="1">
    </form>
</div>

bootstrap之增刪改查