springboot项目开发,使用thymeleaf前端框架的简单案例

这篇具有很好参考价值的文章主要介绍了springboot项目开发,使用thymeleaf前端框架的简单案例。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

springboot项目开发,使用thymeleaf前端框架的简单案例!我们看一下,如何在springboot项目里面简单的构建一个thymeleaf的前端页面。来完成动态数据的渲染效果。


第一步,我们在上一小节,已经提前预下载了对应的组件了。

springboot项目开发,使用thymeleaf前端框架的简单案例,springboot,spring boot,后端,java

如图,springboot的强大之处就在于,它有一套完整的版本依赖关系。管理很方便。插件彼此之间的依赖,不需要我们再去思考了。它自己会下载所需的依赖包。

springboot项目开发,使用thymeleaf前端框架的简单案例,springboot,spring boot,后端,java

在依赖项里面可以看见这个选项,就是下载成功了。


第二步,我们设计一下自己的前端页面的存档路径。 

 如图,我们在templates文件夹下面新建了一个index的文件夹,里面新建立一个index.html文件。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
<div>
    <p>
        <span>用户名字:张三</span>
        <span>用户年龄:21</span>
        <span>用户爱好:骑车,爬山,健身</span>
    </p>

</div>
</body>
</html>

 暂时是静态的内容。等会我们会把它改成动态熏染的。


第三步,我们配置一下,thymeleaf基础的参数信息。告诉我们的springboot去哪里渲染我们的内容。

server.port= 8080

#Thymeleaf 基础配置参数
spring.thymeleaf.cache = false
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.mode=HTML5
spring.thymeleaf.suffix=.html
spring.thymeleaf.prefix=classpath:/templates/

如上内容,这个就是基础的。application.properties里面的thymeleaf参数配置。我们选择了不开启缓存。


 第四步,我们提前准备好一个user实体类,存储我们的动态数据,

package com.example.demo.bean;

import java.util.ArrayList;

public class User {
    private String id;
    private String name;
    private String age;
    private ArrayList<String> hobby;

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getAge() {
        return age;
    }

    public void setAge(String age) {
        this.age = age;
    }

    public ArrayList<String> getHobby() {
        return hobby;
    }

    public void setHobby(ArrayList<String> hobby) {
        this.hobby = hobby;
    }

    @Override
    public String toString() {
        return "User{" +
                "id='" + id + '\'' +
                ", name='" + name + '\'' +
                ", age='" + age + '\'' +
                ", hobby=" + hobby +
                '}';
    }
}

第五步,我们新增了一个UserController控制器。还是一个简单的get请求路径。

测试一下。我们的内容能不能渲染到前端页面内。

package com.example.demo.controller;

import com.example.demo.bean.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.ArrayList;

@Controller
@RequestMapping("/user")
public class UserController {
    @GetMapping("/index")
    public String  index(ModelMap model){
        User user = new User();
        user.setId("201212001");
        user.setAge("24");
        user.setName("老刘");
        ArrayList<String> hobbyList = new ArrayList();
        hobbyList.add("瑜伽");
        hobbyList.add("骑马");
        hobbyList.add("看电影");
        user.setHobby(hobbyList);
        model.addAttribute("user",user);
        //输入对应的前端页面的名字index
        return "/index/index";
    }
}

 借助于官方提供的ui.modelMap插件可以完成数据的绑定。在前端页面就可以拿到这个数据来渲染了。


<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
<div>
    <p>
        <span th:text="${user.name}"></span>
        <span th:text="${user.age}"></span>
        <span th:text="${user.hobby}"></span>
    </p>

</div>
</body>
</html>

如图,我们已经采取了动态渲染的方式。

看看能不能正常获取到数据。


springboot项目开发,使用thymeleaf前端框架的简单案例,springboot,spring boot,后端,java

如图,确实是拿到了数据信息。至此为止,一个简单的thymeleaf前端框架的使用案例就完成了。

后续我们会分享,如何让springboot配合mysql数据库渲染数据。 文章来源地址https://www.toymoban.com/news/detail-823150.html

