学成在线--21.课程信息修改
2024-06-04 09:26:45
文章目录
- 一.需求分析
- 二.课程管理导航页面
- 1.定义course_manage.vue为课程管理页面
- 2.创建各个信息管理页面
- 3.创建路由
- 三.服务端
- 1.Api接口
- 1）根据课程ID查询课程信息
- 2）修改课程信息
- 2.Dao
- 3.Service
- 4.Controller
- 四.前端
- 1. 完成course_baseinfo.vue页面
- 2.API方法
- 3.course_baseinfo.vue中mounted钩子方法
- 4.课程修改提交
一.需求分析
课程添加成功进入课程管理页面，通过课程管理页面修改课程的基本信息、编辑课程图片、编辑课程营销信息等。本小节实现修改课程。
课程管理页面的结构如下：
二.课程管理导航页面
1.定义course_manage.vue为课程管理页面
导航效果使用Element-UI的NavMenu组件实现
文件位置：xc-ui-pc-teach\src\module\course\page\course_manage.vue
<template><div><el-menu:default-active="activeIndex"class="el-menu-demo"mode="horizontal"background-color="#eee"text-color="#000"active-text-color="#000"><router-link class="mui-tab-item" :to="{path:'/course/manage/summary/'+this.courseid}"><el-menu-item index="1">课程首页</el-menu-item></router-link><router-link class="mui-tab-item" :to="{path:'/course/manage/baseinfo/'+this.courseid}"><el-menu-item index="2">基本信息</el-menu-item></router-link><router-link class="mui-tab-item" :to="{path:'/course/manage/picture/'+this.courseid}"><el-menu-item index="3">课程图片</el-menu-item></router-link><router-link class="mui-tab-item" :to="{path:'/course/manage/marketinfo/'+this.courseid}"><el-menu-item index="4">课程营销</el-menu-item></router-link><router-link class="mui-tab-item" :to="{path:'/course/manage/plan/'+this.courseid}"><el-menu-item index="5">课程计划</el-menu-item></router-link><router-link class="mui-tab-item" :to="{path:'/course/manage/teacher/'+this.courseid}"><el-menu-item index="6">教师信息</el-menu-item></router-link><router-link class="mui-tab-item" :to="{path:'/course/manage/pub/'+this.courseid}"><el-menu-item index="7">发布课程</el-menu-item></router-link></el-menu><router-view class="main"></router-view></div>
</template>
<script>import * as courseApi from '../api/course';import utilApi from '../../../common/utils';export default {data() {return {activeIndex:'2',courseid:''}},methods: {},mounted(){//课程idthis.courseid = this.$route.params.courseidconsole.log("courseid=" + this.courseid)//跳转到课程基本信息this.$router.push({ path: '/course/manage/baseinfo/'+this.courseid})}}
</script>
<style scoped></style>2.创建各个信息管理页面
通过管理页面的导航可以进入各各信息管理页面，这里先创建各各信息管理页面，页面内容暂时为空，待开发时再完善，在本模块的page目录下创建course_manage目录，此目录存放各各信息管理页面，页面明细如下：
课程管理首页：course_summary.vue
基本信息修改页面：course_baseinfo.vue
图片管理页面：course_picture.vue
营销信息页面：course_marketinfo.vue
老师信息页面：course_teacher.vue
课程计划页面：course_plan.vue
课程发布页面：course_pub.vue
3.创建路由
文件位置：xc-ui-pc-teach\src\module\course\router\index.js
import Home from '@/module/home/page/home.vue';
import course_list from '@/module/course/page/course_list.vue';
import course_add from '@/module/course/page/course_add.vue';import course_manage from '@/module/course/page/course_manage.vue';
import course_summary from '@/module/course/page/course_manage/course_summary.vue';
import course_picture from '@/module/course/page/course_manage/course_picture.vue';
import course_baseinfo from '@/module/course/page/course_manage/course_baseinfo.vue';
import course_marketinfo from '@/module/course/page/course_manage/course_marketinfo.vue';
import course_teacher from '@/module/course/page/course_manage/course_teacher.vue';
import course_plan from '@/module/course/page/course_manage/course_plan.vue';
import course_pub from '@/module/course/page/course_manage/course_pub.vue';
export default [{path: '/course',component: Home,name: '课程管理',hidden: false,iconCls: 'el-icon-document',children: [{ path: '/course/list', name: '我的课程',component: course_list,hidden: false },{ path: '/course/add/base', name: '新增课程',component: course_add,hidden: true },{ path: '/course/manager/:courseid', name: '管理课程',component: course_manage,hidden: true ,children: [{ path: '/course/manage/plan/:courseid', name: '课程计划',component: course_plan,hidden: false },{ path: '/course/manage/baseinfo/:courseid', name: '基本信息',component: course_baseinfo,hidden: false },{ path: '/course/manage/picture/:courseid', name: '课程图片',component: course_picture,hidden: false },{ path: '/course/manage/marketinfo/:courseid', name: '营销信息',component: course_marketinfo,hidden: false },{ path: '/course/manage/teacher/:courseid', name: '教师信息',component: course_teacher,hidden: false},{ path: '/course/manage/pub/:courseid', name: '发布课程',component: course_pub,hidden: false},{ path: '/course/manage/summary/:courseid', name: '课程首页',component: course_summary,hidden: false }]}]}
]三.服务端
1.Api接口
修改课程需要如下接口：
1、根据id查询课程信息；
2、修改课程并提交。
文件位置：
1）根据课程ID查询课程信息
@ApiOperation("获取课程基础信息")
public CourseBase getCourseBaseById(String courseId) throws RuntimeException;
2）修改课程信息
@ApiOperation("更新课程基础信息")
public ResponseResult updateCourseBase(String id,CourseBase courseBase);
2.Dao
Dao即为学成在线–20.新增课程（最后完善）中Dao层中定义的接口。
文件位置：xcEduService01\xc-service-manage-course\src\main\java\com\xuecheng\manage_course\dao\CourseBaseRepository.java
public interface CourseBaseRepository extends JpaRepository<CourseBase, String> {}
3.Service
文件位置：xcEduService01\xc-service-manage-course\src\main\java\com\xuecheng\manage_course\service\CourseService.java
public CourseBase getCoursebaseById(String courseid) {Optional<CourseBase> optional = courseBaseRepository.findById(courseId);if(optional.isPresent()){return optional.get();} return null;
} @Transactional
public ResponseResult updateCoursebase(String id, CourseBase courseBase) {CourseBase one = this.getCoursebaseById(id);if(one == null){//抛出异常..} //修改课程信息one.setName(courseBase.getName());one.setMt(courseBase.getMt());one.setSt(courseBase.getSt());one.setGrade(courseBase.getGrade());one.setStudymodel(courseBase.getStudymodel());one.setUsers(courseBase.getUsers());one.setDescription(courseBase.getDescription());CourseBase save = courseBaseRepository.save(one);return new ResponseResult(CommonCode.SUCCESS);
}
4.Controller
文件位置：xcEduService01\xc-service-manage-course\src\main\java\com\xuecheng\manage_course\controller\CourseController.java
@Override
@GetMapping("/coursebase/get/{courseId}")
public CourseBase getCourseBaseById(@PathVariable("courseId") String courseId) throws RuntimeException {return courseService.getCoursebaseById(courseId);
}@Override
@PutMapping("/coursebase/update/{id}")
public ResponseResult updateCourseBase(@PathVariable("id") String id, @RequestBody CourseBase courseBase) {return courseService.updateCoursebase(id,courseBase);
}
四.前端
1. 完成course_baseinfo.vue页面
在course模块下的course_manage目录下创建course_baseinfo.vue页面，本页面实现课程修改。
文件位置：xc-ui-pc-teach\src\module\course\page\course_manage\course_baseinfo.vue
<template><div><el-form :model="courseForm" label-width="80px" :rules="courseRules" ref="courseForm"><el-form-item label="课程名称" prop="name"><el-input v-model="courseForm.name" auto-complete="off" ></el-input></el-form-item><el-form-item label="适用人群" prop="users"><el-input type="textarea" v-model="courseForm.users" auto-complete="off" ></el-input></el-form-item><el-form-item label="课程分类" prop="categoryActive"><el-cascaderexpand-trigger="hover":options="categoryList"v-model="categoryActive":props="props"></el-cascader></el-form-item><el-form-item label="课程等级" prop="grade"><b v-for="grade in gradeList"><el-radio v-model="courseForm.grade" :label="grade.sdId" >{{grade.sdName}}</el-radio> </b></el-form-item><el-form-item label="学习模式" prop="studymodel"><b v-for="studymodel_v in studymodelList"><el-radio v-model="courseForm.studymodel" :label="studymodel_v.sdId" >{{studymodel_v.sdName}}</el-radio> </b></el-form-item><el-form-item label="课程介绍" prop="description"><el-input type="textarea" v-model="courseForm.description" ></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button type="primary" @click.native="save" :loading="editLoading">提交</el-button></div></div>
</template>
<script>import * as courseApi from '../../api/course';import utilApi from '../../../../common/utils';import * as systemApi from '../../../../base/api/system';export default {data() {return {dotype:'',courseid:'',studymodelList:[],gradeList:[],editLoading: false,props: {value: 'id',label:'label',children:'children'},categoryList: [],categoryActive:[],courseForm: {id:'',name: '',users: '',grade:'',studymodel:'',mt:'',st:'',description: ''},courseRules: {name: [{required: true, message: '请输入课程名称', trigger: 'blur'}],category: [{required: true, message: '请选择课程分类', trigger: 'blur'}],grade: [{required: true, message: '请选择课程等级', trigger: 'blur'}],studymodel: [{required: true, message: '请选择学习模式', trigger: 'blur'}]}}},methods: {save () {//修改课程this.$refs.courseForm.validate((valid) => {if (valid) {this.$confirm('确认提交吗？', '提示', {}).then(() => {this.editLoading = true;let mt = this.categoryActive[0];let st = this.categoryActive[1];this.courseForm.mt = mt;this.courseForm.st = st;let id = this.courseForm.idcourseApi.updateCoursebase(id,this.courseForm).then((res) => {this.editLoading = false;if(res.success){this.$message({message: '提交成功',type: 'success'});}else{if(res.message){this.$message.error(res.message);}else{this.$message.error('提交失败');}}});});}});}},created(){},mounted(){//查询数据字典字典systemApi.sys_getDictionary('201').then((res) => {// console.log(res);this.studymodelList = res.dvalue;});systemApi.sys_getDictionary('200').then((res) => {this.gradeList = res.dvalue;});//取课程分类courseApi.category_findlist({}).then((res) => {this.categoryList = res.children;});//查询课程信息//课程idthis.courseid = this.$route.params.courseid;courseApi.getCoursebaseById(this.courseid).then((res) => {// console.log(res);this.courseForm = res;//课程分类显示，需要两级分类this.categoryActive.push(this.courseForm.mt);this.categoryActive.push(this.courseForm.st);});}}
</script>
<style scoped></style>2.API方法
文件位置：xc-ui-pc-teach\src\module\course\api\course.js
//获取课程基本信息
export const getCoursebaseById = id => {return http.requestQuickGet(apiUrl+'/course/coursebase/get/'+id)
}//更新课程基本信息
export const updateCoursebase= (id,course) => {return http.requestPut(apiUrl+'/course/coursebase/update/'+id,course)
}
3.course_baseinfo.vue中mounted钩子方法
在mounted钩子方法中查询课程信息及数据字典：
文件位置：xc-ui-pc-teach\src\module\course\page\course_manage\course_baseinfo.vue
mounted(){//查询数据字典字典systemApi.sys_getDictionary('201').then((res) => {// console.log(res);this.studymodelList = res.dvalue;});systemApi.sys_getDictionary('200').then((res) => {this.gradeList = res.dvalue;});//取课程分类courseApi.category_findlist({}).then((res) => {this.categoryList = res.children;});//查询课程信息//课程idthis.courseid = this.$route.params.courseid;courseApi.getCoursebaseById(this.courseid).then((res) => {// console.log(res);this.courseForm = res;//课程分类显示，需要两级分类this.categoryActive.push(this.courseForm.mt);this.categoryActive.push(this.courseForm.st);});}
4.课程修改提交
文件位置：xc-ui-pc-teach\src\module\course\page\course_manage\course_baseinfo.vue
编辑课程提交方法：
methods: {save () {//修改课程this.$refs.courseForm.validate((valid) => {if (valid) {this.$confirm('确认提交吗？', '提示', {}).then(() => {this.editLoading = true;let mt = this.categoryActive[0];let st = this.categoryActive[1];this.courseForm.mt = mt;this.courseForm.st = st;let id = this.courseForm.idcourseApi.updateCoursebase(id,this.courseForm).then((res) => {this.editLoading = false;if(res.success){this.$message({message: '提交成功',type: 'success'});}else{if(res.message){this.$message.error(res.message);}else{this.$message.error('提交失败');}}});});}});}},
学成在线--21.课程信息修改相关推荐
- 学成在线--22.课程营销
文章目录 一.需求分析 二.数据模型 三.服务端 1.Api接口 1)查询课程营销信息 2)更新课程营销信息 2.Dao 3.Service 4.Controller 四.前端 1.Api 方法 2. ...
- 学成在线--15.课程计划查询
文章目录 一.需求分析 二.页面原型 1.tree组件介绍 2.webstorm配置jsx 三.API接口 1.数据模型 2.自定义模型类 3.接口定义 四.sql语句 五.服务器端 1.Dao 1) ...
- 学成在线--23.课程图片管理（上传图片）
文章目录 一. 需求分析 1). 需求分析 2). 图片上传流程 二. 创建文件系统服务工程 1). 工程目录结构 2). 项目依赖pom.xml 3). 配置文件application.yml 三. ...
- 学成在线--26.课程图片管理（图片删除）
文章目录 一. 需求分析 二. API 三. 服务端开发 1. Dao 2. Service 3. Controller 四. 前端开发 1. API方法 2. 页面 1.before-remove钩 ...
- 学成在线-第19天-讲义-分布式事务
1订单与选课需求分析 1.1订单支付流程 学成在线的课程分为免费和收费两种.对于收费课程,用户需提交订单并完成支付方可在线学习. 提交订单及支付流程如下: 1.用户提交订单需要先登录系统 2.提交订单 ...
- 微服务实战项目-学成在线-课程发布模块
学成在线-课程发布模块 1 模块需求分析 1.1 模块介绍 课程信息编辑完毕即可发布课程,发布课程相当于一个确认操作,课程发布后学习者在网站可以搜索到课程,然后查看课程的详细信息,进一步选课.支付.在 ...
- 学成在线--18.新增课程（课程分类查询）
文章目录 一.需求分析 二.课程分类查询介绍 三.数据结构 四.数据格式 五.数据模型 六.Api接口 七.服务器端 1.Dao 1)定义mapper 2)定义mapper映射文件 2.Service ...
- 页面显示格式化的时间、倒计时效果、学成在线案例（创建、添加节点）、学生信息表（重点）、5秒钟之后跳转页面（location.href应用）、学生信息表(页面刷新数据不丢失)（重点）——API练习案例
目录 1. 页面显示格式化的时间 2. 倒计时效果 3. 学成在线案例(创建节点.添加节点) 4.学生信息表案例(重点) 5. 5秒钟之后跳转页面(location.href的应用) 6. 学生信息表 ...
- 学成在线--课程发布模块
完整版请移步至我的个人博客查看:https://cyborg2077.github.io/ 学成在线–项目环境搭建 学成在线–内容管理模块 学成在线–媒资管理模块 学成在线–课程发布模块 学成在线–认 ...
最新文章
- 提高 ASP.NET Web 应用性能的 24 种方法和技巧
- Redis键值相关命令
- python applymap_运行Python Applymap需要时间
- Ubuntu apt-get方式安装Subversion
- 零起步教你搭建Discuz!论坛
- Kudu ：Service unavailable: Soft memory limit exceeded at xxx% of capacity
- /usr/lib/x86_64-linux-gnu/libQt5Core.so.5: version `Qt_5.12‘ not found解决办法
- ie8兼容background-size属性
- Atitit 提升开发效率 声明式编程范式 目录 1. 声明式编程体系树 1 1.1. 声明式（对比：指令式，，主要包括 函数式，逻辑式编程） 2 1.2. 声明式编程：表达与运行分离 3 1.3
- 移除Kubeadm部署的kubernetes环境
- 如何虚拟打印PDF文件（Win7）
- 有趣有用的PCA——PCA压缩图片
- html 下划线 鼠标手,(腾讯设计规范.ppt
- 胜利大逃亡 --- bfs记录
- scrapy爬虫框架 (5. 避免被封措施）
- 金钱不能买什么读后感_金钱的界限-----读桑德尔《金钱不能买什么》有感
- 黑苹果安装包（MaxOS）及教程——如何在非苹果电脑上安装MaxOS系统
- OpenNI SDK 2.0
- 密码字典大全（seclists）
- jq js css3 实现瀑布流