实现排行榜页面
This commit is contained in:
parent
baf5f897b3
commit
cb8d9f4e3e
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
// 排行榜接口
|
||||
package com.kob.backend.service.ranklist;
|
||||
|
||||
import com.alibaba.fastjson2.JSONObject;
|
||||
|
||||
public interface GetRankListService {
|
||||
JSONObject getRankList(Integer page);
|
||||
}
|
||||
|
|
@ -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 表示行;   表示一个空格 -->
|
||||
<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">«</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">»</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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue