基于SpringBoot打造在线教育系统（8）-- 二级分类新增

二级分类已经成功地从后台获取了，那么接下来就做新增功能，直接在这里加一个按钮。

点击新增按钮，就直接打开一个窗口，输入课程分类的名称，排序号等信息。当然，新增的前提是，你已经点击了某一个一级分类，这样才能够知道这个二级分类应该是归属于哪一个一级分类下面的。

当我们点击这个新增按钮，就打开一个页面，填完资料后点击提交，就保存成功了。

总体的思路和新增一级分类是一样的，下面贴上核心代码。
index.jsp

新增按钮

<div class="grid-content bg-purple">
 	<el-button @click="open2levelWin" style="float:right;" type="success">新增</el-button>
</div>

新增页面

<div id="typebox2" style="display:none;margin:20px;">
	<el-form :model="typeForm2" status-icon :rules="rules" ref="typeForm2" label-width="100px" class="demo-ruleForm">
	  
	  <el-form-item label="类型名称" prop="typeName">
	    <el-input type="text" v-model="typeForm2.typeName" autocomplete="off"></el-input>
	  </el-form-item>
	  
	  <el-form-item label="排序号" prop="orderNum">
	     <el-input-number v-model="typeForm2.orderNum"  :min="1" :max="100" ></el-input-number>
	  </el-form-item>
	  
	  <el-form-item>
	    <el-button type="primary" @click="submitForm2('typeForm2')">提交</el-button>
	    <el-button @click="resetForm('typeForm2')">重置</el-button>
	  </el-form-item>
	</el-form>
	
  </div>

新增的方法：

   	  //新增二级分类的方法
   	  open2levelWin: function(){
   		  var that = this;
   		  that.layerId = layer.open({
				type : 1,
				area : [ '500px', '300px' ],
				content : $('#typebox2')
			});
   		 console.log(that.childTypes);
   	  },

提交的方法

//提交二级分类
	   	   submitForm2: function(formName) {
	     	  var that = this;
	     	  //console.log(this.typeForm2);
	     	  //手动赋值PID
	     	  this.typeForm2.pid = this.indexLevel1;
	     	 this.typeForm2.level = 2;	  
	     	  this.$refs[formName].validate((valid) => {
   	          	if (valid) {
	   	          	$.post("${basePath}/type/add",this.typeForm2,function(data){
						  if(data.code < 0){
							layer.alert('天啦撸，竟然提交失败了：' + data.msg, {
								icon: 5,
								title: "提示"
								});
							return;
						  }
						  layer.close(that.layerId);
						layer.msg("新增类型成功了~");
						that.clickMenu(that.indexLevel1); //重新加载当前分类
					  });
   	          	}
	     	  });
	     	  
	       }

哦对了，因为这次我们添加了排序号，所以后台的加载方法也得改一下。

List<Type> childTypes = typeDao.findAll(Example.of(probe),new Sort(Sort.Direction.ASC, "orderNum"));

这样就实现了排序的功能，最终的效果：

那个未读消息暂时先放着，以后再说吧。现在有个地方要补充一下，就是类型里面，我们还没有描述字段-description，现在得加上。
用JPA的好处就是，表结构万一发生了变更，我们只需要修改Java类就行了，其他什么都不用动，爽死了。

private String description; //描述

emmm，页面上要做一个添加。

渲染的地方要改过来

页面改成这样：

<el-form-item label="类型描述" prop="description">
   <el-input type="text" v-model="typeForm2.description" autocomplete="off"></el-input>
 </el-form-item>

最终效果：

新增做好了，然后就是要修改和删除。不着急，这个咱们下回再做分解吧。

#本章总结

1. 完成了二级分类的新增

2.二级分类排序