Guns二次开发（七）：商品分类管理之【查】字诀（1）

 

关于博客中使用的Guns版本问题请先阅读   Guns二次开发目录                

 

       前面几篇博客都是对Guns的既有代码进行修改，下面我将以 商品分类管理 模块为例，来展示如何在Guns的基础上开发我们自己的业务。在上一篇博客中，我们使用Guns自带的【代码生成】功能生成了商品分类模块的前端和后端基础代码，这一篇博客开始，我们来实现商品分类模块的查询功能。由于查询功能的篇幅太大，于是我又将这第（七）篇博客拆分成（1）（2）（3）三篇博客分别发表，请按顺序阅读。下面开始进入主题。

 

首先是修改分类管理列表的表头信息：

 

如果你看过我的前面几篇博客，或者你会guns已经有一些了解，那么就一样了解guns源码的目录都是结构分层很规范的，我们直接去源码目录中查找菜单栏对应的页面即可，没有必要在IDEA中全局搜索页面关键字了。

 

 

 

 

下面这段代码是我们修改成功后的部分代码：  static/modular/elephish/category/category.js 

/**
 * 初始化表格的列
 */
Category.initColumn = function () {
    return [
        {field: 'selectItem', radio: true},  
            {title: '分类名称', field: 'name', visible: true, align: 'center', valign: 'middle'},         
            {title: '分类编号', field: 'id', visible: true, align: 'center', valign: 'middle'},
            {title: '分类父编号', field: 'parentId', visible: true, align: 'center', valign: 'middle'},
            {title: '层级', field: 'depth', align: 'center', valign: 'middle', sortable: true},
            {title: '排序', field: 'sortNum', visible: true, align: 'center', valign: 'middle'},
            {title: '状态', field: 'status', visible: true, align: 'center', valign: 'middle'},
            {title: '创建时间', field: 'creatTime', visible: true, align: 'center', valign: 'middle'},
            {title: '更新时间', field: 'updateTime', visible: true, align: 'center', valign: 'middle'}
    ];
};

 

补充说明：上面这段代码中的每个字段的排列的先后顺序是有讲究的，他将影响你的分类菜单的树形结构是否能成功显示。比如此处我排在第一列的字段是分类名称，字段为name，那么如果我要设置在这一类展示下拉框列表时，就得给下图红框中的值设置为1，如下图：

 

 

然后我们往数据库手动添加几条数据，请在你的数据库执行以下sql：

ps:原本的演示数据只有三条，后来为了实现分页效果，又增加到十几条，所以如果后面的部分截图只看到三条数据时，请不要焦虑。

INSERT INTO `mall_category` VALUES ('1', '0', '[0],', '运动户外', '1', '1', '0', '1', '1587467916800', null);
INSERT INTO `mall_category` VALUES ('2', '1', '[0],[1],', '户外鞋服', '1', '2', '1', '7', '1587467916861', '1587725572501');
INSERT INTO `mall_category` VALUES ('3', '1', '[0],[1],', '户外装备', '2', '2', '2', '1', '1587467820221', '1587463110132');
INSERT INTO `mall_category` VALUES ('4', '2', '[0],[1],[2],', '运动鞋', '1', '3', '3', '9', '1587467820221', '1589258284693');
INSERT INTO `mall_category` VALUES ('6', '2', '[0],[1],[2],', '篮球鞋', '2', '3', '4', '7', '1587467820221', '1587729869257');
INSERT INTO `mall_category` VALUES ('7', '3', '[0],[1],[3],', '登山包', '2', '3', '5', '1', '1587467820221', '1587463110146');
INSERT INTO `mall_category` VALUES ('8', '0', '[0],', '生活百货', '1', '1', '6', '2', '1587467820221', '1588761482789');
INSERT INTO `mall_category` VALUES ('9', '0', '[0],', '精工家电', '1', '1', '7', '1', '1587467820221', null);
INSERT INTO `mall_category` VALUES ('10', '8', '[0],[8],', '居家日用', '1', '2', '8', '3', '1587467820221', '1588761482789');
INSERT INTO `mall_category` VALUES ('11', '10', '[0],[8],[10],', '口罩', '1', '3', '8', '3', '1587467820221', '1588761482793');
INSERT INTO `mall_category` VALUES ('12', '9', '[0],[9],', '厨房电器', '1', '2', '8', '1', '1587467820221', null);
INSERT INTO `mall_category` VALUES ('13', '9', '[0],[9],', '居家电器', '1', '2', '8', '1', '1587467820221', null);
INSERT INTO `mall_category` VALUES ('15', '0', '[0],', '格调育儿', '1', '1', '8', '1', '1587467820221', null);
INSERT INTO `mall_category` VALUES ('16', '0', '[0],', '轻奢时尚', '1', '1', '8', '1', '1587467820221', null);
INSERT INTO `mall_category` VALUES ('17', '0', '[0],', '服饰鞋包', '1', '1', '8', '1', '1587467820221', null);
INSERT INTO `mall_category` VALUES ('18', '0', '[0],', '舒适家纺', '1', '1', '8', '1', '1587467820221', null);
INSERT INTO `mall_category` VALUES ('19', '0', '[0],', '图书读物', '1', '1', '8', '1', '1587467820221', null);
INSERT INTO `mall_category` VALUES ('56', '2', '[0],[1],[2],', '解放鞋', '1', '3', '3', '3', '1587798573183', '1587971831565');
INSERT INTO `mall_category` VALUES ('58', '2', '[0],[1],[2],', '布鞋', '1', '3', '0', '9', '1587799107021', '1587807287802');
INSERT INTO `mall_category` VALUES ('59', '2', '[0],[1],[2],', '波鞋', '1', '3', '1', '3', '1587873134296', '1589188379488');
INSERT INTO `mall_category` VALUES ('62', '12', '[0],[9],[12],', '电磁炉', '1', '3', '12', '2', '1588762921163', '1588762943125');

 

