基于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.二级分类排序