二级分类已经成功地从后台获取了，那么接下来就做新增功能，直接在这里加一个按钮。
点击新增按钮，就直接打开一个窗口，输入课程分类的名称，排序号等信息。当然，新增的前提是，你已经点击了某一个一级分类，这样才能够知道这个二级分类应该是归属于哪一个一级分类下面的。
当我们点击这个新增按钮，就打开一个页面，填完资料后点击提交，就保存成功了。
总体的思路和新增一级分类是一样的，下面贴上核心代码。
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>
最终效果：
新增做好了，然后就是要修改和删除。不着急，这个咱们下回再做分解吧。
#本章总结
