学成在线--15.课程计划查询_阿Q咚咚咚的博客-程序员宝宝

技术标签: Java--学成在线  

一.需求分析

什么是课程计划?
课程计划定义了课程的章节内容,相当于目录,学生通过课程计划进行在线学习,前端页面展示如下图中右侧显示。课程计划包括两级,第一级是课程的大章节、第二级是大章节下属的小章节,每个小章节通常是一段视频,学生点击小章节在线学习。
在这里插入图片描述
课程计划查询是将某个课程的课程计划内容完整的显示出来,如下图所示,左侧显示的就是课程计划,课程计划是一个树型结构,方便扩展课程计划的级别。
在这里插入图片描述教学管理人员对课程计划如何管理?功能包括:添加课程计划、删除课程计划、修改课程计划等。
添加:在上边页面中,点击“添加课程计划”即可对课程计划进行添加操作。
修改:点击修改可对某个章节内容进行修改。
删除:点击删除可删除某个章节。

二.页面原型

1.tree组件介绍

本功能使用element-ui 的tree组件来完成
组件标签:

<el‐tree
	:data="data"
	show‐checkbox
	node‐key="id"
	default‐expand‐all
	:expand‐on‐click‐node="false"
	:render‐content="renderContent">
</el‐tree>

数据对象:

