课程管理-添加课程信息前端(1) | 学习笔记

简介: 简介:快速学习课程管理-添加课程信息前端(1)

开发者学堂课程【微服务+全栈在线教育实战项目演练(SpringCloud Alibaba+SpringBoot):课程管理-添加课程信息前端(1)】学习笔记,与课程紧密联系,让用户快速学习知识。

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


课程管理-添加课程信息前端(1)

 

添加课程管理路由

找到一个叫 S2C ROOT 里面,一个叫 index..js 把这个点开在里边,仿照之前这些方式加一个就可以了,比如说做个添加。

的位置在里边改个名字,因为做的是课程相关的,所以这个 cos,包括这个叫 cos在里边的第一个,做到这肯定叫课程管理。

课程管理中第一个功能叫做课程列表,就这个例子,这个路径就改然后第二个叫做添加课程,或者教课程发布,就要参加课程,所以把这个路由给他就快速加上了,这是第一部分。

第二完之后,到页面中,来看一下这个位置,课程管理有课程列表,还有这个叫添加课程,这是第一部分添加上一个路由。快速完成

template><div class-" app-containen"><h2 style-"text -align: center;">发布新课程</h2〉<el-steps :active-"1" process-status-"wait" align-center style="margin-bottom: 40px;"><el-step title="填写课程基本信息"/><el-step title-" 创建课程大纲"/><el-step title="提交审核"/></el-steps><el-form label -width-"120px"><el-form-item><el-button :disabled="saveBtnDis abled" type="primary" @click="next" >保存下一步 </el-button></el-form-item></el-form>

image.png

<el-steps :active="active" finish-status-"success"»

<el-step title- "步骤1></el-step>

<el-step title-"步骤2"></el-step>

<el-step title=*歩骤3->く/el-step>

</el -steps>

<el-button style- "margin-top: 12px; " @click-- next">T-b</el-button>

<script>

export defàult (data() f

returnactive: emethods:

next() fif (this.activet+ > 2) this.active .0;

第一个里边的,点下一步它选中这个,选中它选中用的这个形式跟他类似,就是点这个美不往下选中,这是一个步骤调,每次点下一步触发事件,到这个 nice 法中er nice 让这个叫 active,每次加一就可以了,一个叫冒号,Active 是用到那个之前说那个单向绑定,另一个值当,这个值等于一,

那第一步就选中它等于二,第二步选中等于三,第三步选中,这里边加个默认值,然后每次加一,最终这个结果就是123,让每部都选中,它是第一步选中,加一就是他,二是他三选中。所以要做的话很简单,也设立一个 active,然后它的值是一试二试三,分别对不同步骤就可以做这个代码

首先第一个音符隐秘这个部分,把他就直接拿过来了。把页面部分,直接复制到这个 info 页面,其他的先关掉,就先保留个 info 页面,然后 info 页面中看一下里面这个地址,看里边等于一,那这里边第一个就会选中,就是填写课程信息,第二个大纲,第三个,我们要审核叫最终发布

然后写完之后下面按钮要保存并下一步,当然点它之后会到第二步,把那个 Java 的结构给他写下,在结构中还是之前也是那个结构。加上这么一个叫 data,然后第二部分是一个叫 critical。

就是页面渲染之前执行,还有第三个叫那个 methods所以咱们就按照这个过程把这个课程发布,按照三步做到,这是写的一个简单的页面效果

就是这么一个基本构成仙家课程信息,然后加这个课程大纲,最终确认之后无误,最终发布主要流程。

相关文章
|
存储 前端开发 JavaScript
课程管理-修改课程信息(前端) | 学习笔记
简介:快速学习课程管理-修改课程信息(前端)
80 0
课程管理-修改课程信息(前端) | 学习笔记
|
SQL XML 运维
课程管理-课程信息确认 | 学习笔记
简介:快速学习课程管理-课程信息确认
76 0
课程管理-课程信息确认 | 学习笔记
|
JavaScript 前端开发 Java
课程管理-课程列表 | 学习笔记
快速学习课程管理-课程列表
143 0
课程管理-课程列表 | 学习笔记
|
前端开发 Java 数据库
课程管理-添加课程分析 | 学习笔记
简介:快速学习课程管理-添加课程分析
71 0
课程管理-添加课程分析 | 学习笔记
|
前端开发 数据库 开发者
课程管理-修改课程信息(后端) | 学习笔记
简介:快速学习课程管理-修改课程信息(后端)
115 0
课程管理-修改课程信息(后端) | 学习笔记
|
人工智能 Java 开发者
课程管理-课程发布流程说明 | 学习笔记
快速学习课程管理-课程发布流程说明
173 0
课程管理-课程发布流程说明 | 学习笔记
|
开发者 微服务
课程管理-删除课程(后端) | 学习笔记
简介:快速学习课程管理-删除课程(后端)
192 0
课程管理-删除课程(后端) | 学习笔记
|
前端开发 Java 测试技术
课程管理-添加课程信息前端完善(显示讲师) | 学习笔记
简介:快速学习课程管理-添加课程信息前端完善(显示讲师)
131 0
课程管理-添加课程信息前端完善(显示讲师) | 学习笔记
|
存储 SQL 前端开发
课程管理-添加课程信息完善 | 学习笔记
简介:快速学习课程管理-添加课程信息完善
151 0
课程管理-添加课程信息完善 | 学习笔记
|
前端开发 API 数据库
课程管理-添加章节(前端) | 学习笔记
简介:快速学习课程管理-添加章节(前端)
90 0
课程管理-添加章节(前端) | 学习笔记