实现排行榜页面

backendcloud/backend/src/main/java/com/kob/backend/controller/ranklist/GetRankListController.java

@@ -0,0 +1,23 @@
+package com.kob.backend.controller.ranklist;
+
+import com.alibaba.fastjson2.JSONObject;
+import com.kob.backend.service.ranklist.GetRankListService;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.RestController;
+
+import java.util.Map;
+
+@RestController
+public class GetRankListController {
+    @Autowired
+    private GetRankListService getRankListService;
+
+    @GetMapping("/ranklist/getranklist/")
+    JSONObject getRankList(@RequestParam Map<String, String> data) {
+        Integer page = Integer.parseInt(data.get("page_index"));
+        Integer.parseInt(data.get("page_index"));
+        return getRankListService.getRankList(page);
+    }
+}

backendcloud/backend/src/main/java/com/kob/backend/service/impl/ranklist/GetRankListServiceImpl.java

@@ -0,0 +1,47 @@
+package com.kob.backend.service.impl.ranklist;
+
+import com.alibaba.fastjson2.JSONObject;
+import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
+import com.baomidou.mybatisplus.core.metadata.IPage;
+import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
+import com.kob.backend.mapper.UserMapper;
+import com.kob.backend.pojo.Record;
+import com.kob.backend.pojo.User;
+import com.kob.backend.service.ranklist.GetRankListService;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+
+import java.util.LinkedList;
+import java.util.List;
+
+@Service
+public class GetRankListServiceImpl implements GetRankListService {
+    @Autowired
+    private UserMapper userMapper;
+
+    @Override
+    public JSONObject getRankList(Integer page) {
+        // 使用 Mybatis API : IPage 实现
+        IPage<User> rankListIPage = new Page<>(page, 10);    // 参数列表:Page<>(传第几页, 每一页有多少项目)
+        QueryWrapper<User> queryWrapper = new QueryWrapper<>();
+        queryWrapper.orderByDesc("rating"); // 通过 User 的 rating (积分从高到低)降序排序
+        List<User> users = userMapper.selectPage(rankListIPage, queryWrapper).getRecords();
+
+        JSONObject resp = new JSONObject();
+        // 对数据进行预处理,发送数据包之前,先过滤掉用户的密码信息
+        List<JSONObject> processed_users = new LinkedList<>();
+        for (User user : users) { // 枚举用户排行
+            // 将枚举到的玩家的头像,用户名和积分进行绑定
+            JSONObject processed_user = new JSONObject();
+            processed_user.put("id", user.getId());
+            processed_user.put("photo", user.getPhoto());
+            processed_user.put("username", user.getUsername());
+            processed_user.put("rating", user.getRating());
+            // 将 jsonObject 对象 processed_user,添加到 processed_users 列表中
+            processed_users.add(processed_user);
+        }
+        resp.put("users", processed_users);  // 将处理后的用户信息重新打包起来
+        resp.put("user_count", userMapper.selectCount(null));  // 存入当前记录页面的总数, null 表示全部存入
+        return resp;
+    }
+}

backendcloud/backend/src/main/java/com/kob/backend/service/ranklist/GetRankListService.java

@@ -0,0 +1,8 @@
+// 排行榜接口
+package com.kob.backend.service.ranklist;
+
+import com.alibaba.fastjson2.JSONObject;
+
+public interface GetRankListService {
+    JSONObject getRankList(Integer page);
+}

web/src/views/ranklist/RanklistIndexView.vue

@@ -1,15 +1,133 @@
 <template>
-  <ContentBase>排行榜</ContentBase>
+  <ContentBase>
+    <table class="table table-striped" style="text-align:center">
+      <!-- <table class="table table-success table-striped" style="text-align:center"> -->
+      <!-- <table class="table table-sm" style="text-align:center"> -->
+      <!-- 创建表头: th 表示列 -->
+      <thead>
+        <th>玩家头像</th>
+        <th>玩家名称</th>
+        <th>积分</th>
+      </thead>
+      <!-- 创建表身: tr 表示行; &nbsp 表示一个空格 -->
+      <tbody class="table-group-divider">
+        <tr v-for="user in users" :key="user.id" style="text-align:center">
+          <td>
+            <img :src="user.photo" alt="" class="user-photo">
+          </td>
+          <td>
+            <span class="user-username"> {{ user.username }}</span>
+          </td>
+          <td>
+            {{ user.rating }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <!-- Pagination 分页 -->
+    <nav aria-label="Page navigation example">
+      <ul class="pagination justify-content-center">
+        <li class="page-item" @click="click_page(-2)">
+          <a class="page-link" href="#" aria-label="Previous">
+            <span aria-hidden="true">&laquo;</span>
+          </a>
+        </li>
+        <li :class="'page-item ' + page.is_active" v-for="page in pages" :key="page.number"
+          @click="click_page(page.number)">
+          <a class="page-link" href="#">{{ page.number }}</a>
+        </li>
+        <li class="page-item" @click="click_page(-1)">
+          <a class="page-link" href="#" aria-label="Next">
+            <span aria-hidden="true">&raquo;</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </ContentBase>
 </template>
 
 <script>
 import ContentBase from "../../components/ContentBase.vue";
+import $ from "jquery";
+import { ref } from "vue";
+import { useStore } from "vuex";
 
 export default {
   components: {
     ContentBase,
   },
+  setup() {
+    const store = useStore();
+    let users = ref([]);
+    let total_user = 0;
+    let current_page = 1;
+    let pages = ref([]);  // 页面
+
+    const click_page = page => {
+      if (page === -2) page = current_page - 1; // 前一页
+      else if (page === -1) page = current_page + 1;  // 后一页
+      // 判断 page 合法性
+      let max_pages = parseInt(Math.ceil(total_user / 10));
+
+      if (page >= 1 && page <= max_pages) {
+        pull_ranklist_page(page);
+      }
+    }
+
+    const update_pages = () => {  // 更新页面
+      let max_pages = parseInt(Math.ceil(total_user / 10));  // ceil 上取整
+      let new_pages = [];
+      for (let i = current_page - 2; i <= current_page + 2; i++) {  // 分 5 页: current_page 分别向上向下 -2
+        if (i >= 1 && i <= max_pages) {
+          new_pages.push({
+            number: i,
+            is_active: i === current_page ? "active" : "",  // 页面序号标签是否被激活:如果选中页是当前页,则激活(active)
+          });
+        }
+      }
+      pages.value = new_pages;
+    }
+
+    const pull_ranklist_page = (page) => {
+      current_page = page;
+      $.ajax({
+        url: "http://127.0.0.1:3000/ranklist/getranklist/",
+        data: {
+          page_index:page,
+        },
+        type: "GET",
+        headers: {
+          Authorization: "Bearer " + store.state.user.token,
+        },
+        success(resp) {
+          users.value = resp.users;
+          total_user = resp.user_count;
+          update_pages(); // 更新分页
+          console.log(resp);
+          console.log(total_user);
+        },
+        error(resp) {
+          console.log(resp);
+        }
+      });
+    }
+
+    pull_ranklist_page(current_page);
+
+    return {
+      users,
+      pages,
+      click_page,
+    }
+  }
 };
 </script>
 
-<style scoped></style>
+<style scoped>
+.user-photo {
+  border-radius: 50%;
+  width: 5vh;
+}
+
+.user-username {}
+</style>