export default {
    
    data() {
    
      return {
    
        data: [{
    
          id: 1,
          pname: '一级 1',
          children: [{
    
            id: 4,
            pname: '二级 1-1',
            children: [{
    
              id: 9,
              pname: '三级 1-1-1'
            }, {
    
              id: 10,
              pname: '三级 1-1-2'
            }]
          }]
        }],

在这里插入图片描述

2.webstorm配置jsx

本组件用到了JSX语法,如下所示:

renderContent(h, {
     node, data, store }) {
    
        return (
          <span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
            <span>
              <span>{
    node.label}</span>
            </span>
            <span>
              <el-button style="font-size: 12px;" type="text" on-click={
     () => this.choosevideo(data) }>{
    data.mediaFileOriginalName}&nbsp;&nbsp;&nbsp;&nbsp; 选择视频</el-button>
              <el-button style="font-size: 12px;" type="text" on-click={
     () => this.edit(data) }>修改</el-button>
              <el-button style="font-size: 12px;" type="text" on-click={
     () => this.remove(node, data) }>删除</el-button>
            </span>
          </span>);
      },

JSX 是Javascript和XML结合的一种格式,它是React的核心组成部分,JSX和XML语法类似,可以定义属性以及子元
素。唯一特殊的是可以用大括号来加入JavaScript表达式。遇到 HTML 标签(以 < 开头),就用 HTML 规则解析;
遇到代码块(以 { 开头),就用 JavaScript 规则解析。设置方法如下:
1、Javascript version 选择 React JSX (如果没有就选择JSX Harmony)
在这里插入图片描述2、HTML 类型文件中增加vue
preferences -> Editor -> File Types 中找到上边框中HTML 在下边加一个 *.vue
在这里插入图片描述如果已经在vue template 中已存在.vue 则把它改为.vue2(因为要在Html中添加.vue)
在这里插入图片描述

三.API接口

1.数据模型

1、表结构
在这里插入图片描述
2、模型类
课程计划为树型结构,由树根(课程)和树枝(章节)组成,为了保证系统的可扩展性,在系统设计时将课程计划设置为树型结构。
文件位置:xcEduService01\xc-framework-model\src\main\java\com\xuecheng\framework\domain\course\Teachplan.java

package com.xuecheng.framework.domain.course;

import lombok.Data;
import lombok.ToString;
import org.hibernate.annotations.GenericGenerator;

import javax.persistence.*;
import java.io.Serializable;

@Data
@ToString
@Entity
@Table(name="teachplan")
@GenericGenerator(name = "jpa-uuid", strategy = "uuid")
public class Teachplan implements Serializable {
    
    private static final long serialVersionUID = -916357110051689485L;
    @Id
    @GeneratedValue(generator = "jpa-uuid")
    @Column(length = 32)
    private String id;
    private String pname;
    private String parentid;
    private String grade;
    private String ptype;
    private String description;
    private String courseid;
    private String status;
    private Integer orderby;
    private Double timelength;
    private String trylearn;

}

2.自定义模型类

前端页面需要树型结构的数据来展示Tree组件,如下:

[{
    
id: 1,
label: '一级 1',
children: [{
    
id: 4,
label: '二级 1‐1'
}]
}]

自定义课程计划结点类如下:
文件位置:xcEduService01\xc-framework-model\src\main\java\com\xuecheng\framework\domain\course\ext\TeachplanNode.java

@Data
@ToString
public class TeachplanNode extends Teachplan {
    
List<TeachplanNode> children;
}

3.接口定义

根据课程id查询课程的计划接口如下,在api工程创建course包,创建CourseControllerApi接口类并定义接口方法如下:
文件位置:xcEduService01\xc-service-api\src\main\java\com\xuecheng\api\course\CourseControllerApi.java

public interface CourseControllerApi {
    
@ApiOperation("课程计划查询")
public TeachplanNode findTeachplanList(String courseId);
}

四.sql语句

课程计划是树型结构,采用表的自连接方式进行查询,sql语句如下

SELECT
	a.id one_id,
	a.pname one_pname,
	b.id two_id,
	b.pname two_pname,
	c.id three_id,
	c.pname three_pname
FROM
	teachplan a
	LEFT JOIN teachplan b
		ON a.id = b.parentid
	LEFT JOIN teachplan c
		ON b.id = c.parentid
WHERE a.parentid = '0'
	AND a.courseid = '402885816243d2dd016243f24c030002'
ORDER BY a.orderby,
	b.orderby,
	c.orderby

五.服务器端

1.Dao

1)Mapper接口

文件位置:xcEduService01\xc-service-manage-course\src\main\java\com\xuecheng\manage_course\dao\TeachplanMapper.java

package com.xuecheng.manage_course.dao;

import com.xuecheng.framework.domain.course.ext.TeachplanNode;
import org.apache.ibatis.annotations.Mapper;

/**
 * 课程计划mapper
 * Created by Administrator.
 */
@Mapper
public interface TeachplanMapper {
    
    //课程计划查询
    public TeachplanNode selectList(String courseId);
}

2)Mapper映射文件

文件接口:xcEduService01\xc-service-manage-course\src\main\resources\com\xuecheng\manage_course\dao\TeachplanMapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.xuecheng.manage_course.dao.TeachplanMapper">

    <resultMap id="teachplanMap" type="com.xuecheng.framework.domain.course.ext.TeachplanNode">
        <id column="one_id" property="id"></id>
        <result column="one_pname" property="pname"></result>
        <collection property="children" ofType="com.xuecheng.framework.domain.course.ext.TeachplanNode">
            <id column="two_id" property="id"></id>
            <result column="two_pname" property="pname"></result>
            <collection property="children" ofType="com.xuecheng.framework.domain.course.ext.TeachplanNode">
                <id column="three_id" property="id"></id>
                <result column="three_pname" property="pname"></result>
            </collection>
        </collection>

    </resultMap>

    <select id="selectList" parameterType="java.lang.String"
            resultMap="teachplanMap">
  SELECT
  a.id one_id,
  a.pname one_pname,
  b.id two_id,
  b.pname two_pname,
  c.id three_id,
  c.pname three_pname
FROM
  teachplan a
  LEFT JOIN teachplan b
    ON b.parentid = a.id
  LEFT JOIN teachplan c
    ON c.parentid = b.id
WHERE a.parentid = '0'
<if test="_parameter !=null and _parameter!=''">
    AND a.courseid = #{
    courseId}
</if>

ORDER BY a.orderby,
  b.orderby,
  c.orderby
    </select>
</mapper>

说明:针对输入参数为简单类型#{}中可以是任意类型,判断参数是否为空要用 _parameter(它属于mybatis的内置参数)

2.Service

创建CourseService类,定义查询课程计划方法。
文件位置:xcEduService01\xc-service-manage-course\src\main\java\com\xuecheng\manage_course\service\CourseService.java

@Service
public class CourseService {
    
    @Autowired
    TeachplanMapper teachplanMapper;

    @Autowired
    TeachplanRepository teachplanRepository;

    @Autowired
    CourseBaseRepository courseBaseRepository;
    //查询课程计划
    public TeachplanNode findTeachplanList(String courseId){
    
        return teachplanMapper.selectList(courseId);
    }
   }

3.Controller

文件位置:xcEduService01\xc-service-manage-course\src\main\java\com\xuecheng\manage_course\controller\CourseController.java

@RestController
@RequestMapping("/course")
public class CourseController implements CourseControllerApi {
    

    @Autowired
    CourseService courseService;

    @Override
    @GetMapping("/teachplan/list/{courseId}")
    public TeachplanNode findTeachplanList(@PathVariable("courseId") String courseId) {
    
        return courseService.findTeachplanList(courseId);

    }
   }

4.测试

使用postman或swagger-ui测试查询接口:

Get 请求:http://localhost:31200/course/teachplan/list/402885816243d2dd016243f24c030002

六.前端

1.Api方法

定义课程计划查询的api方法:
文件位置:xc-ui-pc-teach\xc-ui-pc-teach\src\module\course\api\course.js

/*查询课程计划*/
export const findTeachplanList = courseid => {
    
return http.requestQuickGet(apiUrl+'/course/teachplan/list/'+courseid)
}

2.Api调用

1)定义查询课程计划的方法,赋值给数据对象teachplanList

