第六章--- 实现微服务：匹配系统（中）

发布时间：2026/7/23 11:43:31

第六章--- 实现微服务：匹配系统（中）

完善上一part的匹配系统

对于之前的优化

由于要区分玩家，所以要在之前Game.java添加一个Player类存储玩家信息,

包括：
玩家Id，
玩家起始位置(sx,sy)
记录每个玩家走过的路径steps，即每个玩家历史上执行过的操作序列，用List存

consumer/utils/Player.java

package com.popgame.backend.consumer.utils;import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;import java.util.List;@Data
@AllArgsConstructor
@NoArgsConstructorpublic class Player {private Integer id;private Integer sx;private Integer sy;private List<Integer> steps;
}

在consumer/utils/Game.java里添加Player类,playerA表示左下角的玩家，playerB表示右上角的玩家,同时添加获取A,B player的函数，方便外部调用。

  private Player playerA, playerB;public Game(Integer rows, Integer cols, Integer inner_walls_count, Integer idA, Integer idB) {this.rows = rows;this.cols = cols;this.inner_walls_count = inner_walls_count;this.mark = new boolean[rows][cols];playerA = new Player(idA, this.rows - 2, 1, new ArrayList<>());playerB = new Player(idB, 1, this.cols - 2, new ArrayList<>());}public Player getPlayerA() {return playerA;}public Player getPlayerB() {return playerB;}

注意在consumer/WebSocketServer.java里传参的时候也要修改

...
Game game = new Game(13, 14, 36,a.getId(),b.getId());
...

为了方便，我们可以把与游戏相关的信息封装成一个JSONObject
consumer/WebSocketServer.java

		    JSONObject respGame = new JSONObject();respGame.put("a_id", game.getPlayerA().getId());respGame.put("a_sx", game.getPlayerA().getSx());respGame.put("a_sy", game.getPlayerA().getSy());respGame.put("b_id", game.getPlayerB().getId());respGame.put("b_sx", game.getPlayerB().getSx());respGame.put("b_sy", game.getPlayerB().getSy());respGame.put("map", game.getMark());...//直接传游戏信息给玩家A和玩家BrespA.put("game", respGame);...respB.put("game", respGame);

修改前端

store/pk.js

