java 前端demo 可直接套用

原创

mob64ca12d1a59e 2024-09-12 05:57:23 ©著作权

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

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

基于 Java 的前端 Demo 可直接套用

在现代软件开发中，前后端的分离越来越成为一种常见的架构模式。Java 作为一种广泛使用的后端语言，结合前端框架，可以快速构建出功能完善的 Web 应用程序。在本文中，我们将介绍一个基础的 Java 前端 Demo，包括代码示例、流程图和实体关系图（ER 图），以帮助你了解如何构建一个简单的前后端应用。

1. 项目结构

我们的项目将采用 Maven 作为构建工具，项目结构如下：

my-java-frontend-demo/
 |-- src/
 |    |-- main/
 |    |    |-- java/
 |    |    |    |-- com/
 |    |    |    |    |-- demo/
 |    |    |    |    |    |-- MyApplication.java
 |    |    |-- resources/
 |    |    |    |-- templates/
 |    |    |    |    |-- index.html
 |    |-- test/
 |-- pom.xml

2. 创建 Spring Boot 应用

首先，我们需要创建一个简单的 Spring Boot 应用。你可以用以下代码片段创建 MyApplication.java 文件。

package com.demo;

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

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

依赖配置

在 pom.xml 中添加必要的依赖：

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
</dependencies>

3. 创建简单的前端页面

接下来，我们将在 src/main/resources/templates/ 目录下创建 index.html 文件，用以展示前端页面。以下是基础示例代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Java 前端 Demo</title>
</head>
<body>
    欢迎来到 Java 前端 Demo
    <p>这是一个使用 Spring Boot 和 Thymeleaf 构建的简单页面。</p>
</body>
</html>

4. 创建控制器

为了将前端与后端连接起来，我们需要创建一个控制器来处理请求。底下是一个简单的控制器示例。

package com.demo;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class DemoController {
    @GetMapping("/")
    public String index(Model model) {
        model.addAttribute("message", "欢迎访问");
        return "index";
    }
}

5. 流程图

请参考以下流程图，以理解我们的应用流程：

flowchart TD
    A[用户请求主页] --> B[控制器处理请求]
    B --> C[返回视图]
    C --> D[前端展示]

6. 实体关系图

在实际的应用中，通常会有数据库实体与前端进行交互。下面是一个简单的用户与角色的实体关系图。

erDiagram
    USER {
        int id PK "用户ID"
        string name "用户姓名"
        string email "用户邮箱"
    }
    ROLE {
        int id PK "角色ID"
        string roleName "角色名称"
    }
    USER ||--o{ ROLE : has

在这个示例中，用户（USER）和角色（ROLE）之间是一对多的关系，每个用户可以拥有多个角色。