在线教育项目【课程科目板块】前端vue和后端查询功能实现

逃离我推掉我的手 2023-10-01 23:53 5阅读 0赞

**目录**

1，分析

1.1：环境搭建

1.1.1：数据库

1.1.2：后端：环境

1.1.3：后端：基本模块

1.1.4：前端：课程板块

2，查询所有课程

2.1：后端实现

2.2：前端ajax发送

2.3：前端实现

--------------------

## 1，分析 ##

![4f23508ba5ef47938d6ab48509dc1f2b.png][]

### 1.1：环境搭建 ###

#### 1.1.1：数据库 ####

CREATE DATABASE zx_edu_course;
    USE zx_edu_course;
    
    CREATE TABLE `edu_subject`  (
      `id` VARCHAR(32) NOT NULL PRIMARY KEY COMMENT '课程科目ID',
      `title` VARCHAR(10) NOT NULL COMMENT '科目名称',
      `parent_id` VARCHAR(32) NOT NULL DEFAULT '0' COMMENT '父ID',
      `sort` INT(10)  NOT NULL DEFAULT 0 COMMENT '排序字段',
      `gmt_create` DATETIME NOT NULL COMMENT '创建时间',
      `gmt_modified` DATETIME NOT NULL COMMENT '更新时间'
    ) COMMENT = '课程科目';
    
    INSERT INTO `edu_subject` VALUES ('1', '云计算', '0', 0, '2020-06-26 09:41:21', '2020-02-20 23:25:58');
    INSERT INTO `edu_subject` VALUES ('2', '系统/运维', '0', 0, '2020-02-20 23:29:59', '2020-02-20 23:29:59');
    INSERT INTO `edu_subject` VALUES ('3', '数据库', '0', 0, '2020-02-20 23:30:13', '2020-02-20 23:30:13');
    INSERT INTO `edu_subject` VALUES ('4', '服务器', '0', 0, '2020-02-20 23:30:19', '2020-02-20 23:30:19');
    
    INSERT INTO `edu_subject` VALUES ('5', 'MySQL', '3', 1, '2020-02-20 23:30:13', '2020-02-20 23:30:13');
    INSERT INTO `edu_subject` VALUES ('6', 'Oracle', '3', 2, '2020-02-20 23:30:13', '2020-02-20 23:30:13');
    INSERT INTO `edu_subject` VALUES ('7', 'Tomcat', '4', 1, '2020-02-20 23:30:13', '2020-02-20 23:30:13');
    INSERT INTO `edu_subject` VALUES ('8', 'Nginx ', '4', 2, '2020-02-20 23:30:13', '2020-02-20 23:30:13');
    
    INSERT INTO `edu_subject` VALUES ('9', 'MySQL优化', '5', 1, '2020-02-20 23:30:13', '2020-02-20 23:30:13');

#### 1.1.2：后端：环境 ####

创建项目：zx\_service\_course

![6692484cca8a426f9c79d9f658e64daf.png][]

pom文件

<dependencies>
            
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-web</artifactId>
            </dependency>
            
            <dependency>
                <groupId>com.alibaba.nacos</groupId>
                <artifactId>nacos-client</artifactId>
            </dependency>
    
            
            <dependency>
                <groupId>com.alibaba.cloud</groupId>
                <artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId>
            </dependency>
    
            
            <dependency>
                <groupId>io.springfox</groupId>
                <artifactId>springfox-swagger2</artifactId>
            </dependency>
            <dependency>
                <groupId>io.springfox</groupId>
                <artifactId>springfox-swagger-ui</artifactId>
            </dependency>
    
            
            <dependency>
                <groupId>org.springframework.cloud</groupId>
                <artifactId>spring-cloud-starter-openfeign</artifactId>
            </dependency>
    
            
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-test</artifactId>
            </dependency>
    
            
            <dependency>
                <groupId>com.baomidou</groupId>
                <artifactId>mybatis-plus-boot-starter</artifactId>
                <version>${mybatis.plus.version}</version>
            </dependency>
            
            <dependency>
                <groupId>mysql</groupId>
                <artifactId>mysql-connector-java</artifactId>
            </dependency>
            
            <dependency>
                <groupId>com.czxy.zx</groupId>
                <artifactId>zx_common_fx</artifactId>
            </dependency>
            <dependency>
                <groupId>com.czxy.zx</groupId>
                <artifactId>zx_domain_fx</artifactId>
            </dependency>
    
            
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-data-redis</artifactId>
            </dependency>
            
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-mail</artifactId>
            </dependency>
            
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-amqp</artifactId>
            </dependency>
    
            
            <dependency>
                <groupId>com.alibaba</groupId>
                <artifactId>fastjson</artifactId>
            </dependency>
    
            
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-devtools</artifactId>
                <optional>true</optional>
            </dependency>
    
            <dependency>
                <groupId>com.alibaba</groupId>
                <artifactId>easyexcel</artifactId>
                <version>3.0.5</version>
            </dependency>
    
        </dependencies>

