Day07-添加课程信息前端部分（1）---p109、110

最新推荐文章于 2022-01-08 19:37:21 发布
最新推荐文章于 2022-01-08 19:37:21 发布
阅读量478 收藏
点赞数
分类专栏： 在线教育项目
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46112274/article/details/114580189
版权

添加课程信息前端

1、添加路由

在这里插入图片描述
在这里插入图片描述路由代码：

{
    path: '/course',
    component: Layout,
    redirect: '/course/list',
    name: '课程管理',
    meta: { title: '课程管理', icon: 'example' },
    children: [
      {
        path: 'list',
        name: '课程列表',
        component: () => import('@/views/edu/course/list'),
        meta: { title: '课程列表', icon: 'table' }
      },
      {
        path: 'info',
        name: '添加课程',  
        component: () => import('@/views/edu/course/info'),
        meta: { title: '添加课程', icon: 'tree' }
      },
      {
        path: 'info/:id',
        name: 'EduCourseInfoEdit',
        component: () => import('@/views/edu/course/info'),
        meta: { title: '编辑课程基本信息', noCache: true },
        hidden: true
      },
      {
        path: 'chapter/:id',
        name: 'EduCourseChapterEdit',
        component: () => import('@/views/edu/course/chapter'),
        meta: { title: '编辑课程大纲', noCache: true },
        hidden: true
      },
      {
        path: 'publish/:id',
        name: 'EduCoursePublishEdit',
        component: () => import('@/views/edu/course/publish'),
        meta: { title: '发布课程', noCache: true },
        hidden: true
      }
    ]
  },

2、添加组件—新建前端页面

在这里插入图片描述
使用的是element-ui前端步骤条组件：https://element.eleme.cn/#/zh-CN/component/steps

2.1、完善前端info.vue（课程信息页面）

页面效果：
在这里插入图片描述

2.2.1、前端代码：

<template>

  <div class="app-container">

    <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="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存并下一步</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

2.1.2、js代码

<script>
export default {
    data(){
        return {
            saveBtnDisabled:false
        }
    },
    created(){

    },
    methods:{
        saveOrUpdate(){
            //跳转到下一步
            this.$router.push({path:'/course/chapter/1'})
        }
    }
}
</script>

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

效果图：
在这里插入图片描述

2.2.1、前端代码：

<template>

  <div class="app-container">

    <h2 style="text-align: center;">发布新课程</h2>

    <el-steps :active="2" 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 @click="previous">上一步</el-button>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="next">下一步</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

2.2.2、js代码

<script>
export default {
    data(){
        return {
            saveBtnDisabled:false
        }
    },
    created(){

    },
    methods:{
        previous(){
            this.$router.push({path:'course/info/:id'})
        },
        next(){
            this.$router.push({path:'/course/publish/:id'})
        }
    }
}
</script>

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

效果：
在这里插入图片描述

2.3.1、前端代码：

<template>

  <div class="app-container">

    <h2 style="text-align: center;">发布新课程</h2>

    <el-steps :active="3" 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 @click="previous">返回修改</el-button>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="publish">发布课程</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

2.3.2、js代码

<script>
export default {
    data(){
        return {
            saveBtnDisabled:false
        }
    },
    created(){

    },
    methods:{
        previous(){
            this.$router.push({path:'/course/chapter/:id'})
        },
        publish(){
            this.$router.push({path:'/course/list'})
        }
    }
}
</script>

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页面代码:

<template>

  <div class="app-container">

    <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 label="课程标题">
            <el-input v-model="courseInfo.title" placeholder=" 示例：机器学习项目课：从基础到搭建项目视频课程。专业名称注意大小写"/>
        </el-form-item>

        <!-- 所属分类 TODO -->

        <!-- 课程讲师 TODO -->

        <el-form-item label="总课时">
            <el-input-number :min="0" v-model="courseInfo.lessonNum" controls-position="right" placeholder="请填写课程的总课时数"/>
        </el-form-item>

        <!-- 课程简介 TODO -->
        <el-form-item label="课程简介">
            <el-input v-model="courseInfo.description" placeholder=" 请输入课程简介信息"/>
        </el-form-item>

        <!-- 课程封面 TODO -->

        <el-form-item label="课程价格">
            <el-input-number :min="0" v-model="courseInfo.price" controls-position="right" placeholder="免费课程请设置为0元"/> 元
        </el-form-item>

        <el-form-item>
            <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存并下一步</el-button>
        </el-form-item>
    </el-form>

  </div>
