开发者学堂课程【微服务+全栈在线教育实战项目演练(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>
<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
return
active: e
methods:
next() f
if (this.activet+ > 2) this.active .0;
第一个里边的,点下一步它选中这个,选中它选中用的这个形式跟他类似,就是点这个美不往下选中,这是一个步骤调,每次点下一步触发事件,到这个 nice 法中er nice 让这个叫 active,每次加一就可以了,一个叫冒号,Active 是用到那个之前说那个单向绑定,另一个值当,这个值等于一,
那第一步就选中它等于二,第二步选中等于三,第三步选中,这里边加个默认值,然后每次加一,最终这个结果就是123,让每部都选中,它是第一步选中,加一就是他,二是他三选中。所以要做的话很简单,也设立一个 active,然后它的值是一试二试三,分别对不同步骤就可以做这个代码。
首先第一个音符隐秘这个部分,把他就直接拿过来了。把页面部分,直接复制到这个 info 页面,其他的先关掉,就先保留个 info 页面,然后 info 页面中看一下里面这个地址,看里边等于一,那这里边第一个就会选中,就是填写课程信息,第二个大纲,第三个,我们要审核叫最终发布。
然后写完之后下面按钮要保存并下一步,当然点它之后会到第二步,把那个 Java 的结构给他写下,在结构中还是之前也是那个结构。加上这么一个叫 data,然后第二部分是一个叫 critical。
就是页面渲染之前执行,还有第三个叫那个 methods。所以咱们就按照这个过程把这个课程发布,按照三步做到,这是写的一个简单的页面效果。
就是这么一个基本构成仙家课程信息,然后加这个课程大纲,最终确认之后无误,最终发布主要流程。