SpringBoot学习笔记-项目初始化

笔记内容转载自 AcWing 的 SpringBoot 框架课讲义，课程链接：AcWing SpringBoot 框架课。

[1. 概念与项目介绍](#1. 概念与项目介绍)
[2. 创建SpringBoot项目后端](#2. 创建SpringBoot项目后端)
[3. 前后端不分离开发方式](#3. 前后端不分离开发方式)
[4. 前后端分离开发方式](#4. 前后端分离开发方式)

1. 概念与项目介绍

本次开发的项目名称为 King of Bots，在本地采用 IDEA 开发，项目前后端分离，可以部署在不同的服务器上，前端使用 Vue 开发，后端使用 SpringBoot 开发。

用户通过客户端（Client）向服务器端（Server）发送一个 URL 请求，服务器端接收到请求后会向客户端返回一个 Web 页面（本质上是返回一个 HTML 字符串，浏览器会将这个字符串解析成网页）。

前后端分离是指客户端第一次访问项目时就 Web 服务器端获取到所有静态文件，然后每次给后端发送请求时后端只返回数据，然后由前端根据数据进行渲染（动态拼接字符串）页面。

MVC，全称为 Model-View-Controller（模型-视图-控制器），是一种软件架构模式，其目标是将软件的用户界面（即前台页面）和业务逻辑分离，使代码具有更高的可扩展性、可复用性、可维护性以及灵活性。以下是对 MVC 各部分的详细解释：

模型（Model）：模型是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象负责在数据库中存取数据。模型就是业务流程/状态的处理以及业务规则的制定。
视图（View）：视图是应用程序中处理数据显示的部分。通常视图是依据模型数据创建的。视图（View）代表用户交互界面，对于 Web 应用来说，可以概括为 HTML 界面，但有可能为 XHTML、XML 和 Applet。
控制器（Controller）：控制器是应用程序中处理用户交互的部分。通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据。控制可以理解为从用户接收请求，将模型与视图匹配在一起，共同完成用户的请求。

2. 创建SpringBoot项目后端

首先我们创建项目的主目录 king_of_bots，然后可以初始化一下 Git。

然后使用 IDEA 在 king_of_bots 目录下创建项目的后端，在新建项目的界面中可以在左侧看到 Spring Initializr，里面提供了一个官方网址：Spring Initializr，但是这个网站有时候可能不稳定连不上，如果连不上可以换成 https://start.aliyun.com，但是可能版本会稍微旧一点。

项目配置内容中的组（Group）名设置为 com.kob，工件（Artifact）名设置为 backend，即表示我们项目的后端，使用 JDK 1.8 的版本。点击下一步后选择 SpringBoot 版本为 2.7.X，如果用 SpringBoot 3 需要 Java 17，依赖选上 Web 中的 Spring Web 即可，然后可以再选上 Template Engines 中的 Thymeleaf（只是用于演示前后端不分离的写法）。最后点击创建即可。

第一次创建好项目后还需要一段时间安装相关的环境，src/main/java/com.kob.backend 中即可看到我们后端项目的入口文件 BackendApplication，运行后可以看到输出显示将服务启动到了本地的8080端口，这时我们访问 http://localhost:8080/，看到 Whitelabel Error Page 页面说明启动成功了。

3. 前后端不分离开发方式

我们之前说过客户端的一个 URL 请求一般就是对应后端的一个函数调用，我们在 com.kob.backend 包下新建一个 controller 包，用来存储我们所有的后端函数。

假设我们现在要创建一个对战页面，我们就在 controller 包中继续创建一个 pk 包，然后在该包下创建 IndexController.java 文件。如果需要将函数变成 URL 对应的函数需要加上 @Controller 注解，我们这个 Controller 的所有函数应该都在 http://localhost:8080/pk/ 链接下，因此我们可以加上 @RequestMapping 注解设置父目录：

java 复制代码

package com.kob.backend.controller.pk;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/pk/")
public class IndexController {
}

如果我们的函数想要返回一个页面，需要把页面创建在 /src/main/resources/templates 目录下，我们先在该目录下创建 pk 目录，然后进去创建一个 index.html：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

我们每个函数都可以返回一个 HTML 文件的路径，这个路径从 templates 目录后开始写，对于每个函数都可以指定 @RequestMapping 注解，例如 @RequestMapping("index/") 就表示访问 http://localhost:8080/pk/index/ 会调用这个函数，我们实现不加任何子目录的链接返回 index.html：

java 复制代码

package com.kob.backend.controller.pk;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

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

现在我们重启一下项目，然后访问 http://localhost:8080/pk/ 即可看到我们的页面。

假设我们有一张图片 logo.png 存放在 resources 目录下的 static/image 目录中，那么我们可以在 index.html 中使用（注意路径从 static 目录后开始写）：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="text-align: center">
        <img src="/image/logo.png" alt="">
    </div>
</body>
</html>

4. 前后端分离开发方式

如果是前后端分离的开发方式，那么后端就不再是返回一个 HTML 页面了，而是返回一些数据。

在 pk 包下创建一个 BotInfoController 类，表示返回 Bot 信息，这时我们需要用的是 @RestController 注解：

java 复制代码

package com.kob.backend.controller.pk;

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

@RestController
@RequestMapping("/pk/")
public class BotInfoController {
    @RequestMapping("getbotinfo/")
    public String getBotInfo() {
        return "Bot 1";
    }
}

现在访问链接 http://localhost:8080/pk/getbotinfo/ 即可看到网页显示的字符串信息。

在 resources 目录下可以看到一个 application.properties 文件，如果是用 Spring 的默认网址创建的项目，这个文件内容是空的，如果是用阿里云的网址创建项目那么这个文件会自带一些内容，其中有个 server.port=8080 表示项目启动的端口号，我们可以修改这个端口号，防止和 Vue 的默认端口冲突。现在我们的该文件是空的，因此直接加一行 server.port=3000 即可。

SpringBoot学习笔记-项目初始化

CONTENTS

1. 概念与项目介绍

2. 创建SpringBoot项目后端

3. 前后端不分离开发方式

4. 前后端分离开发方式