</template>

<script>
import course from '@/api/edu/course'
export default {
    data(){
        return {
            saveBtnDisabled:false,
            courseInfo:{
                title: '',
                subjectId: '',
                teacherId: '',
                lessonNum: 0,
                description: '',
                cover: '',
                price: 0
            }
        }
    },
    created(){

    },
    methods:{
        saveOrUpdate(){
             course.addCourseInfo(this.courseInfo)
                .then(response=>{
                    //提示
                    this.$message({
                        type:'success',
                        message:'添加课程信息成功'
                    });
                    //跳转到下一步
                    this.$router.push({path:'/course/chapter/1'})
                })
        }  
    }
}
</script>

4、完善后端接口

在EduCourseCourse中完善：
在这里插入图片描述

//返回添加之后的课程id，为了后面添加大纲使用
String id = courseService.saveCourseInfo(courseInfoVo);
return R.ok().data("courseId",id);

业务层接口
在这里插入图片描述业务层接口实现类
在这里插入图片描述

5、完善info.vue

在这里插入图片描述
下一节：添加课程信息（2）实现讲师下拉列表

小码哥呀
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
添加课程信息前端1
qq_44841517的博客
05-21 337
修改路由
Web前端应用十种常用技术你全都知道吗？
chuocui9077的博客
06-24 2275
随着JS与XHTML的应用普及，越来越多的Web界面应用技术出现在网站上，比如我们常见的日历控件，搜索下拉框等，这些Web界面应用技术大大的丰富了网站的表现形式，本文将为您精心推荐十种最常见的Web界面应用技术。 Web应用程序的界面设计，其核心就是网页设计，但它的重点主要是在功能方面。要超...
Day07-添加课程分类前端实现-p100
qq_46112274的博客
03-08 242
添加课程分类前端实现1、添加课程分类管理路由2、创建课程分类管理的前端页面3、添加课程分类前端页面3.1、表单代码3.2、js定义数据代码3.3、js定义上传方法代码3.4、回调函数代码4、测试 1、添加课程分类管理路由 { path: '/subject', component: Layout, redirect: '/subject/table', name: '课程分类管理', meta: { title: '课程分类管理', icon: 'example'
JS知识点梳理
baidu_27448251的博客
03-24 143
本知识体系是为了查漏补缺,提升自己(不一定适合你们)而整理的。 本文结构尽量做到精简，详细内容点击每个模块下方链接。 文章将按模块进行分类，以简单的文字和外链相对深入的文章来整理各个模块。 1js基础 1-1 声明 「js函数声明三种方式：」 //(1) Function()构造器 var f =new Function() //(2) 函数声明 function f (){ console.log(2); } //(3) 函数表达式 var f = function()
4.9【微信小程序全栈开发课程】意见反馈（四）--提交反馈信息
腾讯云云开发布道师，慕课网合作讲师
10-17 1000
1、创建后端操作文件 先在后端server/controllers文件夹中创建操作文件createopinion.js，用来将从前端页面提交的数据，插入到opinions表中，创建完之后，页面目录如下 2、添加路由 在路由管理文件server/routes/index.js文件中添加路由 //需要添加的代码 router.post('/createopinion', controllers.cr...
人工智能课程培训测评-Day3.docx
12-16
本资源摘要信息是基于人工智能课程培训测评-Day3的题库，涵盖了人工智能、3D 打印、Arduino 等多个领域的知识点。下面是详细的知识点解释： 一、选择题 1.3D 打印具有的特点是逐层加工、累计成型。这意味着3D ...
人工智能课程培训测评-Day2第三期.docx
12-13
人工智能课程培训测评-Day2第三期.docx
苍穹外卖前端课程 day03-套餐管理
最新发布
03-09
苍穹外卖前端课程 day03-套餐管理
day05-店铺营业状态设置
11-03
"day05-店铺营业状态设置" 本节课程主要介绍了Redis的基本概念、安装、启动和停止服务、数据类型、常用命令等知识点。 Redis简介 Redis是一个基于内存的key-value结构数据库，具有高性能的读写能力，适合存储热点...
day05-Elasticsearch01
12-13
通过深入学习和实践"day05-Elasticsearch01"的课程，你将能够掌握Elasticsearch的基本用法和高级特性，为你的数据管理和分析工作打下坚实基础。同时，了解如何结合Logstash和Kibana构建完整的ELK（Elasticsearch, ...
coursejs:只需 3 分钟即可创建在线简单而漂亮的课程
06-14
课程.js 只需 3 分钟即可在线创建简单漂亮的幻灯片。 演示网址： 请用您的移动设备扫描二维码进入这张幻灯片^ ^ 项目网址： 作者：舒丁 许可证：麻省理工学院
javascript-course
03-05
javascript课程
课程列表页
weixin_42127687的博客
05-25 791
课程列表页 分页显示数据 from rest_framework.pagination import PageNumberPagination ​ class StandardPageNumberPagination(PageNumberPagination): page_size_query_param = 'page_size' max_page_size = 1 ​ c...
小程序开发中遇到的问题—汇总
热门推荐
IT博客技术分享
04-07 4万+
小程序面试题 1.bindtap和catchtap的区别是什么？ bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡 2.Js数组转成换字符串，强制转换成整数及转换成浮点数的函数分别是什么？ js提供了parseInt()和parseFloat()两个转换函数。前者把值转换成整数，后者把值转换成浮点数。只有对String类型调用这些方法，这两个函...
Vue中的export default 和 data 为什么return？
小琪大琦的blog
08-12 7682
Vue中的export default 和 data 为什么return？ export default { name: 'passenger-device', components: { chartsShow, tableShow }, mixins: [mixinTree, backfillingMinx], props: { breadcrumbObj: Object, default () { return null }
谷粒学院day08——课程章节与小节的实现
半旧518的博客
01-08 1379
编辑上传课程章节、小节
发送请求的遇到过的几种情况
m0_49014616的博客
10-30 388
/ app / page-query / {pageNum} / {pageSize} 分页查询标签列表 export function getList(data) { const params = { bizId: data.bizId, search: data.search, type:data.type } return request({ url: `/api/app/page-query/${data.pageNum}/${data.page.
java实验六 组件与事件处理 （无脑实验系列）
LzyRapX
05-23 8236
1．算术测试。 ²  实验要求： 编写一个算书测试小软件，用来训练小学生的算术能力。程序由3个类组成，其中Teacher类对象负责给出算术题目，并判断回答者的答案是否正确；ComputerFrame类对象负责为算术题目提供视图，比如用户可以通过ComputerFrame类对象提供的GUI界面看到题目，并通过该GUI界面给出题目的答案；MainClass是软件的主类。 package lzy;
Tkinter 组件
Noneplus
06-24 1150
菜单1.Label组件标签组件显示文本和位图2.Button组件按钮组件可与函数关联3.Checkbutton组件多选按钮（常用二选一）可与函数关联4.Radiobutton组件多选按钮（常用多选一）可与函数关联5.Frame框架框架控件在复杂的布局中将组件分组6.Entry组件输入控件获取用户输入的文本信息7.Listbox组件列表框控件（常用多选，也可单选）standing-by8.Scale...
day03-菜品管理 day03-菜品管理
11-03
公共字段包括创建时间、修改时间、创建人和修改人等信息，目前的代码中需要手动设置这些字段的值。为了解决这个问题，可以通过自动填充的方式实现公共字段的设置。 具体的实现思路如下： 1. 首先，需要分析当前...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值