state: {socket: null, //ws链接opponent_username: "",opponent_photo: "",status: "matching", //matching表示匹配界面，playing表示对战界面game_map: null,a_id: 0,a_sx: 0,a_sy: 0,b_id: 0,b_sx: 0,b_sy: 0,},getters: {},mutations: {updateSocket(state, socket) {state.socket = socket;},updateOpponent(state, opponent) {state.opponent_username = opponent.username;state.opponent_photo = opponent.photo;},updateStatus(state, status) {state.status = status;},updateGame(state, game) {state.game_map = game.map;state.a_id = game.a_id;state.a_sx = game.a_sx;state.a_sy = game.a_sy;state.b_id = game.b_id;state.b_sx = game.b_sx;state.b_sy = game.b_sy;},...},

在PKindex.vue里面直接把整个数据传进去就好了

store.commit("updateGame",data.game);

这样我们就解决了上一part遗留下来的问题，使其全部实现前后端交互了。

实现游戏同步

实际上我们在游戏对战的时候存在三个棋盘，两个是对战双方客户端里存在的棋盘，一个是云端存在的棋盘，我们要求实现云端与两个客户端之间的同步。

实现方法

玩家每一次操作都会上传至云端服务器，当服务器接收到两个玩家的操作后，就会将两个玩家的蛇的移动信息同步给两个玩家。

游戏总流程示意图:
在这里插入图片描述

引入线程

为了优化游戏体验度，我们的Game不能作为单线程去处理，每一个Game要另起一个新线程来做。
从Next Step开始的操作可以当成一个线程，获取用户操作可以当成另一个线程。
这里我们涉及到两个线程之间进行通信的问题，以及线程开锁解锁的问题。

每一局单独的游戏都会new 一个新的Game类，都是一个单独的线程。

将类改成多线程

继承一个 Thread类，并且ALT + INS重写run()方法
我们开始进行线程的执行的时候，线程的入口函数就是这个run()函数

consumer/utils/Game.java

public class Game extends Thread{...@Overridepublic void run() {super.run();}
}

在consumer/WebSocketServer.java 里面通过start()开始执行(是 Thread类的一个API)

   			game.createMap();users.get(a.getId()).game = game; //需要在前面新建一个game属性users.get(b.getId()).game = game;game.start();

将用户的操作nextStep存起来,方便外面的线程调用,
在Game线程里面会读取两个玩家的操作nextStepA/B的值，
在外面Client线程里面则会修改这两个变量的值，
这里涉及到了线程的读写同步问题！
需要加上进程同步锁
一般来说就是先上锁再读写，后解锁
try{} finally {lock.unlock();}可以保证报异常的情况下也可以解锁而不会产生死锁
简单总结一下就是：先上锁再操作，具体可以参考OS相关的内容o(╯□╰)o
所以以下涉及到nextStepA 和 nextStepB 的，不管是读还是写，只要出现了的话就要考虑到上锁和解锁方面的问题了，Be careful~~
consumer/utils/Game.java

//两名玩家的下一步操作，0123表示上右下左（与前端一致）private Integer nextStepA = null;private Integer nextStepB = null;//进程同步锁public void setNextStepA(Integer nextStepA) {lock.lock();try {this.nextStepA = nextStepA;} finally {lock.unlock();}}public void setNextStepB(Integer nextStepB) {lock.lock();try {this.nextStepB = nextStepB;} finally {lock.unlock();}}...private boolean nextStep() {//等待玩家的下一步操作}

实现接受客户端玩家输入的操作

后端接受前端两名玩家输入的操作后，才开始进行下一步操作。为了游戏的流畅性，提高玩家的游戏体验感，我们规定，如果超过一定的时间后，另一名玩家仍然未能给予操作，我们就判定这个玩家lose了。

可以用sleep函数来实现等待效果,定最长等待时间为5s。
这里可以按照自己的情况合理地规定等待时间，可以通过增加循环次数，减少sleep时间优化玩家操作手感，以牺牲服务器的计算量换取玩家的操作的流畅性。
**tips：**要在循环里面上锁，在外面上锁会死锁！
还需要注意的是，我们前端设置1s走5步，200ms走一步，所以为了操作顺利，不会因为操作太快而读入多个操作，我们每一次读取前都要先sleep 200ms，规范一下。

因为后面要在外面调用每名玩家操作对应的ws链接，且需要向前端传递信息，需要先将下面两段代码改成
public
consumer/WebSocketServer.java

 final public static ConcurrentHashMap<Integer, WebSocketServer> users = new ConcurrentHashMap<>();public void sendMessage(String message) {//异步通信要加上锁synchronized (this.session) {try {this.session.getBasicRemote().sendText(message);} catch (IOException e) {e.printStackTrace();}}}

编写后端逻辑
consumer/utils/Game.java

 private boolean nextStep() {//等待玩家的下一步操作try {Thread.sleep(200); //前端1s走5步，200ms走一步，因此为了操作顺利，每一次读取都要先sleep 200ms} catch (InterruptedException e) {throw new RuntimeException(e);}for (int i = 0; i < 5; i++) {try {Thread.sleep(1000);lock.lock();try {if (nextStepA != null && nextStepB != null) {playerA.getSteps().add(nextStepA);playerB.getSteps().add(nextStepB);return true;}} finally {lock.unlock();}} catch (InterruptedException e) {e.printStackTrace();}}return false;}private void judge() {//判断两名玩家下一步操作是否合法}private void sendAllMessage(String message) {//向每一个人广播信息 后端->前端WebSocketServer.users.get(playerA.getId()).sendMessage(message);WebSocketServer.users.get(playerB.getId()).sendMessage(message);}private void sendMove() {//向两个Client传递移动信息lock.lock();try {JSONObject resp = new JSONObject();resp.put("event", "move");resp.put("a_direction", nextStepA);resp.put("b_direction", nextStepB);nextStepA = nextStepB = null;} finally {lock.unlock();}}private void sendResult() {//向两个Client返回游戏结果JSONObject resp = new JSONObject();resp.put("event", "result");resp.put("loser", loser);sendAllMessage(resp.toJSONString()); //将JSON转化为字符串}@Overridepublic void run() {for (int i = 0; i < 1000; i++) {// 最多循环1000步if (nextStep()) {  //是否都获取到了两条蛇的操作judge();if ("playing".equals(status)) {//将对手玩家的输入广播给ClientsendMove();} else {sendResult();break;}} else {status = "over";lock.lock();try {if (nextStepA == null && nextStepB == null) {loser = "all";} else if (nextStepA == null) {loser = "A";} else {//nextStep() = false会有卡超时边界依然输入的情况，但是为了规则合理性，在这里全部判输了loser = "B";}} finally {lock.unlock();}sendResult();break;}}}

修改前端

scripts/GameMap.js

add_events() {this.ctx.canvas.focus();const [snake0, snake1] = this.snakes;this.ctx.canvas.addEventListener("keydown", e => {let d = - 1;if (e.key === 'w') d = 0; //上else if (e.key === 'd') d = 1; //右else if (e.key === 's') d = 2;//下else if (e.key === 'a') d = 3;//左if (d >= 0) { //一个合法的操作//前端向后端发消息： 前端 -> 后端this.store.state.pk.socket.send(JSON.stringify({event: "move",direction: d,}));}});}

同时在后端接受消息,并编写移动函数move()
consumer/WebSocketServer.java

public void move(int direction) {if (game.getPlayerA().getId().equals(user.getId())) {//蛇Agame.setNextStepA(direction);} else if (game.getPlayerB().getId().equals(user.getId())) { //蛇Bgame.setNextStepB(direction);}}@OnMessagepublic void onMessage(String message, Session session) {// 从Client接收消息System.out.println("receive message!");JSONObject data = JSONObject.parseObject(message);String event = data.getString("event");if ("start matching".equals(event)) {startMatching();} else if ("stop matching".equals(event)) {stopMatching();} else if ("move".equals(event)) {int d = data.getInteger("direction");move(d);}}

在前端编写move和result的逻辑函数，让小蛇动起来(✺ω✺)
同时，为了分别取出两条蛇可以将GameObject在store/pk.js里先存下来,记得写对应的update函数哦！

然后我们再在components/GameMap.vue里修改
components/GameMap.vue

 onMounted(() => {store.commit("updateGameObject",new GameMap(canvas.value.getContext('2d'),parent.value,store));});

蛇的去世判断要从前端搬到后端判断

先在前端写好情况分支选择
views/pk/PKindex.vue

 onMounted(() => { //当当前页面打开时调用...socket.onmessage = msg => { //前端接收到信息时调用的函数...} else if (data.event === "move") {const game = store.state.pk.gameObject;const [snake0,snake1] = game.snakes;snake0.set_direction(data.a_direction);snake1.set_direction(data.b_direction);} else if (data.event === "result") {const game = store.state.pk.gameObject;const [snake0,snake1] = game.snakes;if (data.loser === "all" || data.loser === "A") {snake0.status = "dead";}if (data.loser === "all" || data.loser === "B") {snake1.status = "dead";}}}...});

在后端写judge逻辑
注意：要先添加一个Cell类存储蛇的全部身体部分，在Player类里面把蛇的身体都存储下来，
然后在Game类里判断的时候再循环一遍两个Player,各自取出自己的每一节cell逐个判断。
判断逻辑包括：撞墙、撞到自己、撞到他人，这些都会导致自己lose掉比赛

consumer/utils/Player.java

...private boolean check_tail_increasing(int step) { //检测当前回合蛇的长度是否增加if (step <= 10) return true;else {return step % 3 == 1;}}public List<Cell> getCells() {List<Cell> res = new ArrayList<>(); //存放蛇的身体int[][] fx = {{-1, 0}, {0, 1}, {1, 0}, {0, -1}};int x = sx, y = sy;res.add(new Cell(x, y));int step = 0; //回合数for (int d : steps) {x += fx[d][0];y += fx[d][1];res.add(new Cell(x, y));if (!check_tail_increasing(++step)) {res.remove(0);}}return res;}...

consumer/views/Game.java

...private boolean check_valid(List<Cell> cellsA, List<Cell> cellsB) {int n = cellsA.size();Cell cell = cellsA.get(n - 1); //取出最后一位(蛇头)if (mark[cell.x][cell.y]) { //如果最后一位是墙的话return false;}for (int i = 0; i < n - 1; i++) {if (cellsA.get(i).x == cell.x && cellsA.get(i).y == cell.y) { //如果自己碰到自己就算输return false;}}for (int i = 0; i < n - 1; i++) {if (cellsB.get(i).x == cell.x && cellsB.get(i).y == cell.y) { //如果主动碰到对手也算自己输return false;}}return true;}private void judge() {//判断两名玩家下一步操作是否合法List<Cell> cellsA = playerA.getCells();List<Cell> cellsB = playerB.getCells();boolean validA = check_valid(cellsA, cellsB);boolean validB = check_valid(cellsB, cellsA);if (!validA || !validB) {status = "over";if (!validA && !validB) {loser = "all";} else if (!validA) {loser = "A";} else {loser = "B";}}}
...

至此游戏的大部分逻辑已经写完了

写个游戏结果画面

首先在views/pk/PKindex.vue里面添加游戏胜负显示逻辑

...else if (data.event === "result") {const game = store.state.pk.gameObject;const [snake0,snake1] = game.snakes;if (data.loser === "all" || data.loser === "A") {snake0.status = "dead";}if (data.loser === "all" || data.loser === "B") {snake1.status = "dead";}store.commit("updateLoser",data.loser);}
...

在前端写一个组件components/ResultBoard.vue 这就是游戏结束后显示的结果版面，把谁是loser存在store里面就可以全局调用来判断了

components/ResultBoard.vue

<template><div class="result-board"><div class="result-board-text draw" v-if="$store.state.pk.loser == 'all'" >Draw</div><div class="result-board-text lose" v-else-if="$store.state.pk.loser =='A' && $store.state.pk.a_id == $store.state.user.id" >Lose</div><div class="result-board-text lose" v-else-if="$store.state.pk.loser =='B' && $store.state.pk.b_id == $store.state.user.id" >Lose</div><div class="result-board-text win" v-else >WIN</div><div class="result-board-btn"><button type="button" class="btn">Try again</button></div></div>
</template>

CSS 样式自己设计一下就好了

实现Try again逻辑

接下来我们把Try again按钮实现一下，玩家可以在游戏结束后点击这个按钮再来一局游戏。
实现逻辑也比较简单，每次点击按钮，把游戏页面展示状态status从playing 改成 matching即可,这样整个游戏页面就返回到匹配页面了。
不要忘记了要updateLoser改成none，即重新开始游戏前还没有loser
还有把对手头像upd ateOpponent成默认的灰头像。

设计录像数据库

为了后期存储对战录像，我们需要先设计一个存储对象的数据库。
数据库内容包括

在这里插入图片描述
然后像前面一样，建立相应的pojo,mapper层

准备工作完成后，我们就可以开始写将数据写入数据库的逻辑了
consumer/utils/Game.java

private String getMapString() {StringBuilder res = new StringBuilder();for (int i = 0; i < rows; i++) {for (int j = 0; j < cols; j++) {if (mark[i][j]) res.append(1);else res.append(0);}}return res.toString();}private void saveRecord() {Record record = new Record(null, //因为之前创建数据库时是把id定义为自动递增，所以这里不用手动传idplayerA.getId(),playerA.getSx(),playerA.getSy(),playerB.getId(),playerB.getSx(),playerB.getSy(),playerA.getStepsString(),playerB.getStepsString(),getMapString(),loser,new Date());WebSocketServer.recordMapper.insert(record); //ws里数据库的注入}

END
至此，我们就完成了联机匹配和存储游戏对局数据的大部分内容了，辛苦大家了QAQ

相关新闻

【Android】MVC与MVP的区别，MVP网络请求实践

【Android】MVC与MVP的区别，MVP网络请求实践

一、MVC模式 目录 一、MVC模式二、MVP模式 1、MVP的简单应用 1.1 导入相关依赖包并设置权限1.2 实现Model1.2 实现Presenter1.3 实现View1.4分析项目结构和绑定过程1.5效果展示 2、MVP结合RxJava 一、MVC模式 MVC&#xff08;Model(模型)——View(视图)——Controller(控制…

2026/7/23 11:43:32
如何使用Ping命令检测网络连通性？

如何使用Ping命令检测网络连通性？

在Android开发中&#xff0c;检测设备和服务器之间的网络连通性是一项常见且重要的任务。利用Ping命令&#xff0c;可以快速诊断网络问题并确保应用的网络请求流畅。 简介 ping&#xff08;Packet Internet Grouper&#xff09;是一种因特网包探测器&#xff0c;用于测试网络…

2026/7/23 12:51:50
Flink系列之：窗口聚合

Flink系列之：窗口聚合

Flink系列之&#xff1a;窗口聚合 一、窗口表值函数&#xff08;TVF&#xff09;聚合二、窗口表值函数TVF三、分组集四、ROLLUP五、CUBE六、选择组窗口开始和结束时间戳七、多级窗口聚合八、分组窗口聚合九、时间属性十、选取分组窗口开始和结束时间戳 一、窗口表值函数&#x…

2026/7/23 11:08:19

最新新闻

OpenClaw赋能行业政策公开数据采集：从监管追踪到智能解读的全面指南

OpenClaw赋能行业政策公开数据采集：从监管追踪到智能解读的全面指南

引言&#xff1a;当合规成为企业的生命线在当今瞬息万变的商业环境中&#xff0c;行业监管政策的每一次调整都可能深刻影响企业的战略方向、运营模式和市场准入条件。无论是金融行业的资本充足率要求、医疗健康领域的数据隐私规范&#xff0c;还是能源行业的碳排放标准&#xf…

2026/7/23 12:51:21
北京阳台定制收纳柜避坑指南，十大口碑品牌实力测评出炉 - 工业品牌热点

北京阳台定制收纳柜避坑指南，十大口碑品牌实力测评出炉 - 工业品牌热点

在全屋定制家居市场快速发展的当下，很多消费者在打造阳台空间时，都面临着选品难、避坑难的问题，想要做时尚风不锈钢全屋定制，想要找靠谱品牌做阳台定制收纳柜，或是想入手全品类不锈钢定制家居，如何选到靠谱品牌不…

2026/7/23 12:51:21
记账APP总在偷看你的账单？这款开源工具，数据自己管，截图就能自动记账！

记账APP总在偷看你的账单？这款开源工具，数据自己管，截图就能自动记账！

每个月钱花哪了完全没概念&#xff1f;打开支付宝微信账单&#xff0c;密密麻麻的数字看得头大&#xff1f;更烦的是&#xff0c;市面上的记账软件要么广告满天飞&#xff0c;要么强制同步云端&#xff0c;你的消费习惯、收入明细全被平台"画像"……如果你也受够了这…

2026/7/23 12:51:21
2026南京正规黄金回收公司，拒绝隐形消费，报价即到手真实价格 - 资讯洞察员

2026南京正规黄金回收公司，拒绝隐形消费，报价即到手真实价格 - 资讯洞察员

一、开篇 依据2026南京市消协黄金回收消费警示数据，本地超七成变现纠纷均来自隐形扣费、虚高报价、到店压价。正规回收机构应严格执行无额外收费、报价与结算一致原则，禹竞名奢汇作为本地优选品牌，全程拒绝隐形消费…

2026/7/23 12:51:28
大模型工业化落地：LoRA技术与合成数据实践

大模型工业化落地：LoRA技术与合成数据实践

1. 大模型技术演进与工业化的核心挑战在人工智能领域&#xff0c;大模型技术正经历着从实验室研究到工业化落地的关键转型期。过去三年间&#xff0c;模型参数量从十亿级跃升至万亿级&#xff0c;GPT-3的1750亿参数、PaLM的5400亿参数等标志性模型不断刷新性能上限。这种规模扩…

2026/7/23 12:51:30
工业巨头伍尔特，为何放弃3D打印？

工业巨头伍尔特，为何放弃3D打印？

Wrth集团&#xff08;伍尔特集团&#xff09;是一家创立于1945年的德国家族企业&#xff0c;在全球装配与紧固件市场处于领先地位。今年6月底&#xff0c;Wrth集团通过领英发布了一则不足50词的简短声明&#xff0c;确认关闭旗下增材制造业务部门Wrth Additive。对于工业3D打印…

2026/7/23 12:51:30

日新闻

从单点好评到指数级传播：AI副业主理人必须掌握的4层口碑渗透模型（含ROI测算表）

从单点好评到指数级传播：AI副业主理人必须掌握的4层口碑渗透模型（含ROI测算表）

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;从单点好评到指数级传播&#xff1a;AI副业主理人必须掌握的4层口碑渗透模型&#xff08;含ROI测算表&#xff09; 当AI副业主理人不再仅满足于单次服务交付&#xff0c;而是主动构建可复用、可裂变、可…

2026/7/23 0:00:25
帝舵佛山**网点地址更新：2026年7月售后热线电话与服务客户指南 - 帝舵中国官方服务中心

帝舵佛山**网点地址更新：2026年7月售后热线电话与服务客户指南 - 帝舵中国官方服务中心

帝舵佛山**网点地址已更新，2026年7月起售后热线电话正式启用为400-801-5381，客户指南同步发布。如需售后、维修或咨询服务，请直接拨打该全国统一**热线，服务时间每日8:00至22:00。地址信息详见下文，请按最新公布信…

2026/7/23 0:00:51
亨得利盐城维修点在哪里？手表维修保养地址指南**公示（2026年7月最新） - 亨得利官方

亨得利盐城维修点在哪里？手表维修保养地址指南**公示（2026年7月最新） - 亨得利官方

亨得利在盐城设有**售后维修服务点，为当地及周边腕表用户提供标准化的保养与维修支持。2026年7月最新公示的全国统一客服热线为400-878-6612，服务时间为每日8:00至22:00，客户拨打时请确认使用本次公布的最新号码。*…

2026/7/23 0:00:51

周新闻

2026年7月最新太原百达翡丽官方售后客服电话及服务网点地址查询 - 百达翡丽官方售后中心

2026年7月最新太原百达翡丽官方售后客服电话及服务网点地址查询 - 百达翡丽官方售后中心

2026年7月，百达翡丽在太原的官方售后服务体系完成更新，客户可通过全国统一客服热线与服务网点获得直接、合规的腕表养护与维修支持。所有售后服务均遵循品牌直营标准，覆盖全国范围，客户可选择到店或邮寄方式，但需…

2026/7/23 2:31:21
【JVM调优实战】16-可视化利器-JConsole-VisualVM-JMC

【JVM调优实战】16-可视化利器-JConsole-VisualVM-JMC

可视化利器：JConsole、VisualVM、JMC 实战 本文是《JVM调优实战》专栏第 16 讲。 引言 上一讲我们介绍了 JDK 命令行工具箱，它们轻量、快速，但有一个明显的短板：不直观。面对 jstat -gcutil 输出的一行行数字，你能感知 GC 频率，却难以一眼看出内存泄漏的趋势；你能用 js…

2026/7/23 2:31:17
什么是PCTFE？医药高端包装的“防潮王牌“材料

什么是PCTFE？医药高端包装的“防潮王牌“材料

——日氟荣高分子材料&#xff08;上海&#xff09;有限公司 专业深耕氟材料领域很多人好奇&#xff0c;高端药品包装为什么比普通包装更防潮、更稳定、保质期更长&#xff1f;核心秘密&#xff0c;就藏在一种特种氟材料——PCTFE聚三氟氯乙烯里&#xff01;作为国内领先的氟材…

2026/7/23 5:19:59

月新闻

[C++]内存管理：串顺序存储的内存回收

[C++]内存管理：串顺序存储的内存回收

在串&#xff08;字符串&#xff09;的顺序存储中&#xff0c;内存回收的方式取决于字符串的存储方式以及所使用的编程语言和相关库。以下以 C 为例进行说明&#xff0c;因为 C 对内存管理有较为直接的控制。 1. 基于 char 数组的串顺序存储 如果使用普通的 char 数组来存储字…

2026/7/23 2:31:18
移动端游戏功耗测试实战：电流、功率、亮度和场景对比

移动端游戏功耗测试实战：电流、功率、亮度和场景对比

移动端游戏功耗测试：先控制变量，再比较优化是否真的省电 摘要：功耗测试最容易犯的错误，是拿两次不同温度、不同亮度、不同场景的平均功率直接比较。本文给出一套可复现的游戏功耗测试方法，覆盖引擎特性验证、版本回归和黑盒体验测试，并说明如何把功耗与帧率、温控、CPU/G…

2026/7/22 16:30:07
足球口袋教练 HarmonyOS 离线应用实战（03/20）：ArkUI 首页仪表盘搭建

足球口袋教练 HarmonyOS 离线应用实战（03/20）：ArkUI 首页仪表盘搭建

本文是“足球口袋教练 HarmonyOS 离线应用实战”系列第 3 篇。示例项目是一个 HarmonyOS / ArkTS / ArkUI 编写的离线足球训练助手&#xff0c;围绕真实页面、真实截图和可复现操作展开。 本篇要解决的问题 训练 App 的首页不能只展示欢迎语&#xff0c;它要解决“我现在该点哪…

2026/7/23 0:20:09