application.yml

>     # 服务端口号
>     server:
>       port: 9020
>     # 服务名
>     spring:
>       application:
>         name: course-service
>       datasource:
>         driverClassName: com.mysql.jdbc.Driver
>         url: jdbc:mysql://127.0.0.1:3306/zx_edu_course?useUnicode=true&characterEncoding=utf8
>         username: root
>         password: root
>         druid:    #druid 连接池配置
>           initial-size: 1       #初始化连接池大小
>           min-idle: 1           #最小连接数
>           max-active: 20        #最大连接数
>           test-on-borrow: true  #获取连接时候验证，会影响性能
>       cloud:
>         nacos:
>           discovery:
>             server-addr: 127.0.0.1:8848   #nacos服务地址
>       redis:
>         database: 0       #数据库索引，取值0-15，表示16个库可选择
>         host: 127.0.0.1   #服务器地址
>         port: 6379        #服务器连接端口号
>       mail:
>         host: smtp.126.com          #发送邮件服务器
>         username: itcast_lt@126.com #账号
>         password: 1qaz2wsx          #密码
>         default-encoding: UTF-8     #默认编码时
>       rabbitmq:
>         host: 127.0.0.1
>         port: 5672
>         username: guest
>         password: guest
>         virtualHost: /
>       devtools:
>         restart:
>           enabled: true  #设置开启热部署
>           additional-paths: src/main/java #重启目录
>           exclude: WEB-INF/**
>       freemarker:
>         cache: false    #页面不加载缓存，修改即时生效
>     
>     #开启log4j打印SQL语句
>     logging:
>       level:
>         com:
>           czxy:
>             mapper: debug
>     
>     # mp日志打印
>     mybatis-plus:
>       configuration:
>         log-impl: org.apache.ibatis.logging.stdout.StdOutImpl

启动类：

@SpringBootApplication
    @EnableDiscoveryClient
    @EnableFeignClients
    public class CourseApplication {
        public static void main(String[] args) {
            SpringApplication.run(CourseApplication.class,args);
        }
    }

拷贝配置

![cd0a991ce98d434ea5d567a51913b9d5.png][]

#### 1.1.3：后端：基本模块 ####

创建JavaBean

package com.czxy.zx.domain;
    @Data
    @TableName("edu_subject")
    public class EduSubject{
        @TableId(type = IdType.ASSIGN_UUID)
        //课程科目ID
        private String id;
        //科目名称
        private String title;
        //父ID
        private String parentId;
        //排序字段
        private Integer sort;
        //创建时间
        @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss",timezone = "GMT+8")
        @TableField(fill = FieldFill.INSERT)
        private Date gmtCreate;
        //更新时间
        @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss",timezone = "GMT+8")
        @TableField(fill = FieldFill.INSERT)
        private Date gmtModified;
    
        @TableField(exist = false)
        @JsonInclude(JsonInclude.Include.NON_EMPTY)     //生成json数据，不包含空元素
        private List<EduSubject> children = new ArrayList<>();
    
    }

创建mapper

![97fe3900d60f432784de010c778469be.png][]

@Mapper
    public interface EduSubjectMapper extends BaseMapper<EduSubject> {
    }

创建service

![9f7c52f3c55a4b94b4590fa308f1ed97.png][]

接口

public interface EduSubjectService extends IService<EduSubject> {
    }

实现类

@Service
    public class EduSubjectServiceImpl extends ServiceImpl<EduSubjectMapper, EduSubject> implements EduSubjectService {
    }

创建controller

![1c4c5a055d71473d89f50abaed825e51.png][]

@RequestMapping("/course")
    @RestController
    public class EduSubjectController {
        @Resource
        private EduSubjectService eduSubjectService;
        @GetMapping
        public BaseResult findAll(){
            System.out.println("查询所有");
            QueryWrapper<EduSubject> queryWrapper = new QueryWrapper<>();
            queryWrapper.orderByAsc("parent_id");
            List<EduSubject> eduSubjectList = eduSubjectService.list(queryWrapper);
            //提供list集合用来缓存一级目录
            ArrayList<EduSubject> resultsubject = new ArrayList<>();
            //创建map集合用来缓存
            Map<String,EduSubject> subjectMap = new HashMap<>();
            //进行遍历查询结果
            for (EduSubject eduSubject : eduSubjectList) {
                //通过id进行判断map集合中是否保存
                EduSubject parentsubject = subjectMap.get(eduSubject.getParentId());
                //进行判断父是否存在，如果不存在存放在list集合中为一级目录
                if (parentsubject == null){
                    resultsubject.add(eduSubject);
                }else {
                    //如果存在说明是二级的通过id找到父亲放入父亲的属性中
                    parentsubject.getChildren().add(eduSubject);
                }
                subjectMap.put(eduSubject.getId(),eduSubject);
            }
            System.out.println(resultsubject);
            return BaseResult.ok("查询成功",resultsubject);
        }
    }

#### 1.1.4：前端：课程板块 ####

创建路由模块

![13e2e35085114ff7b5b13f615a77c24b.png][]

/** When your routing table is too long, you can split it into small modules **/
    
    import Layout from '@/layout'   //导入布局组件
    
    const courseRouter = {
      path: '/course',                 //一级路径
      component: Layout,                //页面布局，固定写法
      redirect: '/course/subjectList', //访问/teacher重定向的页面位置
      name: '课程管理',
      meta: {
        title: '课程管理',              //左侧一级菜单的菜单名
        icon: 'table',                 //左侧一级菜单的图标，取值参考：src/icons/svg目录下文件名
        // roles: ['admin']
      },
      children: [
        {
          path: 'subjectList',          //二级路径
          component: () => import('@/views/edu/course/SubjectList'), //页面位置
          name: '科目列表',
          meta: {                       //二级菜单的菜单名称
            title: '科目列表', 
            icon: 'list',
            // roles: ['admin']  
          }      
        },    
      ]
    }
    export default courseRouter

