在线教育项目-day08【大纲返回进行修改课程信息并进行修改】

1.controller

    //根据课程id查询课程基本信息
    @GetMapping("getCourseInfo/{courseId}")
    public R getCourseInfo(@PathVariable String courseId) {
        CourseInfoVo courseInfoVo = courseService.getCourseInfo(courseId);
        return R.OK().data("courseInfoVo",courseInfoVo);
    }

    //修改课程信息
    @PostMapping("updateCourseInfo")
    public R updateCourseInfo(@RequestBody CourseInfoVo courseInfoVo) {
        courseService.updateCourseInfo(courseInfoVo);
        return R.OK();
    }

2.service

    //根据课程id查询课程基本信息
    CourseInfoVo getCourseInfo(String courseId);

    //修改课程信息
    void updateCourseInfo(CourseInfoVo courseInfoVo);

3.serviceImpl

    //根据课程id查询课程基本信息
    @Override
    public CourseInfoVo getCourseInfo(String courseId) {
        //1 查询课程表
        EduCourse eduCourse = baseMapper.selectById(courseId);
        CourseInfoVo courseInfoVo = new CourseInfoVo();
        BeanUtils.copyProperties(eduCourse,courseInfoVo);

        //2 查询描述表
        EduCourseDescription courseDescription = courseDescriptionService.getById(courseId);
        courseInfoVo.setDescription(courseDescription.getDescription());

        return courseInfoVo;
    }

    //修改课程信息
    @Override
    public void updateCourseInfo(CourseInfoVo courseInfoVo) {
        //1 修改课程表
        EduCourse eduCourse = new EduCourse();
        BeanUtils.copyProperties(courseInfoVo,eduCourse);
        int update = baseMapper.updateById(eduCourse);
        if(update == 0) {
            throw new onlineEduException(20001,"修改课程信息失败");
        }

        //2 修改描述表
        EduCourseDescription description = new EduCourseDescription();
        description.setId(courseInfoVo.getId());
        description.setDescription(courseInfoVo.getDescription());
        courseDescriptionService.updateById(description);
    }

前端部分

书写api

    //根据课程id查询基本信息
    getInfoBycourseId(couserId){
        return request({
            url: '/eduservice/edu-course/getCourseInfo/'+couserId,
            method: 'get'
          })
    },
    //修改课程信息
    updateCourseInfo(couserInfo){
        return request({
            url: '/eduservice/edu-course/updateCourseInfo/',
            method: 'post',
            data: couserInfo
          })
    }

书写vue

返回一个id

    
    previous() {
      this.$router.push({ path: "/course/info/"+this.courseId });
    },

在info页面数据回显

import subject from '@/api/subject/subject'
export default {
    data() {
        return {
            saveBtnDisabled:false,
            courseInfo:{
                title: '',
                subjectId: '',//二级分类id
                subjectParentId:'',//一级分类id
                teacherId: '',
                lessonNum: 0,
                description: '',
                cover: '/static/02.jpg',
                price: 0
            },
            BASE_API: process.env.BASE_API, // 接口API地址
            teacherList:[],//封装所有的讲师
            subjectOneList:[],//一级分类
            subjectTwoList:[],//二级分类
            courseId:''
        }   
    },
    created() {
        //获取路由id值
        if(this.$route.params && this.$route.params.id){
            this.courseId=this.$route.params.id
            this.getInfo()

        }
        //初始化所有讲师
        this.getListTeacher()
        //初始化一级分类
        this.getOneSubject()
    },
    methods:{
        //根据课程id查询信息
        getInfo(){
            course.getInfoBycourseId(this.courseId)
                .then(response=>{
                    this.courseInfo=response.data.courseInfoVo
                })

        },

 

 

 可以看到我们的一些数据有问题

首先解决我们的一级分类不显示问题

 可以看到数据库没有插入一级分类的id，返回的json数据也是没有的

 我发现我的实体类中没有定义这个值定义一下重新进行测试

 然后解决我们的二级分类的问题

更改getInfo函数

 getInfo(){
            course.getInfoBycourseId(this.courseId)
                .then(response=>{
                    this.courseInfo=response.data.courseInfoVo
                    //查询出所有的分类
                    subject.getSubjectList()
                        .then(response=>{
                            //获取所有的一级分类
                            this.subjectOneList=response.data.items
                            //遍历一级分类id是否一样
                            for(var i=0;i<this.subjectOneList.length;i++){
                                //获取每个一级分类
                                var oneSubject=this.subjectOneList[i]
                                if(this.courseInfo.subjectParentId == oneSubject.id) {
                                    this.subjectTwoList=oneSubject.children
                                }
                            }
                        })
                    this.getListTeacher()    
                })

        },

 可以看到数据都回显了

然后进行修改功能

修改前端函数

 addCourse(){
            course.addCourseInfo(this.courseInfo)
                .then(response => {
                    //提示
                    this.$message({
                        type: 'success',
                        message: '添加课程信息成功!'
                    });
                    //跳转到第二步
                    this.$router.push({path:'/course/chapter/'+response.data.courseid})
                })
        },
        updateCourse(){
                course.updateCourseInfo(this.courseInfo)
                .then(response => {
                    //提示
                    this.$message({
                        type: 'success',
                        message: '修改课程信息成功!'
                    });
                    //跳转到第二步
                    this.$router.push({path:'/course/chapter/'+this.courseId})
                })

        },
        
        saveOrUpdate() {
            if(!this.courseInfo.id){
                this.addCourse()
            }else{
                this.updateCourse()
            }
            
        }