基于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区域。固然，也能够不隐藏，默认显示全部的二级分类。

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

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