历史记录

清除记录

猜你想搜

AcWing热点
App
登录/注册

工程课 SpringBoot-2.1. 上课笔记——配置git环境与项目创建原题链接简单

作者：

jaylenwanghitsz , 2022-08-13 12:16:15 , 所有人可见 , 阅读 238

1

1

配置git环境与项目创建

我的代码地址：https://git.acwing.com/spideymen/jaylens_kob

推荐一名 AcWing博主 @zst_2001 zst_2001的页面。这位大佬写了很多常用软件的下载安装教程。

项目驱动：先想做什么项目，项目可以怎么拆分，拆分后的每个部分可以用什么技术实现

项目设计

名称：King Of Bots ，简称 KOB
- 蛇类对战平台。对战时，玩家可以创建一定数量的 bot 机器蛇，同一时间只能派出一个 bot 参战
- 地图上会有一些障碍物。当 bot 的头碰到自己的身体、对手 bot 的身体或障碍物时判定为输，得 $0$ 分；碰到对手 bot 的头为平局，得 $1$ 分；对手输时判定为胜，得 $2$ 分。
- bot 本质上是函数，输入地图信息，返回每一步的方向。玩家可以修改 bot 的函数，也可以选择自己操纵 bot
  - 这里可以设置对战的模式，比如 bot vs bot ，人机模式，玩家对战模式等
- 玩家注册后可以创建一定数量的 bot ，并给每个 bot 配置代码。玩家可以拿任意一个 bot 去与其他玩家的 bot PK。
- 每个 bot 都有自己的天梯分。bot 的对局结果会更新参战 bot 的天梯分。战力排行按所有 bot 的天梯分从大到小排序
图标：或者
项目包含的模块
- PK模块：匹配界面（微服务）、实况直播界面（WebSocket协议）、不同对战模式（真人对战、人机对战、机器对战）
- 对局列表模块：对局列表界面、对局录像界面
- 排行榜模块：Bot排行榜界面
- 用户中心模块：注册界面、登录界面、我的Bot界面、每个Bot的详情界面（对战记录）
大致样式
- Web端：
- AcApp端：左上角放用户头像，点击头像跳转到用户个人界面
前后端分离模式
- SpringBoot 实现后端
- Vue3 实现Web端和AcApp端
- 前后端作用
  - 前端：用户看到的界面，本质是 html + css + js 。用户在前端的操作主要是前端界面上的动画、跳转和向后端发送请求（一般通过 ajax 向后端发送请求并携带参数）
  - 后端：跑在主机（本地或服务器）上的程序，功能比较复杂，大致如下：
    - 连接数据库
    - 通过函数处理前端发送过来的请求（请求里可能会携带参数）
    - 通过路由将前端发送过来的请求传给对应的函数
    - 通过 json 等格式将函数处理 return 的结果数据传给前端
  - 前后端交互本质就是前端发送请求，请求相当于调用后端对应函数并传入相应参数，然后后端返回函数运行的结果
- 前后端分离与不分离的区别
  - 分离：用户打开网址后，浏览器首先将网址的 html css js 文件下载下来，然后运行 js 文件。网站前端界面的某些位置要显示一些后端存储的数据，这时运行着的 js 文件中有一些 ajax 函数向后端发送请求，后端在接收到请求并处理完后返回数据，前端 js 文件里的代码再将数据填充到前端界面对应位置上。整个过程是动态渲染（字符串拼接）、渲染过程在前端
  - 不分离：用户打开网址，该动作会向后端发送一个请求。后端接收请求后会将前端界面文件先填充完整，再返回给用户前端。渲染过程在后端进行

配置git环境

`Git` 的作用

存档。Git 可以存档所有 commit 过的代码版本，支持随时回滚历史版本。配合云端 Git 仓库，还可以随时查看以前提交过的代码
同步不同机器上的代码进度。将代码存在云端仓库后，在任何一台电脑上都可以将最新版本的代码 pull 到本地，编写完后可以将本地代码 push 到云端，更新云端仓库的代码
多人协助更加方便和安全

