基于SpringBoot打造在线教育系统（6）–二级分类模块UI篇

这一节来做二级分类，为了快速开发，一级分类只做新增，暂时不考虑修改和删除，如果一定要删，就去数据库删吧。

我们接下来，需要通过一级分类，获取所有的二级分类。

开始之前，需要给Type加一个orderNum字段，我们需要用它来做排序。别忘了生成setter和getter。

ok，现在来重新设计一下main区域吧。

main区域应该是这样的，由上面一个面包屑导航，下面是一块一块的二级分类组成。

css:

.el-main { background-color: #fff; color: #333; } .heading { height: 42px; margin: 0 !important; border-bottom: 1px solid #ddd; background-color: #f5f5f5; border-color: #ddd; font-size: 15px; }

改造后的el-main:

使用el-row来做栅格布局。

接下来就是下面的部分，我们用面板。

elementUI提供了对应的组件，我们改造一下。

开整css：

/** 卡片相关 * */ .box-card { cursor:pointer; } .el-card__header { padding: 8px 6px; color: #333; background:#f5f5f5; } .el-card__header i { font-size:18px; font-weight:bold; } .cardname { float: right; padding: 3px 0; font-weight: bold; color:#333; }

效果：

我们用了栅格布局，一行摆四个，它会根据屏幕宽度自适应的，和bootstrap是一样的路子，很简单。

要不再给它加一个页签，也就是排序号。
本来想用el-tag标签的，但是看起来花里胡哨的，反而不够清爽，我就改成span了。

.ordernum { position: absolute; right: 10px; bottom:8px; color:#666; font-size:14px; }

这个span直接放到el-card里面。

1

效果：

我们还可以做一些有趣的操作，比如，逼死强迫症系列，哈哈。

稍微美化一下那个序号。

.ordernum { position: absolute; right: 10px; bottom:8px; font-size:14px; color: #b58989; background-color: #f1f1f1; border-radius: 10px; padding: 2px 6px; }

我不是专业美工，我尽力了。。。

让我们捋一捋业务哈。比如HelloWorld下面有三个分类，分别是安装JDK，配置环境变量，编写HellWorld程序。那么右上角那个就是3。

这就代表当前用户还有三个分类没有阅读，这个数字是需要算出来的，如果用户完成了阅读，那么我就隐藏这个标记。

哈哈，我可真是个小机灵鬼！

不过呢，现在是后台管理系统，这个业务可以暂时先不做。

我们还可以先隐藏Main区域，当我们点击左侧某一个菜单的时候，才显示Main区域。当然，也可以不隐藏，默认显示所有的二级分类。

当我们点击左侧的一级分类，就需要调用后台的一个方法，把二级分类加载出来，显示在右侧。

我们已经实现了一级分类的新增，那么，下一节就直接开始二级分类的加载吧。