spring boot 配置静态页面

原创

mob64ca12e4d52e 2024-10-27 03:45:55 ©著作权

文章标签 静态页面 css html 文章分类 spring boot 后端开发

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

Spring Boot 配置静态页面的指南

Spring Boot 是一个用于简化 Java 企业级应用开发的框架。它通过约定优于配置的方式，使得 Java 开发者可以更快捷地构建和部署应用。在众多功能中，配置静态页面是一项非常基础且重要的功能。本文将深入探讨如何在 Spring Boot 中配置静态页面，附带代码示例和可视化图表。

什么是静态页面？

静态页面是指内容固定不变的网页，通常使用 HTML、CSS 和 JavaScript 编写。与之相对的动态页面是基于用户输入或其他因素生成的内容。在开发的初期阶段，静态页面非常适合用来展示网站框架和基础结构。

Spring Boot 中的静态资源配置

在 Spring Boot 中，默认的静态资源文件夹有以下几个：

src/main/resources/static
src/main/resources/public
src/main/resources/resources
src/main/resources/META-INF/resources

你只需将静态文件（如 HTML、CSS 和 JavaScript）放在上述任意一个文件夹中，Spring Boot 会自动处理这些资源。

一、创建项目

使用 [Spring Initializr]( 创建一个新的 Spring Boot 项目。在依赖项中选择 "Spring Web"。

项目创建完毕后，目录结构大致如下：

my-spring-boot-app
├── src
│   ├── main
│   │   ├── java
│   │   └── resources
│   │       └── static
│   │           ├── index.html
│   │           ├── css
│   │           │   └── style.css
│   │           └── js
│   │               └── app.js
└── pom.xml

二、创建静态页面

接下来，在 src/main/resources/static 文件夹中创建一个简单的 HTML 静态页面。我们用 index.html 作为示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>Spring Boot Static Page</title>
</head>
<body>
    欢迎使用 Spring Boot!
    <p>这是一份简单的静态页面示例。</p>
    <div>
        <p>下面是一个饼状图：</p>
        <div class="chart" id="pieChart"></div>
    </div>
    <script src="js/app.js"></script>
</body>
</html>

三、添加 CSS 和 JavaScript

添加一些简单的样式和 JavaScript 文件，分别命名为 style.css 和 app.js。

*style.css*：

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    text-align: center;
}

h1 {
    color: #333;
}

.chart {
    margin: 0 auto;
    width: 50%;
    height: 400px;
}

*app.js*：

document.addEventListener('DOMContentLoaded', () => {
    const chartData = [
        { name: 'A', value: 30 },
        { name: 'B', value: 70 },
        { name: 'C', value: 50 },
    ];

    drawChart(chartData);
});

function drawChart(data) {
    const ctx = document.getElementById('pieChart').getContext('2d');

    const labels = data.map(item => item.name);
    const values = data.map(item => item.value);

    new Chart(ctx, {
        type: 'pie',
        data: {
            labels: labels,
            datasets: [{ data: values }],
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'top'
                }
            }
        }
    });
}