技术探索与实践：用 Spring Boot + JavaScript 快速搭建你的第一个全栈应用

代码旅人

2025-12-14 14:13

阅读 678

大家好，我是掘金上常写入门教程的全栈工程师。今天这篇文章，我想带完全零基础的朋友一起动手，用 Spring Boot 和 JavaScript 搭建一个最简单的“前后端分离”小项目。

我当初学编程时，最头疼的就是“前端和后端怎么连起来？”——教程要么只讲后端（比如 Java），要么只讲前端（比如 JavaScript），但没人告诉我它们是怎么通信的。所以今天这篇教程，我会用最直白的语言、最少的代码、最清晰的步骤，带你走通整条链路。

一、什么是 Spring Boot 和 JavaScript？

Spring Boot：是一个用 Java 编写的后端框架，能快速帮你搭建一个 Web 服务器（比如提供 API 接口）。
JavaScript：是一种运行在浏览器中的脚本语言，用来让网页“动起来”（比如点击按钮、发送请求、显示数据）。

💡 简单理解：

后端（Spring Boot）：负责存储数据、处理逻辑、提供接口。

前端（JavaScript）：负责向用户展示页面，并调用后端接口获取数据。

我们的目标：让前端 JavaScript 调用后端 Spring Boot 提供的接口，实现数据交互！

二、环境准备（手把手教你安装）

⚠️ 注意：以下工具请按顺序安装，缺一不可。

1. 安装 JDK（Java 开发工具包）

Spring Boot 是基于 Java 的，所以必须先装 JDK。

访问 Oracle JDK 下载页或使用开源版 OpenJDK
推荐版本：JDK 17（LTS 长期支持）
安装后打开终端，输入：
```
java -version
```
如果看到类似 openjdk version "17.0.x"，说明安装成功！

2. 安装 Node.js（用于运行 JavaScript 工具）

虽然浏览器能直接运行 JS，但我们要用现代开发工具（比如本地服务器），所以需要 Node.js。

访问 Node.js 官网，下载 LTS 版本（如 v20.x）
安装后终端输入：
```
node -v
npm -v
```
能看到版本号即成功。

3. 安装 IDE（代码编辑器）

三、核心概念：前后端如何通信？

关键词：API、HTTP、JSON

术语	解释	举例
API	应用程序接口，后端提供给前端调用的“服务入口”	`/api/hello` 返回一句问候语
HTTP	浏览器和服务器通信的协议	GET（获取数据）、POST（提交数据）
JSON	一种轻量级数据格式，前后端交换数据的标准	`{"message": "Hello!"}`

🌟 流程图（文字版）：

[浏览器] 
   → (JavaScript 发送 GET 请求) 
   → [Spring Boot 服务器] 
   → (返回 JSON 数据) 
   → [浏览器显示数据]

四、实战项目：做一个“问候语生成器”

我们要做的是：

用户在网页点击按钮
前端 JavaScript 向后端请求一句随机问候语
后端 Spring Boot 生成并返回
前端把结果显示在页面上

步骤 1：创建 Spring Boot 后端

打开 Spring Initializr
填写如下配置：

配置项	值
Project	Maven
Language	Java
Spring Boot	3.2.x
Group	com.example
Artifact	greeting-app
Dependencies	Spring Web

点击 “Generate”，下载 zip 包并解压
用 VS Code 或 IDEA 打开项目
在 src/main/java/com/example/greetingapp 下新建 GreetingController.java：

package com.example.greetingapp;

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

@RestController
public class GreetingController {

    @GetMapping("/api/hello")
    public String sayHello() {
        return "{\"message\": \"你好，世界！\"}";
    }
}

🔍 说明：

@RestController：表示这个类提供 API 接口

@GetMapping("/api/hello")：当访问 /api/hello 时，执行 sayHello() 方法

./mvnw spring-boot:run

看到 Tomcat started on port(s): 8080 表示启动成功！

打开浏览器访问：http://localhost:8080/api/hello
你应该看到：

{"message": "你好，世界！"}

✅ 后端搞定！

步骤 2：创建 JavaScript 前端

我们在项目根目录下新建一个 frontend 文件夹：

mkdir frontend
cd frontend

创建 index.html：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>问候语生成器</title>
</head>
<body>
  <h1>技术探索小实验</h1>
  <button id="fetchBtn">获取问候语</button>
  <p id="result"></p>

  <script>
    document.getElementById('fetchBtn').addEventListener('click', async () => {
      const response = await fetch('http://localhost:8080/api/hello');
      const data = await response.json();
      document.getElementById('result').innerText = data.message;
    });
  </script>
</body>
</html>

🔍 说明：

fetch() 是 JavaScript 内置的网络请求函数

await response.json() 把返回的 JSON 字符串转成对象

最后把 data.message 显示在 <p id="result"> 中

步骤 3：运行前端并测试

由于安全限制，直接双击 index.html 可能无法请求本地 API（CORS 问题）。我们用一个简单 HTTP 服务器：

在 frontend 目录下运行：

npx serve

如果提示 serve 未安装，先运行：npm install -g serve