文件位置:xc-ui-pc-teach\xc-ui-pc-teach\src\module\course\page\course_manage\course_plan.vue

findTeachplan(){
    
  this.teachplanList = []
  //查询课程计划
  courseApi.findTeachplanList(this.courseid).then(res=>{
    
      if(res && res.children){
    
        this.teachplanList = res.children;
      }


  })
}

2)在mounted钩子中查询课程计划

mounted(){
    
  //课程id
  this.courseid = this.$route.params.courseid;
  //查询课程计划
  this.findTeachplan()
}

3)修改树结点的标签属性

课程计划信息中pname为结点的名称,需要修改树结点的标签属性方可正常显示课程计划名称,如下:

defaultProps:{
    
  children: 'children',
  label: 'pname'
},

4)测试

在这里插入图片描述

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/fanxindong0620/article/details/105222217

智能推荐

《六》ES6 中对象的扩展_花铛的博客-程序员宝宝

属性的简洁表示法:ES6允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。let name = 'Lee'const Person = { name, hello() { console.log('我的名字是', this.name); }};// 等同于const Person = { name : 'Lee', hello : fucntion() { console.log('我的名字是', this.name); }};属性名表达式:

【随笔】Java 基于Redis分布式锁_醇氧的博客-程序员宝宝

定义接口public interface IDistributedLock { boolean tryLock(String var1, Object var2); boolean tryLock(String var1, Object var2, int var3); boolean unLock(String var1, Object var2);}...

Hibernate @Formula注解_杰拉拉德的博客-程序员宝宝_hibernate 虚拟字段

使用Hibernate @Formula注解,获取某个值的数据字典

Cordova对H5页面进行APP开发打包_Java_SuSheng的博客-程序员宝宝

Cordova的安装:下载jdk,安装JAVA环境,配置系统环境。网上都有教程打开cmd命令行,运行npm install -g cordova,全局安装cordova。测试是否安装好了cordova,继续在命令行里输入cordova -v,检查cordova版本号,如果有版本信息则说明已成功安装cordova。新建cordova项目 cordova create folderName进入新建co...

