文章	分类	评论
125	10	8391

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

分类管理页面创建

在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);
})