从9.11开始，正式开始SpringBoot框架课的学习，每节课都来整理一篇笔记，来记录下整节课的内容

本篇笔记中关于Linux的git与Web应用课的vue的内容由于在其他课程已经学过，在此可能赘述篇幅会很少，具体可看下本人之前的笔记整理

0.0.0.1版本 项目骨架

git的具体操作指令与使用方法

vue基础项目笔记

一.项目整体设计与概述

1.概述：

整个课程会去学习搭建一个AI对战平台。
对于 一个用户来说，可以具有多个AI(在这里称之为bot)。但是由于为了能够防止刷榜，故限制用户每次只有一个bot出战
通过代码控制蛇的每一回合的运动。
游戏为回合制，每个bot本质上为每一个函数，来操作蛇的运动。在最终玩的时候需要选择使用哪个bot
来参与游戏。
每一个bot都有一个天梯分，在对战结束后对天梯分进行更新。
为了能够使得游戏更有趣味性，用户可以选择支持人机/人人模式来玩
项目虽然过于小，但是依旧具有微服务框架。
最终，将这个项目命名为————King of Bots

2.整个项目的整体细分

整个项目的功能及服务协议的结构如下图所示：

此项目采用前后端分离的模式，也就是说，一套后端对应多个前端，在不同的端下不同的页面样式如下所示:
Web端:

Acapp端：
类似AC Saber，

二.前期工作

1.配置git环境

为何要使用git:

(1).存档功能
(2).同步不同机器的代码
(3).实现多人协作(在本项目上暂时不需要)

如何使用git

可以详见上方的git链接
通信靠ssh密钥进行通信信道传输:
可查看以下链接:
Linux基础课ssh讲义
个人整理ssh笔记
打开Git bash,切换到根目录,
输入ssh-keygen生成密钥
切换到ssh文件夹后打开id-rsa.pub文件，直接选中所有内容进行复制
复制后在github/acgit上传ssh密钥，并设置名称，最终出现如下截图的样式，即为可得:

2.创建仓库:

1).初始化git

在git bash在对应的文件夹输入git init,当在对应文件夹下出现.git即可

2).创建readme.md文件

在此操作中需要用到vim，具体可看如下链接:
个人整理vim笔记
在git bash中创建readme.md进行输入内容创建
如果实在不会vim,那么创建文本文档，到最后改成md文件即可
进行存档与保存

3.云端创建项目，将本地与云端相对应(具体命令可看最上方链接):

首先先在github/acgit上创建好云端仓库
之后在Git Bash上输入

git config  user.email
git config user.name

如果有多个项目要放的话，最好不加--global
然后将现有的文件/文件夹推送上去.
如果想对自己的项目有其他操作比如两个电脑克隆，自己电脑与公司/实验室电脑同步可以看开头给出的链接

4.前后端的一些概念

对于本项目来说，前后端有着如下的结构关系:

其中，前端的两个界面模式——————Web与AcApp不一定在同一台机器的服务器上。

基本的服务模型为:

当用户打开网页，向服务器发送链接(请求)
其实本质上来说就说函数调用，函数参数存储在URL里，服务区负责返回一个结果

基本的服务模型下有两种模式:

前后端不分离:

客户端向服务器发送请求，服务器直接向客户端返回整个页面，也就是说html代码直接在服务器端生成.

前后端分离:

整个模式如上图所示。
注：何为渲染，即字符串拼接，将数据插到html的某些部分里，若在用户浏览器中用js实现,则为前后端分离，如果是在服务器中直接实现则为前后端不分离

前后端分离有一个好处就是：写一个后端可以支持多个端口

5.创建项目后端:

使用工具：idea
创建后端:
在idea中新建项目：
打开:start.spring.io
设置组:com.kob
名称/工件写为：backend
Java版本切记设为8，JDK设为1.8
点击下一步：
添加依赖：这个项目只需要Spring web和Template Engines:Thymeleaf(用来前后端不分离)
点击创建

如果说过了一会出现了 Cannot download一般大概率就断网了(拜墙所赐)
如果能够说打开网页，那么就在网页进行配置，将文件导入idea

(本人在试了几次之后，直接创建成功(手必须要快这样就不会掉网))，创建完成后记得重新打开一遍

5.装完后进行初始化

打开项目中的BackendApplication.java,打开后提示安装JDK，一定要记得安装，选Java8/1.8，不要选18

装完之后再打开，并更改Java文件夹目标标记，否则为源根之外的Java标记(其实也可以不改)，会影响运行的是Maven。如下图所示:

