ruoyi-cloud数据联动

1. 引入api请求

import {listCourse} from "@/api/resources/course";

1. 页面创建后查询数据

// methods加入方法
/** 查询信息列表 */
getList() {
  listCourse(this.queryParams).then(response => {
    this.courseList = response.rows;
    this.total = response.total;
  });
}

        
created() {
this.getList();
},

1. 循环页面渲染

<div  v-for="(item, index) in courseList" :key="item.courseId" class="row" >
  <el-col :xs="24" :sm="24" :md="6" :lg="6">
    <el-card class="update-log" style="height: 400px;margin-top: 20px" >
      <div class="thumbnail col-md-3">
        <div class="image-container">
          <img :src="item.courseImageUrl" width="">
        </div>
        <div class="caption">
          <h3>{{item.courseName}}</h3>
          <p>
            {{item.description}}
          </p>
        </div>
      </div>
    </el-card>
  </el-col>
</div>