SpringBoot(一)

今天也要加油啊！！

已于 2022-07-22 17:55:52 修改

阅读量460

点赞数 2

分类专栏： SpringBoot 文章标签： spring boot ssh git

于 2022-07-22 17:50:00 首次发布

本文链接：https://blog.csdn.net/m0_51684016/article/details/125937188

版权

SpringBoot 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

第一部分项目构思
第二部分配置 git 环境
项目的基本架构
创建项目后端
修改端口
下载vue并配置
运行 Vue
Vue 项目进行修改和瘦身
前端访问后端的函数
SpringBoot跨域问题
添加背景图片
总结

第一部分项目构思

项目设计：蛇类的AI对战 King Of Bots 简称 KOB 灵感来源于北大的 botzone.org.cn 网站

每一个 user 可以产生若干个 bot，每个回合玩家可以指定一个 bot 上场对战

将项目进行拆分

按页面进行拆分如 PK、对战列表（有哪些人玩）、排行榜、用户中心
PK模块里细分为：匹配界面（微服务）、实况直播（websocket）、真人PK（人与人、人机、websocket，可以考虑加一个聊天框进去）
对战列表里面可以细分：录像回放
排行榜里面可以细分： Bot列表
用户中心里面细分：注册、登录、我的 bot、bot的记录

http协议是一个单向协议，由客户端向服务端发送请求，服务端只能被动接收

websocket协议是一个双向协议，既可以客户端向服务端发送请求，也可以服务端向客户端发送请求

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JIMlDlbp-1658483172756)(E:\Sprintboot项目中用到的图片\项目设计.png)]

项目是前后端分离的，一份后端代码可以对应多个前端（网站、小程序、APP）

项目的初步构思：

web端：

ACAPP端：类似于AC Saber

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iFWvOG7S-1658483172757)(E:\Sprintboot项目中用到的图片\ACAPP端的初步构思.png)]

第二部分配置 git 环境

git 的作用

存档（方便自己后续回滚历史版本）
同步不同机器上的代码（方便开发）

GitHub 和 Acgit 通过 ssh 来通信，不支持用户名和密码登录；所以需要用密钥来操作

步骤：

cd到家目录生成 密钥：ssh-keygen 会得到一个 .ssh目录
cd .ssh （进入.ssh目录）里面有两个文件 id_rsa（私钥） id_rsa.pub（公钥）
复制 id_rsa.pub（公钥） 里面的内容传到 acgit （偏好设置里面的ssh密钥）上去

配制好密钥后，在本地创建一个文件 kob ，在这个kob文件创建 git 仓库（鼠标右键git bash here），输入命令

git init 之后在 kob 文件里面会生成一个 .git 文件同过命令 ls -a 可以查看

创建一个 readme.md 文件 “看看谁是蛇王”

然后使用 git status git add . git commit -m “创建项目” 保存一次

然后去 acgit 里面创建一个项目 King Of Bots ，然后复制 git 的全局设置，如果有多个项目，–global 可去掉

然后执行推送现有文件夹里面没有执行过的即可

项目的基本架构

服务器的本质就是接收用户的函数调用，返回一个结果 client 传一个 url ，server 返回一个字符串

开发中的两种模式： 1.前后端不分离：根据数据在服务器端生成 HTML 代码

2.前后端分离： 1.向服务器发送一个链接，先从 server 端将静态文件传送到 client 端，但是里面的数据先不发

2.前端浏览器向服务器发送一个请求

3.服务器只会将数据传回来，比如传 **json **格式的数据

4.前端接到后，动态地将数据填充到页面里面

简而言之，如果页面是在用户浏览器里渲染的，就是前后端分离的，这里的渲染代表字符串拼接（向html代码里填充数据）

MVC模式： M：Model，数据库

V : 视图，可以认为就是 html，怎么拼接字符串

C : Controller，负责向用户返回数据的控制器

别纠结这些概念，只要知道每一个链接对应后端的一个函数；链接要实现什么东西，在函数里写什么逻辑就可以了

创建项目后端

tps://start.spring.io/加载慢的话，可以换成：https://start.aliyun.com

第一次创建了Spring 项目添加了 Spring web、Thymeleaf 依赖然后在Java里启动服务

在 com.kob.backend 包下再创建一个 controller 包 ; controller 这个包用来存储我们所有的后端函数

PK模块：在 controller 这个包下再创建一个 pk 包，pk包里创建一个 IndexControlle r类，用来存放 pk 的主页面

可以在对应的链接函数上面加上 @Controller 然后用注解@RequestMapping(“/pk/”) 表示父目录

如果想要返回一个页面的话，需要在 resources 的 templates 下创建一个目录 templates.pk，然后在 pk 下创建一个名为 index 的 html 文件

