• 谷粒学苑 —— 8、课程管理：课程发布页面3 —— 信息确认及发布

    目录

    1、确认信息的显示

    1.1、后端

    1.1.1、定义确认信息 VO

    1.1.2、根据课程 ID 获取确认信息

    1.1.3、测试异常：Invalid bound statement (not found)

    1.2、前端

    1.2.1、定义 API

    1.2.2、定义数据模型

    1.2.3、完善步骤导航

    1.2.4、页面组件

    1.2.5、获取确认信息

    2、课程发布

    2.1、后端

    2.1.1、发布指定课程 ID 的课程

    2.2、后端

    2.2.1、定义 API

    2.2.2、发布课程

    3、完整页面

    1、确认信息的显示

    1.1、后端

    1.1.1、定义确认信息 VO

    1. @Data
    2. @ApiModel(value = "课程确认信息")
    3. public class CoursePublishVO {
    4.  
    5.     private String courseId;
    6.     private String title;
    7.     private String cover;
    8.     private Integer lessonNum;
    9.     private String subjectLevelOne;
    10.     private String subjectLevelTwo;
    11.     private String teacherName;
    12.     private String price;//只用于显示
    13.  
    14. }

    1.1.2、根据课程 ID 获取确认信息

    在 EduCourseMapper.xml 添加查询 SQL

    1.     
    2.     <select id="getPublishCourseInfo" resultType="com.zyj.eduservice.entity.vo.CoursePublishVO">
    3.         SELECT ec.`id`, ec.`title`, ec.`price`, ec.`lesson_num` AS lessonNum, ec.`cover`,
    4.                et.`name` AS teacherName,
    5.                es1.`title` AS subjectLevelOne,
    6.                es2.`title` AS subjectLevelTwo
    7.         FROM `edu_course` ec LEFT OUTER JOIN `edu_teacher` et ON ec.`teacher_id` = et.`id`
    8.                              LEFT OUTER JOIN `edu_subject` es1 ON ec.`subject_parent_id` = es1.`id`
    9.                              LEFT OUTER JOIN `edu_subject` es2 ON ec.`subject_id` = es2.`id`
    10.         WHERE ec.`id` = '1586554891470389250';
    11.     select>

    EduCourseMapper

    1.     /**
    2.      * 根据课程ID查询课程确认信息
    3.      * @param courseId 课程ID
    4.      * @return
    5.      */
    6.     public CoursePublishVO getPublishCourseInfo(String courseId);

    EduCourseService

    1.     /**
    2.      * 根据课程ID查询课程确认信息
    3.      * @param courseId 课程ID
    4.      * @return
    5.      */
    6.     CoursePublishVO publishCourseInfo(String courseId);

    EduCourseServiceImpl

    1.     /**
    2.      * 根据课程ID查询课程确认信息
    3.      * @param courseId 课程ID
    4.      * @return
    5.      */
    6.     @Override
    7.     public CoursePublishVO publishCourseInfo(String courseId) {
    8.         CoursePublishVO publishCourseInfo = baseMapper.getPublishCourseInfo(courseId);
    9.         return publishCourseInfo;
    10.     }

    EduCourseController

    1.     /**
    2.      * 根据课程ID查询课程确认信息
    3.      * @param courseId 课程ID
    4.      * @return
    5.      */
    6.     @GetMapping("/getPublishCourseInfo/{courseId}")
    7.     public R getPublishCourseInfo(
    8.             @ApiParam(name = "courseId", value = "课程ID", required = true) @PathVariable String courseId
    9.     ) {
    10.         CoursePublishVO coursePublishVO = courseService.publishCourseInfo(courseId);
    11.         return R.ok().data("coursePublishVO", coursePublishVO);
    12.     }

    1.1.3、测试异常：Invalid bound statement (not found)

    此时测试会报异常 org.apache.ibatis.binding.BindingException: Invalid bound statement (not found)，即找不到在 mapper.xml 中定义 SQL 语句。

    这个错误是由 maven 默认加载机制造成的：maven 加载时，只会把 src/main/java 文件夹里面的 .java 类型文件进行编译，如果其他类型文件，不会加载

    解决方法：

    1. 复制 xml 到 target 文件夹（不推荐）
    2. 把 xml 文件放到 resources 目录下（不推荐：破坏项目结构）
    3. （推荐）通过配置实现：在 pom.xml 和 项目 application.properties 中配置

    这里使用第三种方法来解决

    在 service\pom.xml 中配置

    1.     
    2.     <build>
    3.         <resources>
    4.             <resource>
    5.                 <directory>src/main/javadirectory>
    6.                 <includes>
    7.                     <include>**/*.xmlinclude>
    8.                 includes>
    9.                 <filtering>falsefiltering>
    10.             resource>
    11.         resources>
    12.     build>

    然后在 src/main/resources/application.properties 中配置

    1. # 配置mapper xml文件的路径
    2. mybatis-plus.mapper-locations=classpath:com/zyj/eduservice/mapper/xml/*.xml

    配置完后刷新 maven，重启服务，就可以运行了

    1.2、前端

    1.2.1、定义 API

    src\api\edu\course.js

    1.     /**
    2.      * 根据课程ID查询课程确认信息
    3.      * @param {*} courseId 
    4.      * @returns 
    5.      */
    6.     getPublishCourseInfo(courseId) {
    7.         return request({
    8.             url: `/eduservice/course/getPublishCourseInfo/${courseId}`,
    9.             method: 'GET',
    10.         })
    11.     }

    并在 src\views\edu\course\publish.vue 中引入

    import course from '@/api/edu/course.js'

    1.2.2、定义数据模型

    1.         data() {
    2.             return {
    3.                 saveBtnDisabled: false,     // 保存按钮是否禁用
    4.                 courseId: '',   // 课程ID
    5.                 publishCourse: {}   // 课程确认信息
    6.             }
    7.         },

    1.2.3、完善步骤导航

    1.             /**
    2.              * 点击上一步跳转到src\views\edu\course\chapter.vue
    3.              */
    4.             previous() {
    5.                 this.$router.push({ path: '/course/chapter/' + this.courseId });
    6.             },

    1.2.4、页面组件

    显示确认信息

    1.         <div class="ccInfo">
    2.             <img :src="publishCourse.cover">
    3.             <div class="main">
    4.                 <h2>{{ publishCourse.title }}h2>
    5.                 <p class="gray"><span>共{{ publishCourse.lessonNum }}课时span>p>
    6.                 <p><span>所属分类：{{ publishCourse.subjectLevelOne }} — {{ publishCourse.subjectLevelTwo }}span>p>
    7.                 <p>课程讲师：{{ publishCourse.teacherName }}p>
    8.                 <h3 class="red">￥{{ publishCourse.price }}h3>
    9.             div>
    10.         div>

    样式：

    1. <style scoped>
    2. .ccInfo {
    3.     background: #f5f5f5;
    4.     padding: 20px;
    5.     overflow: hidden;
    6.     border: 1px dashed #DDD;
    7.     margin-bottom: 40px;
    8.     position: relative;
    9. }
    10.  
    11. .ccInfo img {
    12.     background: #d6d6d6;
    13.     width: 500px;
    14.     height: 278px;
    15.     display: block;
    16.     float: left;
    17.     border: none;
    18. }
    19.  
    20. .ccInfo .main {
    21.     margin-left: 520px;
    22. }
    23.  
    24. .ccInfo .main h2 {
    25.     font-size: 28px;
    26.     margin-bottom: 30px;
    27.     line-height: 1;
    28.     font-weight: normal;
    29. }
    30.  
    31. .ccInfo .main p {
    32.     margin-bottom: 10px;
    33.     word-wrap: break-word;
    34.     line-height: 24px;
    35.     max-height: 48px;
    36.     overflow: hidden;
    37. }
    38.  
    39. .ccInfo .main p {
    40.     margin-bottom: 10px;
    41.     word-wrap: break-word;
    42.     line-height: 24px;
    43.     max-height: 48px;
    44.     overflow: hidden;
    45. }
    46.  
    47. .ccInfo .main h3 {
    48.     left: 540px;
    49.     bottom: 20px;
    50.     line-height: 1;
    51.     font-size: 28px;
    52.     color: #d32f24;
    53.     font-weight: normal;
    54.     position: absolute;
    55. }
    56. style>

    1.2.5、获取确认信息

    在 methods 中定义

    1.             /**
    2.              * 获取当前课程ID的确认信息
    3.              */
    4.             getPublishCourseInfo() {
    5.                 course.getPublishCourseInfo(this.courseId).then(response => {
    6.                     this.publishCourse = response.data.coursePublishVO;
    7.                 });
    8.             }

    在 created 中获取

    1.         created() {
    2.             // 获取路由中的课程ID并获取信息
    3.             if(this.$route.params && this.$route.params.id) {
    4.                 this.courseId = this.$route.params.id;
    5.                 this.getPublishCourseInfo();
    6.             }
    7.         },

    2、课程发布

    2.1、后端

    2.1.1、发布指定课程 ID 的课程

    EduCourseController

    1.     /**
    2.      * 发布指定ID的课程：修改课程状态即可
    3.      * @param courseId 课程ID
    4.      * @return
    5.      */
    6.     @PostMapping("/publishCourse/{courseId}")
    7.     public R publishCourse(
    8.             @ApiParam(name = "courseId", value = "课程ID", required = true) @PathVariable String courseId
    9.     ) {
    10.         EduCourse eduCourse = new EduCourse();
    11.         eduCourse.setId(courseId);
    12.         eduCourse.setStatus("Normal");
    13.         courseService.updateById(eduCourse);
    14.         return R.ok();
    15.     }

    2.2、后端

    2.2.1、定义 API

    src\api\edu\course.js

    1.     /**
    2.      * 发布指定ID的课程
    3.      * @param {*} courseId 课程ID
    4.      * @returns 
    5.      */
    6.     publishCourse(courseId) {
    7.         return request({
    8.             url: `/eduservice/course/publishCourse/${courseId}`,
    9.             method: 'POST'
    10.         })
    11.     }

    2.2.2、发布课程

    在 methods 中定义

    1.             /**
    2.              * 发布课程
    3.              */
    4.             publish() {
    5.                 this.$confirm('是否发布该课程?', '提示', {
    6.                     confirmButtonText: '确定',
    7.                     cancelButtonText: '取消',
    8.                     type: 'warning'
    9.                 })
    10.                 // 确认发布
    11.                 .then(() => {
    12.                     course.publishCourse(this.courseId).then(response => {
    13.                         // 提示信息
    14.                         this.$message({
    15.                             type: 'success',
    16.                             message: '发布成功!'
    17.                         });
    18.  
    19.                         // 跳转到课程列表页面
    20.                         this.$router.push({ path: '/course/table' })
    21.                     })
    22.                 })
    23.                 // 取消发布
    24.                 .catch(() => {
    25.                     this.$message({
    26.                         type: 'info',
    27.                         message: '已取消发布'
    28.                     });
    29.                 });
    30.             }

    3、完整页面

    1. <template>
    2.     <div class="app-container">
    3.         <h2 style="text-align: center;">发布新课程h2>
    4.         
    5.         <el-steps :active="3" process-status="wait" align-center style="margin-bottom: 40px;">
    6.             <el-step title="填写课程基本信息" />
    7.             <el-step title="创建课程大纲" />
    8.             <el-step title="发布课程" />
    9.         el-steps>
    10.         
    11.         <div class="ccInfo">
    12.             <img :src="publishCourse.cover">
    13.             <div class="main">
    14.                 <h2>{{ publishCourse.title }}h2>
    15.                 <p class="gray"><span>共{{ publishCourse.lessonNum }}课时span>p>
    16.                 <p><span>所属分类：{{ publishCourse.subjectLevelOne }} — {{ publishCourse.subjectLevelTwo }}span>p>
    17.                 <p>课程讲师：{{ publishCourse.teacherName }}p>
    18.                 <h3 class="red">￥{{ publishCourse.price }}h3>
    19.             div>
    20.         div>
    21.         
    22.         <div>
    23.             <el-button @click="previous">返回修改el-button>
    24.             <el-button :disabled="saveBtnDisabled" type="primary" @click="publish">发布课程el-button>
    25.         div>
    26.     div>
    27. template>
    28. <script>
    29.     import course from '@/api/edu/course.js'
    30.  
    31.     export default {
    32.         data() {
    33.             return {
    34.                 saveBtnDisabled: false,     // 保存按钮是否禁用
    35.                 courseId: '',   // 课程ID
    36.                 publishCourse: {    // 课程确认信息
    37.  
    38.                 }   
    39.             }
    40.         },
    41.         created() {
    42.             // 获取路由中的课程ID并获取信息
    43.             if(this.$route.params && this.$route.params.id) {
    44.                 this.courseId = this.$route.params.id;
    45.                 this.getPublishCourseInfo();
    46.             }
    47.         },
    48.         methods: {
    49.             /**
    50.              * 点击上一步跳转到src\views\edu\course\chapter.vue
    51.              */
    52.             previous() {
    53.                 this.$router.push({ path: '/course/chapter/' + this.courseId });
    54.             },
    55.  
    56.             /**
    57.              * 获取当前课程ID的确认信息
    58.              */
    59.             getPublishCourseInfo() {
    60.                 course.getPublishCourseInfo(this.courseId).then(response => {
    61.                     this.publishCourse = response.data.coursePublishVO;
    62.                 });
    63.             },
    64.  
    65.             /**
    66.              * 发布课程
    67.              */
    68.             publish() {
    69.                 this.$confirm('是否发布该课程?', '提示', {
    70.                     confirmButtonText: '确定',
    71.                     cancelButtonText: '取消',
    72.                     type: 'warning'
    73.                 })
    74.                 // 确认发布
    75.                 .then(() => {
    76.                     course.publishCourse(this.courseId).then(response => {
    77.                         // 提示信息
    78.                         this.$message({
    79.                             type: 'success',
    80.                             message: '课程发布成功!'
    81.                         });
    82.  
    83.                         // 跳转到课程列表页面
    84.                         this.$router.push({ path: '/course/table' })
    85.                     })
    86.                 })
    87.                 // 取消发布
    88.                 .catch(() => {
    89.                     this.$message({
    90.                         type: 'info',
    91.                         message: '已取消发布'
    92.                     });
    93.                 });
    94.             }
    95.         }
    96.     }
    97. script>
    98. <style scoped>
    99. .ccInfo {
    100.     background: #f5f5f5;
    101.     padding: 20px;
    102.     overflow: hidden;
    103.     border: 1px dashed #DDD;
    104.     margin-bottom: 40px;
    105.     position: relative;
    106. }
    107.  
    108. .ccInfo img {
    109.     background: #d6d6d6;
    110.     width: 500px;
    111.     height: 278px;
    112.     display: block;
    113.     float: left;
    114.     border: none;
    115. }
    116.  
    117. .ccInfo .main {
    118.     margin-left: 520px;
    119. }
    120.  
    121. .ccInfo .main h2 {
    122.     font-size: 28px;
    123.     margin-bottom: 30px;
    124.     line-height: 1;
    125.     font-weight: normal;
    126. }
    127.  
    128. .ccInfo .main p {
    129.     margin-bottom: 10px;
    130.     word-wrap: break-word;
    131.     line-height: 24px;
    132.     max-height: 48px;
    133.     overflow: hidden;
    134. }
    135.  
    136. .ccInfo .main p {
    137.     margin-bottom: 10px;
    138.     word-wrap: break-word;
    139.     line-height: 24px;
    140.     max-height: 48px;
    141.     overflow: hidden;
    142. }
    143.  
    144. .ccInfo .main h3 {
    145.     left: 540px;
    146.     bottom: 20px;
    147.     line-height: 1;
    148.     font-size: 28px;
    149.     color: #d32f24;
    150.     font-weight: normal;
    151.     position: absolute;
    152. }
    153. style>

  • 相关阅读:
    VTK OrientationMarker 方向 三维坐标系 相机坐标轴 自定义坐标轴
    C++学习day2
    中国人民大学与加拿大女王大学金融硕士——人生下半场，用实力为自己“撑腰”
    Mybatis如何使用druid数据连接池
    MySQL语法入门
    F.binary_cross_entropy、nn.BCELoss、nn.BCEWithLogitsLoss与F.kl_div函数详细解读
    【疑难】使用ARM development studio仿真 error:Failed to create Jython interpreter
    java程序设计笔记 -- 继承与多态
    野风药业IPO被终止：曾拟募资5.4亿 实控人俞蘠曾进行P2P投资
    屏幕分辨率dpi解析（adb 调试查看）
  • 原文地址：https://blog.csdn.net/Mr_zhangyj/article/details/127691932