基于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区域。当然，也可以不隐藏，默认显示所有的二级分类。

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

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