首页 / 更多教程 / 42.首页讲师功能

42.首页讲师功能

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了42.首页讲师功能，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含7705字，纯文字阅读大概需要12分钟。

内容图文

一、讲师列表和讲师详情【后端】

分页查询讲师和讲师详情接口

在controller/front文件夹下创建TeacherFrontController类

@RestController
@RequestMapping("/eduservice/teacherfront")
@CrossOrigin
public class TeacherFrontController {
    @Autowired
    private EduTeacherService teacherService;

    @Autowired
    private EduCourseService courseService;

    //1 分页查询讲师的方法
    @PostMapping("getTeacherFrontList/{page}/{limit}")
    public R getTeacherFrontList(@PathVariable long page,@PathVariable long limit) {
        Page<EduTeacher> pageTeacher = new Page<>(page, limit);
        Map<String,Object> map = teacherService.getTeacherFrontList(pageTeacher);

        //返回分页所有数据

        return R.ok().data("map",map);
    }

    //2 讲师详情的功能
    @GetMapping("getTeacherFrontInfo/{teacherId}")
    public R getTeacherFrontInfo(@PathVariable String teacherId){
        //1 根据讲师id查询讲师基本信息
        EduTeacher eduTeacher = teacherService.getById(teacherId);

        //2 根据讲师id查询所有课程
        QueryWrapper<EduCourse> wrapper = new QueryWrapper<>();
        wrapper.eq("teacher_id",teacherId);
        List<EduCourse> courseList = courseService.list(wrapper);
        return R.ok().data("teacher",eduTeacher).data("courseList",courseList);
    }
}

View Code

在EduTeacherServiceImpl中实现getTeacherFrontList方法

//1 分页查询讲师的方法(另一种写法，需要全部分页数据)
    @Override
    public Map<String, Object> getTeacherFrontList(Page<EduTeacher> pageParam) {
        QueryWrapper wrapper = new QueryWrapper<>();
        wrapper.orderByDesc("id");
        baseMapper.selectPage(pageParam,wrapper);

        List<EduTeacher> records = pageParam.getRecords();
        long current = pageParam.getCurrent();
        long pages = pageParam.getPages();
        long size = pageParam.getSize();
        long total = pageParam.getTotal();

        boolean hasNext = pageParam.hasNext();//是否有下一页
        boolean hasPrevious = pageParam.hasPrevious();//是否有上一页


        //把分页数据获取出来，放到map集合
        Map<String, Object> map = new HashMap<String, Object>();
        map.put("items", records);
        map.put("current", current);
        map.put("pages", pages);
        map.put("size", size);
        map.put("total", total);
        map.put("hasNext", hasNext);
        map.put("hasPrevious", hasPrevious);

        //返回map
        return map;
    }

View Code

二、整合前端分页查询讲师页面【前端】

1、前端列表js

1.1、创建api

创建文件夹api，api下创建teacher.js，用于封装讲师模块的请求 42.首页讲师功能 - 文章图片

import request from '@/utils/request'
export default {
    //分页讲师查询的方法
    getTeacherList(page,limit) {
        return request({
            url: `/eduservice/teacherfront/getTeacherFrontList/${page}/${limit}`,
            method: 'post'
        })
    },

    //分页讲师查询的方法
    getTeacherInfo(id) {
        return request({
            url: `/eduservice/teacherfront/getTeacherFrontInfo/${id}`,
            method: 'get'
        })
    }
}

View Code

1.2、讲师列表组件中调用api

pages/teacher/index.vue 42.首页讲师功能 - 文章图片

<script>
import teacher from "@/api/teacher"
export default {
  asyncData({ params, error }) {
    return teacher.getTeacherList(1, 8).then(response => {
      console.log(response.data.data);
      return { data: response.data.data.map }
    });
  },
};
</script>

View Code

2、页面渲染

2.1、页面模板

<template>
  <div id="aCoursesList" class="bg-fa of">
    <!-- 讲师列表 开始 -->
    <section class="container">
      <section class="c-sort-box unBr">
        <div>
          <!-- 无数据提示 开始-->

          <!-- /无数据提示 结束-->

          <!-- 数据列表 开始-->

          <!-- /数据列表 结束-->
        </div>
        <!-- 公共分页 开始 -->

        <!-- /公共分页 结束 -->
      </section>
    </section>
    <!-- /讲师列表 结束 -->
  </div>
