flykhan
/
kos
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

实现排行榜页面

This commit is contained in:
flykhan 2023-03-10 23:50:10 +08:00
parent baf5f897b3
commit cb8d9f4e3e
4 changed files with 198 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
backendcloud/backend/src/main/java/com/kob/backend/controller/ranklist/GetRankListController.java Normal file
View File

@ -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);
}
}

47
backendcloud/backend/src/main/java/com/kob/backend/service/impl/ranklist/GetRankListServiceImpl.java Normal file
View File

@ -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;
}
}

8
backendcloud/backend/src/main/java/com/kob/backend/service/ranklist/GetRankListService.java Normal file
View File

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

122
web/src/views/ranklist/RanklistIndexView.vue
View File

@ -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>