再去 IndexControl 类里面写一个方法返回 pk/index.html;此时默认 templates 为根目录，再添加一个注解@RequestMapping（“index/“)表示index为父目录

@RequestMapping("index/")
public String index() {
    return "pk/index.html";
}

resources 下的 static 一般会存三个目录：css js image

如果要显示一张图片的话，只需修改一下 templates.pk 目录下的 index.html ,此时 src 的默认目录为 static（即路径从 static 后面开始写）

<div style="text-align: center">
        <img src="/image/img.png" alt="">
</div>

以上是前后端不分离的写法。

前后端分离的写法如下：

首先在 controller.pk 下创建一个 BotInfoController 类

如果想要返回数据就不要用 @Controller 注解了，要用 @RestController 注解

@RestController               //可以只返回数据   @Controller 要返回页面
@RequestMapping("/pk/")
public class BotInfoController {
    @RequestMapping("getBotInfo/")
    public String getBotInfo() {
        return "hahah";
    }
}

前端是通过 controller 里面的 RequestMapping 匹配路径找到对应后端的函数的

修改端口

在 application.properties 里面可以修改端口号 server.port = 8080 可以修改成 server.port = 3000 ,因为 vue 的默认端口也是 8080 会产生冲突

下载vue并配置

打开 Power Shell 使用 npm i -g @vue/cli 直接下载 vue最新版，然后运行 vue ui 启动 vue 服务，然后使用vue 管理器在 kob 目录下创建 web 文件

下载相关的插件 route 和 vuex ，安装依赖 jquery 和 bootstrap 。

运行 Vue

点任务，点 server，然后点运行；加载完之后点输出，点击 localhost:8080, 看到 vue 页面表示成功了

然后停止运行，再创建一个新的项目在 kob 下创建 acapp。

接着配置 acapp 添加 vuex 插件就可以了，直接在任务中运行

Vue 项目进行修改和瘦身

启动 vue 项目后发现切换页面链接里面有 # 号，用 vscode 打开 web 端，然后打开在 src/route 目录下的 index.js ，然后将 createWebHashHistory 改为 createWebHistory ,即去掉 Hash 字符串。

项目瘦身：删掉 views 目录下的 AboutView.vue 和 HomeView.vue

删掉 components 目录下的 HelloWorld.vue

删掉 App.vue 里面的 css 样式，剩下如下代码，输出 Hello World！测试下

<template>
  <div>
    Hello World!
  </div>
  <router-view />
</template>

<style>
</style>

前端访问后端的函数

在打开 web 的 src/App.vue 文件 ，每一个 vue 文件有三大标签 template、script、style 分别写 html、js、css 。

在 script 中写法比较固定 ,通常为如下代码，**其中 setup 为整个函数的入口(打开前端链接后开始第一时间进入的入口) **，目的调后端函数，取后端的信息方式为 Ajax

<script>
import $ from 'jquery'; //为了使用 Ajax
import { ref } from 'vue'; //为了在 vue 中定义变量

export default {
	name : "App",
    setup : () => {
        let bot_name = ref("");   //定义变量，使用该变量为 {{ bot_name }}
        let bot_rating = ref(""); //定义变量，使用该变量为 {{ bot_rating }}
        $.ajax({
            url:"http://127.0.0.1:3000/pk/getbotinfo/",
            type:"get",
            success:resp => {
                bot_name.value = resp.name;
                bot_rating.value = resp.rating;
            }
        });
        return {
            bot_name,
            bot_rating
        }
    }
}
</script>

随后在 template 写好提示信息

在这里如果 ajax 调用的 url 与 web 的 url 不一样（即域名不一样）就会产生跨域问题**（CORS）**，这个是浏览器的安全机制。

SpringBoot跨域问题

SpringBoot 中跨域问题的解决方案：

在后端的根目录下（com.kob.backend）创建一个 config 包，在这个包下再创建一个 CorsConfig 类 ，然后将讲义中的代码复制过来放到该类下即可（全覆盖掉）

其实原理非常简单，我们在表头里加一些属性就可以了，属性会告诉我们的浏览器，我们后端资源是允许其他域来访问的。

添加背景图片

将背景图片保存到 web/src/assets 下，然后打开 **web/src/App.vue ** 在 style 块中添加如下代码

body {
	background-image: url("@/assets/background.png"); // @/ 表示当前目录的根目录
    background-size:cover;                            // cover 表示100%填充
}

总结

vue 代码是在用户浏览器中执行的，用户打开网页时，会先将这一大段代码下载下来，然后进入 App.vue 中的setup 入口函数，通过 Ajax 访问到后端代码，然后通过回调函数 resp 得到后端返回的数据，使用 vue 中的变量接收后端数据即可，例如 myName.value = resp.name; 再将 myName 展示到前端上，即可完成前后端的交互；后端其实就想存储函数的地方。