</template>

View Code

2.2、无数据提示

添加：v-if="data.total==0" 42.首页讲师功能 - 文章图片

<!-- /无数据提示 开始-->
<section class="no-data-wrap" v-if="data.total==0">
    <em class="icon30 no-data-ico">&nbsp;</em>
    <span class="c-666 fsize14 ml10 vam">没有相关数据，小编正在努力整理中...</span>
</section>
<!-- /无数据提示 结束-->

View Code

2.3、列表

<!-- /数据列表 开始-->
<article v-if="data.total>0" class="i-teacher-list">
    <ul class="of">
        <li v-for="item in data.items" :key="item.id">
            <section class="i-teach-wrap">
                <div class="i-teach-pic">
                    <a :href="'/teacher/'+item.id" :title="item.name">
                        <img :src="item.avatar" :alt="item.name" height="142" hright="142">
                    </a>
                </div>
                <div class="mt10 hLh30 txtOf tac">
                    <a :href="'/teacher/'+item.id" :title="item.name" class="fsize18 c-666">{{ item.name }}</a>
                </div>
                <div class="hLh30 txtOf tac">
                    <span class="fsize14 c-999" >{{ item.career }}</span>
                </div>
                <div class="mt15 i-q-txt">
                    <p class="c-999 f-fA">{{ item.intro }}</p>
                </div>
            </section>
        </li>
    </ul>
    <div class="clear"/>
</article>
<!-- /数据列表 结束-->

View Code

3、分页

3.1、分页方法

methods: {
    gotoPage(page){
        teacher.getTeacherList(page, 8).then(response => {
            this.data = response.data.data.map
        })
    }
}

View Code

3.2、分页页面渲染

<!-- 公共分页 开始 -->
<div>
  <div class="paging">
    <!-- undisable这个class是否存在，取决于数据属性hasPrevious -->
    <a
      :class="{undisable: !data.hasPrevious}"
      href="#"
      title="首页"
      @click.prevent="gotoPage(1)">首</a>
    <a
      :class="{undisable: !data.hasPrevious}"
      href="#"
      title="前一页"
      @click.prevent="gotoPage(data.current-1)">&lt;</a>
    <a
      v-for="page in data.pages"
      :key="page"
      :class="{current: data.current == page, undisable: data.current == page}"
      :title="'第'+page+'页'"
      href="#"
      @click.prevent="gotoPage(page)">{{ page }}</a>
    <a
      :class="{undisable: !data.hasNext}"
      href="#"
      title="后一页"
      @click.prevent="gotoPage(data.current+1)">&gt;</a>
    <a
      :class="{undisable: !data.hasNext}"
      href="#"
      title="末页"
      @click.prevent="gotoPage(data.pages)">末</a>
    <div class="clear"/>
  </div>
</div>
<!-- 公共分页 结束 -->

View Code

三、整合前端讲师详情页面【前端】

1、前端详情js

1.1、teacher api

api/teacher.js? ?上面已经定义好

1.2、讲师详情页中调用api

pages/teacher/_id.vue 42.首页讲师功能 - 文章图片

<script>
import teacherApi from '@/api/teacher'
export default {
  asyncData({ params, error }) {
    //params：相当于之前this.$route.params.id 等价 params.id
    return teacherApi.getTeacherInfo(params.id)
      .then(response => {
        return { 
          teacher: response.data.data.teacher,
          courseList: response.data.data.courseList 
        }
    })
  }
};
</script>

View Code

2、页面渲染

2.1、讲师基本信息模板

<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">
        <!-- 讲师基本信息 开始 -->

        <!-- /讲师基本信息 结束 -->
        <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)">&nbsp;</a>
            </section>
          </header>
          <!-- 无数据提示 开始-->

          <!-- /无数据提示 结束-->

          <!-- 课程列表 开始-->

          <!-- /课程列表 结束-->
        </div>
      </section>
    </section>
    <!-- /讲师介绍 结束 -->
  </div>
</template>

View Code

2.2、讲师详情显示

