如何使用IntelliJ中的Spring Boot和VS代码中的JavaScript (AJAX)创建一个简单的WebApp

要使用IntelliJ IDEA中的Spring Boot和VS Code中的JavaScript (AJAX)创建一个简单的WebApp，你需要遵循以下步骤：

前提条件

确保你已经安装了以下工具：

IntelliJ IDEA
Visual Studio Code
Java Development Kit (JDK)
Node.js 和 npm

步骤 1: 创建Spring Boot项目

打开IntelliJ IDEA，选择“Create New Project”。
选择“Spring Initializr”，确保服务URL设置为默认的Spring官方URL。
填写项目信息，如Group, Artifact, Name等。
在依赖项中添加“Spring Web”。
点击“Next”，然后“Finish”创建项目。

步骤 2: 创建前端项目

打开VS Code，创建一个新的文件夹作为前端项目。
在该文件夹中打开终端，运行npm init -y来创建一个package.json文件。
安装必要的npm包，如express和axios：
安装必要的npm包，如express和axios：

步骤 3: 编写后端代码

在Spring Boot项目的src/main/java目录下，创建一个控制器类，例如HelloController.java：

package com.example.demo;

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

@RestController
public class HelloController {

    @GetMapping("/hello")
    public String sayHello() {
        return "Hello from Spring Boot!";
    }
}

步骤 4: 编写前端代码

在VS Code的前端项目文件夹中，创建一个index.html文件和一个app.js文件。

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Simple WebApp</title>
</head>
<body>
    <h1 id="message"></h1>
    <script src="app.js"></script>
</body>
</html>

app.js:

document.addEventListener('DOMContentLoaded', function() {
    axios.get('http://localhost:8080/hello')
        .then(function(response) {
            document.getElementById('message').textContent = response.data;
        })
        .catch(function(error) {
            console.error('There was an error!', error);
        });
});