用SpringBoot构建在线教育平台（5）：课程分类功能详解
左侧我们需要做一个菜单，还是用elementUI，container容器有一个aside可以用，稍微改一下代码：
<el-container> <el-aside width="200px">Aside</el-aside> <el-main>Main</el-main> </el-container>
效果：
左侧边界，放置一个菜单，作为一类课程。
改造一下aside：
<el-aside width="200px"> <el-menu default-active="2" class="el-menu-vertical-demo" > <el-submenu index="1"> <template slot="title"> <span>Java基础</span> </template> </el-submenu> <el-submenu index="1"> <template slot="title"> <span>Java中级</span> </template> </el-submenu> <el-submenu index="1"> <template slot="title"> <span>Spring框架</span> </template> </el-submenu> </el-menu>
不要那个箭头，因为二级菜单我打算显示在右边，于是手动加一段css：
.el-submenu i { display:none; }
好了，接下来就该去设计Type表了。
##2. 三级分类
我们的课程是三级（不是三级片的那个三级），分别为一级课程，二级课程，三级课程。
二话不说，咱直接建表。
package com.edu.entity; import javax.persistence.Entity; import javax.persistence.GeneratedValue; import javax.persistence.Id; import org.hibernate.annotations.GenericGenerator; @Entity public class Type { @Id @GenericGenerator(name="idGenerator", strategy="uuid") //这个是hibernate的注解/生成32位UUID @GeneratedValue(generator="idGenerator") private String id; private Integer level; //课程等级 private String pid; //父节点 private String typeName;//课程名称 public String getId() { return id; } // 省略 getters 和 setters
然后，需要在原来的TypeController里面完善add方法，先去弄一个Dao。
代码：
package com.edu.dao; import org.springframework.data.jpa.repository.JpaRepository; import com.edu.entity.Type; public interface TypeDao extends JpaRepository<Type, String> { }
注入Controller
@Autowired TypeDao typeDao;
野路子了，不用service，直接用dao了，大家不要学我啊。
重写后的add方法：
@RequestMapping("/add") @ResponseBody public Map<String,Object> add(Type type){ Map<String,Object> result = new HashMap<>(); result.put("code",0); System.out.println("本次新增的类型是" + type); typeDao.save(type); return result; }
然后做测试类：
package com.edu.test; import org.junit.Test; import org.springframework.beans.factory.annotation.Autowired; import com.edu.controller.TypeController; import com.edu.entity.Type; public class TypeTest extends BaseTest{ @Autowired TypeController typeController; @Test public void addType(){ Type type = new Type(); type.setLevel(1); //一级课程 type.setPid("0"); type.setTypeName("Java基础课程"); typeController.add(type); } }
没想到吧，Controller也可以注入，哈哈，我也是突发奇想，毕竟以前咱都没这么干过不是。
测试通过，数据进去了。
ID生成策略改成了UUID。
接下来，我们要在前端搞事情了。
3. 用layui做个弹窗
直接在页面上加一个新增按钮，其实也就是一个菜单。
<el-submenu index="999"> <template slot="title"> <span>新增</span> </template> </el-submenu>
index设置为999，为什么呢?
因为我仍性啊！没想到吧~~
。。。。。。
开玩笑，是因为这个新增，我们打算当做按钮的，是一个业务上的东西，所以就取一个大点的值，999挺好的，当然998也不错。
接下来，我们需要给menu添加一个open事件：
@open="addMenu"
然后在vue里面编写对应的函数：
methods:{ addMenu: function(index){ alert(index); } }
index就是submenu的index，比如，刚才的999，哈哈哈哈哈。
如果点的菜单是999，我们就去做增加操作，嗯，就酱。
点击新增，我们应该弹出一个窗口，让我们输入菜单的名字，这个窗口，私以为用layui更好一些。。。
导入资源:
<link rel="stylesheet" href="${basePath}/layui/css/layui.css" media="all">
<script src="${basePath}/layui/layui.all.js" charset="utf-8"></script>
接下来，我们需要专门做一个div，作为这个新增页面，里面放一个form。
<div id="typebox" style="display:none;margin:20px;"> <el-form :model="typeForm" status-icon :rules="rules" ref="typeForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="类型名称" prop="typeName"> <el-input type="text" v-model="typeForm.typeName" autocomplete="off"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('typeForm')">提交</el-button> <el-button @click="resetForm('typeForm')">重置</el-button> </el-form-item> </el-form> </div>
代码有点多，为了防止截屏遗漏，干脆全部贴上来：