在点击运行时会出现问题org.Springframework.org不存在

修改方式如下图所示：将在ide委托运行交给Maven这一选项打对勾

有提示说加载Maven，这个一定需要装上，否则会显示以下的包不存在

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

过一段时间就能够正常运行了。

三.编写的前期工作

(前后端不分离的写法)

(一).后端部分

1.函数写在哪：

一般是新建一个目录 controller，用来存储所有的函数
比如说新建pk包，pk包中创建IndexController.java文件
如果想把文件中的函数链接到对应函数:
@Controller回车加入

对于整个项目来说，controller的所有链接都是在pk目录下，对战都是在record目录下。
使用@RequestMapping添加副目录(在写的时候不要加;)

2.创建页面:

点击resources-templates-新建目录pk–新建html
由于每个链接都要返回一个html页面
因此在IndexController.java文件中写入index()函数，返回字符串对应链接。

放置图片:
图片放置在resorces-static-img中，其他的操作基本上与前端css操作一致。

(前后端分离)

在这种模式下，后端不会返回html页面，而是返回数据。
在pk目录下创建BotInfoController新类
用@RestController()返回数据(不会去找前端模板)
用@RequestMapping()添加到副目录映射

前后端分离的模式返回类型多样，不仅仅可以返回一个字符串，还可以返回一个链表，具体方式如下:
定义一个Link类型的函数，函数中以如下形式返回:
List<String>list=new LinkedLinst<>();
此外也可以返回一个字典，字典和链表可以嵌套，以如下形式:
Map<Strng,String>map=new HashMap();
更此外也可以返回一个字典 ，字典和链表可以进行嵌套,可以套成List链表的每一项都是map
Map<String,String>map=new HashMap():
List<Map<String,String>>List=new LinkedList<>();
实现的整个原理流程如下：
Java类中的链接对应函数名----返回哪个函数通过controller.pk一层一层找到，后端将函数结果计算出来并且返回，返回后前端即可收到

注：点开application.properties可以修改端口。
修改server.port,如果点开为空，则说明用的Spring默认网址创建。不为空，最好也做下修改，防止后续出现占用问题。

写完后记得加到git中

(二).前端部分：

前端部分使用vscode作为工具，选择使用vue作为框架
首先按照web应用课配置环境的步骤进行环境配置,方法如下：
Web应用课vue配置环境部分
随后打开Vue项目管理器，点击创建(最好是输入路径进到文件夹中)
关闭初始化git，将第一个起名为web
预设选择vue3，点击创建项目
安装vue-router和vuex两个路径
依赖中安装jQuery bootstrap
看到界面即可创建成功，如下所示：

停止该项目之后，再创建一个新项目：acapp
经过上面同样的步骤后进行配置,对于插件只需要安装vuex插件
将创建好的文件存在git里
然后对创建好的两个项目的一些文件进行删除处理。
注：在刚刚初始化的Vue界面，链接打开带1，在打开的App.vue中去掉哈希函数即可去掉后缀”1”

1.前后端通信

前端访问后端函数
在App.vue中定义setup函数

setup:()=>{

}//整个函数入口

将后端通过使用Ajax将数据信息提取出来，然后定义两个变量bot-name和bot_rating通过Ajax将数据提取出来通过变量对函数return数据，然后引用到div中。
用Ajax引入的方式如下所示:

$.ajax({
   url:"地址"，
   type:"get",
   success.resp=>{
       bot.name.value=resp.name;
       bot.rating.value=resp.rating
       console.log(resp);
   }
))

写完后运行会出现CORS问题，即跨域问题,如下图所示:

原因在于，比如说：当前前端为localhost:8080,当前后端为127.0.0.1:3000两个的域名不一样从而出现了跨域问题。
解决方法:
在后端创建一个类并将给出的问题解决代码复制上去，链接如下。
问题解决代码链接
在根地址创建一个新包config包中创建CorsConfig类

四.总结

整个前后端分离的操作流程为，用户打开前端，一刷新，前端在用户浏览器里执行前端代码，用户打开网址，代码下载到浏览器里，挨个执行里面的每个代码，执行到Ajax代码中。
客户端向backend后端发送请求，发送完请求后，backend通过Controller上的路径看链接哪个函数，函数中包括Json对象，有name rating属性，后端将值传给用户浏览器，用户浏览器拿到结果后，将对象换成传过来的值，结束。
当数据发生更换时，前端页面会自更换

在此阶段项目写完后，提交代码上传到云端