首先初始化一个 Spring Boot 项目。

打开 VSCode，使用快捷键 Ctrl + Alt + p 打开命令框，输入命令 create a maven project 开始创建项目。

使用 Spring Boot 创建一个 web 服务_静态资源

根据需求依次选择 Spring Boot 版本，填写 Group Id、Artifact Id，选择打包方式、Java 版本。然后来到关键步骤选择依赖项目，为了提升开发体验 Spring Boot DevTools 肯定是要选的，因为要开发 Web 项目，所以还要添加 Spring Web 。

使用 Spring Boot 创建一个 web 服务_html_02

最后选择一个位置保存项目，等待依赖下载完成就可以开始了。

打开项目后，Spring Boot Dashboard 插件会自动识别到当前项目是一个 Spring Boot 项目，在工具栏可以看到 Spring Boot Dashboard 的图标，点击图标然后打开 APPS 选项卡，就可以看到名字为 Artifact Id 的项目，点击运行按钮，项目就启动了。

使用 Spring Boot 创建一个 web 服务_html_03

启动项目后，可以在终端里看到项目启动的情况，如果没有报错就说明项目启动成功了。

使用 Spring Boot 创建一个 web 服务_静态资源_04

其中显示 Tomcat started on port 8080，说明 Tomcat 服务器使用了 8080 端口提供服务，可以在浏览器中通过访问 http://localhost:8080 地址来访问服务器。

使用 Spring Boot 创建一个 web 服务_html_05

这是一个报错页面，看其中的关键信息，提示没有找到页面，没有静态资源，那就来添加点静态资源。

什么是静态资源？静态资源就是在服务器端存储的不会变化的文件，如HTML、CSS、JavaScript、图片、音频、视频等文件。这些文件一般不包含动态内容，每次请求时返回的内容都是固定的。

先创建一个 HTML 文件来试试，可是 Spring Boot 项目中的静态文件应该放在哪个目录呢？可以放在以下几个目录中，优先级从高到低。

  1. src/main/resources/META-INFO/resources/
  2. src/main/resources/resources/
  3. src/main/resources/static/
  4. src/main/resources/public/
  5. public/
  6. static/

初始化项目的时候，已经创建好了 src/main/resources/static/ 这个目录，那就放在这里吧。在这个目录下创建 index.html，内用就是 hello world 用来测试一下。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  hello, world!
</body>

</html>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.

刷新浏览器，成功了！

使用 Spring Boot 创建一个 web 服务_静态资源_06

再试试在静态资源目录下放一张图片，并且在 HTML 中引用它。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  hello, world!
  <img src="./smile.jpg" alt="smile">
</body>

</html>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.

使用 Spring Boot 创建一个 web 服务_html_07

到此为止，Web 服务算是成功运行了。平时访问网址的时候一般都不会带上端口号，因为 web 服务的默认端口是 80，不带端口号就使用 80 端口。可以在配置文件 application.properties 文件中修改端口号：

server.port=80
  • 1.

现在就可以通过访问 http://localhost来访问服务了。