SpringBoot学习笔记-项目初始化

笔记内容转载自 AcWing 的 SpringBoot 框架课讲义,课程链接:AcWing SpringBoot 框架课

CONTENTS

  • [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 即可。

相关推荐
liulilittle11 分钟前
深度剖析:OPENPPP2 libtcpip 实现原理与架构设计
开发语言·网络·c++·tcp/ip·智能路由器·tcp·通信
88号技师17 分钟前
2025年6月一区-田忌赛马优化算法Tianji’s horse racing optimization-附Matlab免费代码
开发语言·算法·matlab·优化算法
勤奋的知更鸟23 分钟前
Java 编程之模板方法模式
java·开发语言·模板方法模式
M1A137 分钟前
TCP/IP协议精解:IP协议——互联网世界的邮政编码系统
后端·网络协议·tcp/ip
逸风尊者44 分钟前
开发易掌握的知识:GeoHash查找附近空闲车辆
java·后端
碎叶城李白1 小时前
若依学习笔记1-validated
java·笔记·学习·validated
上单带刀不带妹1 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
im_AMBER2 小时前
学习日志05 python
python·学习
都叫我大帅哥2 小时前
🌊 Redis Stream深度探险:从秒杀系统到面试通关
java·redis
都叫我大帅哥2 小时前
Redis持久化全解析:从健忘症患者到记忆大师的逆袭
java·redis