开发者学堂课程【微服务+全栈在线教育实战项目演练(SpringCloud Alibaba+SpringBoot):课程管理-添加课程信息前端(2)】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/667/detail/11370
课程管理-添加课程信息前端(2)
内容介绍
一,编写表单页面,实现借口调用
二,添加之后返回课程 id
一,编写表单页面,实现借口调用
<el-form label -width=" 120px" ,
<el-form-item label-"课程标题">
<el-input v-model-" courseInfo. title" placeholder="
示例:机器学习项目课:从基础到搭建项目视频课程。
专业名称注意大小写"/></el- form- item>
<!-- 所属分类TODO --〉
<!--课程讲师TODO --〉
<el-form- item label-" i,iag
elnput-tumber :min-"o" v-ol-lcursenfro less controls positioritiplaceholder-"请填写课程的总课时数"/>
</el- form- item>
把这个 yellow phone 部分给他替换掉,换成这个表单。
这个就拿过来了之后,看一下这表单中内容在里边,首先第一个有课程的名称或者课程的标题,然后下面有分类,讲师看到里面还有个课时数,然后有价格等等。
首先点击课程管理,然后点添加课程,他就到这个页面,在页面中目前有这么一个表单,有些基础值,输入一下,比如说第一个输一个课程标题,一个课程名称随便写个这个0302,这是第一个,第二个课时数来个60课时,第四个价格来个两块钱,这样的话把这个数据都填完了,填完之后咱点保存,并下一步看提示单位是成功,同时跳转到第二步,这个过程应该就正确了,到表里面看一下。
描述里面入门课程,这个叫5985没错,再看课程里边那个值。
时间排下去找到这个值,0302这个课程这些都可以,这些只没有做到污染行为,后面都会加上,所以看到这里边的课程的基本信息,就做了一个初步实现。
二,添加之后返回课程 id
@Autowired
private EduCourseService courseService:
//添加课程基本信息的方法
@PostMapping ( addCourseInfo' )
public R addCourseInfo (eRequestBody CourseInfoVo courseInfoVo)[
// 返回添加之后课程id,为J后面添加大纲使用
String id = courseService. saveCourseInfo (courseInfoVo) :return R. ok(). data(" courseId", idh.
后面是没有返回值,要加个返回值,返回添加之后的课程 ID,是为了后面添加那个课程的大纲。让他来个返回值,就来一个词汇叫 ID。这个方法就是写,然后下面加上一个返回一下,这个 ID 咱需要完善,然后这个做到之后,把思维中的方法改一下,改这个方法,这个方法返回一个 ID,这是思维的一个 interface。
然后在实现类中把 ID 返回 ID 就是把这个返回就可以,直接就扔一个课程 ID需要返回,这不需要完善,如果不这么做,那后面的章节小结,包括确认没法做,因为它没有快递,不知道要向哪边的内容。
把这个接口完善了之后,来到页面中,页面肯定需要改一下。这个给他重启一下这叫。
然后来到页面中,在页面中其实主要就是改代码。刚才写的时候 response 没有取值,而现在 response 里面,可以把它那个课程 ID取到,然后再做操作。比如就这么想直接找位置,或者外面我这边直接加上一个。
地这就是得到接口返回的快递然后传到这个路由中去。
save0rUpdate() {
course . addCourseInfo( this.courseInfo)
. then(response => {
//提示
this. $message({
type:success' ,
message:'添加课程信息成功!'
});
//跳转到第二步
this. $router .push( {path: /course/chapter/ +response .data .courseId})