配置本地和云端 `Git`

安装 Git Bash（使用Mac和Linux的同学可以跳过这一步）：https://gitforwindows.org/
安装推荐参考@zst_2001的 Git v2.37.1——下载和安装过程（下载也可以，网址和y总讲义里的不一样，但安装包是一样的）
Git Bash 使用
1. 打开任意一个文件夹，右键弹出：
2. 点击 Git Bash Here ，就会进入一个命令行界面，操作的目录就是刚刚打开的文件夹（也可以直接打开 Git Bash 软件后用 cd 命令进入文件夹）
git 的命令和使用可以看我的 Linux基础课——git笔记。
进入家目录生成秘钥：执行命令 ssh-keygen ,之后一路回车
在 Ac Git 上注册账号，地址：https://git.acwing.com/
回到家目录后进入 .ssh ，在里面将 id_rsa.pub 的内容复制到 Ac Git 上（用 cat id_rsa.pub 命令将公钥内容展示在 Git Bash 里后按住鼠标左键选中公钥内容就自动复制了）
创建一个文件夹存放项目代码（这里命名为 kob）
在 kob 中鼠标右键打开 Git Bash
输入 git init 将 kob 配置为 git 仓库
新建一个 readme.md 文件并编写 readme 信息（可以是关于项目的描述，用 markdown 语法编写）
进入 Ac Git 或其他云端平台创建一个空白项目（任何初始化或initialize的选项都不要选）。创建完后应该可以看到一些命令提示，按照这些命令将本地 git 文件夹推送到云端仓库
在 git 配置信息时不要加 --global ，尤其是当你需要用 git 同时维护多个项目时。如果已经加了可以用下面的命令删除：

git config --global --unset user.name
git config --global --unset user.email
git config --list     # 查看全局配置

创建项目后端

打开IDEA，点击新建项目
在左侧选择 Spring Initializr 。
上面的服务器URL，默认https://start.spring.io/ 加载慢的话，可以换成：https://start.aliyun.com、https://start.springboot.io/（如果默认的网站能在浏览器中打开，也可以直接下载配置到项目文件夹，然后导入项目到IDEA里）
组命名为 com.kob ，工件和名称命名为 backend ，JDK 和 Java 都选 $8或1.8$ ，其他都默认。点击下一步
依赖项：选择 Sprint Web （Thymeleaf 是用来演示前后端不分离写法的，可点可不点）。选好后点击创建
创建好后等待依赖项的下载。下载完后在 src 文件夹里找到 BackendApplication 文件，点击文件里的 BackenedApplication 类旁的运行按钮运行后端框架
点击运行后可以在IDEA下看到运行的信息，里面会显示连接端口，一般是 8080 。进浏览器，输入网址 127.0.0.1:8080 或 localhost:8080 ，就可以看到后端白页面
后端的函数写在哪：在目录 com.kob.backend 下创建一个软件包 controller 放置所有的后端函数

前后端不分离写法

按上文对项目的分块，可以先在 controller 中创建一个 pk 的软件包来放置所有跟 pk 模块有关的函数
在 pk 包里创建一个类 IndexController，用来返回 pk 主界面
要把该函数变成链接对应的函数，应该加上 @Controller
要从网址访问到函数，所有跟 pk 有关的函数最好都在 127.0.0.1:8080/pk/ 目录下（其他模块类比）。因此需要加上 @RequestMapping("/pk/") ，这样在 127.0.0.1:8080/pk/ 目录下就可以访问到 IndexController 类里的所有函数
创建前端页面：在 resources/templates 文件夹下创建目录 pk ，在 pk 目录下新建一个 html 文件 index 并编写一些内容
1. 在该模板中引入图片，要现在 static 文件夹下创建 image 目录，将图片放在里面。引入路径时从 static 里的目录开始写
返回前端页面：在 IndexController 中编写函数 index 返回 String ，内容是前端页面所在的文件路径 pk/index.html(这里的路径依赖了Thymeleaf的资源管理，html文件默认放在resources/templates中，机器会直接在这个目录下找html文件。同理，任何静态资源都直接在resources/static下找) 。如果想在 127.0.0.1:8080/pk/index/ 中访问到 index.html ，就需要给函数也加一个注解 RequestMapping("index/")
这样在访问 127.0.0.1:8080/pk/index/ 时就能直接显示 index.html 了。

