二级分类已经成功地从后台获取了，那么接下来就做新增功能，直接在这里加一个按钮。
点击新增按钮，就直接打开一个窗口，输入课程分类的名称，排序号等信息。当然，新增的前提是，你已经点击了某一个一级分类，这样才能够知道这个二级分类应该是归属于哪一个一级分类下面的。
当我们点击这个新增按钮，就打开一个页面，填完资料后点击提交，就保存成功了。
总体的思路和新增一级分类是一样的，下面贴上核心代码。 index.jsp
新增按钮
代码语言：javascript复制<div class="grid-content bg-purple">
<el-button @click="open2levelWin" style="float:right;" type="success">新增</el-button>
</div>新增页面
代码语言：javascript复制<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>新增的方法：
代码语言：javascript复制 //新增二级分类的方法
open2levelWin: function(){
var that = this;
that.layerId = layer.open({
type : 1,
area : [ '500px', '300px' ],
content : $('#typebox2')
});
console.log(that.childTypes);
},提交的方法
代码语言：javascript复制//提交二级分类
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); //重新加载当前分类
});
}
});
}哦对了，因为这次我们添加了排序号，所以后台的加载方法也得改一下。
代码语言：javascript复制List<Type> childTypes = typeDao.findAll(Example.of(probe),new Sort(Sort.Direction.ASC, "orderNum"));这样就实现了排序的功能，最终的效果：
那个未读消息暂时先放着，以后再说吧。现在有个地方要补充一下，就是类型里面，我们还没有描述字段-description，现在得加上。 用JPA的好处就是，表结构万一发生了变更，我们只需要修改Java类就行了，其他什么都不用动，爽死了。
private String description; //描述emmm，页面上要做一个添加。
渲染的地方要改过来
页面改成这样：
代码语言：javascript复制<el-form-item label="类型描述" prop="description">
<el-input type="text" v-model="typeForm2.description" autocomplete="off"></el-input>
</el-form-item>最终效果：
新增做好了，然后就是要修改和删除。不着急，这个咱们下回再做分解吧。
