2024年最全Day07-添加课程信息前端部分（1）---p109、110，附高频面试题合集

最后

本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端视频资料：

},

methods:{

saveOrUpdate(){

//跳转到下一步

this.$router.push({path:‘/course/chapter/1’})

}

}

}

2.2、完善前端chapter.vue(完善大纲信息页面)

---

效果图：

2.2.1、前端代码：

发布新课程

<el-button @click=“previous”>上一步

<el-button :disabled=“saveBtnDisabled” type=“primary” @click=“next”>下一步

2.2.2、js代码

2.3、完善前端publish.vue(课程发布页面)

---

效果：

2.3.1、前端代码：

发布新课程

<el-button @click=“previous”>返回修改

<el-button :disabled=“saveBtnDisabled” type=“primary” @click=“publish”>发布课程

2.3.2、js代码

3、添加api接口course.js，在前端页面中调用后端接口

==============================================================================================

3.1、定义course.js 接口中的代码

---

import request from ‘@/utils/request’

export default {

//1、添加课程信息

addCourseInfo(courseInfo){

return request({

url:‘eduservice/course/addCourseInfo’,

method:‘post’,

data:courseInfo

})

}

}

3.2、完善前端info.vue的页面：

---

3.2.1、完善表单：

完善后效果图：

3.2.2、定义表单中数据

courseInfo:{

title: ‘’,

subjectId: ‘’,

teacherId: ‘’,

lessonNum: 0,

description: ‘’,

cover: ‘’,

price: 0

}

3.2.3、引入api

import course from ‘@/api/edu/course’

3.2.4、完善方法：

course.addCourseInfo(this.courseInfo)

.then(response=>{

//提示

this.$message({

type:‘success’,

message:‘添加课程信息成功’

});

//跳转到下一步

this.$router.push({path:‘/course/chapter/1’})

})

完善后info.vue页面代码:

发布新课程

元

<el-button :disabled=“saveBtnDisabled” type=“primary” @click=“saveOrUpdate”>保存并下一步