更新默认配置的后端mysqlpassword

backendcloud/backend/pom.xml

@@ -12,6 +12,28 @@
     <groupId>com.kob.backend</groupId>
     <artifactId>backend</artifactId>
 
+    <!-- 项目打包类型 : jar -->
+    <packaging>jar</packaging>
+    <build>
+        <plugins>
+            <plugin>
+                <groupId>org.springframework.boot</groupId>
+                <artifactId>spring-boot-maven-plugin</artifactId>
+                <!--这里写上main方法所在类的路径-->
+                <configuration>
+                    <mainClass>com.kob.backend.BackendApplication</mainClass>
+                </configuration>
+                <executions>
+                    <execution>
+                        <goals>
+                            <goal>repackage</goal>
+                        </goals>
+                    </execution>
+                </executions>
+            </plugin>
+        </plugins>
+    </build>
+
     <properties>
         <maven.compiler.source>8</maven.compiler.source>
         <maven.compiler.target>8</maven.compiler.target>

backendcloud/backend/src/main/java/com/kob/backend/config/SecurityConfig.java

@@ -48,7 +48,7 @@ public class SecurityConfig extends WebSecurityConfigurerAdapter {
                 .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS)
                 .and()
                 .authorizeRequests()
-                .antMatchers("/user/account/token/", "/user/account/register/").permitAll()
+                .antMatchers("/api/user/account/token/", "/api/user/account/register/").permitAll()
                 .antMatchers("/pk/start/","/pk/receive/bot/move/").hasIpAddress("127.0.0.1")
                 .antMatchers(HttpMethod.OPTIONS).permitAll()
                 .anyRequest().authenticated();

backendcloud/backend/src/main/java/com/kob/backend/config/filter/JwtAuthenticationTokenFilter.java

@@ -10,7 +10,6 @@ import com.kob.backend.mapper.UserMapper;
 import com.kob.backend.pojo.User;
 import com.kob.backend.service.impl.utils.UserDetailsImpl;
 import com.kob.backend.utils.JwtUtil;
-import com.sun.xml.internal.bind.v2.TODO;
 import io.jsonwebtoken.Claims;
 import org.jetbrains.annotations.NotNull;
 import org.springframework.beans.factory.annotation.Autowired;

backendcloud/backend/src/main/java/com/kob/backend/consumer/WebSocketServer.java

