W.T.的博客

Every day to be a little better

(八)在线教育网站搭建-发布实现

发表于 更新于 分类于 ，
本文字数： 7.1k 阅读时长 ≈ 6 分钟
数据库外连接 left outer on查询多表信息

1. CourseInfo 实体类作为查询体

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
package com.online.edu.eduservice.entity.query;

import io.swagger.annotations.Api;
import io.swagger.annotations.ApiParam;
import lombok.Data;

import java.math.BigDecimal;
import java.util.List;

@Api("多表查询")
@Data
public class CourseInfo {

    @ApiParam("id")
    private String id;

    @ApiParam("课程标题")
    private String title;

    @ApiParam("课程封面")
    private String cover;

    @ApiParam("课程总价")
    private BigDecimal price;

    @ApiParam("总课时")
    private int lessonNum;

    @ApiParam("课程描述")
    private String description;

    @ApiParam("讲师姓名")
    private String teacherName;

    @ApiParam("科目类别")
    private String subjectName;


}

2. EduCourseMapper.xml 查询语句

以edu_course表为基准，左外连接各表

1
2
3
4
5
6
7
8
9
10
11
12
13
<?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.online.edu.eduservice.mapper.EduCourseMapper">
<select id="getAllCourseInfo" resultType="com.online.edu.eduservice.entity.query.CourseInfo">
  
    select c.id id,c.title title, c.lesson_num lessonNum,c.price price, c.cover cover,cd.description description, t.name teacherName,es.title subjectName
        from edu_course c
            left outer join edu_course_description cd on c.id = cd.id
            left outer join edu_teacher t on c.teacher_id=t.id
            left outer join edu_subject es on c.subject_id=es.id
        where c.id=#{id}
</select>
</mapper>

3. 读取xml文件设置

Springboot 默认在resourse文件夹下找静态文件

