这一节来做二级分类，为了快速开发，一级分类只做新增，暂时不考虑修改和删除，如果一定要删，就去数据库删吧。
我们接下来，需要通过一级分类，获取所有的二级分类。
开始之前，需要给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区域。当然，也可以不隐藏，默认显示所有的二级分类。
当我们点击左侧的一级分类，就需要调用后台的一个方法，把二级分类加载出来，显示在右侧。
我们已经实现了一级分类的新增，那么，下一节就直接开始二级分类的加载吧。