创建 subjectList.vue 页面

<template>
        <div>
          <el-table
           v-loading="loading"
          :data="result"
           row-key="title"
           :tree-props="{children: 'children'}"
          style="width: 50%">
          <el-table-column
            prop="title"
            label="科目名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="sort"
            label="排序"
            width="180">
          </el-table-column>
          <el-table-column
            prop="gmtCreate"
            label="添加时间"
            width="150">
          </el-table-column>
            <el-table-column
            prop="gmtModified"
            label="修改时间"
            width="150">
          </el-table-column>
           <el-table-column label="操作">
          <template slot-scope="">
            <el-button
              size="mini">编辑</el-button>
            <el-button
              size="mini"
              type="danger">删除</el-button>
          </template>
        </el-table-column>
        </el-table>
        </div>
    </template>
    
    <script>
    //导入ajax
    import { findAll } from "@/api/edu/course"
    export default {
        name: 'WORKSPACE_NAMESubjectList',
    
        data() {
            return {
                result:[],
                loading:false
            };
        },
    
        mounted() {
          this.selectAll()
        },
    
        methods: {
              async selectAll() {
                this.loading = true
                let baseResult = await findAll() 
                this.result = baseResult.data
                this.loading = false
            }
        },
    };
    </script>
    
    <style lang="scss" scoped>
    
    </style>