3.1. 配置在父项目中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<build>
     <plugins>
         <plugin>
             <groupId>org.springframework.boot</groupId>
             <artifactId>spring-boot-maven-plugin</artifactId>
         </plugin>
     </plugins>

     <resources>
         <resource>
             <directory>src/main/java</directory>
             <includes>
                 <include>**/*.xml</include>
             </includes>
             <filtering>false</filtering>
         </resource>
     </resources>
 </build>

3.2. 配置在子项目中

1
2
#mapper配置指定
mybatis-plus.mapper-locations=classpath:com/online/edu/eduservice/mapper/xml/*.xml

这样springboot就会扫描到这些文件

4. 后端实现 - 根据课程ID查询

4.1. EduCourseMapper - getAllCourseInfo

1
2
3
4
5
6
7
8
9
10
11
package com.online.edu.eduservice.mapper;

import com.online.edu.eduservice.entity.EduCourse;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.online.edu.eduservice.entity.query.CourseInfo;

public interface EduCourseMapper extends BaseMapper<EduCourse> {

    CourseInfo getAllCourseInfo(String id);

}

4.2. EduCourseSeriveImpl - getAllCourseInfo

1
2
3
4
5
@Override
public CourseInfo getAllCourseInfo(String id) {
    CourseInfo info = baseMapper.getAllCourseInfo(id);
    return info;
}

4.3. EduCourseController - getAllCourseInfo

1
2
3
4
5
6
7
8
@ApiOperation("根据课程ID查询多表相关的课程信息")
@GetMapping("/getAllCourseInfo/{id}")
public R getAllCourseInfo(@ApiParam("课程ID") @PathVariable String id) {

    CourseInfo info = eduCourseService.getAllCourseInfo(id);
    return R.ok().data("items",info);

}

5. 前端实现 - chapter.js

1
2
3
4
5
6
getAllCourseInfo(id){
    return request({
        url:`${base}/getAllCourseInfo/`+id,
        method:'get'
    })
}

6. 前端实现 - publish.vue

根据传入的数据定义courseInfo 传入内容

添加样式显示内容

当点击发布时，将课程中的课程状态改为Normal

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<template>
    <div class="app-container">
        <h2 style="text-align: center;margin-bottom: 50px;">发布新课程</h2>
        <el-steps :active="3" align-center style="margin-bottom: 50px;">
            <el-step title="填写课程基本信息" icon="el-icon-edit"></el-step>
            <el-step title="创建课程大纲" icon="el-icon-document"></el-step>
            <el-step title="提交审核" icon="el-icon-upload"></el-step>
        </el-steps>

        <div class="ccInfo">
            <img :src="path" >
            <div class="main">
                <h2>{{ courseInfo.title }}</h2>
                <p class="gray"><span>{{courseInfo.description}}</span></p>
                <p class="gray"><span>共&nbsp;{{ courseInfo.lessonNum }}&nbsp;课时</span></p>
                <p><span>所属分类：&nbsp;{{ courseInfo.subjectName }}</span></p>
                <p>课程讲师：&nbsp;{{ courseInfo.teacherName }}</p>
                <h3 class="red">￥{{ courseInfo.price }}</h3>
            </div>
         </div>     
        <el-form label-width="120px" >
            <el-form-item>
                <el-button  type="primary" @click="primary">修改信息</el-button>
                <el-button  type="primary" @click="next">发布课程</el-button>
            </el-form-item>
         </el-form>
    </div>
</template>
<script>
import course from '@/api/edu/course'
export default {
    data(){
        return{
            courseId:'',
            courseInfo:{
                id:'',
                title:'',
                cover:'',
                price: 0.00,
                lessonNum:0,
                description:'',
                teacherName:'',
                subjectName:''
            },
            //用户没有设置图片时显示
            path:'/file/upload.jpg',
            courseObj:{
                id:'',
                status:''
            }
        }
    },
    created(){
        this.courseId = this.$route.params.id
        this.getAllCourseInfo(this.courseId)
    },
    methods:{
        next(){
            this.statusChange(this.courseId)
          //跳转至列表页面
            this.$router.push({
                path:'/course'
            })
        },
        //更新总课时数
        statusChange(id){
            this.courseObj =course.getCourseById(id)
                //console.log(this.courseObj)
                this.courseObj.status= "Normal"
                this.courseObj.id = this.courseId
                course.updateSingleCourse(this.courseObj)         
        },
        primary(){
            this.$router.push({
                path:"/course/chapter/"+this.courseId
            })
        },
        getAllCourseInfo(id){
            course.getAllCourseInfo(id).then(response=>{
                //console.log(response)
                this.courseInfo = response.data.items
                if(this.courseInfo.cover.length!==0){
                    his.path =this.courseInfo.cover
                }
            })
        }
    }
}
</script>

<style scoped>
.ccInfo {
    background: #f5f5f5;
    padding: 20px;
    overflow: hidden;
    border: 1px dashed #DDD;
    margin: 5px 80px 40px 80px;
    position: relative;
}
.ccInfo img {
    background: #d6d6d6;
    width: 500px;
    height: 278px;
    display: block;
    float: left;
    border: none;
}
.ccInfo .main {
    margin-left: 520px;
}

.ccInfo .main h2 {
    font-size: 22px;
    margin-bottom: 30px;
    line-height: 1;
    font-weight: bold;
    padding-bottom: 5px;
    border-bottom: #DDD dotted 2px;
}
.ccInfo .main p {
     margin-bottom: 10px;
     word-wrap: break-word;
     line-height: 24px;
     max-height: 48px;
     overflow: hidden;
     font-size: 15px;
}
.ccInfo .main p {
    margin-bottom: 10px;
    word-wrap: break-word;
    line-height: 24px;
    max-height: 48px;
    overflow: hidden;
}
.ccInfo .main h3 {
    left: 540px;
    bottom: 20px;
    line-height: 1;
    font-size: 22px;
    color: #d32f24;
    font-weight: normal;
    position: absolute;
}
</style>

7. 最终显示

本文结束  感谢您的阅读