终端会显示：

Serving! http://localhost:3000

打开 http://localhost:3000，点击“获取问候语”按钮——
🎉 你会看到页面显示：“你好，世界！”

五、常见问题解答（避坑指南）

❓ 问题1：点击按钮没反应，控制台报错 `CORS error`

原因：浏览器禁止前端页面（localhost:3000）请求不同端口的后端（localhost:8080）。

解决方案：在 Spring Boot 后端添加 CORS 支持。

修改 GreetingController.java，加上 @CrossOrigin 注解：

@RestController
public class GreetingController {

    @CrossOrigin(origins = "http://localhost:3000")
    @GetMapping("/api/hello")
    public String sayHello() {
        return "{\"message\": \"你好，世界！\"}";
    }
}

✅ 这样就允许来自 3000 端口的请求了！

❓ 问题2：`mvnw` 命令不存在 / 运行失败

可能原因：

Windows 用户需用 mvnw.cmd
网络问题导致依赖下载失败

建议：

使用 IDEA 直接点击绿色 ▶️ 运行
或全局安装 Maven 后用 mvn spring-boot:run

❓ 问题3：`fetch is not defined`（在旧浏览器）

说明：fetch 是现代浏览器 API，IE 不支持。

解决：开发时用 Chrome/Firefox/Edge；生产环境可加 polyfill，但初学者不用管。

六、学习建议：下一步该学什么？

你已经完成了第一个全栈小项目！接下来可以：

🔜 进阶方向推荐

方向	学习内容	推荐资源
后端深化	Spring Boot 返回对象而非字符串、连接数据库	《Spring Boot 实战》
前端升级	用 Vue/React 替代原生 JS	Vue 官方教程（中文）
工程化	前后端整合部署、使用 Axios 替代 fetch	Webpack / Vite 入门
API 规范	RESTful 设计、状态码规范	MDN Web Docs

💡 我的建议：

不要一开始就学框架！
先搞懂“原生 JS 如何发请求”、“Spring Boot 如何写接口”，再学 Vue/Axios 才不会迷失。

结语

这篇文章，是我当年最希望有人教我的内容——从零到一，打通前后端。你不需要懂 Maven、Webpack、Babel，只要跟着步骤敲代码，就能看到效果。

技术探索的核心不是“记住所有概念”，而是“动手试一次”。哪怕只是改一行代码、看一次结果，都是进步。

如果你成功跑通了这个项目，欢迎在评论区留言：“Hello, World!” —— 这是你成为开发者的第一声呐喊！

🌱 记住：每个大神，都曾是连 JDK 都装不明白的小白。
继续探索，你也可以。

作者：985 全栈工程师｜掘金专栏作者
字数：约 2800 字
适合人群：完全零基础，想亲手做出第一个全栈 Demo 的朋友

标签:SpringbootJavascript

最热最新

暂无评论

为你推荐

暂无相关推荐

技术探索与实践：用 Spring Boot + JavaScript 快速搭建你的第一个全栈应用

一、什么是 Spring Boot 和 JavaScript？

二、环境准备（手把手教你安装）

1. 安装 JDK（Java 开发工具包）

2. 安装 Node.js（用于运行 JavaScript 工具）

3. 安装 IDE（代码编辑器）

三、核心概念：前后端如何通信？

关键词：API、HTTP、JSON

四、实战项目：做一个“问候语生成器”

步骤 1：创建 Spring Boot 后端

步骤 2：创建 JavaScript 前端

步骤 3：运行前端并测试

五、常见问题解答（避坑指南）

❓ 问题1：点击按钮没反应，控制台报错 `CORS error`

❓ 问题2：`mvnw` 命令不存在 / 运行失败

❓ 问题3：`fetch is not defined`（在旧浏览器）

六、学习建议：下一步该学什么？

🔜 进阶方向推荐

💡 我的建议：

结语

评论 0

为你推荐

精选内容

技术探索与实践：用 Spring Boot + JavaScript 快速搭建你的第一个全栈应用

一、什么是 Spring Boot 和 JavaScript？

二、环境准备（手把手教你安装）

1. 安装 JDK（Java 开发工具包）

2. 安装 Node.js（用于运行 JavaScript 工具）

3. 安装 IDE（代码编辑器）

三、核心概念：前后端如何通信？

关键词：API、HTTP、JSON

四、实战项目：做一个“问候语生成器”

步骤 1：创建 Spring Boot 后端

步骤 2：创建 JavaScript 前端

步骤 3：运行前端并测试

五、常见问题解答（避坑指南）

❓ 问题1：点击按钮没反应，控制台报错 CORS error

❓ 问题2：mvnw 命令不存在 / 运行失败

❓ 问题3：fetch is not defined（在旧浏览器）

六、学习建议：下一步该学什么？

🔜 进阶方向推荐

💡 我的建议：

结语

评论 0

为你推荐

相关推荐

精选内容

❓ 问题1：点击按钮没反应，控制台报错 `CORS error`

❓ 问题2：`mvnw` 命令不存在 / 运行失败

❓ 问题3：`fetch is not defined`（在旧浏览器）