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

举报
爱吃豆的土豆 发表于 2022/09/25 03:19:49 2022/09/25
【摘要】 目录 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：数据库

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

【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
5G教育 Vue 前端
  • 点赞
  • 收藏
  • 关注作者

评论（0）

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

全部回复

上滑加载中

设置昵称

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

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

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

确认 取消

目录

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入