（三）分类相关功能设计（下）

分类管理页面创建

• 在AdminController中定义分类管理的路由
• 拷贝素材中的banner.html为category.html

• 替换公共部分代码

  • 标题改为 分类管理
  • 导航条的分类管理变为选中

完成分类管理的数据展示

用到的工具

• 我们的管理页主要是基于BootStrapTable展示数据来完成数据的增删查改操作

  • BootStrapTable地址：https://bootstrap-table.com/

• 而我们页面是用Bootstrap这个ui组件库堆起来的，所以为了风格统一，我们依旧用它去堆页面

  • BootStrap地址：https://v3.bootcss.com/

• 我们项目的消息提示用的是Layer

  • Layer地址:https://layui.gitee.io/v2/layer/

• 字体图标用的Fontawesome

  • Fontamesome地址: https://www.thinkcmf.com/font/font_awesome/icons.html

• jquery表单相关操作

  (function ($) {
      $.fn.extend({
          initForm: function (options) {
              //默认参数
              var defaults = {
                  jsonValue: options,
                  isDebug: false   //是否需要调试，这个用于开发阶段，发布阶段请将设置为false，默认为false,true将会把name value打印出来
              }
              //设置参数
              var setting = defaults;
              var form = this;
              jsonValue = setting.jsonValue;
              //如果传入的json字符串，将转为json对象
              if ($.type(setting.jsonValue) === "string") {
                  jsonValue = $.parseJSON(jsonValue);
              }
              //如果传入的json对象为空，则不做任何操作
              if (!$.isEmptyObject(jsonValue)) {
                  var debugInfo = "";
                  $.each(jsonValue, function (key, value) {
                      //是否开启调试，开启将会把name value打印出来
                      if (setting.isDebug) {
                          alert("name:" + key + "; value:" + value);
                          debugInfo += "name:" + key + "; value:" + value + " || ";
                      }
                      var formField = form.find("[name='" + key + "']");
                      if ($.type(formField[0]) === "undefined") {
                          if (setting.isDebug) {
                              alert("can not find name:[" + key + "] in form!!!");    //没找到指定name的表单
                          }
                      } else {
                          var fieldTagName = formField[0].tagName.toLowerCase();
                          if (fieldTagName == "input") {
                              if (formField.attr("type") == "radio") {
                                  $("input:radio[name='" + key + "'][value='" + value + "']").attr("checked", "checked");
                              } else {
                                  formField.val(value);
                              }
                          } else if (fieldTagName == "select") {
                              //do something special
                              formField.val(value);
                          } else if (fieldTagName == "textarea") {
                              //do something special
                              formField.val(value);
                          } else {
                              formField.val(value);
                          }
  
                      }
                  })
                  if (setting.isDebug) {
                      alert(debugInfo);
                  }
              }
              return form;    //返回对象，提供链式操作
          },
          serializeJson: function () {
              const serializeObj = {};
              const array = this.serializeArray();
              $(array).each(function () {
                  if (serializeObj[this.name]) {
                      if ($.isArray(serializeObj[this.name])) {
                          serializeObj[this.name].push(this.value);
                      } else {
                          serializeObj[this.name] = [serializeObj[this.name], this.value];
                      }
                  } else {
                      serializeObj[this.name] = this.value;
                  }
              });
              return serializeObj;
          }
      });
  })(jQuery)

BSTable数据展示

$('#data-table').bootstrapTable({
  url: '/admin/category/',
  responseHandler: function (res) {
    return res.data
  },
  columns: [
    {
      title: '序号',
      width: 50,
      align: 'center',
      formatter: function (value, row, index) {
        return index + 1
      }
    },
    {
      title: '标题',
      field: 'name'
    },
    {
      title: '描述',
      field: 'summary'
    },
    {
      field: 'id',
      title: '操作',
      width: 200,
      formatter: function (value) {
        return `<button type="button" data-id="${value}" class="btn btn-info btn-sm lw-update-btn"><i class="fa fa-edit"></i> 编辑</button> <button type="button" data-id="${value}" class="btn btn-danger btn-sm"><i class="fa fa-trash"></i> 删除</button>`
      }
    },
  ]
})

增删改操作

编辑窗口及新增按钮

<!--新增按钮-->
<div class="btn-group" role="group" style="margin-bottom: 20px;" aria-label="...">
  <button type="button" class="btn btn-default"><i class="fa fa-plus"></i> 新增</button>
</div>
<!-- 编辑窗口 -->
<div class="modal fade" id="save-window" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form id="data-form">
                <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" id="window-title">Modal title</h4>
                </div>
                <div class="modal-body">

                    <div class="form-group">
                        <label>标题</label>
                        <input type="text" name="name" class="form-control" placeholder="请输入标题...">
                    </div>
                    <div class="form-group">
                        <label>描述信息</label>
                        <textarea class="form-control" name="summary" placeholder="请输入描述信息..."></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary">保存</button>
                </div>
            </form>
        </div>
    </div>
</div>

编辑操作处理

• 单击编辑按钮处理获取目标资源id
• 查询资源详情
• 用资源信息初始化表单
• 弹出编辑窗口
• 确认后提交表单
• 隐藏编辑窗口
• 刷新数据表格

$("#data-table").on('click', '.lw-update-btn', function () {
  //   获取目标资源id
  let id = $(this).data('id')
  $.ajax({
    url: '/admin/category/' + id,
    method: 'get',
    dataType: 'json',
    success: res => {
      if (res.code === 200) {
        $("#window-title").text('编辑分类')
        $("#data-form").initForm(res.data)
        $('#save-window').modal('show')
      } else {
        layer.msg(res.message, {icon: 2})
      }
    }
  })
})

新增操作处理

• 用空对象初始化表单
• 弹出编辑窗口
• 确认后提交表单
• 隐藏编辑窗口
• 刷新数据表格

$("#lw-add-btn").on('click', function () {
  $("#window-title").text('新增分类')
  $("#data-form").initForm({id: "", name: "", summary: ""})
  $('#save-window').modal('show')
})

表单提交

$("#data-form").on('submit', function () {
  let data = $(this).serialize();
  $.ajax({
    url: '/admin/category/',
    method: 'post',
    data: data,
    dataType: 'json',
    success: res => {
      if (res.code === 200) {
        layer.msg("保存成功", {icon: 1, time: 500}, function () {
          $('#save-window').modal('hide')
          $('#data-table').bootstrapTable('refresh', {silent: true})
        })
      } else {
        layer.msg(res.message, {icon: 2})
      }
    }
  })
  return false;
})

删除操作处理

• 单击删除按钮获取目标资源id
• 弹窗询问是否删除
• 发送请求删除数据
• 刷新数据表格

let id = $(this).data('id')
let idx = layer.confirm('是否要删除该数据？', {
  btn: ['确认', '取消'] //按钮
}, function () {
  $.ajax({
    url: '/admin/category/' + id,
    method: 'delete',
    dataType: 'json',
    success: res => {
      if (res.code === 200) {
        layer.msg("删除成功", {icon: 1})
        $('#data-table').bootstrapTable('refresh', {silent: true})
      } else {
        layer.msg(res.message, {icon: 2})
      }
    }
  })
  layer.close(idx);
})