- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

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

爱吃豆的土豆发表于 2022/09/25 03:19:49 2022/09/25

1.2k+ 0 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，分析 1.1：环境搭建 1.1.1：数据库 CREATE DATABASE zx_...

1，分析

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

pom文件


      <dependencies>
             <!--web起步依赖-->
             <dependency>
                 <groupId>org.springframework.boot</groupId>
                 <artifactId>spring-boot-starter-web</artifactId>
             </dependency>
             <!-- nacos 客户端 -->
             <dependency>
                 <groupId>com.alibaba.nacos</groupId>
                 <artifactId>nacos-client</artifactId>
             </dependency>
             <!-- nacos 服务发现 -->
             <dependency>
                 <groupId>com.alibaba.cloud</groupId>
                 <artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId>
             </dependency>
             <!--swagger2-->
             <dependency>
                 <groupId>io.springfox</groupId>
                 <artifactId>springfox-swagger2</artifactId>
             </dependency>
             <dependency>
                 <groupId>io.springfox</groupId>
                 <artifactId>springfox-swagger-ui</artifactId>
             </dependency>
             <!-- feign 远程调用 -->
             <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>
             <!-- mybatis plus-->
             <dependency>
                 <groupId>com.baomidou</groupId>
                 <artifactId>mybatis-plus-boot-starter</artifactId>
                 <version>${mybatis.plus.version}</version>
             </dependency>
             <!-- mysql驱动 -->
             <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>
             <!-- redis 启动器 -->
             <dependency>
                 <groupId>org.springframework.boot</groupId>
                 <artifactId>spring-boot-starter-data-redis</artifactId>
             </dependency>
             <!-- JavaMail 启动器 -->
             <dependency>
                 <groupId>org.springframework.boot</groupId>
                 <artifactId>spring-boot-starter-mail</artifactId>
             </dependency>
             <!-- MQ 启动器 -->
             <dependency>
                 <groupId>org.springframework.boot</groupId>
                 <artifactId>spring-boot-starter-amqp</artifactId>
             </dependency>
             <!-- fastjson -->
             <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);
          }
      }

拷贝配置

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


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

创建service

接口


      public interface EduSubjectService extends IService<EduSubject> {
      }

实现类


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

创建controller


      @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：前端：课程板块

创建路由模块


      /** 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>

配置路由

2，查询所有课程

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


      <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>

文章来源: qianxu.blog.csdn.net，作者：爱吃豆的土豆，版权归原作者所有，如需转载，请联系作者。

原文链接：qianxu.blog.csdn.net/article/details/126712564

点赞
收藏
关注作者

作者其他文章

抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认取消

开发者空间

了解空间

工作台

开发工具

实战案例

空间活动

空间论坛

开发平台

软件开发生产线 CodeArts

AI平台ModelArts

数据治理中心 DataArts Studio

数字内容生产线 MetaStudio

精选服务

云数据库 GaussDB

云数据库 RDS for MySQL

MapReduce服务 MRS

数据仓库服务 DWS

分布式缓存服务Redis版

分布式消息服务 DMS

华为云实时音视频 SparkRTC

媒体处理 MPC

主机迁移服务 SMS

对象存储迁移服务 OMS

云消息服务 KooMessage

云手机服务 KooPhone

企业搜索服务 KooSearch

云地图服务 KooMap

更多开放能力

开发工具

API生态

CodeArts API

API Explorer

Terraform Explorer

KooCLI

API 中心

SDK 中心

开发服务

Codelabs

DevStar

低代码平台Astro

CodeArts IDE

Huawei Cloud Toolkit

Classroom

开发资源

开源镜像站

开源资源

开发语言

开发实践

入门精选

分发资源

企业应用中心

企业通用专区

教育专区

华为应用专区

政务云专区

硬件云服务商城

医疗健康专区

跳蚤市场

华为云开发者日

直播专区

开发者精品活动

DTSE Tech Talk

加入HCDE

加入HCDG

加入HCSD

加入HCWD

鲁班会

沃土云创计划·企业

沃土云创计划·高校

沃土云创计划·个人

沃土云创计划·开源共创

博客

论坛

专题

开发者榜单

学习路径

在线课程

动手实验

考试认证

培训服务