King of Bots 项目开发

项目构思

PK 界面：匹配界面（微服务）/ 对战实况（websocket）/ 真人PK（websocket）
对战列表：录像回放
排行榜：Bot 列表
用户中心（注册登录我的Bot Bot记录）
websocket 长连接服务器主动向客户端发请求
扩展形式：后端：Mysql redis 硬盘微服务前端/小程序：vue3

1. 配置Git与项目创建

Git的作用：存档、同步代码、多人协作（Git原理：Linux基础课）

git操作：git init/git status/git add ./git commit -m "添加一些描述"/git push

2. 创建菜单

个人开发也是一般先写前端，再写后端。

创建导航栏组件：NavBar.vue 每个组件要有两个字母大写（限制）。这里不要忘了在app.vue里面导入，这里还需要导入bootstrap中的js和css，在script部分写。

NavBar.vue界面：不需要自己写前端代码，直接复制Bootstrap中的对应的代码就行，这里类似的前端框架有很多，Bootstrap、ElementUI等。

导航栏设计界面：1. PK界面 2. 记录界面 3. 排行榜界面 4. 对局列表 5. 404 界面。分别创建.vue文件，写三个基本标签。

设置路由规则：/router/index.js中，在主页上和每个button一一对应

用router-link代替a标签可以实现点击不刷新页面。

设置一个统一的组件ContentField作为card用来设计内部内容，如果需要修改样式只要在这个统一的组件里修改即可。

3. 游戏界面

requestAnimationFrame() 每次刷新页面需要递归调用的回调函数

构造函数中的start () 只执行一次，update () 每一帧执行一次，除了第一帧之外 on_destroy () 删除之前执行 destroy ()

移动的速度概念：帧与帧之间的时间间隔timedelta

蛇：每1,2,3，4,5,6,7，8,9,10,13,16,3n+1时刻增长一格

1	<canvas ref="canvas" tabindex="0"> </canvas>

tabindex="0" 使得canvas可以获取用户键盘输入

4. Mysql

mysql服务的关闭与启动：

关闭：net stop mysql80
启动：net start mysql80

mysql的常用操作

连接用户名为root，密码为123456的数据库服务：mysql -uroot -p123456
show databases;：列出所有数据库
create database kob;：创建数据库
drop database kob;：删除数据库
use kob;：使用数据库kob
show tables;：列出当前数据库的所有表
create table user(id int, username varchar(100))：创建名称为user的表，表中包含id和username两个属性。
drop table user;：删除表
insert into user values(1, 'yxc');：在表中插入数据
select * from user;：查询表中所有数据
delete from user where id = 2;：删除某行数据

配置SpringBoot:

Maven依赖地址

MyBatis网址

在pom.xml文件中添加依赖：

Spring Boot Starter JDBC
Project Lombok
MySQL Connector/J
mybatis-plus-boot-starter
mybatis-plus-generator
spring-boot-starter-security
jjwt-api
jjwt-impl
jjwt-jackson

在application.properties中添加数据库配置：

spring.datasource.username=root
spring.datasource.password=123456
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

SpringBoot中的常用模块
- pojo层：将数据库中的表对应成Java中的Class
- mapper层（也叫Dao层）：将pojo层的class中的操作，映射成sql语句，实现crud
- service层：写具体的业务逻辑，组合使用mapper中的操作
- controller层：负责请求转发，接受页面过来的参数，传给Service处理，接到返回值，再传给页面

Mybatis Plus 封装了很多crud，不用手写sql语句。一个表对应一个pojo，对应一个mapper

查找用户：（1）selectOne （2）selectById

（1）selectOne
    @GetMapping("/user/{userId}")
    public User getUser(@PathVariable Integer userId) {
        QueryWrapper<User> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("id", userId);
        return userMapper.selectOne(queryWrapper);
    }
 (2)selectById
    @GetMapping("/user/{userId}")
    public User getUser(@PathVariable Integer userId) {
        return userMapper.selectById(userId);
    }

1	@Autowired 和 @Service

密码加密存入数据库中

URL：（1）公开URL 例如/login 与数据库比对，比对成功分配一个sessionID（jwt-token），存在浏览器cookie中

（2）授权URL 例如/ 判断session（jwt-token）是否有效，有效将user定位到上下文。访问controller

JWT验证，便于跨域，而且不需要在服务器端存储（获取到一个令牌就可以登录多个服务器）

写一个API的流程：（1）service里写接口（2）在service.Impl里实现接口（3）在controller里调用

4.3 任务：前端页面的授权、注册页面、登录状态持久化

如果一个页面不修改store中state的值，那么就不用把ajax放进vuex里面。store中存放的是全局变量。

actions中放那个异步操作，mutations中放同步操作。

5. 个人中心界面

数据库新建一个表，date类型数据只有时间，datetime包括年月日时分秒

数据库中用下划线，pojo里面用驼峰命名法。

流程：

1、建数据库
2、写pojo
3、写mapper
4、写controller
4.1写service接口
4.2写impl实现（重点）
4.3写一个controller

怎么找maven依赖？？