(六)3中断下半部之tasklet_fzjcycp的博客-程序员宝宝_中断下半部tasklet

一、什么是下半部中断是一个很霸道的东西,处理器一旦接收到中断,就会打断正在执行的代码,调用中断处理函数。如果在中断处理函数中没有禁止中断,该中断处理函数执行过程中仍有可能被其他中断打断。出于这样的原因,大家都希望中断处理函数执行得越快越好。另外,中断上下文中不能阻塞,这也限制了中断上下文中能干的事。基于上面的原因,内核将整个的中断处理流程分为了上半部和下半部。上

‘vue-cli-service‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件。_葡萄籽啊的博客-程序员宝宝

将文件包导入VScode,运行时发生错误:‘vue-cli-service’ 不是内部或外部命令,也不是可运行的程序 或批处理文件。解决方法:(1) 检查**.json**文件中是否含有’vue-cli-service’依赖包,没有则需要安装:(2)执行: npm install 进行安装,(3-1)(情况一:)安装完成后,执行: npm run serve 启动成功!(3-2)(情况二:)安装完成后,运行依旧提示错误,此时删除目录中的node_modules 文件夹,使用 ..

随便推点

wireshark 抓包ICMP 出现 no response seen_marywang56的博客-程序员宝宝_no response seen

今天测试代码的时候抓包,发现icmp的包,wireshark 抓出来的包,显示黄色~~感觉有异常,抓包如下图:后来又抓了一个正常的包,如下图:这里显示 Response frame :391对比之后理解了,是因为wireshark 在抓的时候也会帮助自动分析,第一种场景中,发送的包,是正常包,只是网口没有监听到返回包,所以给出一个提示。在第二个场景中,有返回包,在图上会标注,在内容中也会进行提示。

HDOJ2015 偶数求和_逸川先生的博客-程序员宝宝

偶数求和Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submission(s): 95563    Accepted Submission(s): 40086Problem Description有一个长度为n(n Input

面试题集_Fatten的博客-程序员宝宝

1.有哪几种方法可以实现一个类存取另外一个类的成员函数及属性,并请举列来加以说明和分析.2.A类是B类的基类,并且都有自己的构造,析构函数,请举例证明B类从实例化到消亡过程中构造,析构函数的执行过程.请附code3.什么叫应用程序域?什么是受管制的代码?什么是强类型系统?4..Net中读写数据库需要用到哪些类?他们的作用5.ASP.net的身份验证方式有哪些?分别是什么原理?6

electron-vue-webpack引入bootstrap多实例问题Multiple instances of Vue detected!_weixin_30919235的博客-程序员宝宝

在node modules里面找到electron-webpack目录,修改out-&gt;main.js白名单内容,增加whiteListedModules.add("bootstrap-vue");如图:保存后重新启动electron(yarn dev)转载于:https://www.cnblogs.com/ljwTiey/p/11127477.html...

7 个不容错过的 VS Code 扩展_CSDN资讯的博客-程序员宝宝

作者 | Anupam Chugh 译者 | 弯月出品 | CSDN(ID:CSDNnews)Visual Studio Code 是当前最受欢迎的源代码编辑器之一。VSCode 的流行得益于丰富的扩展库,使得第三方API的插入和使用变得更加容易。你甚至可以创建自己的 API 扩展,并发布到 Visual Studio 市场。2021年,许多新出的 VS Code 扩展广受开发人员的好评。在本文中,我们就来介绍一些我喜欢的扩展。希望这些扩展能够帮助你提高生产力,并扩展开发人员的工作流程。

异常日志记录 DDLog_小宇丝的博客-程序员宝宝

项目中如果想把异常捕获再写入文件,有个十分容易使用的库DDLog.首先导入库,在git上下载。一:在项目初始化指定全局LogLeve ,一般在xxxapp.m中staticconstint ddLogLevel = LOG_LEVEL_VERBOSE;二: - (void)applicationDidFinishLaunching:(NSNotifica