根据 // 获取所有的歌曲列表 @GetMapping("/list") public List<Music> findAllSongs() { return musicService.findAllSongs(); } @GetMapping public Result<Page<Music>> findById(@RequestParam(required = false,value ="1" )Integer pageNum, @RequestParam(required = false,value ="5" )Integer PageSize, @PathVariable(required = false) String name){ musicService.findPage(pageNum,PageSize,name); return Result.success( ); }用uni.request写一个uniapp中调用接口以列表排列，并能够支持分页的前端，端口号为http://localhost:8080/

假设后端API已经实现，并且能够返回正确的数据格式，那么我们可以使用uni.request来发起请求，并使用uni-list来展示数据。下面是一个简单的示例代码：

1. 在页面的data中定义变量：

data: {
  songs: [], // 存储歌曲列表
  pageNum: 1, // 当前页码，默认为1
  pageSize: 5, // 每页显示的条数，默认为5
  total: 0 // 总记录数
}

2. 在页面的onLoad函数中发起请求：

onLoad() {
  this.loadSongs()
},

methods: {
  // 加载歌曲列表
  loadSongs() {
    uni.request({
      url: 'http://localhost:8080/list', // 接口地址
      data: {
        pageNum: this.pageNum, // 当前页码
        pageSize: this.pageSize // 每页显示的条数
      },
      success: (res) => {
        if (res.statusCode === 200) {
          const { records, total } = res.data // 从响应数据中获取歌曲列表和总记录数
          this.songs = records // 更新歌曲列表
          this.total = total // 更新总记录数
        }
      }
    })
  }
}

3. 使用uni-list来展示歌曲列表：

<template>
  <view>
    <uni-list>
      <uni-list-item v-for="(song, index) in songs" :key="index">
        <view slot="title">{{ song.name }}</view>
        <view slot="note">{{ song.singer }}</view>
      </uni-list-item>
    </uni-list>
    <uni-pagination :current="pageNum" :total="total" :page-size="pageSize" @change="handlePageChange" />
  </view>
</template>

4. 在handlePageChange函数中更新页码并重新发起请求：

methods: {
  // 加载歌曲列表
  loadSongs() {
    uni.request({
      url: 'http://localhost:8080/list', // 接口地址
      data: {
        pageNum: this.pageNum, // 当前页码
        pageSize: this.pageSize // 每页显示的条数
      },
      success: (res) => {
        if (res.statusCode === 200) {
          const { records, total } = res.data // 从响应数据中获取歌曲列表和总记录数
          this.songs = records // 更新歌曲列表
          this.total = total // 更新总记录数
        }
      }
    })
  },

  // 处理分页器页码变化事件
  handlePageChange(pageNum) {
    this.pageNum = pageNum // 更新当前页码
    this.loadSongs() // 重新加载歌曲列表
  }
}