Thymeleaf 3.1 +Element UI 2.15

原创于 2025-11-03 15:36:03 发布 · 132 阅读

4 ·

CC 4.0 BY-SA版权

QQ:109576764

文章标签：

#ui

spring boot 3 版本的实例给一个吧

下面给出「Spring Boot 3.2 + JDK 17 + Thymeleaf 3.1 + Vue 2.7 + Element UI 2.15」的最小可运行实例，与 Spring Boot 2 的主要差异只有 Jakarta 命名空间 与 application.yml 配置键 两处，其余代码完全一致。直接复制即可启动。

依赖文件 pom.xml

xml

复制

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0
                             http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.example</groupId>
    <artifactId>sb3-element</artifactId>
    <version>1.0</version>
    <packaging>jar</packaging>

    <properties>
        <java.version>17</java.version>
        <spring-boot.version>3.2.5</spring-boot.version>
    </properties>

    <dependencies>
        <!-- Web + Thymeleaf -->
        <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>

        <!-- 热刷新（可选） -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
    </dependencies>

    <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-dependencies</artifactId>
                <version>${spring-boot.version}</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
        </dependencies>
    </dependencyManagement>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <version>${spring-boot.version}</version>
            </plugin>
        </plugins>
    </build>
</project>

配置文件 src/main/resources/application.yml

yaml

复制

server:
  port: 8080

spring:
  thymeleaf:
    cache: false          # 开发阶段立即生效
    mode: HTML
    encoding: UTF-8

启动类（与 SB2 无区别，只是包名换成 jakarta）

java

复制

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);
    }
}

后端控制器 & 实体（依旧使用 Jakarta 注解）

java

复制

package com.example.demo.controller;

import com.example.demo.model.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.List;

@Controller
public class UserController {

    @GetMapping("/")
    public String index(Model model) {
        List<User> users = List.of(
                new User(1, "张三", 18),
                new User(2, "李四", 20));
        model.addAttribute("users", users);
        return "index";   // 对应 templates/index.html
    }
}

java

复制

package com.example.demo.model;

public record User(Integer id, String name, Integer age) {}

页面 src/main/resources/templates/index.html

HTML

预览

复制

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>SB3 + Element</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.14/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui@2.15.14/lib/index.js"></script>
    <style>
        body { padding: 20px; }
    </style>
</head>
<body>
<div id="app">
    <h2>Spring Boot 3 用户列表</h2>
    <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="ID" width="60"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="age" label="年龄" width="80"></el-table-column>
        <el-table-column label="操作" width="150">
            <template slot-scope="scope">
                <el-button size="mini" type="primary" @click="edit(scope.row)">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog title="编辑" :visible.sync="dialogVisible" width="30%">
        <el-form :model="form" label-width="60px">
            <el-form-item label="姓名">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="年龄">
                <el-input-number v-model="form.age" :min="1"></el-input-number>
            </el-form-item>
        </el-form>
        <span slot="footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="save">确定</el-button>
        </span>
    </el-dialog>
</div>

<!-- Thymeleaf 把后端数据注入 JS -->
<script th:inline="javascript">
    window.serverData = /*[[${users}]]*/ [];
</script>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                tableData: window.serverData,
                dialogVisible: false,
                form: {id:null, name:'', age:null}
            }
        },
        methods:{
            edit(row){
                this.form = Object.assign({}, row);
                this.dialogVisible = true;
            },
            save(){
                const i = this.tableData.findIndex(u => u.id === this.form.id);
                this.$set(this.tableData, i, this.form);
                this.$message.success('保存成功');
                this.dialogVisible = false;
            }
        }
    });
</script>
</body>
</html>

一键启动

bash

复制

mvn spring-boot:run

浏览器访问 http://localhost:8080 即可看到由 Thymeleaf 直出数据、Vue+Element 接管交互的完整页面。

SB3 与 SB2 差异小结（牢记即可） | 差异点 | Spring Boot 2 | Spring Boot 3 | |----------------------|-----------------------------|--------------------------------| | 核心包名 | javax.servlet.* | jakarta.servlet.* | | Java 版本 | 8+ | 最低 17 | | Thymeleaf 版本 | 3.0.x | 3.1.x（已内置） | | 配置键 | spring.thymeleaf.cache 等 | 同左，键名未变 |

其余写法（Controller、Model、Thymeleaf 语法、Vue 与 Element 的引入）完全一致，可无缝迁移。祝体验愉快！