到了这里,关于springboot项目开发,使用thymeleaf前端框架的简单案例的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 使用Spring框架进行Web项目开发(初级)

    目录 前言 1. 为什么常规的Spring框架不适合Web项目呢? 2. 如何在Spring框架中创建容器? 3. Spring框架开发Web项目的步骤 3.1 创建maven项目 3.2 添加相应的依赖 3.3 在webapp目录下的web.xml中注册监听器 3.4 在webapp文件夹下的web.xml中配置Servlet控制器 3.5 自定义控制器  总结 我们在初步

    2024年01月19日
    浏览(44)
  • Java项目实战笔记--基于SpringBoot3.0开发仿12306高并发售票系统--(二)项目实现-第二篇-前端模块搭建及单点登录的实现

    本文参考自 Springboot3+微服务实战12306高性能售票系统 - 慕课网 (imooc.com) 本文是仿12306项目实战第(二)章——项目实现 的第二篇,详细讲解使用Vue3 + Vue CLI 实现前端模块搭建的过程,同时其中也会涉及一些前后端交互的实现,因此也会开发一些后端接口;搭建好前端页面后,

    2024年03月26日
    浏览(55)
  • 前端开发---在vue项目中使用openLayers

    本篇文章主要讲解openLayers的初步使用,包括渲染地图、获取点坐标、标记点、中心位置的调整、以及获取到经纬度向后台发送请求 演示地址 官网 gitee链接 npm install ol import “ol/ol.css”; import { Map, View, ol } from “ol”; import TileLayer from “ol/layer/Tile”; DW () { var view = this.map.getVi

    2024年02月08日
    浏览(45)
  • uniapp和springboot微信小程序开发实战:前端架构搭建之HBuilder X创建项目以及目录介绍

    HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开

    2024年02月09日
    浏览(52)
  • 基础前端使用web3 进行区块链项目开发

    这篇文章不会些区块链的机制算法等一切,只是对前端开发者,如何快速上手进行区块链项目开发做一个简单的引导。 阅读本文之前,需要了解一些简单的区块链知识,能回答以下四个问题就可以阅读本文了。 1、区块链是什么? 2、区块链节点是什么? 3、钱包是什么? 4、

    2024年02月01日
    浏览(53)
  • 若依框架快速开发项目(不涉及底层逻辑,只是简单使用)

    初衷: 若依框架使用及其普遍,是一个非常优秀的开源框架,框架本身的权限系统,字典设置以及相关封装,安全拦截相当完善,本人受益匪浅,学学到了许多,在这里,先向原创作者致敬! 本人刚刚接触这个框架的时候,很迷茫,几乎没有入手的地方,不知道怎么去开始

    2024年02月03日
    浏览(90)
  • SpringBoot项目使用MyBatisX+Apifox IDEA 插件快速开发

            今天跟大家介绍两个快速开发项目的插件。能大大提高开发效率。希望能帮助到大家。         MyBatis-Plus为我们提供了强大的mapper和service模板,能够大大的提高开发效率。但是在真正开发过程中,MyBatis-Plus并不能为我们解决所有问题,例如一些复杂的SQL,多表

    2024年02月15日
    浏览(30)
  • 在deepin上使用Fleet开发SpringBoot 3.0.0项目

    Fleet被称为是由 JetBrains 打造的下一代 IDE,目前出于公测状态,可以免费下载使用。 SpringBoot 3.0.0最小支持是JDK 17,这或许是对于JDK8的断舍离迈出的重大一步。 出于对新工具和新技术的好奇,我开始尝试在deepin上用Fleet开发一个SpringBoot 3.0.0项目,继续我的SpringBoot学习。 在F

    2024年02月08日
    浏览(36)
  • AI问答:前端需要掌握的设计模式/vue项目使用了哪些设计模式/vue项目开发可以使用哪些设计模式

    一、理解什么是设计模式 设计模式是对软件设计开发过程中反复出现的某类问题的通用解决方案。 设计模式是一个在软件设计领域中被广泛应用的概念,它指的是一套被公认为有效的解决特定问题的设计思路和方法。 设计模式更多的是指导思想和方法论,而不是现成的代码

    2024年02月09日
    浏览(63)
  • 从0开始搭建前端项目:使用ChatGPT实现高自动化完成率,提高开发效率并掌握最新前端技术

    大家好,我是老李,我很高兴向您介绍我即将发布的一系列关于前端项目开发的文章。在这个系列中,我将借用 ChatGPT 的帮助,从零开始搭建一个前端项目,并尝试达到 70% 以上的自动化完成率。 这个系列的文章将带您从搭建项目的基础开始,一步步实现一个完整的前端项目

    2024年02月06日
    浏览(79)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包