Mr丶冷文

文章 分类 评论
125 10 7934

站点介绍

冷文学习者(KEVINLU98.COM),记录一个北漂小码农的日常业余生活
友链申请地址(直接评论即可): 传送门

(三)分类相关功能设计(下)

MR丶冷文 2022-10-07 1127 20条评论 个人博客项目视频教程 javaspringboot个人博客

首页 / 正文
Freewind主题v1.5版本已发布,下载请移步Freewind 1.5,同时还有主题伴生插件Freewind Markdown,下载请移步 Freewind Markdown,有问题请在留言板,交换友链请直接在友链留言,我创建了一个主题交流群,有兴趣可以加下: 点此加入
报毒我说明一下,是因为我把主题的版权信息做了加密,其中用了eval,杀毒软件认为eval函数是一个危险的操作,这点介意的话请勿下载,我也没有强迫任何人去下载,也没有向大家收取一分钱的主题费用,所以也犯不着因为这些事情来喷我,喜欢就用,不喜欢就不用,就这么简单

发布于2022-10-28

(三)分类相关功能设计(下)

分类管理页面创建

  • AdminController中定义分类管理的路由
  • 拷贝素材中的banner.htmlcategory.html
  • 替换公共部分代码

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

完成分类管理的数据展示

用到的工具

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

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

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

  • 字体图标用的Fontawesome

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

对不起,作者设置了附件 回复可见

评论(20)

  1. 海哭的声音 游客 2024-03-04 15:56 回复

    学习

  2. 森达 游客 2024-03-04 01:31 回复

    学习

  3. john 游客 2024-02-01 17:11 回复

    学习

  4. 1111 游客 2024-01-25 17:31 回复

    学习

  5. 游客1111 游客 2023-11-05 14:45 回复

    学习

  6. 1 游客 2023-10-11 13:42 回复

    学习

  7. 芜湖 游客 2023-07-27 14:24 回复

    谢谢谢谢

  8. 什么鬼 游客 2023-05-02 19:37 回复

    谢谢谢谢

  9. a 游客 2023-04-09 13:35 回复

    学习

  10. 代码初级 游客 2023-02-21 16:57 回复

    点赞

热门文章

最新评论

  • 辛阳

    下载试试看,谢谢

  • 叶秋

    主题真的太棒了

  • klees

    学习一下

  • 老法师

     这个主题真的太棒了

  • 普保雄

    谢谢了

日历

2024年03月

     12
3456789
10111213141516
17181920212223
24252627282930
31      

文章目录

站点公告
Freewind主题v1.5版本已发布,下载请移步Freewind 1.5,同时还有主题伴生插件Freewind Markdown,下载请移步 Freewind Markdown,有问题请在留言板,交换友链请直接在友链留言,我创建了一个主题交流群,有兴趣可以加下: 点此加入
报毒我说明一下,是因为我把主题的版权信息做了加密,其中用了eval,杀毒软件认为eval函数是一个危险的操作,这点介意的话请勿下载,我也没有强迫任何人去下载,也没有向大家收取一分钱的主题费用,所以也犯不着因为这些事情来喷我,喜欢就用,不喜欢就不用,就这么简单
点击小铃铛关闭