配置路由

![e1d172c7a4e649ebb3a671c66d2578d4.png][]

### 2，查询所有课程 ###

![d5db35fe8dfb4cb99079479d1b951327.png][]

#### 2.1：后端实现 ####

*  修改 EduSubjectController

package com.czxy.zx.course.controller;
    
    import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
    import com.czxy.zx.course.service.EduSubjectService;
    import com.czxy.zx.domain.EduSubject;
    import com.czxy.zx.vo.BaseResult;
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RestController;
    
    import javax.annotation.Resource;
    import java.util.ArrayList;
    import java.util.HashMap;
    import java.util.List;
    import java.util.Map;
    
    @RequestMapping("/course")
    @RestController
    public class EduSubjectController {
        @Resource
        private EduSubjectService eduSubjectService;
        @GetMapping
        public BaseResult findAll(){
            System.out.println("查询所有");
            QueryWrapper<EduSubject> queryWrapper = new QueryWrapper<>();
            queryWrapper.orderByAsc("parent_id");
            List<EduSubject> eduSubjectList = eduSubjectService.list(queryWrapper);
            //提供list集合用来缓存一级目录
            ArrayList<EduSubject> resultsubject = new ArrayList<>();
            //创建map集合用来缓存
            Map<String,EduSubject> subjectMap = new HashMap<>();
            //进行遍历查询结果
            for (EduSubject eduSubject : eduSubjectList) {
                //通过id进行判断map集合中是否保存
                EduSubject parentsubject = subjectMap.get(eduSubject.getParentId());
                //进行判断父是否存在，如果不存在存放在list集合中为一级目录
                if (parentsubject == null){
                    resultsubject.add(eduSubject);
                }else {
                    //如果存在说明是二级的通过id找到父亲放入父亲的属性中
                    parentsubject.getChildren().add(eduSubject);
                }
                subjectMap.put(eduSubject.getId(),eduSubject);
            }
            System.out.println(resultsubject);
            return BaseResult.ok("查询成功",resultsubject);
        }
    }

#### 2.2：前端ajax发送 ####

import axios from '@/utils/request'

> // 查询所有课程科目  
> export function findAllSub() \{  
> return axios.get('/course-service/subject');  
> \}

#### 2.3：前端实现 ####

修改 `@/views/edu/course/subjectList.vue`

![d03fcd7ddc4b49cc8e460903c1aebb44.png][]

[4f23508ba5ef47938d6ab48509dc1f2b.png]: https://img-blog.csdnimg.cn/4f23508ba5ef47938d6ab48509dc1f2b.png
[6692484cca8a426f9c79d9f658e64daf.png]: https://img-blog.csdnimg.cn/6692484cca8a426f9c79d9f658e64daf.png
[cd0a991ce98d434ea5d567a51913b9d5.png]: https://img-blog.csdnimg.cn/cd0a991ce98d434ea5d567a51913b9d5.png
[97fe3900d60f432784de010c778469be.png]: https://img-blog.csdnimg.cn/97fe3900d60f432784de010c778469be.png
[9f7c52f3c55a4b94b4590fa308f1ed97.png]: https://img-blog.csdnimg.cn/9f7c52f3c55a4b94b4590fa308f1ed97.png
[1c4c5a055d71473d89f50abaed825e51.png]: https://img-blog.csdnimg.cn/1c4c5a055d71473d89f50abaed825e51.png
[13e2e35085114ff7b5b13f615a77c24b.png]: https://img-blog.csdnimg.cn/13e2e35085114ff7b5b13f615a77c24b.png
[e1d172c7a4e649ebb3a671c66d2578d4.png]: https://img-blog.csdnimg.cn/e1d172c7a4e649ebb3a671c66d2578d4.png
[d5db35fe8dfb4cb99079479d1b951327.png]: https://img-blog.csdnimg.cn/d5db35fe8dfb4cb99079479d1b951327.png
[d03fcd7ddc4b49cc8e460903c1aebb44.png]: https://img-blog.csdnimg.cn/d03fcd7ddc4b49cc8e460903c1aebb44.png