基于SpringBoot打造在线教育系统（6）-- 二级分类模块UI篇
基于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-main style="overflow: hidden;">
<div style="height:100%;border:1px solid #ccc;">
<el-row :gutter="20" class="heading">
<el-col :span="4" style="line-height:42px;">
<div class="grid-content bg-purple">
<i class="el-icon-s-grid"></i>Java基础
</div>
</el-col>
<el-col :span="20">
<div class="grid-content bg-purple">
</div>
</el-col>
</el-row>
</div>使用el-row来做栅格布局。
接下来就是下面的部分，我们用面板。
elementUI提供了对应的组件，我们改造一下。
<el-row :gutter="20" style="margin:30px 16px;">
<el-col :span="6">
<el-card class="box-card" shadow="hover" style="height:150px;" body-style="">
<div slot="header" class="clearfix card-header">
<span><i class="el-icon-document"></i></span>
<div class="cardname" type="text">[HelloWorld]</div>
</div>
<div class="text item">
开始我们的第一个Java程序吧~先下载JDK，然后安装。
</div>
</el-card>
</el-col>
</el-row>开整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里面。
<span class="ordernum">1</span>效果：
我们还可以做一些有趣的操作，比如，逼死强迫症系列，哈哈。
<el-row :gutter="20" style="margin:30px 16px;">
<el-col :span="6">
<el-badge :value="12" class="item">
<el-card class="box-card" shadow="hover" style="height:150px;" body-style="">
<div slot="header" class="clearfix card-header">
<span><i class="el-icon-document"></i></span>
<div class="cardname" type="text">[HelloWorld]</div>
</div>
<div class="text item">
开始我们的第一个Java程序吧~先下载JDK，然后安装。
</div>
<span class="ordernum">1</span>
</el-card>
</el-badge>
</el-col>
</el-row>
稍微美化一下那个序号。
.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区域。当然，也可以不隐藏，默认显示所有的二级分类。
当我们点击左侧的一级分类，就需要调用后台的一个方法，把二级分类加载出来，显示在右侧。
我们已经实现了一级分类的新增，那么，下一节就直接开始二级分类的加载吧。