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

    目录

    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：数据库

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

    1. <dependencies>
    2.         
    3.         <dependency>
    4.             <groupId>org.springframework.bootgroupId>
    5.             <artifactId>spring-boot-starter-webartifactId>
    6.         dependency>
    7.         
    8.         <dependency>
    9.             <groupId>com.alibaba.nacosgroupId>
    10.             <artifactId>nacos-clientartifactId>
    11.         dependency>
    12.  
    13.         
    14.         <dependency>
    15.             <groupId>com.alibaba.cloudgroupId>
    16.             <artifactId>spring-cloud-starter-alibaba-nacos-discoveryartifactId>
    17.         dependency>
    18.  
    19.         
    20.         <dependency>
    21.             <groupId>io.springfoxgroupId>
    22.             <artifactId>springfox-swagger2artifactId>
    23.         dependency>
    24.         <dependency>
    25.             <groupId>io.springfoxgroupId>
    26.             <artifactId>springfox-swagger-uiartifactId>
    27.         dependency>
    28.  
    29.         
    30.         <dependency>
    31.             <groupId>org.springframework.cloudgroupId>
    32.             <artifactId>spring-cloud-starter-openfeignartifactId>
    33.         dependency>
    34.  
    35.         
    36.         <dependency>
    37.             <groupId>org.springframework.bootgroupId>
    38.             <artifactId>spring-boot-starter-testartifactId>
    39.         dependency>
    40.  
    41.         
    42.         <dependency>
    43.             <groupId>com.baomidougroupId>
    44.             <artifactId>mybatis-plus-boot-starterartifactId>
    45.             <version>${mybatis.plus.version}version>
    46.         dependency>
    47.         
    48.         <dependency>
    49.             <groupId>mysqlgroupId>
    50.             <artifactId>mysql-connector-javaartifactId>
    51.         dependency>
    52.         
    53.         <dependency>
    54.             <groupId>com.czxy.zxgroupId>
    55.             <artifactId>zx_common_fxartifactId>
    56.         dependency>
    57.         <dependency>
    58.             <groupId>com.czxy.zxgroupId>
    59.             <artifactId>zx_domain_fxartifactId>
    60.         dependency>
    61.  
    62.         
    63.         <dependency>
    64.             <groupId>org.springframework.bootgroupId>
    65.             <artifactId>spring-boot-starter-data-redisartifactId>
    66.         dependency>
    67.         
    68.         <dependency>
    69.             <groupId>org.springframework.bootgroupId>
    70.             <artifactId>spring-boot-starter-mailartifactId>
    71.         dependency>
    72.         
    73.         <dependency>
    74.             <groupId>org.springframework.bootgroupId>
    75.             <artifactId>spring-boot-starter-amqpartifactId>
    76.         dependency>
    77.  
    78.         
    79.         <dependency>
    80.             <groupId>com.alibabagroupId>
    81.             <artifactId>fastjsonartifactId>
    82.         dependency>
    83.  
    84.         
    85.         <dependency>
    86.             <groupId>org.springframework.bootgroupId>
    87.             <artifactId>spring-boot-devtoolsartifactId>
    88.             <optional>trueoptional>
    89.         dependency>
    90.  
    91.         <dependency>
    92.             <groupId>com.alibabagroupId>
    93.             <artifactId>easyexcelartifactId>
    94.             <version>3.0.5version>
    95.         dependency>
    96.  
    97.     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

    启动类：

    1. @SpringBootApplication
    2. @EnableDiscoveryClient
    3. @EnableFeignClients
    4. public class CourseApplication {
    5.     public static void main(String[] args) {
    6.         SpringApplication.run(CourseApplication.class,args);
    7.     }
    8. }

     拷贝配置

    1.1.3：后端：基本模块

     创建JavaBean

    1. package com.czxy.zx.domain;
    2. @Data
    3. @TableName("edu_subject")
    4. public class EduSubject{
    5.     @TableId(type = IdType.ASSIGN_UUID)
    6.     //课程科目ID
    7.     private String id;
    8.     //科目名称
    9.     private String title;
    10.     //父ID
    11.     private String parentId;
    12.     //排序字段
    13.     private Integer sort;
    14.     //创建时间
    15.     @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss",timezone = "GMT+8")
    16.     @TableField(fill = FieldFill.INSERT)
    17.     private Date gmtCreate;
    18.     //更新时间
    19.     @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss",timezone = "GMT+8")
    20.     @TableField(fill = FieldFill.INSERT)
    21.     private Date gmtModified;
    22.  
    23.     @TableField(exist = false)
    24.     @JsonInclude(JsonInclude.Include.NON_EMPTY)     //生成json数据，不包含空元素
    25.     private List children = new ArrayList<>();
    26.  
    27. }

    创建mapper

    1. @Mapper
    2. public interface EduSubjectMapper extends BaseMapper {
    3. }

     

    创建service

     

    接口

    1. public interface EduSubjectService extends IService {
    2. }

    实现类

    1. @Service
    2. public class EduSubjectServiceImpl extends ServiceImpl implements EduSubjectService {
    3. }

    创建controller

     

    1. @RequestMapping("/course")
    2. @RestController
    3. public class EduSubjectController {
    4.     @Resource
    5.     private EduSubjectService eduSubjectService;
    6.     @GetMapping
    7.     public BaseResult findAll(){
    8.         System.out.println("查询所有");
    9.         QueryWrapper queryWrapper = new QueryWrapper<>();
    10.         queryWrapper.orderByAsc("parent_id");
    11.         List eduSubjectList = eduSubjectService.list(queryWrapper);
    12.         //提供list集合用来缓存一级目录
    13.         ArrayList resultsubject = new ArrayList<>();
    14.         //创建map集合用来缓存
    15.         Map subjectMap = new HashMap<>();
    16.         //进行遍历查询结果
    17.         for (EduSubject eduSubject : eduSubjectList) {
    18.             //通过id进行判断map集合中是否保存
    19.             EduSubject parentsubject = subjectMap.get(eduSubject.getParentId());
    20.             //进行判断父是否存在，如果不存在存放在list集合中为一级目录
    21.             if (parentsubject == null){
    22.                 resultsubject.add(eduSubject);
    23.             }else {
    24.                 //如果存在说明是二级的通过id找到父亲放入父亲的属性中
    25.                 parentsubject.getChildren().add(eduSubject);
    26.             }
    27.             subjectMap.put(eduSubject.getId(),eduSubject);
    28.         }
    29.         System.out.println(resultsubject);
    30.         return BaseResult.ok("查询成功",resultsubject);
    31.     }
    32. }

    1.1.4：前端：课程板块

    创建路由模块

     

    1. /** When your routing table is too long, you can split it into small modules **/
    2.  
    3. import Layout from '@/layout'   //导入布局组件
    4.  
    5. const courseRouter = {
    6.   path: '/course',                 //一级路径
    7.   component: Layout,                //页面布局，固定写法
    8.   redirect: '/course/subjectList', //访问/teacher重定向的页面位置
    9.   name: '课程管理',
    10.   meta: {
    11.     title: '课程管理',              //左侧一级菜单的菜单名
    12.     icon: 'table',                 //左侧一级菜单的图标，取值参考：src/icons/svg目录下文件名
    13.     // roles: ['admin']
    14.   },
    15.   children: [
    16.     {
    17.       path: 'subjectList',          //二级路径
    18.       component: () => import('@/views/edu/course/SubjectList'), //页面位置
    19.       name: '科目列表',
    20.       meta: {                       //二级菜单的菜单名称
    21.         title: '科目列表', 
    22.         icon: 'list',
    23.         // roles: ['admin']  
    24.       }      
    25.     },    
    26.   ]
    27. }
    28. export default courseRouter

    创建 subjectList.vue 页面

    2.  
    3. <script>
    4. //导入ajax
    5. import { findAll } from "@/api/edu/course"
    6. export default {
    7.     name: 'WORKSPACE_NAMESubjectList',
    8.  
    9.     data() {
    10.         return {
    11.             result:[],
    12.             loading:false
    13.         };
    14.     },
    15.  
    16.     mounted() {
    17.       this.selectAll()
    18.     },
    19.  
    20.     methods: {
    21.           async selectAll() {
    22.             this.loading = true
    23.             let baseResult = await findAll() 
    24.             this.result = baseResult.data
    25.             this.loading = false
    26.         }
    27.     },
    28. };
    29. script>
    30.  
    31. <style lang="scss" scoped>
    32.  
    33. style>

    配置路由

     

    2，查询所有课程

    2.1：后端实现

    • 修改 EduSubjectController

    1. package com.czxy.zx.course.controller;
    2.  
    3. import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
    4. import com.czxy.zx.course.service.EduSubjectService;
    5. import com.czxy.zx.domain.EduSubject;
    6. import com.czxy.zx.vo.BaseResult;
    7. import org.springframework.web.bind.annotation.GetMapping;
    8. import org.springframework.web.bind.annotation.RequestMapping;
    9. import org.springframework.web.bind.annotation.RestController;
    10.  
    11. import javax.annotation.Resource;
    12. import java.util.ArrayList;
    13. import java.util.HashMap;
    14. import java.util.List;
    15. import java.util.Map;
    16.  
    17. @RequestMapping("/course")
    18. @RestController
    19. public class EduSubjectController {
    20.     @Resource
    21.     private EduSubjectService eduSubjectService;
    22.     @GetMapping
    23.     public BaseResult findAll(){
    24.         System.out.println("查询所有");
    25.         QueryWrapper queryWrapper = new QueryWrapper<>();
    26.         queryWrapper.orderByAsc("parent_id");
    27.         List eduSubjectList = eduSubjectService.list(queryWrapper);
    28.         //提供list集合用来缓存一级目录
    29.         ArrayList resultsubject = new ArrayList<>();
    30.         //创建map集合用来缓存
    31.         Map subjectMap = new HashMap<>();
    32.         //进行遍历查询结果
    33.         for (EduSubject eduSubject : eduSubjectList) {
    34.             //通过id进行判断map集合中是否保存
    35.             EduSubject parentsubject = subjectMap.get(eduSubject.getParentId());
    36.             //进行判断父是否存在，如果不存在存放在list集合中为一级目录
    37.             if (parentsubject == null){
    38.                 resultsubject.add(eduSubject);
    39.             }else {
    40.                 //如果存在说明是二级的通过id找到父亲放入父亲的属性中
    41.                 parentsubject.getChildren().add(eduSubject);
    42.             }
    43.             subjectMap.put(eduSubject.getId(),eduSubject);
    44.         }
    45.         System.out.println(resultsubject);
    46.         return BaseResult.ok("查询成功",resultsubject);
    47.     }
    48. }

    2.2：前端ajax发送

    import axios from '@/utils/request'

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

    2.3：前端实现

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

     

    2.  
    3. <script>
    4. //导入ajax
    5. import { findAll } from "@/api/edu/course"
    6. export default {
    7.     name: 'WORKSPACE_NAMESubjectList',
    8.  
    9.     data() {
    10.         return {
    11.             result:[],
    12.             loading:false
    13.         };
    14.     },
    15.  
    16.     mounted() {
    17.       this.selectAll()
    18.     },
    19.  
    20.     methods: {
    21.           async selectAll() {
    22.             this.loading = true
    23.             let baseResult = await findAll() 
    24.             this.result = baseResult.data
    25.             this.loading = false
    26.         }
    27.     },
    28. };
    29. script>
    30.  
    31. <style lang="scss" scoped>
    32.  
    33. style>

  • 相关阅读:
    编译链接（Compile Link）
    win 服务操作 删除服务
    北大肖臻老师《区块链技术与应用》系列课程学习笔记[9]比特币-思考
    在顺序表中使用顺序查找法查找某个关键字
    【毕业季·进击的技术er】努力只能及格，拼命才能优秀！
    Unity—项目小技术总结
    综述 | 关于点云配准的全面综述（二）
    经典/最新计算机视觉论文及代码推荐
    HTML网页设计制作——响应式网页影视动漫资讯bootstrap网页(9页)
    linux ssh 密钥配置
  • 原文地址：https://blog.csdn.net/m0_64550837/article/details/126712564