基於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區域。固然，也能夠不隱藏，默認顯示全部的二級分類。

當咱們點擊左側的一級分類，就須要調用後臺的一個方法，把二級分類加載出來，顯示在右側。

咱們已經實現了一級分類的新增，那麼，下一節就直接開始二級分類的加載吧。