使用Thymeleaf生成html页面

最新推荐文章于 2024-07-11 23:27:01 发布

weixin_30539835

最新推荐文章于 2024-07-11 23:27:01 发布

阅读量1.4k

点赞数

文章标签： shell javascript json ViewUI

原文链接：http://www.cnblogs.com/hrf521/p/11139700.html

版权

本文介绍了如何在项目中引入Thymeleaf Maven依赖，并展示了后台生成HTML页面的简要步骤。对于不熟悉的部分，作者承诺会在评论区及时回应疑问。

摘要由CSDN通过智能技术生成

1.引入Maven依赖

        <dependency>
            <groupId>org.thymeleaf</groupId> <artifactId>thymeleaf</artifactId> <version>3.0.5.RELEASE</version> </dependency>
2.模板页面上代码

<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>首页</title>

    <link rel="stylesheet" type="text/css"
          href="./static/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="./static/css/style.css" />
    <link rel="stylesheet" type="text/css"
          href="./static/css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="./static/css/site.min.css" />
</head>
<body class="nav-fixed">
<div class="page-wrap">
    <header class="site-header" style="padding-top: 0;">
        <nav class="navbar navbar-static-top main-navbar" id="top"
             style="padding: 0 15px;">
            <div class="">
                <div class="navbar-header">
                    <a href="javascript:;" class="navbar-brand brand-bootcdn"><img
                            src="./static/images/logo.png" /></a>
                </div>
            </div>
        </nav>
        <div class="container ">
            <div class="row">
                <div class="col-xs-12">
                    <div class="headLeft">
                        <img src="./static/images/banner.png" />
                    </div>
                    <div class="headRight">
                        <h2 th:text="${site.name}">
                        </h2>
                         <span th:text="${site.version}" style="font-size: 16px;">v1</span>
                        <p th:text="${site.description}">由*****提供全方位的技术支持，用户可与当地的****办事处联系，也可以直接与公司总部客服中心联系
                        </p>
                    </div>
                    <div class="search-wraper" role="search" style="display: none">
                        <div class="form-group">
                            <input class="form-control search clearable"
                                   placeholder="搜索开源库，例如：jquery" autocomplete="off" autofocus=""
                                   tabind