@@ -46,8 +46,8 @@ public class WebSocketServer {
     private User user;
     public Game game = null;
     // addPlayer 添加用户到匹配池的 URL; removePlayer 从匹配池移除用户的 URL
-    private final static String addPlayerUrl = "http://127.0.0.1:3001/player/add/";
+    private final static String addPlayerUrl = "http://127.0.0.1:3002/player/add/";
-    private final static String removePlayerUrl = "http://127.0.0.1:3001/player/remove/";
+    private final static String removePlayerUrl = "http://127.0.0.1:3002/player/remove/";
 
     @Autowired
     public void setRestTemplate(RestTemplate restTemplate) {

backendcloud/backend/src/main/java/com/kob/backend/consumer/utils/Game.java

@@ -33,7 +33,7 @@ public class Game extends Thread {
     // 定义失败者: all(平局), A(A输), B(B输)
     private String loser = "";
     // 传送消息给 BotRunningSystem 的链接
-    private static final String addBotUrl = "http://127.0.0.1:3002/bot/add/";
+    private static final String addBotUrl = "http://127.0.0.1:3003/bot/add/";
 
 
     // 初始化(有参)构造函数

backendcloud/backend/src/main/java/com/kob/backend/controller/pk/ReceiveBotMoveController.java

@@ -1,3 +1,4 @@
+// 微服务内部 api
 package com.kob.backend.controller.pk;
 
 import com.kob.backend.service.pk.ReceiveBotMoveService;

backendcloud/backend/src/main/java/com/kob/backend/controller/pk/StartGameController.java

@@ -1,3 +1,4 @@
+// 微服务内部 api
 package com.kob.backend.controller.pk;
 
 

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

@@ -14,7 +14,7 @@ public class GetRankListController {
     @Autowired
     private GetRankListService getRankListService;
 
-    @GetMapping("/ranklist/getranklist/")
+    @GetMapping("/api/ranklist/getranklist/")
     JSONObject getRankList(@RequestParam Map<String, String> data) {
         Integer page = Integer.parseInt(data.get("page_index"));
         Integer.parseInt(data.get("page_index"));

backendcloud/backend/src/main/java/com/kob/backend/controller/record/GetRecordListController.java

@@ -15,7 +15,7 @@ public class GetRecordListController {
     private GetRecordListService getRecordListService;
 
     // 这里只需要获取,因此只需要用 get 方法(需要新建和修改数据时,使用 post 方法)
-    @GetMapping("/record/getlist/")
+    @GetMapping("/api/record/getlist/")
     public JSONObject getList(@RequestParam Map<String, String> data) {
         // 解析出 page 信息
         Integer page = Integer.parseInt(data.get("page_index"));

backendcloud/backend/src/main/java/com/kob/backend/controller/user/account/InfoController.java

@@ -13,7 +13,7 @@ public class InfoController {
     private InfoService infoService;
 
 //    获取信息
-    @GetMapping("/user/account/info/")
+    @GetMapping("/api/user/account/info/")
     public Map<String,String> getInfo(){
         return infoService.getInfo();
     }

backendcloud/backend/src/main/java/com/kob/backend/controller/user/account/LoginController.java

@@ -16,7 +16,7 @@ public class LoginController {
     private LoginService loginService;
 
 //    登录使用 POST 请求,密文传输,更安全
-    @PostMapping("/user/account/token/")
+    @PostMapping("/api/user/account/token/")
     public Map<String,String> getToken(@RequestParam Map<String,String> map){
         String username = map.get("username");
         String password = map.get("password");

backendcloud/backend/src/main/java/com/kob/backend/controller/user/account/RegisterController.java

@@ -13,7 +13,7 @@ public class RegisterController {
     @Autowired
     private RegisterService registerService;
 
-    @PostMapping("/user/account/register/")
+    @PostMapping("/api/user/account/register/")
     public Map<String, String> register(@RequestParam Map<String, String> map) {
         String username = map.get("username");
         String password = map.get("password");

backendcloud/backend/src/main/java/com/kob/backend/controller/user/bot/AddController.java

@@ -11,7 +11,7 @@ public class AddController {
     @Autowired
     private AddService addService;
 
-    @PostMapping("/user/bot/add/")
+    @PostMapping("/api/user/bot/add/")
     public Map<String,String> add(@RequestParam Map<String,String> data){
         return addService.add(data);
     }

backendcloud/backend/src/main/java/com/kob/backend/controller/user/bot/GetListController.java

@@ -15,7 +15,7 @@ public class GetListController {
     @Autowired
     private GetListService getListService;
 
-    @GetMapping("/user/bot/getlist/")
+    @GetMapping("/api/user/bot/getlist/")
     public List<Bot> getList(){
         return getListService.getList();
     }

backendcloud/backend/src/main/java/com/kob/backend/controller/user/bot/RemoveController.java

@@ -13,7 +13,7 @@ public class RemoveController {
     @Autowired
     private RemoveService removeService;
 
-    @PostMapping("/user/bot/remove/")
+    @PostMapping("/api/user/bot/remove/")
     public Map<String,String> remove(@RequestParam Map<String,String> data){
         return removeService.remove(data);
     }

backendcloud/backend/src/main/java/com/kob/backend/controller/user/bot/UpdateController.java

@@ -13,7 +13,7 @@ public class UpdateController {
     @Autowired
     private UpdateService updateService;
 
-    @PostMapping("/user/bot/update/")
+    @PostMapping("/api/user/bot/update/")
     public Map<String,String> update(@RequestParam Map<String,String> data){
         return updateService.update(data);
     }

backendcloud/backend/src/main/resources/application.properties

@@ -1,8 +1,8 @@
 #default server port
-server.port=3000
+server.port=3001
 
 #mysql database connect profile
 spring.datasource.username=root
-spring.datasource.password=mysqlPassword
+spring.datasource.password=mysqlpassword
 spring.datasource.url=jdbc:mysql://localhost:3306/kob?serverTimezone=Asia/Shanghai&useUnicode=true&characterEncoding=utf-8
 spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

backendcloud/backend/src/test/java/com/kob/backend/BackendApplicationTests.java

@@ -1,18 +0,0 @@
-package com.kob.backend;
-
-import org.junit.jupiter.api.Test;
-import org.springframework.boot.test.context.SpringBootTest;
-import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
-import org.springframework.security.crypto.password.PasswordEncoder;
-
-@SpringBootTest
-class BackendApplicationTests {
-
-//    测试明文加密
-    @Test
-    void contextLoads() {
-        PasswordEncoder passwordEncoder = new BCryptPasswordEncoder();
-        System.out.println(passwordEncoder.encode("123"));
-    }
-
-}

backendcloud/botrunningsystem/pom.xml

@@ -12,6 +12,28 @@
     <groupId>com.kob.botrunningsystem</groupId>
     <artifactId>botrunningsystem</artifactId>
 
+    <!-- 项目打包类型 : jar -->
+    <packaging>jar</packaging>
+    <build>
+        <plugins>
+            <plugin>
+                <groupId>org.springframework.boot</groupId>
+                <artifactId>spring-boot-maven-plugin</artifactId>
+                <!--这里写上main方法所在类的路径-->
+                <configuration>
+                    <mainClass>com.kob.botrunningsystem.BotRunningSystemApplication</mainClass>
+                </configuration>
+                <executions>
+                    <execution>
+                        <goals>
+                            <goal>repackage</goal>
+                        </goals>
+                    </execution>
+                </executions>
+            </plugin>
+        </plugins>
+    </build>
+
     <properties>
         <maven.compiler.source>8</maven.compiler.source>
         <maven.compiler.target>8</maven.compiler.target>

backendcloud/botrunningsystem/src/main/java/com/kob/botrunningsystem/service/impl/utils/Consumer.java

@@ -19,7 +19,7 @@ import java.util.function.Supplier;
 public class Consumer extends Thread {
     private Bot bot;
     // 定义返回信息 URL
-    private final static String receiveBotMoveUrl = "http://127.0.0.1:3000/pk/receive/bot/move/";
+    private final static String receiveBotMoveUrl = "http://127.0.0.1:3001/pk/receive/bot/move/";
 
     //注入 RestTemplate 用于给 backend 服务发送信息
     private static RestTemplate restTemplate;

backendcloud/botrunningsystem/src/main/java/com/kob/botrunningsystem/utils/Bot.java

@@ -47,8 +47,8 @@ public class Bot implements java.util.function.Supplier<Integer> {
     //    @Override
     public Integer nextMove(String input) {
         String[] strs = input.split("#");
-        int rows = 18;
+        int rows = 13;
-        int cols = 19;
+        int cols = 14;
         int[][] g = new int[rows][cols];
         for (int i = 0, k = 0; i < rows; i++) {
             for (int j = 0; j < cols; j++, k++) {

backendcloud/botrunningsystem/src/main/resources/application.properties

@@ -1 +1 @@
-server.port=3002
+server.port=3003

backendcloud/matchingsystem/pom.xml

@@ -12,6 +12,28 @@
     <groupId>com.kob.matchingsystem</groupId>
     <artifactId>matchingsystem</artifactId>
 
+    <!-- 项目打包类型 : jar -->
+    <packaging>jar</packaging>
+    <build>
+        <plugins>
+            <plugin>
+                <groupId>org.springframework.boot</groupId>
+                <artifactId>spring-boot-maven-plugin</artifactId>
+                <!--这里写上main方法所在类的路径-->
+                <configuration>
+                    <mainClass>com.kob.matchingsystem.MatchingSystemApplication</mainClass>
+                </configuration>
+                <executions>
+                    <execution>
+                        <goals>
+                            <goal>repackage</goal>
+                        </goals>
+                    </execution>
+                </executions>
+            </plugin>
+        </plugins>
+    </build>
+
     <properties>
         <maven.compiler.source>8</maven.compiler.source>
         <maven.compiler.target>8</maven.compiler.target>

backendcloud/matchingsystem/src/main/java/com/kob/matchingsystem/service/impl/utils/MatchingPool.java

@@ -18,7 +18,7 @@ public class MatchingPool extends Thread {
     // 定义一个锁, Reentrant Lock 是可重入锁
     private final ReentrantLock lock = new ReentrantLock();
     // 定义微服务传值 URL
-    private static final String startGameUrl = "http://127.0.0.1:3000/pk/start/";
+    private static final String startGameUrl = "http://127.0.0.1:3001/pk/start/";
     // 定义 RestTemplate 用来微服务数据通信
     private static RestTemplate restTemplate;
 
@@ -27,11 +27,11 @@ public class MatchingPool extends Thread {
         MatchingPool.restTemplate = restTemplate;
     }
 
-    public void addPlayer(Integer userId, Integer rating,Integer botId) {
+    public void addPlayer(Integer userId, Integer rating, Integer botId) {
         lock.lock();
         try {
             // 一开始匹配等待时间是 0
-            playerList.add(new Player(userId, rating,botId, 0));
+            playerList.add(new Player(userId, rating, botId, 0));
         } finally {
             lock.unlock();
         }
@@ -65,7 +65,7 @@ public class MatchingPool extends Thread {
 
     // 判断两名玩家是否匹配
     private boolean checkMatched(Player a, Player b) {
-        int ratingDelta = Math.abs(a.getRating() - b.getRating());    // 两名玩家的天梯积分之差
+        int ratingDelta = Math.abs(a.getRating() - b.getRating()); // 两名玩家的天梯积分之差
         // a b 两名玩家的等待时间最小值
         // min 是两方任意一方接受等待时间就可以匹配, max 是两方都接受的匹配
         int minWaitingTime = Math.min(a.getWaitingTime(), b.getWaitingTime());
@@ -79,29 +79,31 @@ public class MatchingPool extends Thread {
         MultiValueMap<String, String> data = new LinkedMultiValueMap<>();
         // 返回两名玩家的 userId 和 botId
         data.add("a_id", a.getUserId().toString());
-        data.add("a_bot_id",a.getBotId().toString());
+        data.add("a_bot_id", a.getBotId().toString());
         data.add("b_id", b.getUserId().toString());
-        data.add("b_bot_id",b.getBotId().toString());
+        data.add("b_bot_id", b.getBotId().toString());
         restTemplate.postForObject(startGameUrl, data, String.class);
     }
 
     // 尝试匹配所有玩家
     private void matchPlayers() {
-        //TODO 后端调试
+        // TODO 后端调试
-        System.out.println("match players: " + playerList.toString());
+        // System.out.println("match players: " + playerList.toString());
         // havaMatched 表示玩家已经匹配过了
         boolean[] haveMatched = new boolean[playerList.size()];
         for (int i = 0; i < playerList.size(); i++) {
-            if (haveMatched[i]) continue;    // 如果当前枚举到的玩家已经匹配过了,则跳过改玩家
+            if (haveMatched[i])
-            for (int j = i + 1; j < playerList.size(); j++) {   // j 从 i+1 开始枚举
+                continue; // 如果当前枚举到的玩家已经匹配过了,则跳过改玩家
-                if (haveMatched[j]) continue;
+            for (int j = i + 1; j < playerList.size(); j++) { // j 从 i+1 开始枚举
+                if (haveMatched[j])
+                    continue;
                 // 如果 i 和 j 都没有匹配,则将 a 和 b 玩家取出来
                 Player a = playerList.get(i);
                 Player b = playerList.get(j);
                 // 判断 a 和 b 能否匹配:如果匹配,则将结果返回,并将 a 和 b 的位置置为 true
                 if (checkMatched(a, b)) {
                     haveMatched[i] = haveMatched[j] = true; // 置为已匹配
-                    sendResult(a, b);   // 返回匹配玩家结果
+                    sendResult(a, b); // 返回匹配玩家结果
                     break;
                 }
             }

backendcloud/matchingsystem/src/main/resources/application.properties

@@ -1 +1 @@
-server.port=3001
+server.port=3002

web/public/index.html

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <title>KoS</title>
   </head>
   <body>
     <noscript>

web/src/components/MatchGround.vue

@@ -104,7 +104,7 @@ div.user-select-bot {
     width: 60vw;
     height: 70vh;
     /* 背景色: rgba 加上透明通道 */
-    background: rgba(70, 70, 70, 0.5);
+    /* background: rgba(70, 70, 70, 0.5); */
     /* 距上边距40px,左右居中 */
     margin: 40px auto;
 }

web/src/components/UserIndicator.vue

@@ -0,0 +1,59 @@
+// 用户指示标签
+<template>
+    <div class="playground">
+        <div class="user_state_config" v-if="parseInt($store.state.user.id) === parseInt($store.state.pk.a_id)">
+            <div style="color: #4876ec; ">
+                左下角: {{ $store.state.user.username }}
+                &ensp;
+                <img :src="$store.state.user.photo" alt="" class="pk_photo">
+            </div>
+            <div style="color: #f94848;">
+                右上角:{{ $store.state.pk.opponent_username }}
+                &ensp;
+                <img :src="$store.state.pk.opponent_photo" alt="" class="pk_photo">
+            </div>
+        </div>
+
+        <div class="user_state_config" v-if="parseInt($store.state.user.id) === parseInt($store.state.pk.b_id)">
+            <div style="color: #4876ec;">
+                左下角: {{ $store.state.pk.opponent_username }}
+                &ensp;
+                <img :src="$store.state.pk.opponent_photo" alt="" class="pk_photo">
+            </div>
+            <div style="color: #f94848;">
+                右上角:{{ $store.state.user.username }}
+                &ensp;
+                <img :src="$store.state.user.photo" alt="" class="pk_photo">
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+</script>
+
+<style scoped>
+.playground {
+    /* 60% 浏览器宽度, 70% 浏览器高度 */
+    width: 40vw;
+    /* 背景色 */
+    /* background: lightblue; */
+    /* 距上边距40px,左右居中 */
+    margin: 10px auto;
+}
+
+.user_state_config {
+    text-align: center;
+    color: white;
+    font-size: 30;
+    font-weight: 600;
+    margin-top: auto;
+    display: flex;
+    justify-content: space-evenly;
+}
+
+.pk_photo {
+    border-radius: 50%;
+    width: 3vw;
+}
+</style>

web/src/store/bot.js

@@ -11,7 +11,7 @@ export default {
     add(context, data) {
       // 新建 bot
       $.ajax({
-        url: "http://localhost:3000/user/bot/add/",
+        url: "http://localhost:3001/api/user/bot/add/",
         type: "POST",
         data: {
           title: data.title,
@@ -33,7 +33,7 @@ export default {
     remove(context, data) {
       // 移除 bot
       $.ajax({
-        url: "http://localhost:3000/user/bot/remove/",
+        url: "http://localhost:3001/api/user/bot/remove/",
         type: "POST",
         data: {
           bot_id: data.bot_id,
@@ -57,7 +57,7 @@ export default {
     update(context, data) {
       // 更新 bot
       $.ajax({
-        url: "http://localhost:3000/user/bot/update/",
+        url: "http://localhost:3001/api/user/bot/update/",
         type: "POST",
         data: {
           bot_id: data.bot_id,
@@ -80,7 +80,7 @@ export default {
     getList(context, data) {
       // 获取 Bot 列表
       $.ajax({
-        url: "http://localhost:3000/user/bot/getlist/",
+        url: "http://localhost:3001/api/user/bot/getlist/",
         type: "GET",
         headers: {
           Authorization: "Bearer " + store.state.user.token,

web/src/store/record.js

@@ -1,5 +1,5 @@
-import $ from "jquery";
+// import $ from "jquery";
-import store from ".";
+// import store from ".";
 
 export default {
   state: {
@@ -22,25 +22,25 @@ export default {
     },
   },
   actions: {
-    getRecordList(context, data) {
+    // getRecordList(context, data) {
-      // 获取 Bot 列表
+    //   // 获取 Bot 列表
-      $.ajax({
+    //   $.ajax({
-        url: "http://localhost:3000/record/getlist/",
+    //     url: "http://localhost:3001/api/record/getlist/",
-        data: {
+    //     data: {
-          page_index: data.page,
+    //       page_index: data.page,
-        },
+    //     },
-        type: "GET",
+    //     type: "GET",
-        headers: {
+    //     headers: {
-          Authorization: "Bearer " + store.state.user.token,
+    //       Authorization: "Bearer " + store.state.user.token,
-        },
+    //     },
-        success(resp) {
+    //     success(resp) {
-          data.success(resp);
+    //       data.success(resp);
-        },
+    //     },
-        error(resp) {
+    //     error(resp) {
-          data.error(resp);
+    //       data.error(resp);
-        },
+    //     },
-      });
+    //   });
-    },
+    // },
   },
   modules: {},
 };

web/src/store/user.js

@@ -41,7 +41,7 @@ export default {
     // 登录函数
     login(context, data) {
       $.ajax({
-        url: "http://localhost:3000/user/account/token/",
+        url: "http://localhost:3001/api/user/account/token/",
         type: "POST",
         data: {
           username: data.username,
@@ -71,7 +71,7 @@ export default {
     // 注册函数
     register(context, data) {
       $.ajax({
-        url: "http://localhost:3000/user/account/register/",
+        url: "http://localhost:3001/api/user/account/register/",
         type: "POST",
         data: {
           username: data.username,
@@ -94,7 +94,7 @@ export default {
     // 获取登录成功后的用户信息
     getinfo(context, data) {
       $.ajax({
-        url: "http://localhost:3000/user/account/info/",
+        url: "http://localhost:3001/api/user/account/info/",
         type: "GET",
         headers: {
           Authorization: "Bearer " + context.state.token,

web/src/views/pk/PkIndexView.vue

@@ -1,13 +1,17 @@
 <template>
-  <PlayGround v-if="$store.state.pk.status === 'playing'" />
+  <div>
-  <MatchGround v-else-if="$store.state.pk.status === 'matching'" />
+    <PlayGround v-if="$store.state.pk.status === 'playing'" />
-  <ResultBoard v-if="$store.state.pk.loser !== 'none'" />
+    <UserIndicator v-if="$store.state.pk.status === 'playing'" />
+    <MatchGround v-else-if="$store.state.pk.status === 'matching'" />
+    <ResultBoard v-if="$store.state.pk.loser !== 'none'" />
+  </div>
 </template>
 
 <script>
 import PlayGround from "../../components/PlayGround.vue";
 import MatchGround from "../../components/MatchGround.vue";
 import ResultBoard from "../../components/ResultBoard.vue";
+import UserIndicator from "../../components/UserIndicator.vue"
 
 // onMounted 用于组件被挂载时, onUnmounted 用于组件被解除挂载时
 import { onMounted, onUnmounted } from "vue";
@@ -18,13 +22,14 @@ export default {
   components: {
     PlayGround,
     MatchGround,
-    ResultBoard
+    ResultBoard,
+    UserIndicator
   },
   // 创建前后端连接:当当前页面组件被加载时,建立连接,故使用 onMounted 函数
   setup() {
     const store = useStore();
     // 定义后端连接的 url, 使用 ws 协议
-    const socketUrl = `ws://127.0.0.1:3000/websocket/${store.state.user.token}/`;
+    const socketUrl = `ws://127.0.0.1:3001/websocket/${store.state.user.token}/`;
 
     let socket = null;
 

web/src/views/ranklist/RanklistIndexView.vue

@@ -91,9 +91,9 @@ export default {
     const pull_ranklist_page = (page) => {
       current_page = page;
       $.ajax({
-        url: "http://127.0.0.1:3000/ranklist/getranklist/",
+        url: "http://localhost:3001/api/ranklist/getranklist/",
         data: {
-          page_index:page,
+          page_index: page,
         },
         type: "GET",
         headers: {

web/src/views/record/RecordIndexView.vue

@@ -5,9 +5,9 @@
       <!-- <table class="table table-sm" style="text-align:center"> -->
       <!-- 创建表头: th 表示列 -->
       <thead>
-        <th>玩家A</th>
+        <th style="color: #4876ec">玩家A</th>
-        <th>玩家B</th>
+        <th style="color: #f94848">玩家B</th>
-        <th>赢家</th>
+        <th style="color: #FFD700">赢家</th>
         <th>对局时间</th>
         <th></th>
       </thead>
@@ -17,12 +17,12 @@
           <td>
             <img :src="record.a_photo" alt="" class="record-user-photo">
             &nbsp;
-            <span class="record-user-username"> {{ record.a_username }}</span>
+            <span class="record-user-username" style="color: #4876ec"> {{ record.a_username }}</span>
           </td>
           <td>
             <img :src="record.b_photo" alt="" class="record-user-photo">
             &nbsp;
-            <span class="record-user-username"> {{ record.b_username }}</span>
+            <span class="record-user-username" style="color: #f94848"> {{ record.b_username }}</span>
           </td>
           <td>
             {{ record.winner }}
@@ -62,6 +62,7 @@ import ContentBase from "../../components/ContentBase.vue";
 import { useStore } from 'vuex';
 import { ref } from "vue";
 import router from "@/router/index";
+import $ from "jquery";
 
 export default {
   components: {
@@ -103,9 +104,15 @@ export default {
 
     const pull_page = (page) => { // 加载分页
       current_page = page;  // 更新页面序号
-
+      $.ajax({
-      store.dispatch("getRecordList", {
+        url: "http://localhost:3001/api/record/getlist/",
-        page,
+        data: {
+          page_index: page,
+        },
+        type: "GET",
+        headers: {
+          Authorization: "Bearer " + store.state.user.token,
+        },
         success(resp) {
           console.log(resp.records);
           records.value = resp.records;

web/vue.config.js

@@ -1,4 +1,7 @@
-const { defineConfig } = require('@vue/cli-service')
+const { defineConfig } = require("@vue/cli-service");
 module.exports = defineConfig({
-  transpileDependencies: true
+  transpileDependencies: true,
-})
+  devServer: {
+    port: 80, // 启动端口号
+  },
+});