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

剽悍一小兔

发布于 2021-01-21 10:44:34

3540

发布于 2021-01-21 10:44:34

文章被收录于专栏：web编程技术分享web编程技术分享

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

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

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

总体的思路和新增一级分类是一样的，下面贴上核心代码。 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>

最终效果：