前后端分离

前后端分离的写法下后端不返回 html 页面，只返回数据
后端编写与不分离类似，只是 @Controller 改为 @RestController （@Controller 返回字符串时默认是路径，会在 resources 里找模板文件），返回的内容只有数据。要加上 @RequestMapping 才能从对应的网址中访问到后端函数
后端可以返回字符串，也可以返回链表等数据结构，格式是JSON
在 pk 目录下创建 BotInfoController 类，编写以下内容，再访问对应网址，即可看到数据
改端口：进入 resources/application.properties ，如果是和y总一样用的阿里的源，那就在文件最下面找到 server.port=8080 修改为 server.port=3000 ；如果是用官方的源，这个文件应该是空的，只用加上 server.port=3000 就行（端口号可以是其他端口，但不要是8080（一些特殊端口比如22、80、443也最好不要写），因为之后的 Vue 也要用8080的端口，不改就会起冲突）

创建项目Web端与AcApp端

vscode下载地址：https://code.visualstudio.com/，课上在vscode里写Vue，用其他编辑器（比如WebStorm）也可以
下载 Nodejs ：下载地址。进去后选择LTS版（Long Term Support）。安装教程推荐@zst_2001的 node.js v16.16.0——下载和安装过程
安装 @vue/cli ：Windows系统的终端推荐使用自带的 powershell ，Git Bash 可能会有一些指令不兼容。打开终端后输入 npm i -g @vue/cli （如果后面运行 vue ui 报错，可能是因为最新版有问题，可以安装早期版本，执行以下命令）
npm i -g @vue/cli@5.0.4 # 5.0.4版本
npm i -g @vue/cli@4.5.11 # 4.5.11版本
npm i -g @vue/cli@4 # 4版本
Vue下载和安装也可以参考 @zst_2001的 Vue3 v5.0.8——下载和安装过程。由于淘宝源于6月份停止解析，因此建议换成 npm config set registry https://registry.npmmirror.com
启动 vue 自带的图形化项目管理界面：vue ui
如果Windows上运行 vue ，提示无法加载文件，表示用户权限不足，则可以用管理员身份打开终端，输入 set-ExecutionPolicy RemoteSigned ，然后输入 y
启动图形化管理界面后在“创建”里找到项目文件夹，在里面创建 web 和 acapp 项目（创建时初始化 git 要取消，预设选择 Vue3）
项目创建好之后会来到这样一个页面：红圈的地方是插件，选择。
进入插件后安装 vue-router 和 vuex ：
安装完插件后点击依赖（页面跟上面的图不太一样是因为缩放过了）：
进入后点击右上角的安装依赖，搜索 jquery ，安装第一个 jquery(q是小写) （版本可能会跟这里的不一样）
Web端需要再装一个 bootstrap ，方法同上。
装完之后点击左侧的任务，进入任务页面后点击 serve 然后点击运行
在同一个页面点击右上角的输出，在页面中看到 http://localhost:8080 就是访问前端的网址进去后可以看到这样的页面，表示成功创建前端
同理再创建acapp的前端。先将项目的 serve 停止，然后点击左上角的web按钮，再点击弹出框最下面的 Vue项目管理器 。进入项目管理器后，重复上面的步骤（不用装 vue-router ；依赖也不用装）
之后用vscode打开web前端文件夹，进入 App.vue 文件，这里写我们前端的代码（如果 <router-view/> 有报错，可以改成 <router-view></router-view> ；如果没有语法高亮可以装volar插件）
将web项目运行起来，打开我们前端的网址 http://localhost:8080
出现下面的页面：。去掉上面的 # ，可以进入项目文件的 router 目录下的 index.js ，把这个页面里所有的 createWebHashHistory 中的 Hash 去掉
views 文件夹中的 AboutView.vue 、HomeView.vue 和 components 里的 HelloWorld.vue 都可以删掉。App.vue 里的css设置（style 里的）可以全部删掉；templates 里的内容除了 router-view 之外都可以删掉。然后可以在 templates 里写一些html语句
之后可能会有报错，需要在 router/index.js 里删一些内容。
1. import 语句中跟 HomeView 有关的语句删掉
2. const routes 里的内容全部删掉
上述操作完成后前端应该是如下界面：