<!-- 讲师基本信息 开始 -->
<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 }}
                &nbsp;
                {{ 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>
<!-- /讲师基本信息 结束 -->

View Code

2.3、无数据提示

<!-- 无数据提示 开始-->
<section class="no-data-wrap" v-if="courseList.total==0">
    <em class="icon30 no-data-ico">&nbsp;</em>
    <span class="c-666 fsize14 ml10 vam">没有相关数据，小编正在努力整理中...</span>
</section>
<!-- /无数据提示 结束-->

View Code

2.4、当前讲师课程列表

<!-- 课程列表 开始-->
<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"
            target="_blank"
            class="course-title fsize18 c-333">{{ course.title }}</a>
        </h3>
      </div>
    </li>
  </ul>
  <div class="clear"/>
</article>
<!-- /课程列表 结束-->

View Code

内容总结

以上是互联网集市为您收集整理的42.首页讲师功能全部内容，希望文章能够帮你解决42.首页讲师功能所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1009732.html

来源：【匿名】

【上一篇】NAT 【下一篇】关于IE的RegExp.exec的问题

更多 ►

【42.首页讲师功能】教程文章相关的互联网学习教程文章

如何正确的使用缩放功能详解InDesign CS中的线型缩放【图】

线型控制是我们在版面制作中经常遇到的问题。尤其是如何正确的使用缩放功能，是大家必须掌握的。本文就向大家介绍InDesign CS中的线型缩放，希望对大家有所帮助！　　缩放功能看起来并不难，但实际应用中如果稍不留神就会出现错误。在使用中我们要注意以下几点：　　１）尽量使用InDesign工具拦中的缩放工具　　一般人都喜欢用手动方式进行缩放，其实这种习惯未必很好，原因是很难对线型进行精确的控制。所以我们在这里还是推荐大家...

IP-guard功能详解——打印管控【图】

IP-Guard打印管控功能可以实现以下功能：打印操作记录 IP-guard可以详细记录所有打印操作的时间、终端、用户、应用程序、页数、打印机类型和名称，并能够根据时间，文件名，计算机等信息进行查询。 2. 打印内容备份 ? IP-guard可以完整记录在所有类型打印机上的文档打印映像，查看打印的原始内容。打印权限控制 ? IP-guard可以控制终端打印权限，限制终端对指定类型打印机或指定打印机的使用；控制应用程序打印权限，阻止非法应...

MyReport报表引擎2.6.5.0新功能【图】

关于Domino里面的Ftsearch功能的使用（未完善）【代码】

最近在写一个查找文件的接口时，发现别人用Ftsearch去查找，居然还可以进行全文的检索，觉得挺厉害的，所以网上找了一下相关的资料。不过我对于Ftsearch如何写检索条件，还是有点模糊，所以借着写接口代码的时候顺便试了一下，要是有不对的地方，恳请斧正。部分代码如下： '将当前用户加入到搜索条件If struiuser = "" Thentempstr = ""Elsevuiuser = Evaluate({@Name([CN];"} & struiuser & {")})tempstr = {FIELD Reader="} & v...

小程序分享功能【图】

小程序web-view支持的jssdk能力支持的jssdk的api比较少，并不包括分享api，分享api对公众号是开放的，如下：结论：在h5页面中点击按钮来分享是不能实现的分享到朋友圈目前只在andriod上支持：解决办法： 1、跳转小程序原声页面，使用小程序原声button按钮实现分享2、小程序右上角按钮分享实现代码： 1、h5页面代码：（index.js是小程序的页面中，从分享进入的h5的落地页，对应小程序的share目录）//该方法在页面create完成...

VMware实现控制台功能（VMware Remote Console）【代码】

说明：刚开始一脸懵逼，google了一些资料，发现基本没有能快速落地的，自己做完后梳理了一下发上来供大家参考。　　如果帮到你了，请点赞评论关注，以资鼓励，多谢~ 实现VMware控制台功能主要有两种方式，第一种是直接在Web页面打开，第二种是使用VMware Remote Console官方工具打开控制台；第一种用户体验更好，第二种开发起来更加方便快捷。由于项目时间原因，暂选择第二种，后期迭代使用第一种方式。。。简述：1、从vClient...

独家功能分享：免费开源ERP Odoo 支持SQL在线的BI报表工具设置【图】

引言这么多年来ERP领域面对客户最多的抱怨是无法自己自主的在线通过SQL语句定制一张自己个性化的报表，且将这样的报表利用类似ERP系统界面、权限及动态实时的呈现给到其他的用户共享，往往我们了解到一些企业一般采用如下两种方案实现：拥有IT资源的企业：利用专业IT自主的资源，通过连接数据库的方式，编写SQL语句来定期的汇总数据信息，首先数据是定期的，不是实时的，同时也不是能通过既定的界面能够收到这样的数据。往往通过邮...

每天学点Shiro-登录功能demo【代码】【图】

1. 用shiro实现登录和登出的接口@RequestMapping(value = "/login.do",method = RequestMethod.POST)public String login(@RequestParam("username") String username,@RequestParam("password") String password){Subject subject = SecurityUtils.getSubject();if(!subject.isAuthenticated()){AuthenticationToken token = new UsernamePasswordToken(username,password) ;try {subject.login(token);} catch (AuthenticationEx...

Kettle_使用资源库功能把ktr元数据统一存储到数据库中【图】

深蓝的blog：http://blog.csdn.net/huangyanlong/article/details/46117065 【目标】利用kettle中的资源库功能，把ktr文件统一存储到数据库中，方便本地进行版本管理 ktr：使用kettle编辑的转换，被称为ktr；转换：添加功能模块，实现ETL的项目称为转换。一路确定后，点击ok完成资源库的创建，如下：创建完成后，先进资源库看一眼效果，如下图：可以对资源库进行设置及创建目录，如下：下面往资源库里添加一个ktr，如下：设计...

SQLAlchemy-Utils，提供choice功能【代码】

sqlalchemy_utils import ChoiceTypeBase = declarative_base()class Xuan(Base):__tablename__ = ‘xuan‘types_choices = ((1,‘欧美‘),(2,‘日韩‘),(3,‘国产‘),)id = Column(Integer,primary_key=True,autoincrement=True)name = Column(String(64))types = Column(ChoiceType(types_choices,Integer()))__table_args__ = {‘mysql_engine‘:‘Innodb‘,‘mysql_charset‘:‘utf8‘,}查询：result_list = session.query(Xua...

基于JSP+Serlvet+JDBC的开发（4）-- 继续TypeSerlvet的save功能【代码】

<html>2 <head>3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">4 <%@ include file="top.jsp"%>5 <title>商品展示平台</title>6 </head>7 <body>8 <div>9 <div><a href="${root}/send?url=type-save.jsp">添加商品类型</a></div> 10 <c:forEach items="${entities}" var="obj"> 11 <div> 12 <a href="${root}/goods?action=tid&tid=${obj.id}">${obj.na...

MP SQL 分析打印功能【代码】

MP 可以实现 SQL 的分析打印功能,输出sql执行时间以及真实执行的SQL语句 step1：引入p6spy 依赖引入 <dependency><groupId>p6spy</groupId><artifactId>p6spy</artifactId><version>3.8.2</version> </dependency>step2：application.yml 配置datasource:driverClassName: com.p6spy.engine.spy.P6SpyDriverurl: jdbc:p6spy:postgresql://10.25.85.145:5432/cvii?useUnicode=true&characterEncoding=utf8 step3:添加p6sy的配置文件...

微信支付功能点【图】

功能测试之【代码】【图】

作为一名测试人员，面试造火箭，进去拧螺丝这句话是不是经常听到呢，是不是在大家眼里，功能测试就是完全没有任何技术含量，完全学不到东西呢？在这里，小编并不这么认为。接下来为大家分享一下测试过程中学会的一个小技巧。假设让你去验证某个页面的数据是否正确，那你是不是需要知道数据存储在哪些表里面，要了解页面的明细都是从哪里查出来的，有没有包含什么过滤条件之类的，如果每次都去问开发的话，问多了会不会让人觉得...

首页 / 更多教程 / 42.首页讲师功能

42.首页讲师功能

内容导读

内容图文

一、讲师列表和讲师详情【后端】

分页查询讲师和讲师详情接口

二、整合前端分页查询讲师页面【前端】

1、前端列表js

1.1、创建api

1.2、讲师列表组件中调用api

2、页面渲染

2.1、页面模板

2.2、无数据提示

2.3、列表

3、分页

3.1、分页方法

3.2、分页页面渲染

三、整合前端讲师详情页面【前端】

1、前端详情js

1.1、teacher api

1.2、讲师详情页中调用api

2、页面渲染

2.1、讲师基本信息模板

2.2、讲师详情显示

2.3、无数据提示

2.4、当前讲师课程列表

内容总结

内容备注

内容手机端

【42.首页讲师功能】教程文章相关的互联网学习教程文章

更多教程 - 最新教程

更多教程 - 最热教程