金晖のBlog

思维导图 实现匹配的原理 要实现匹配系统起码要有两个客户端 client1，client2, 当客户端打开对战页面并开始匹配时，会给后端服务器 server 发送一个请求，而匹配是一个异步的过程，什么时候返回结果是不可预知的，所以我们要写一个专门的匹配系统，维护一堆用户的集合，当用户发起匹配请求时，请求会先传给后端服务器，然后再传给匹配系统处理，匹配系统会不断地在用户里去筛选，将 rating 较为相近的的用户匹配到一组。当成功匹配后，匹配系统就会返回结果给 springboot 的后端服务器，继而返回给客户端即前端。然后我们就能在前端看到匹配到的对手是谁啦。 举个例子，两个客户端请求两个链接，新建两个类： 1234567891011121314151617181920212223public class WebSocketServer { @OnOpen public void onOpen(Session session, @PathParam("token") String token) { // 建立连接 ...

思维导图 写在前面 由于是前端内容，不想花费太多时间。把本次做的东西列举出来，去和Git历史版本一一比对下就好了。 Bot页面布局 从store中获取头像 实现创建Bot 实现删除Bot 实现展示Bot 实现修改Bot 使用代码编辑器替换表单中的代码textarea 历史版本 点击进入该历史版本

思维导图 写在前面 这块是要实现，在项目中添加一个类Bot。和之前添加user的过程几乎一模一样，所以会写得非常精简。在这篇文章非常详细地介绍了Springboot关于后端数据处理的部分。 新建表bot 在数据库中新建表bot。 表中包含的列有： id: int：非空、自动增加、唯一、主键 user_id: int：非空，用于存放创建该bot的用户。 注意：在 pojo 中需要定义成 userId，在 queryWrapper 中的名称仍然为 user_id title: varchar(100)：用于存放bot名称。 description: varchar(300)：用于存放bot的描述。 content：varchar(10000)：用于存放bot的执行代码。 rating: int：默认值为 1500：用于存放该bot的天梯分。 createtime: datetime：用于存放该bot的创建时间 modifytime: datetime：用于存放该bot的最近修改时间 实现pojo层 在pojo包下新建一个类Bot，用于映射bot的数据表 12345678910 ...

思维导图 写在前面 前端部分就不想废太多时间了，总结一下干了什么然后去和历史节点一一对照看下就行了。 当我们登录网站的时候，如果没有登录，强制让用户重定向到 登录界面 实现注册页面，实现方法类似于UserAccountLoginView.vue 实现：登录状态的持久化。在当前代码版本下，一刷新就退出登录了；访问404界面也会退出登录，这都是因为没做到登录持久化。当我们的用户重定向到登陆页面的时候，我们需要把用户的 token 存储到浏览器的 local storage，这样就可以实现登录状态持久化。 修改 store 目录下的 -> user.js 文件 修改 view -> user -> account 下的 UserAccountLoginView.vue 文件 优化前端性能。在实现前端登录状态持久化之后，不断的刷新会显得网页非常的不自然，所以下面对前端页面进行优化。 在 store 目录下的 user.js 中添加全局变量和下拉函数。 修改 UserAccountLoginView.vue 修改 NavBar.vue 改动历史 点击这里 ...

写在前面 前端部分就不想废太多时间了，总结一下干了什么然后去和历史节点一一对照看下就行了。 实现两个页面–登陆、注册的前端样式 在 router 目录下的 index.js 中加入路径 在 store 下的 user.js 存储用户信息 把 user 加入到全局 module 在user.js中利用ajax实现登录。为了方便，在user.js中添加辅助函数 login ，并在 UserAccountLoginView.vue 中实现 修改NavBar.vue，将内容和变量绑定起来 实现：用户名和密码输入正确，点击提交跳到主页面。在 UserAccountLoginView.vue 中实现 实现： 登陆成功后获取用户的信息。在 user.js 中添加辅助函数，并在UserAccountLoginView.vue 中实现 实现：登录成功后修改导航栏信息。修改NavBar.vue。利用v-if和v-else来实现。 实现：退出登录。具体逻辑就是把用户存储的token令牌删掉并更改导航栏。修改NavBar.vue，并在user.js中添加辅助函数来清空 ...

思维导图 登录原理 session session是传统方法。 把一个网站所有的页面大致分为两类： 公开页面（未公开可以）login 页面 —— 与数据库一致，给用户发一个 sessionID，用户存到 cookie 中，每次请求访问时，将 cookie 中的 session 发给服务器 授权页面（登录后部分用户可见）—— 提取 cookie 中的 sessionID，判断是否有效，如果有效，则提取对应的用户信息到上下文中（一个 url 对应一个 Controller） 缺点：多端，跨域，多服务器分布式端，sessionID不好用。 JWT验证 具体可以参考这篇文章 JWT解决了session的缺点。 使用基于 Token 的身份验证方法，在服务端不需要存储用户的登录记录。大概的流程是这样的： 客户端使用用户名跟密码请求登录 服务端收到请求，去验证用户名与密码 验证成功后，服务端会签发一个 Token，再把这个 Token 发送给客户端 客户端收到 Token 以后可以把它存储起来，比如放在 Cookie 里或者 Local Storage 里 客户端每次向服务端请求 ...

思维导图 应用模型： SpringBoot 的角色是用来处理用户请求，client 端向 spring Boot 发送请求，然后向数据库请求数据，数据库返回数据给前端。 配置Mysql 下载并安装Mysql 配置环境变量 连接IDEA mysql服务默认开机自动启动，如果向手动操作，可以参考如下命令： 关闭：net stop mysql80 启动：net start mysql80 Mysql常用命令 连接用户名为root，密码为xxxxxx的数据库服务：mysql -u root -p xxxxxx 列出所有数据库：show databases; 创建数据库：create database kob; 删除数据库：drop database kob; 使用数据库“kob”：use kob; 列出当前数据库的所有表：show tables; 创建名称为 user 的表，表中包含 id 和 username 两个属性：create table user(id int, username varchar(100)); 删除表：drop table user; 在表中插入数据 ...

整体框架 实现蛇的头部 如何画蛇？ 本质上蛇可以看做一堆各自组成的序列。 新建Cell.js，用于表示一个蛇的方块。 123456789export class Cell { constructor(r, c) { this.r = r; this.c = c; // 转换为 canvas 的坐标 this.x = c + 0.5; this.y = r + 0.5; }} 新建Snake.js对象 cells数组就用于存放蛇的“身体”。 123456789101112131415161718192021222324252627282930313233343536373839import { AcGameObject } from "./AcGameObject";import { Cell } from "./Cell";export class Snake extend ...

思维导图 实现导航栏 老生常谈了，没啥好说的。随便去Bootstrap找个类改改构成基础部分 之后依据<router-link>和v-bind就能够实现基本的跳转。 组件NavBar.vue 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556<template> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container"> <routerLink :class="route_name == 'home' ? 'nav-link active' : 'nav-link'" :to="{nam ...

项目设计 项目包含的模块 PK 模块：匹配界面（微服务）、实况直播界面（WebSocket 协议） 对局列表模块：对局列表界面、对局录像界面 排行榜模块：Bot 排行榜界面 用户中心模块：注册界面、登录界面、我的 Bot 界面、每个 Bot 的详情界面 前后端分离模式 SpringBoot 实现后端 Vue3 实现 Web 端和 AcApp 端 前端使用Vscode，后端使用IDEA。 解决前端跨域问题 在后端文件的根目录src/main/java/com/example/backend下，新建config文件夹，在该文件夹内，新建CorsConfig文件并写入以下代码： 123456789101112131415161718192021222324252627282930313233343536373839404142434445package com.example.backend.config;import org.springframework.context.annotation.Configuration;import javax.servlet.*;i ...