前后端通信

前端通过 ajax 发送请求，后端接收处理后返回JSON格式的数据，前端再处理数据（一般是拼接到静态页面上）

前端

每一个 vue 文件里都是三个部分：
- template ：编写html语句
- script ：编写js语句
- style ：编写css语句
script 里面有的格式：

import { ref } from 'vue';  // 在vue里定义变量需要用到ref
import $ from 'jquery';   // 需要用到ajax功能

export default {
  name: "App",
  setup: () => {
    // js代码执行的入口
    let bot_name = ref("");  // 定义了一个变量bot_name
    let bot_rating = ref("");

    $.ajax({
      url: "http://127.0.0.1:3000/pk/getinfo/", //调用的后端函数的链接
      type: "get",  // get类型是获取一个数据
      success: resp => {
        // 对返回的数据进行处理
        console.log(resp);  // 一般在调试时会先输出数据看一下
        // 如果这时有提示出现跨域问题（CORS），可以按照下文解决
        // 提取数据。后端传过来的数据是 {"name":"tiger", "rating":"1500"}
        bot_name.value = resp.name;
        bot_rating.value = resp.rating;
      }

    });

    return {
      bot_name,
      bot_rating
    }
  }
}

template 访问 script 里的变量要将变量名格式为 {{ 变量名 }}

在SpringBoot中解决跨域问题

跨域（Cross-Origin Resource Sharing）是一种允许当前域的资源被其他域访问的机制（不同域名就是不同域）。一般浏览器为了安全会禁止这种机制。以下是解决方法

后端文件里，在 com.kob.backend 目录下创建一个软件包 config (类都放在软件包里)
在 config 包里创建一个类：CorsConfig
将下面的代码复制到类里即可

package com.kob.backend.config;

import org.springframework.context.annotation.Configuration;

import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@Configuration
public class CorsConfig implements Filter {
    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        HttpServletRequest request = (HttpServletRequest) req;

        String origin = request.getHeader("Origin");
        if(origin!=null) {
            response.setHeader("Access-Control-Allow-Origin", origin);
        }

        String headers = request.getHeader("Access-Control-Request-Headers");
        if(headers!=null) {
            response.setHeader("Access-Control-Allow-Headers", headers);
            response.setHeader("Access-Control-Expose-Headers", headers);
        }

        response.setHeader("Access-Control-Allow-Methods", "*");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Credentials", "true");

        chain.doFilter(request, response);
    }

    @Override
    public void init(FilterConfig filterConfig) {

    }

    @Override
    public void destroy() {
    }
}

素材

背景图片
将图片存到前端文件中的 src/assets 目录下
要将背景显示到界面上，可以在 style 里写

body {
  background-image: url("@/assets/background.png");
  /* 如果无法显示背景图片，可能是某些vue版本没有将@定义为当前目录的根目录。可以将@改成. */
  background-size: cover; /*使图片100%填充*/
}