重新运行项目，查看效果，同时也发现许多需要改进的地方：

 

下面我们来逐一解决这五个问题：

1、实现商品分类列表的树形菜单显示

 

好吧，毕竟代码不是我们写的，我们也没有足够多的时间去一行行阅读源码，此时怎么去找菜单管理的那段js呢？

 

 

代码生成器生成的代码肯定都有固定的格式和规范，我们在menu.js文件中找到了上面这个方法，为何不尝试去category.js中查找对应的方法呢，于是我尝试去category.js文件中搜索字符串“/list”，如下图：

 

 

下面这段代码category.js文件中替换后的函数：

$(function () {

    var defaultColunms = Category.initColumn();
    var table = new BSTreeTable(Category.id, "/category/list", defaultColunms);
    table.setExpandColumn(2);
    table.setIdField("id");//分类编号
    table.setCodeField("id");//分类父编号，用于设置父子关系
    table.setParentCodeField("parentId");//分类父编号，用于设置父子关系
    table.setExpandAll(true);
    table.init();
    Category.table = table;
});

 

替换好后，刷新页面重试效果，为了避免浏览器缓存影响开发，我们需要在将idea设置成自动部署，步骤是：

1.ctrl+ shif + a --> 查找Registry --> 找到并勾选compiler.automake.allow.when.app.running

 

 

 

2. file- setting - build - compiler - bulid project automatically  勾选上即可。

 

注意：虽然如此设置了，但是发现有时候，在js文件修改完之后，缓存问题依旧存在（其实，我感觉这前面的几步操作好像可有可无，下面的操作才起关键作用）。

 

所以，还需要执行下面的操作：

没错，就是在每一个需要引入js的页面，在引入js文件的末尾追加一个时间戳参数，这样就能保证每次请求，获取到的都是最新的js文件，js的缓存问题也就解决了。但是生产环境下，建议还是将这个参数删除，以此来提高加载效率和减轻服务器压力。

 

刷新浏览器页面，查看效果：

 

 

 

发现问题：

 

 

2、解决Guns v5.1-final 自定义的树形菜单，点击关闭一级菜单，只关闭二级菜单，而三级菜单不关闭的问题。

（1）首先我们要确定，Guns 中自带的菜单管理中的属性结构是能够正常使用的。

 

 

 

 

（2）对比 menu.js 和 category.js 文件中，设置菜单子父类关系的设置

 

 

       从文件中可以猜测（只能是猜测啊，毕竟不是我们自己写的代码，而且对bootstrap也不是很熟），红框中的三行代码，就是这只属性菜单设置的关键。对比两端代码，都看不出太大的问题，唯一的办法就是追根溯源，找寻更底层的代码。

 

 

       走到了这一步，就得靠你自己的实际经验、专业和直觉了，你需要在这个文件中，找寻到最接近你答案的突破点切入，继续更深入的分析与查找。这是不可逃避的硬性条件，好在所有的代码与程序设计都是遵循一定的语法规范和设计原则的，我虽然不是很懂js，但是我对js的语法却已经有入门的水平，再结合我数年的java开发经验与对java的理解，来解决js相关的问题。

       比较幸运的一点，是这个js文件的每个函数上都有注释（所以平时写代码，注释真的很重要，即便自己写的代码，时间久了也会忘，相信各位也深有体会），这样也极大的增加了我们的排查效率。我一路找，终于找到了最有可能的切入点。

 

 

 

 

 

 

本篇博客的前面几处截图中，我们都有看到 static/modular/system/menu/menu.js 这个文件，下面这段代码就是设置bootstrap 树形菜单的关键：

 

 

 

 

好了，问题总算找到了，原来是那段代码里的一个变量被写死了，此时我们应该将他修改过来，

 

 

修改完后，测试，发现不管原来的菜单管理，还是我们自己的分类管理，属性菜单栏的收缩和展开功能都没有问题了。

 

由于篇幅太大，余下内容在下一篇博客 Guns二次开发（七）：商品分类管理之【查】字诀（2） 展示，点击 查看

 

该系列更多文章请前往 Guns二次开发目录