12 课程页-组件布局: https://xuexiluxian.cn/blog/detail/93dd86680c274b4ca0469f52c0c48fc4
13 课程页-课程方向和课程分类数据渲染 : https://xuexiluxian.cn/blog/detail/ddd0c4550ac440ff978201c4c959517c
14 课程页-请求课程数据+分页 : https://xuexiluxian.cn/blog/detail/cbeb396e6cdc4da58a89a8756d978f2c
15 课程页-分类筛选条件逻辑 : https://xuexiluxian.cn/blog/detail/40340e1ebc7e4115a74a2fa285c6271f
16 课程页面-筛选免费课程和会员课程 : https://xuexiluxian.cn/blog/detail/d9a9dc665c98426bb385ed4ac665d840
17 课程页-课程条件筛选 : https://xuexiluxian.cn/blog/detail/33a95b867c004c02891ab3c03ddb8df4
18 课程详情页-布局 : https://xuexiluxian.cn/blog/detail/fbc1891af8bb4da9b988ae8458cc9c43
19 课程详情页-调整数据 : https://xuexiluxian.cn/blog/detail/80148066c35a45158a8827a402085b7c
20 课程详情页-渲染数据 : https://xuexiluxian.cn/blog/detail/122aaca759e3435b81fa197e3cbdadb3
一 从首页跳转到课程页
1.1 先创建课程页组件:Course.vue
目录:src/views/Course.vue
1.2 增加对应路由
目录:src/router/index.js
3 修改公共Header组件,增加跳转
目录:src/components/common/Header.vue
***注意:vue-router4.x版本针对于<router-link>去除了tag属性。
二 课程页组件(Course.vue)布局
1 代码:用el-tag
本身el-tag是有边框的,需要我们进行样式的改写,达到 自己想要的效果
.category-poniter {
height: 25px;
line-height: 25px;
margin: 10px 5px;
cursor: pointer;
border: none;
background: rgba(44, 128, 255, 0.1);
color: #2c80ff;
}
.category-poniter-item {
height: 25px;
line-height: 25px;
margin: 10px 5px;
cursor: pointer;
border: none;
background: none;
color: rgba(81, 87, 89, 1);
}
2 课程方向:
css让字等距分开的方法:可以利用letter-spacing属性来实现,如【letter-spacing:10px;】
3 添加换行
再分成两个div,进行flex布局:
4 导航栏
5 单选框
用element-ui d的radio
<el-radio-group v-model="radio1">
<el-radio label="1" size="large">免费课程</el-radio>
<el-radio label="2" size="large">会议课程</el-radio>
</el-radio-group>
6 价格的上下键使用图标
import { CaretTop, CaretBottom } from '@element-plus/icons-vue'
<div class="arrow">
<el-icon><caret-top /></el-icon>
<el-icon><caret-bottom /></el-icon>
</div>
7不能用dispaly:flex justify-content: space-between; 不够五个会分开
解决:
给每一个item 添加margin-right,margin-bottom, 4n倍数的去掉margin-right
三 调用接口:
3.1 初始化
条件查询列表:
第一行是一级数据,
第二行是二级数据!!(根据一级分类id进行查询)。默认进来是查所有二级数据,传-1 查所有
第三行是死数据,直接渲染
课程列表查询:
分页查询 查询第一页数据: page:1 pagesize:8
3.1.1 条件查询展示
3.1.2 分页查询列表
分页使用element-ul的
3.2 筛选
15 课程页-分类筛选条件逻辑_WEB前端_前端课程_前端学习路线_小鹿线
课程筛选条件分为三种情况:一级分类、二级分类、课程难度,逻辑如下:
1、直接进入课程页,展示所有一级、二级、课程难度
2、如果点击了一级,展示对应一级下的二级并展示此一级下所有课程
3、如果直接点击二级,那么一级不动,展示对应二级所有课程
4、点击一级、二级、课程难度,当前的class类要对应添加
3.2.1 数据控制
3.2.2 样式控制
//筛选
let currentType = reactive({
fcategory: { id: '' },
scategory: { id: '' },
clevel: { id: '' }
})
3.3 免费课成和会员课程
初始化,不选中
切换: 使用change事件
2.6 课程条件筛选
https://xuexiluxian.cn/blog/detail/33a95b867c004c02891ab3c03ddb8df4
价格使用了两个图标 上下图标
三 课程详情页
19 课程详情页-调整数据 : https://xuexiluxian.cn/blog/detail/80148066c35a45158a8827a402085b7c
测试,点击列表。看是否进去详情页
3.1 布局
1 面包屑
2 导航栏
3按钮
4列表
3.2 展示数据
1先渲染出来【章节列表】【下载列表】
进入课程详情页,拿到课程id
通过路由参数拿到
//课程id
import { useRoute } from 'vue-router'
let route = useRoute();
let courseId = route.params.id;
渲染: 章节展示是个二维数组
2 由变量来控制展示【章节列表】还是【下载列表】
3 控制导航的样式切换
还是该变量控制样式
点击章节: 变量改为true, 样式为ture展示样式
点击下载资料: 变量给位false,样式为false 展示样式
4 下载资料的东西可能没有,需要我们进行判断展示
看数组是否为空,为空展示提示语