06. 开发课程前后台数据对接

401 字约 1 分钟读完1040 次阅读更新于 2026/5/3

使用请求工具 request

const load = () => {
  request.get('/course/selectPage', {
    params: {
      pageNum: 1,
      pageSize: 1
    }
  }).then(res => {
    data.tableData = res.data?.list || []
    data.total = res.data?.total || 0
  })
}
// 调用方法获取后台数据
load()

分页组件需要添加额外的属性

<el-pagination v-model:current-page="data.pageNum" v-model:page-size="data.pageSize"
                     @current-change="handelCurrentChange"
                     background layout="prev, pager, next" :total="data.total" />
const handelCurrentChange = () => {
  // 当翻页的时候重新加载数据即可
  load()
}

多条件查询的 SQL

@Select("select * from course where name like concat('%', #{name} ,'%') and no like concat('%', #{no} ,'%') " +
        "and teacher like concat('%', #{teacher} ,'%') order by id desc")
List<Course> selectAll(Course course);

image.png