Java的新项目学成在线笔记-day7（二）

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

页面布局代码如下：

<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" @currentchange="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接口。

//查询课程列表 
  @ApiOperation("查询我的课程列表") public QueryResponseResult<CourseInfo> findCourseList( 
      int page,     
   int size,     
   CourseListRequest courseListRequest );