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;">

[AppleScript] 纯文本查看 复制代码

 <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接口。

[AppleScript] 纯文本查看 复制代码

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

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;">

[AppleScript] 纯文本查看 复制代码

 <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接口。

[AppleScript] 纯文本查看 复制代码

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