|
【郑州校区】学成在线 第7天 讲义-课程管理实战 五
3 课程信息修改
3.1 需求分析
课程添加成功进入课程管理页面，通过课程管理页面修改课程的基本信息、编辑课程图片、编辑课程营销信息等。
本小节实现修改课程。
3.2 课程管理页面说明
3.2.1 页面结构
课程管理页面的结构如下：
3.2.2 课程管理导航页面
1、定义course_manage.vue为课程管理导航页面。
导航效果使用Element-UI的NavMenu组件实现。
[AppleScript] 纯文本查看 复制代码 <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(){
//课程id
this.courseid
=
this.
$route.
params.courseid
console.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、创建路由
[AppleScript] 纯文本查看 复制代码 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
'
;
{ 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 }
]}
3.3 Api接口
修改课程需要如下接口：
1、根据id查询课程信息
2、修改课程提交
接口定义如下：
1) 根据课程ID查询课程信息
[AppleScript] 纯文本查看 复制代码 @ApiOperation(
"
获取课程基础信息
"
)
public CourseBase getCourseBaseById(String courseId) throws RuntimeException;
2）修改课程信息
[AppleScript] 纯文本查看 复制代码 @ApiOperation(
"
更新课程基础信息
"
)
public ResponseResult updateCourseBase(String id,CourseBase courseBase);
4 课程营销
4.1 需求分析
课程营销信息包括课程价格、课程有效期等信息。
4.2 数据模型
课程营销信息使用course_market表存储。
数据模型如下：
[AppleScript] 纯文本查看 复制代码 @Data
@ToString
@Entity
@Table(name
=
"
course_market
"
)
@GenericGenerator(name
=
"
jpa
‐
assigned
"
, strategy
=
"
assigned
"
)
public class CourseMarket implements Serializable {
private static final long serialVersionUID =
‐
916357110051689486L;
@Id
@GeneratedValue(generator =
"
jpa
‐
assigned
"
)
@Column(length =
32)
private String id;
private String charge;
private String valid;
private String qq;
private Float price;
private Float price_old;
@Column(name
=
"
start_time
"
)
private Date startTime;
@Column(name
=
"
end_time
"
)
private Date endTime;
}
4.3 Api接口
课程营销信息需要定义如下接口：
1) 查询课程营销信息
[AppleScript] 纯文本查看 复制代码 @ApiOperation(
"
获取课程营销信息
"
)
public CourseMarket getCourseMarketById(String courseId);
2）更新课程营销信息
[AppleScript] 纯文本查看 复制代码 @ApiOperation(
"
更新课程营销信息
"
)
public ResponseResult updateCourseMarket(String id,CourseMarket courseMarket);
接口实现可采用先查询课程营销，如果存在则更新信息，否则添加课程营销信息的方法。
|
收藏
淘帖
踩
