文章目录
- 4 课程分类树
-
- 4.1 需求展示
- 4.2 后端开发
-
- 4.2.1 添加工具类
- 4.2.2 添加依赖
- 4.2.3 创建实体类
- 4.2.4 创建Mapper
- 4.2.5 创建Service
- 4.2.6 创建Controller
- 4.2.7创建启动类
- 4.2.8创建yml文件
- 4.2.9测试
- 4.3 前端开发
-
- 4.3.1 树形控件测试
- 4.3.2 替换测试数据
- 4.4 利用ThreadLocal实现共享用户信息
-
- 4.4.1创建工具类
- 4.4.2 改造用户登录
- 4.5 添加SpringMVC拦截器
-
- 4.5.1 创建拦截器
- 4.5.2 注册拦截器
- 4.5.3 使用拦截器
- 4.5.4 测试
- 5课程信息管理
-
- 5.1 效果图
-
- 5.1.1 前台
- 5.1.2 项目结构
- 5.2 前台开发
-
- 5.2.1 修改navment.vue-添加新菜单
- 5.2.2 修改router/index.js-配置新菜单
- 5.2.3 创建api/Course.js
- 5.2.4 pages下创建新组件course.vue
- 5.2.5 测试
- 5.3 后台开发
-
- 5.3.1 创建实体类
- 5.3.2 创建CourseMapper
- 5.3.3 创建CourseService
- 5.3.4 CourseController
- 5.3.5 创建启动类
- 5.3.6 修改pom,添加依赖
- 5.3.7 创建配置文件
- 5.4 准备下拉框数据
-
- 5.4.1 一级分类
-
- 5.4.1.1 创建Options
- 5.4.1.2 修改CategoryService
- 5.4.1.3 修改CategoryController
- 5.4.1.4 测试
- 5.4.1.5 创建basic.js
- 5.4.1.6修改course.vue
- 5.4.1.7测试
- 5.4.1.8 Bytheway 修改basic.js,修改welcom.vue,测试
- 5.4.2 二级分类
-
- 5.4.2.1 后台开发
- 5.4.2.1 前台开发
- 5.4.2.3 测试
- 5.4.3 课程等级 & 教学模式
-
- 5.4.3.1 创建实体类Dictionary
- 5.4.3.2 创建CategoryMapper
- 5.4.3.3 创建DictionaryService
- 5.4.3.4 创建DictionaryController
- 5.4.3.5 后台测试
- 5.4.3.6 前台开发
- 5.4.3.7 前后端测试
4 课程分类树
4.1 需求展示
4.2 后端开发
4.2.1 添加工具类
4.2.2 添加依赖
4.2.3 创建实体类
package com.zx.category.entity;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import java.io.Serializable;
//课程分类实体
@TableName("tb_category")
@NoArgsConstructor
@AllArgsConstructor
@Data
@ToString
@Accessors(chain = true)
public class Category implements Serializable {
private String id;//编号
private String name;//名称
private String label;//展示名称
private String parentid;//父id
private Integer is_show;//是否展现,1是0不是
private Integer orderby;//排序规则
private Integer is_leaf;//是否叶子,1是0不是
}
4.2.4 创建Mapper
package com.zx.category.mapper;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.zx.category.entity.Category;
import org.apache.ibatis.annotations.Mapper;
@Mapper
public interface CategoryMapper extends BaseMapper<Category> {
}
4.2.5 创建Service
package com.zx.category.service;
import com.baomidou.mybatisplus.core.conditions.Wrapper;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.common.tree.Node;
import com.zx.category.entity.Category;
import com.zx.category.mapper.CategoryMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.ArrayList;
import java.util.List;
@Service
public class CategoryService extends ServiceImpl<CategoryMapper, Category> {
@Autowired
private CategoryMapper categoryMapper;
//查询课程分类三级菜单
public List<Node> getTree() {
//存放所有维护好的数据
List<Node> tree = new ArrayList<>();
//查询1级菜单->SELECT * from tb_category where parentid=0 and is_show=1
QueryWrapper qw1 = new QueryWrapper();//封装查询条件
qw1.eq("parentid", 0);//父节点id为0
qw1.eq("is_show", 1);//需要展示
List<Category> level1 = categoryMapper.selectList(qw1);//查到所有1级菜单
for (Category c : level1) {
Node node1 = new Node();//1级节点
node1.setValue(c.getId());
node1.setLabel(c.getLabel());
// node1.setChildren();//1级菜单的子菜单是2级菜单,现在需要查询所有2级菜单
//查询2级菜单,并添加为1级菜单的children->SELECT * from tb_category where parentid='1' and is_show=1 order by orderby
QueryWrapper<Category> qw2 = new QueryWrapper<>();
qw2.eq("parentid", "1");
qw2.eq("is_show", 1);
qw2.orderByAsc("orderby");//排序
List<Category> level2 = categoryMapper.selectList(qw2);//查到所有2级
//存2级节点
List<Node> children1 = new ArrayList<>();
for (Category c2 : level2) {
Node node2 = new Node();//2级节点
node2.setValue(c2.getId());
node2.setLabel(c2.getLabel());
// node2.setChildren();//2级菜单的子菜单,继续查3级...
//查询3级菜单,并添加为2级菜单的children->SELECT * from tb_category where parentid='1-1' and is_show=1 order by orderby
QueryWrapper<Category> qw3 = new QueryWrapper<>();
qw3.eq("parentid", c2.getId());
qw3.eq("is_show", 1);
qw3.orderByAsc("orderby");//排序
List<Category> level3 = categoryMapper.selectList(qw3);//查到所有3级
//存3级节点
List<Node> children2 = new ArrayList<>();
for (Category c3 : level3) {
Node node3 = new Node();//2级节点
node3.setValue(c3.getId());
node3.setLabel(c3.getLabel());
// node3.setChildren();//3级菜单是叶子节点,他没有子节点
children2.add(node3);//TODO 1.把查出来的3级节点,添加为2级节点的children
}
children1.add(node2); //TODO 2.把查出来的2级节点,添加为1级节点的children
node2.setChildren(children2);//TODO 3.把children2添加给node2
}
node1.setChildren(children1);//TODO 4.把children1添加给node1
tree.add(node1);//准备返回数据
}
return tree;
}
}
4.2.6 创建Controller
package com.zx.category.controller;
import com.common.tree.Node;
import com.zx.category.entity.Category;
import com.zx.category.service.CategoryService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
@RestController
@CrossOrigin
@RequestMapping("/basic/category")
public class CategoryController {
@Autowired
private CategoryService categoryService;
@RequestMapping("/getTree")
//查询课程分类三级菜单
public List<Node> getTree() {
return categoryService.getTree();
}
}
4.2.7创建启动类
package com.zx.category;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class BasicRunApp {
public static void main(String[] args) {
SpringApplication.run(BasicRunApp.class);
}
}
4.2.8创建yml文件
server:
port: 9999
spring:
application:
name: zx-basic-service
datasource:
type: com.zaxxer.hikari.HikariDataSource
driver-class-name: com.mysql.jdbc.Driver
url: jdbc:mysql://localhost:3306/zx-basic?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai
username: root
password: root
hikari:
minimum-idle: 5
maximum-pool-size: 15
auto-commit: true
idle-timeout: 30000
pool-name: DatebookHikariCP
max-lifetime: 1800000
connection-timeout: 30000
connection-test-query: SELECT 1
mybatis-plus:
configuration:
log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
mapper-locations: classpath:/mapper/*.xml
type-aliases-package: com.zx.category.entity
4.2.9测试
4.3 前端开发
4.3.1 树形控件测试
拿来主义,找到elementui官网的实例代码,一整个直接拷贝到welcome.vue里,启动服务测试效果
<template>
<h2>欢迎您来到我们的MOOC世界，开始您的技术学习之旅</h2>
<a href="https://blog.csdn.net/u012932876/article/details/118487949" target="_blank"
class="button">java学习路径 官网</a>
<!-- 树形控件 -->
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
<div style="padding-top: 20px;"><img src='/images/info.png'/></div>
</template>
<script >
export default {
data() {
return {
data: [{
label: '一级 1',
children: [{
label: '二级 1-1',
children: [{
label: '三级 1-1-1'
}]
}]
}, {
label: '一级 2',
children: [{
label: '二级 2-1',
children: [{
label: '三级 2-1-1'
}]
}, {
label: '二级 2-2',
children: [{
label: '三级 2-2-1'
}]
}]
}, {
label: '一级 3',
children: [{
label: '二级 3-1',
children: [{
label: '三级 3-1-1'
}]
}, {
label: '二级 3-2',
children: [{
label: '三级 3-2-1'
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
};
},
methods: {
handleNodeClick(data) {
console.log(data);
}
}
};
</script>
<style scoped>
a.button {
background-color: #4CAF50;
padding: 6px 16px 7px 16px;
font-size: 14px;
color: white;
text-align: center;
border: none;
cursor: pointer;
border-radius: 4px;
margin-right: 20px;
text-decoration:none;
}
a.button:hover {
background-color: #3e8e41;
}
</style>
4.3.2 替换测试数据
把后端返回的JSON串,直接替换掉data
<template>
<h2>欢迎您来到我们的MOOC世界，开始您的技术学习之旅</h2>
<a href="https://blog.csdn.net/u012932876/article/details/118487949" target="_blank"
class="button">java学习路径 官网</a>
<!-- 树形控件 -->
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
<div style="padding-top: 20px;"><img src='/images/info.png'/></div>
</template>
<script >
export default {
data() {
return {
data:[
{
"value": "1",
"label": "根结点",
"children": [
{
"value": "1-1",
"label": "前端开发",
"children": [
{
"value": "1-1-2",
"label": "JavaScript",
"children": null
},
{
"value": "1-1-3",
"label": "jQuery",
"children": null
},
{
"value": "1-1-4",
"label": "ExtJS",
"children": null
},
{
"value": "1-1-5",
"label": "AngularJS",
"children": null
},
{
"value": "1-1-6",
"label": "ReactJS",
"children": null
},
{
"value": "1-1-7",
"label": "Bootstrap",
"children": null
},
{
"value": "1-1-8",
"label": "Node.js",
"children": null
},
{
"value": "1-1-9",
"label": "Vue",
"children": null
},
{
"value": "1-1-10",
"label": "其它",
"children": null
}
]
},
{
"value": "1-2",
"label": "移动开发",
"children": [
{
"value": "1-2-1",
"label": "微信开发",
"children": null
},
{
"value": "1-2-2",
"label": "iOS",
"children": null
},
{
"value": "1-2-3",
"label": "手游开发",
"children": null
},
{
"value": "1-2-4",
"label": "Swift",
"children": null
},
{
"value": "1-2-5",
"label": "Android",
"children": null
},
{
"value": "1-2-6",
"label": "ReactNative",
"children": null
},
{
"value": "1-2-7",
"label": "Cordova",
"children": null
},
{
"value": "1-2-8",
"label": "其它",
"children": null
}
]
},
{
"value": "1-3",
"label": "编程开发",
"children": [
{
"value": "1-3-1",
"label": "C/C++",
"children": null
},
{
"value": "1-3-2",
"label": "Java",
"children": null
},
{
"value": "1-3-3",
"label": ".NET",
"children": null
},
{
"value": "1-3-4",
"label": "Objective-C",
"children": null
},
{
"value": "1-3-5",
"label": "Go语言",
"children": null
},
{
"value": "1-3-6",
"label": "Python",
"children": null
},
{
"value": "1-3-7",
"label": "Ruby/Rails",
"children": null
},
{
"value": "1-3-8",
"label": "其它",
"children": null
}
]
},
{
"value": "1-4",
"label": "数据库",
"children": [
{
"value": "1-4-1",
"label": "Oracle",
"children": null
},
{
"value": "1-4-2",
"label": "MySQL",
"children": null
},
{
"value": "1-4-3",
"label": "SQL Server",
"children": null
},
{
"value": "1-4-4",
"label": "DB2",
"children": null
},
{
"value": "1-4-5",
"label": "NoSQL",
"children": null
},
{
"value": "1-4-6",
"label": "Mongo DB",
"children": null
},
{
"value": "1-4-7",
"label": "Hbase",
"children": null
},
{
"value": "1-4-8",
"label": "数据仓库",
"children": null
},
{
"value": "1-4-9",
"label": "其它",
"children": null
}
]
},
{
"value": "1-5",
"label": "人工智能",
"children": [
{
"value": "1-5-1",
"label": "机器学习",
"children": null
},
{
"value": "1-5-2",
"label": "深度学习",
"children": null
},
{
"value": "1-5-3",
"label": "语音识别",
"children": null
},
{
"value": "1-5-4",
"label": "计算机视觉",
"children": null
},
{
"value": "1-5-5",
"label": "NLP",
"children": null
},
{
"value": "1-5-6",
"label": "强化学习",
"children": null
},
{
"value": "1-5-7",
"label": "其它",
"children": null
}
]
},
{
"value": "1-6",
"label": "云计算/大数据",
"children": [
{
"value": "1-6-1",
"label": "Spark",
"children": null
},
{
"value": "1-6-2",
"label": "Hadoop",
"children": null
},
{
"value": "1-6-3",
"label": "OpenStack",
"children": null
},
{
"value": "1-6-4",
"label": "Docker/K8S",
"children": null
},
{
"value": "1-6-5",
"label": "云计算基础架构",
"children": null
},
{
"value": "1-6-6",
"label": "虚拟化技术",
"children": null
},
{
"value": "1-6-7",
"label": "云平台",
"children": null
},
{
"value": "1-6-8",
"label": "ELK",
"children": null
},
{
"value": "1-6-9",
"label": "其它",
"children": null
}
]
},
{
"value": "1-7",
"label": "UI设计",
"children": [
{
"value": "1-7-1",
"label": "Photoshop",
"children": null
},
{
"value": "1-7-2",
"label": "3Dmax",
"children": null
},
{
"value": "1-7-3",
"label": "Illustrator",
"children": null
},
{
"value": "1-7-4",
"label": "Flash",
"children": null
},
{
"value": "1-7-5",
"label": "Maya",
"children": null
},
{
"value": "1-7-6",
"label": "AUTOCAD",
"children": null
},
{
"value": "1-7-7",
"label": "UG",
"children": null
},
{
"value": "1-7-8",
"label": "SolidWorks",
"children": null
},
{
"value": "1-7-9",
"label": "CorelDraw",
"children": null
},
{
"value": "1-7-10",
"label": "InDesign",
"children": null
},
{
"value": "1-7-11",
"label": "Pro/Engineer",
"children": null
},
{
"value": "1-7-12",
"label": "Cinema 4D",
"children": null
},
{
"value": "1-7-13",
"label": "3D Studio",
"children": null
},
{
"value": "1-7-14",
"label": "After Effects（AE）",
"children": null
},
{
"value": "1-7-15",
"label": "原画设计",
"children": null
},
{
"value": "1-7-16",
"label": "动画制作",
"children": null
},
{
"value": "1-7-17",
"label": "Dreamweaver",
"children": null
},
{
"value": "1-7-18",
"label": "Axure",
"children": null
},
{
"value": "1-7-19",
"label": "其它",
"children": null
}
]
},
{
"value": "1-8",
"label": "游戏开发",
"children": [
{
"value": "1-8-1",
"label": "Cocos",
"children": null
},
{
"value": "1-8-2",
"label": "Unity3D",
"children": null
},
{
"value": "1-8-3",
"label": "Flash",
"children": null
},
{
"value": "1-8-4",
"label": "SpriteKit 2D",
"children": null
},
{
"value": "1-8-5",
"label": "Unreal",
"children": null
},
{
"value": "1-8-6",
"label": "其它",
"children": null
}
]
},
{
"value": "1-9",
"label": "智能硬件/物联网",
"children": [
{
"value": "1-9-1",
"label": "无线通信",
"children": null
},
{
"value": "1-9-2",
"label": "电子工程",
"children": null
},
{
"value": "1-9-3",
"label": "Arduino",
"children": null
},
{
"value": "1-9-4",
"label": "体感技术",
"children": null
},
{
"value": "1-9-5",
"label": "智能硬件",
"children": null
},
{
"value": "1-9-6",
"label": "驱动/内核开发",
"children": null
},
{
"value": "1-9-7",
"label": "单片机/工控",
"children": null
},
{
"value": "1-9-8",
"label": "WinCE",
"children": null
},
{
"value": "1-9-9",
"label": "嵌入式",
"children": null
},
{
"value": "1-9-10",
"label": "物联网技术",
"children": null
},
{
"value": "1-9-11",
"label": "其它",
"children": null
}
]
},
{
"value": "1-10",
"label": "研发管理",
"children": [
{
"value": "1-10-1",
"label": "敏捷开发",
"children": null
},
{
"value": "1-10-2",
"label": "软件设计",
"children": null
},
{
"value": "1-10-3",
"label": "软件测试",
"children": null
},
{
"value": "1-10-4",
"label": "研发管理",
"children": null
},
{
"value": "1-10-5",
"label": "其它",
"children": null
}
]
},
{
"value": "1-11",
"label": "系统运维",
"children": [
{
"value": "1-11-1",
"label": "Linux",
"children": null
},
{
"value": "1-11-2",
"label": "Windows",
"children": null
},
{
"value": "1-11-3",
"label": "UNIX",
"children": null
},
{
"value": "1-11-4",
"label": "Mac OS",
"children": null
},
{
"value"
