idea里怎么把html与Java类连接起来

原创

mob649e815d65e6 2024-10-08 05:19:31 ©著作权

文章标签 Java java spring 文章分类 Java 后端开发

©著作权归作者所有：来自51CTO博客作者mob649e815d65e6的原创作品，请联系作者获取转载授权，否则将追究法律责任

在IDEA中连接HTML与Java类

在现代Web开发中，前端与后端之间的连接是必不可少的一部分。尤其是当我们使用Java作为后端语言时，连接HTML页面和Java类的过程通常会涉及到多个层次，包括服务器端逻辑处理、数据获取和响应的格式化等。

1. 开发环境准备

在开始之前，你需要确保你的开发环境已正确配置。我们将使用IntelliJ IDEA（简称IDEA）作为我们的开发工具，同时选择Spring Boot作为后端开发框架。以下是一些步骤以确保环境的搭建：

下载并安装IDEA：前往 [JetBrains官网]( 下载并安装IDEA Community或Ultimate版本。
安装JDK：确保你的系统中安装了Java Development Kit (JDK)，推荐使用JDK 11或更高版本。
创建Spring Boot项目：
- 在IDEA中，选择“新建项目”。
- 在项目类型中，选择“Spring Initializr”。
- 输入项目的必要信息，比如组（Group）和构件（Artifact），选择Web依赖项。

2. 目录结构

一个典型的Spring Boot项目的目录结构如下：

my-spring-boot-app
│
├── src
│   └── main
│       ├── java
│       │   └── com
│       │       └── example
│       │           └── demo
│       │               ├── DemoApplication.java
│       │               ├── controller
│       │               │   └── UserController.java
│       │               └── service
│       │                   └── UserService.java
│       └── resources
│           ├── static
│           │   └── index.html
│           └── application.properties
└── ...

3. 创建HTML页面

在 src/main/resources/static 目录下，创建 index.html 文件。此文件将作为我们要展示的前端页面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户信息</title>
</head>
<body>
    用户列表
    <ul id="userList"></ul>

    <script>
        fetch('/users')
            .then(response => response.json())
            .then(data => {
                const userList = document.getElementById('userList');
                data.forEach(user => {
                    const li = document.createElement('li');
                    li.textContent = user.name;
                    userList.appendChild(li);
                });
            });
    </script>
</body>
</html>

在这个简单的HTML页面中，我们使用 fetch API 从服务器获取用户数据，并将其动态地添加到unordered list中。

4. 创建Java类

接下来，我们在Java中创建一个控制器类 UserController，用于处理前端请求和返回数据。

package com.example.demo.controller;

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

import java.util.Arrays;
import java.util.List;

@RestController
public class UserController {

    @GetMapping("/users")
    public List<User> getUsers() {
        return Arrays.asList(new User("Alice"), new User("Bob"), new User("Charlie"));
    }

    static class User {
        private String name;

        public User(String name) {
            this.name = name;
        }

        public String getName() {
            return name;
        }
    }
}

在这个 UserController 类中，我们定义了一个 getUsers 方法，当接收到 GET /users 请求时，它将返回一个用户列表。

5. 启动应用

回到 DemoApplication.java，确保它包含了 Spring Boot 的主类定义并可以运行：

package com.example.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class DemoApplication {
    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }
}

6. 运行和测试

现在，你可以在IDEA中运行 DemoApplication。然后，在浏览器中访问 http://localhost:8080。你应该会看到用户列表，内容是从服务器端动态获取的。

7. 涉及的技术概念

Spring Boot：一个开源的Java框架，简化了企业Java应用程序的开发。
REST API：通过HTTP协议进行资源的创建、读取、更新和删除（CRUD）操作的设计风格。
JSON：一种用于数据交换的轻量级数据格式，通常用于前后端的数据交互。

8. 甘特图

下图说明了整个应用程序开发的主要步骤，将它们可视化可以帮助我们更好地理解每个步骤所需的时间和相互关系。

gantt
    title 项目开发计划
    dateFormat  YYYY-MM-DD
    section 需求分析
    需求调研           :a1, 2023-10-01, 3d
    需求评审           :after a1  , 2d
    section 设计
    界面设计           :b1, after a1  , 2d
    数据库设计         :after b1  , 3d
    section 开发
    前端开发           :c1, after b1, 5d
    后端开发           :after c1, 5d
    section 测试
    系统测试           :d1, after c1  , 4d