1. 官网地址：https://v3.bootcss.com/css

  2. 在html页面中引入布局文件

    1
    2
    3
    4
    5
    6
    <!-- 引入bootstrap css文件   -->
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
    <!--  引入jquery文件  -->
    <script type="text/javascript" src="static/jquery/jquery-2.1.3.min.js"></script>
    <!--  使用bootstrap的js之前先引入jquery的js文件  -->
    <script type="text/javascript" src="/static/js/bootstrap.min.js"></script>

  3. 按钮使用

    1
    2
    <button type="button" class="btn btn-primary" id="add-btn"><span class="glyphicon glyphicon-plus"> </span>添加

  4. table

    1
    2
    3
    <table class="table table-striped">
      ...
    </table>

  5. 模态框

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <!--删除模态框-->
    <div class="modal fade" tabindex="-1" role="dialog" id="del-dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">删除</h4>
                </div>
                <div class="modal-body">
                    <!--也可以是添加修改表单-->
                    <p>您确认要删除吗?删除后的数据将不可恢复！&hellip;</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="confirm-btn">确认</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

  6. 委托事件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    $(function () {
           $('tbody').empty();
           //获取列表
           getList();
           //将事件委托给tbody 交给.del处理 因为tbody是一直存在的
           $('tbody').on('click', '.del', function () {
               //获取eid
               var eid = $(this).data('eid');
               //开启模态框
               $('#del-dialog').modal('show');
               //取消时解除绑定事件
               $('#confirm-btn').off('click');
       
               //是否确认删除
               /*   var b = confirm("确定要删除吗?");
                  if (!b) {
                      return;
                  }*/
       
               $('#confirm-btn').click(function () {
                   //隐藏模态框
                   $('#del-dialog').modal('hide');
                   //发送请求
                   $.get('/emp/del', {'eid': eid}, function (res) {
                       if (res.success) {//删除成功
                           getList();
                           alert("删除成功")
                       } else {//删除失败
                           alert("删除失败！" + res.msg);
                       }
                   }, 'json')
               })
           });
    }

  7. 按钮绑定

    1
    2
    3
    4
    5
    6
    <button type='button' class='btn btn-warning update' data-emp='" + JSON.stringify(emp) + "'>" +//绑定对象
                            "<span class='glyphicon glyphicon-pencil'></span> 修改" +
                            "</button>&emsp;" +
                            "<button type='button' class='btn btn-danger del' data-eid='" + emp.eid + "'>" +
                            "<span class='glyphicon glyphicon-trash'></span> 删除" +
                            "</button>

  8. @RequestBody用法,接收json字符串数据 前端指定 contentType:'application/json;charset=utf-8',

    1
    2
    3
    4
    5
    6
    7
    @RequestMapping(value = "/add", method = RequestMethod.POST)
        @ResponseBody
        //@RequestBody用于接收json字符串数据 前端指定 contentType:'application/json;charset=utf-8',
        public Result add(@RequestBody EmpDTO empDTO) {
            System.out.println(empDTO);
            return empService.saveEmp(empDTO);
        }