讲师详情页实现

忘是亡心i 2021-07-24 21:38 532阅读 0赞

# 一 后端 #

## 1 service ##

接口

/**
    * 功能描述：根据讲师id获取讲师详情页数据
    *
    * @author cakin
    * @date 2020/12/18
    * @param id
    * @return
    * @description:
    */
    Map<String, Object> selectTeacherInfoById(String id);

实现

/**
    * 功能描述：根据讲师id获取讲师详情页数据
    *
    * @param id 讲师id
    * @return Map<String, Object> 封装讲师信息和课程信息
    * @author cakin
    * @date 2020/12/18
    * @description:
    */
    @Override
    public Map<String, Object> selectTeacherInfoById(String id) {
        Teacher teacher = baseMapper.selectById(id);
        QueryWrapper<Course> courseQueryWrapper = new QueryWrapper<>();
        courseQueryWrapper.eq("teacher_id", id);
        List<Course> courseList = courseMapper.selectList(courseQueryWrapper);
        Map<String, Object> map = new HashMap<>();
        // 讲师信息
        map.put("teacher", teacher);
        // 课程列表
        map.put("courseList", courseList);
        return map;
    }

## 2 web层 ##

/**
    * 功能描述：获取讲师
    *
    * @param id 讲师id
    * @return R 返回给前端的数据
    * @author cakin
    * @date 2020/12/18
    * @description:
    */
    @ApiOperation(value = "获取讲师")
    @GetMapping("get/{id}")
    public R get(@ApiParam(value = "讲师ID", required = true) @PathVariable String id) {
        Map<String, Object> map = teacherService.selectTeacherInfoById(id);
        return R.ok().data(map);
    }

# 二 前端 #

## 1 api ##

// 获取讲师
      getById(id) {
        return request({
          url: `/api/edu/teacher/get/${id}`,
          method: 'get'
        })
      }

## 2 页面脚本 ##

## 3 模板部分 ##

<template>
      <div id="aCoursesList" class="bg-fa of">
        
        <section class="container">
          <header class="comm-title">
            <h2 class="fl tac">
              <span class="c-333">讲师介绍</span>
            </h2>
          </header>
          <div class="t-infor-wrap">
            
            <section class="fl t-infor-box c-desc-content">
              <div class="mt20 ml20">
                <section class="t-infor-pic">
                  <img :src="teacher.avatar" :alt="teacher.name">
                </section>
                <h3 class="hLh30">
                  <span class="fsize24 c-333">{
       { teacher.name }}
                     
                    {
       { teacher.level===1?'高级讲师':'首席讲师' }}
                  </span>
                </h3>
                <section class="mt10">
                  <span class="t-tag-bg">{
       { teacher.intro }}</span>
                </section>
                <section class="t-infor-txt">
                  <p class="mt20">{
       { teacher.career }}</p>
                </section>
                <div class="clear"/>
              </div>
            </section>
            
            <div class="clear"/>
          </div>
          <section class="mt30">
            <div>
              <header class="comm-title all-teacher-title c-course-content">
                <h2 class="fl tac">
                  <span class="c-333">主讲课程</span>
                </h2>
                <section class="c-tab-title">
                  <a href="javascript: void(0)"> </a>
                </section>
              </header>
              
              <section v-if="courseList.length===0" class="no-data-wrap">
                <em class="icon30 no-data-ico"> </em>
                <span class="c-666 fsize14 ml10 vam">没有相关数据，小编正在努力整理中...</span>
              </section>
              
    
    
              
              <article class="comm-course-list">
                <ul class="of">
                  <li v-for="course in courseList" :key="course.id">
                    <div class="cc-l-wrap">
                      <section class="course-img">
                        <img :src="course.cover" class="img-responsive">
                        <div class="cc-mask">
                          <a :href="'/course/'+course.id" title="开始学习" target="_blank" class="comm-btn c-btn-1">开始学习</a>
                        </div>
                      </section>
                      <h3 class="hLh30 txtOf mt10">
                        <a
                          :href="'/course/'+course.id"
                          :title="course.title"
                          class="course-title fsize18 c-333">{
       { course.title }}</a>
                      </h3>
                    </div>
                  </li>
                </ul>
                <div class="clear"/>
              </article>
              
            </div>
          </section>
        </section>
        
      </div>
    </template>

# 三 测试结果 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/495ee609adee4facb32a9f15201ba709.png