黑马程序员技术交流社区

标题: 【郑州校区】学成在线 第7天 讲义-课程管理实战 二 [打印本页]

作者: 我是楠楠    时间: 2019-12-18 11:22
标题: 【郑州校区】学成在线 第7天 讲义-课程管理实战 二
【郑州校区】学成在线 第7天 讲义-课程管理实战 二

1.3 前端页面说明
我的课程列表使用element card组件,如下:

页面布局代码如下:
[AppleScript] 纯文本查看 复制代码
<template>
<section>
<el

row >
<el

col :span=
"
8
"
:offset
=2 >
<el

card :body

style
=
"
{ padding:
'
10px
'
}
"
>
<img src
=
"
/static/images/add.
jpg
"
class
=
"
image
"
height
=
"
150px
"
>
<div style
=
"
padding: 10px;
"
>
<span>课程名称</span>
<div class
=
"
bottom clearfix
"
>
<time class
=
"
time
"
></time>
<router

link class
=
"
mui

tab

item
"
:to
=
"
{path:
'
/course/add/base
'
}
"
>
<el

button type
=
"
text
"
class
=
"
button
"
>新增课程</el

button>
</router

link>
</div>
</div>
</el

card>
</el

col>
<el

col :span=
"
8
"
v

for=
"
(course, index) in courses
"
:key
=
"
course.id
"
:offset
=
"
index > 0 ?
2 : 2
"
>
<el

card :body

style
=
"
{ padding:
'
10px
'
}
"
>
<img :src
=
"
course.
pic!
=null?imgUrl+course.
pic:
'
/static/images/nonepic.
jpg
'"
class
=
"
image
"
height
=
"
150px
"
>
<div style
=
"
padding: 10px;
"
>
<span>{{course.name}}</span>
<div class
=
"
bottom clearfix
"
>
<time class
=
"
time
"
></time>
<el

button type
=
"
text
"
class
=
"
button
"
@click=
"
handleManage(course.id)
"
>管理课程
</el

button>
</div>
</div>
</el

card>
</el

col>
<!
‐‐
分页
‐‐
>
<el

col :span=
"
24
"
class
=
"
toolbar
"
>
<el

pagination background layout
=
"
prev, pager, next
"
@current

change
=
"
handleCurrentChange
"
:page

size
=
"
size
"
:total=
"
total
"
:current

page
=
"
page
"
style
=
"
float:right;
"
>
</el

pagination>
</el

col>
</el

row>
</section>
</template>
<script>
import
*
as courseApi from
'
../api/course
'
;
import utilApi from
'
../../../common/utils
'
;
let sysConfig
= require(
'
@/../config/sysConfig
'
)
export default {
data() {
return {
page:1,
size:7,
total: 0,
courses: [],
sels: [],//列表选中列
imgUrl:sysConfig
.imgUrl
}
},
methods: {
//分页方法
handleCurrentChange(val) {
this.
page
= val;
},
//获取课程列表
getCourse() {
},
handleManage: function (id) {
console.log(id)
this.
$router.
push({ path:
'
/course/manager/
'
+id})
}
},
created(){
},
mounted() {
}
}
</script>
<style scoped>
.el

col

8{
width:20%
}
.el

col

offset

2{
margin

left:2%
}
.time {
font

size: 13px;
color: #999;
}
.bottom {
margin

top: 13px;
line

height: 12px;
}
.button {
padding: 0;
float: right;
}
.image {
width: 100%;
display: block;
}
.clearfix:before,
.clearfix:after {
display: table;
content:
""
;
}
.clearfix:after {
clear: both
}
</style>

1.4 Api接口
输入参数:
页码、每页显示个数、查询条件
输出结果类型:
QueryResponseResult<自定义类型>
api工程创建course包,创建CourseControllerApi接口。

[AppleScript] 纯文本查看 复制代码
//查询课程列表
@ApiOperation(
"
查询我的课程列表
"
)
public QueryResponseResult<CourseInfo> findCourseList(
int page,
int size,
CourseListRequest courseListRequest
);







欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2