课程详情功能前端整合 | 学习笔记

简介: 简介:快速学习课程详情功能前端整合

开发者学堂课程【微服务+全栈在线教育实战项目演练(SpringCloud Alibaba+SpringBoot):课程详情功能前端整合】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/667/detail/11480


课程详情功能前端整合

 

内容介绍:

一、定义调用方法

二、调用接口中的方法进行查询

三、成果展示

 

一、 定义调用方法

1. 对方法进行调用

//查询所有分类的方法

getA11Subject( ) {return request({

ur1: " / eduservice/ subject/ getA1lSubject ',

method: 'get'

})

},

//课程详情的方法

getCourseInfo( id){return request({

url: " / eduservice/coursefront/getFrontCourseInfo/ " +id,

method: "get"

})

}

 

二、调用接口中的方法进行查询

1.定义之后,在页面中进行调用

<script>

import courseApi from '@/ api/course'

export default {

asyncData({ params,error }) {

return courseApi.getCourseInfo(params.id)

.then( response => {

return{

coursewebVo:response.data.data.coursewebVo,

chaptervideoList: response.data.data.chaptervideoList

}

})

}

};

< / script>

2.最终在页面中显示

<aside class="thr-attr-box">

<ol class="thr-attr-ol c learfix">

<li>

<p> </p>

<aside>

< span class="c-fff f-fM">购买数

</span><br>

<h6 c lass="c-fff f-fM mt10">{{coursewebvo.buyCount}</h6>

< / aside>

< / li>

<li>

<p> </p>

<aside>

<span class="c-fff f-fM">课时数< / span><br>

<h6 c lass="c-fff f-fM mt 10">20</h6>

< / aside>

< /li>

3.先遍历章节,再遍历每个章节中的小节

代码实现:

<l--文件目录-->

<li class="lh-menu-stair" v-for="chapter in chapterVideoList" : kev="chapter.id">

<a href="javascript: void(0)" :title="chapter.title" class="current-1">

<em class="1h-menu-i-1 icon18 mr10"></em>{{chapter.title}}

</a>

<ol class="" 1h-menu-ol" style="display: block;">

<li class="1h-menu- second ml30">

<a href="#”title>

<span c lass="fr“>

<i class="iree-icon vam mr10">免费试听</i>

< / span>

<em class="1h-menu-i-2 icon16 mr5"> </ em>第一节

< /a>

< / li>

<li class=" 1h-menu- second m130">

<a href="” title class="current-2">

<em class="1h-menu-i-2 icon16 mr5"> </em>第二节

</ a>

< /li>

 

三、 成果展示

1.点击课程

image.png

2.点击任意课程详情

image.png

3.修改课程章节

image.png

4.修改后课程的详情页面

image.png

存在的问题:

表中的数据被原样输出了,即<p>22222</p>。但<p>标签是一个行内标签,在voe中,v-html 表示可以把内容中的标签翻译过来,然后显示,

正确的页面如下:

image.png

目录
打赏
0
0
0
0
55
分享
相关文章
惊!这些前端技术竟然能让你的网站实现个性化推荐功能!
【10月更文挑战第30天】随着互联网技术的发展,个性化推荐已成为提升用户体验的重要手段。前端技术如JavaScript通过捕获用户行为数据、实时更新推荐结果等方式,在实现个性化推荐中扮演关键角色。本文将深入解析这些技术,并通过示例代码展示其实际应用。
155 4
前端中的“+”连接符,居然有鲜为人知的强大功能!
【10月更文挑战第9天】前端中的“+”连接符,居然有鲜为人知的强大功能!
71 0
前端中的“+”连接符,居然有鲜为人知的强大功能!
(WEB前端编辑DWG)在线CAD如何实现图形识别功能
mxcad 提供的图形识别功能可帮助用户快速识别和提取 CAD 图纸中的各种图形,如直线、多段线、弧线、圆及图块,显著提升设计效率。此功能不仅适用于图形分类,还能进行数量统计和快速定位,减少手动操作。用户可通过 API 进行二次开发,自定义识别逻辑。具体步骤包括打开在线示例、选择识别功能、设置识别参数并开始识别。更多开发文档请关注公众号:梦想云图网页 CAD。
前端开发必备:requestAnimationFrame、setInterval、setTimeout——功能解析与优劣对比
前端开发必备:requestAnimationFrame、setInterval、setTimeout——功能解析与优劣对比
250 0
前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能
前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能
590 0
node使用token来实现前端验证码和登录功能详细流程[供参考]=‘很值得‘
本文介绍了在Node.js中使用token实现前端验证码和登录功能的详细流程,包括生成验证码、账号密码验证以及token验证和过期处理。
133 0
node使用token来实现前端验证码和登录功能详细流程[供参考]=‘很值得‘
深入解析前端构建利器:webpack核心概念与基本功能全览
深入解析前端构建利器:webpack核心概念与基本功能全览—
60 0
在前端开发中,webpack 作为一个强大的模块打包工具,为我们提供了丰富的功能和扩展性
【9月更文挑战第1天】在前端开发中,Webpack 作为强大的模块打包工具,提供了丰富的功能和扩展性。本文重点介绍 DefinePlugin 插件,详细探讨其原理、功能及实际应用。DefinePlugin 可在编译过程中动态定义全局变量,适用于环境变量配置、动态加载资源、接口地址配置等场景,有助于提升代码质量和开发效率。通过具体配置示例和注意事项,帮助开发者更好地利用此插件优化项目。
109 13

热门文章

最新文章

  • 1
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    16
  • 2
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    8
  • 3
    从前端视角聊聊通义灵码使用经验,如何更好地提升研发效率
    144
  • 4
    详解智能编码在前端研发的创新应用
    6
  • 5
    巧用通义灵码,提升前端研发效率
    18
  • 6
    智能编码在前端研发的创新应用
    11
  • 7
    VSCode AI提效工具,通义灵码前端开发体验
    19
  • 8
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    11
  • 9
    课程预告|前端开发者如何用好通义灵码,这份实战指南请查收
    82
  • 10
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    3
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等