2.配置git环境与项目创建

项目介绍

项目驱动技术，实现什么项目，在选择去选择什么语言;项目拆分出来的每个模块，看是用什么技术来实现

项目名称：KOB （King of Bots）
做一个游戏的AI作战平台, 蛇类的对战游戏，每个用户user可以创建任意个AI（bot）,限制每个用户同一时间只能派出一个bot出战（防止最强的bot被复制无数个，霸占排行榜）,每一个bot其实就是一段代码；每个对局有两名玩家，每名玩家控制一条蛇，上右下左，每次当一条蛇死时，就结束回合。
每一个bot就相当于函数代码，比如random%4 最简单的四个方向；(每局对战也可以是一个微服务)

项目讲解周期大概两个月~

网站logo：

项目包含的模块：

• PK模块：匹配界面（需要使用微服务）、实况直播界面（WebSocket协议）、聊天框（WebSocket协议）;我们这里使用websocket协议。

• 对战列表模块：对局列表界面、对局录像界面

• 排行榜模块：Bot排行榜界面

• 用户中心模块：注册界面、登录界面、我的Bot界面、每个Bot的详情界面

websocket协议：双向协议，客户到服务端发请求，服务端到客户端发请求。
http协议： 是客户端向服务端发送请求，服务端返回响应，是单向协议。

系统架构：

****对应项目最终实现架构的效果图：
web页面最上面的是导航栏

最终的展示效果：

---

配置Git

使用git维护代码
1.存档（本地，或者云端），历史所有代码，commit提交版本
2.公司代码开发，家里代码开发，同步不同机器的代码（github或者acgit或者）

这里使用网站git.acwing.com 维护代码 ；工具使用 gitbash

https://git.acwing.com/users/sign_in

Git连接gitee或者github网站时是通过ssh通信的，不支持密码操作，
需要使用密钥来及进行操作，使用 linux 系统生成密钥。
在gitbash中安装 （因此要先安装gitbash https://gitforwindows.org/）
步骤：
（1) cd （到家homepath目录）
（2) ssh-keygen (生成ssh文件,一路回车默认)
（3) cd .ssh （进入.ssh文件中）
（4）cat id_rsa.pub (查看ssh公钥内容，一堆密钥，复制)
（5）按住鼠标左键自动复制密钥（ 在gitbash界面）
（6）添加密钥 （即在git.acwing网站的SSH密钥选项中添加SSH, ）

---

（7）初始化本地文件夹
在新创建项目 kob 的文件夹打开过git执行命令，git init 出现.git的文件夹，也就初始化仓库成功了。（有可能隐藏）

终端中 ls -a 显示所有文件

一般再这个文件夹中创建一个reademe文件

---

测试：
(8) 建议记事本，快捷简单，markdown语法
(9) git status 查看当前文件的状态，有哪些文件没有被commited；
(10) git add . 表示把当前文件夹未收录的文件收录到仓库里面
(11) 把当前版本保存下来 git commit -m "创建项目" 下一步上传 git push （和云端同步起来）
(12) 在云端gitacwing网站创建一个空项目kob （同名），方便同步； （创建完成后会提示进行一个配置）
(13) Git全局设置；命令执行时，如果有多个项目最好不要配置--global (意味着git上所有项目都用一个配置)

解决bug:

使用ssh克隆。在一个文件夹中，打开gitbash 输入git clone 链接

每次修改(删除)完一个项目的文件mfgtest.txt之后，要更新到云端时

打开gitbash
git status
更新流程操作：
git add .
git commit -m "test" // 名称叫做test
git push

git pull 拉取

项目的前后端

后端：backend（服务器端），使用springboot来写;可以对接mysql或者redis或者硬盘或者微服务

前端：名称web，使用vue3来写，vue会将最终的项目打包成html和css几个静态文件。

简单解释前后端交互流程： 即客户端发送一个请求（url）到后端 ,服务端回向前端返回一个字符串（一个大的文件），浏览器接收到字符串会渲染成页面；

本质: 就是服务器函数调用，url可以传函数的参数，用户的所有操作; 都是调用函数，函数的参数在url里面，服务器负责返回一个结果。

传统模式：前后端不分离，比如，客户端发一个函数调用的请求，服务端直接把相应代码或者页面返回，
如今：前后端分离，比如打开一个网站，第一步，服务器先加载浏览器的html静态页面先传过来，再向服务器发送请求，服务器只将数据返回，前端接收到数据时，再动态的将数据插入（字符串处理）到 html 的某个部分，生成页面（渲染，字符串拼接）；

前后端分离：如果服务端返回的数据使用浏览器的 js 实现，就是前后端分离；如果是在服务端，如java直接实现的就是前后端不分离的。

MVC模式： MVC模式和前后端分离没有关系，分离有MVC格式，不分离也有MVC模式。
本质： 每一个后端就是一个函数，url链接就是调用函数名，函数就相当于C (Controllr,负责用于向用户返回数据的一个控制器), V视图就是html ，M（model）就是数据库。

我们这里要实现前后端分离的项目：

优点：写同一个后端接口，可以支持多个端口，只是前端展示的格式不一样；

技术栈：
后端：Springboot框架， 使用Idea工具来写；
前端：Vue框架，使用vscode工具来写；

创建后端项目

第一步，使用Idea创建Springboot项目，通过Spring initializer。
（注：服务器在国外，创建不成功就多试几次）
项目创建成功后，idea右下角，不用点击初始化git；

bug问题：java类文件不能正常显示，pom环境无法导入；

每一个链接对应一个函数，一般把函数创建子在一个新的目录；controller包，存储后端所有的函数。**

写一个函数，加上@controller注解就可以实现映射了。
demo：

测试结果：

前后端不分离（示例）

这种代码方式是前后端不分离的情况，前端发送链接，后端会解析这个链接对应的是哪一个函数，主要是看在controller里面是哪一个函数；函数返回的是一个html页面，浏览器源代码和这个html文件完全一致；

前后端分离

后端就不在返回一个页面的，而是返回一个数据；
通过controller一层一层的往下找出来的，后端将数据计算出，返回给