山东大学软件学院项目实训-创新实训-基于大模型的旅游平台（二十一）

最新推荐文章于 2024-07-12 22:58:11 发布

sahdajs

最新推荐文章于 2024-07-12 22:58:11 发布

阅读量813

点赞数 7

文章标签：旅游

本文链接：https://blog.csdn.net/sahdajs/article/details/139337895

版权

如何使用Thymeleaf构建动态旅游景点搜索和详情页面

在这篇博客中，我们将深入介绍如何使用Thymeleaf和前端技术创建一个动态的旅游景点搜索和详情展示页面。这个页面允许用户搜索特定城市的旅游景点，并查看详细信息和评论。我们将分解代码的各个部分，详细说明其实现方式。

页面1：旅游景点搜索页面

首先，我们来看看第一个页面的HTML结构和样式，这个页面用于让用户搜索特定城市的旅游景点。

HTML结构
html
复制代码
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<style>
    .layui-container {
      max-width: 1200px;
      margin: auto;
      padding-top: 20px;
    }

    #sight-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 20px;
      padding: 20px;
    }

    .layui-card {
      border: 1px solid #e6e6e6;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease;
    }

    .layui-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .layui-card-header {
      background-color: #f2f2f2;
      color: #333;
      text-align: center;
      padding: 10px 15px;
      font-weight: bold;
      border-bottom: 1px solid #e6e6e6;
    }

    .layui-card-body {
      padding: 15px;
      text-align: left;
    }

    .layui-card-body img {
      width: 100%;
      height: auto;
      margin-bottom: 10px;
      border-radius: 5px;
    }

    .layui-card-body p {
      margin-bottom: 5px;
      line-height: 1.6;
      color: #666;
    }

    .layui-row {
      margin-bottom: 20px;
      align-items: center;
    }

    #search-input {
      width: 200px;
      height: 35px;
      margin-right: 10px;
      margin-top: 100px;
      margin-left: 30px;
      font-size: 18px;
      font-weight: bold;
      border: 2px solid transparent;
      transition: border 0.5s;
    }

    #search-input:hover {
      border: 3px solid rgb(52,168,255);
    }

    #search-button {
      width: 110px;
    }
</style>

样式说明
.layui-container: 定义了页面容器的最大宽度和自动居中对齐。
#sight-list: 使用CSS网格布局来展示景点卡片。
.layui-card: 为每个景点卡片添加样式，包括边框、圆角、阴影效果，以及鼠标悬停时的动画效果。
#search-input 和 #search-button: 定义了搜索输入框和按钮的样式，包括悬停时的边框变化效果。
页面功能
搜索框: 用户可以在搜索框中输入城市名称，点击搜索按钮开始搜索。
景点列表: 使用网格布局展示搜索结果中的景点，每个景点以卡片形式显示。
页面2：景点详情展示页面

第二个页面用于展示用户选择的具体景点的详细信息，包括简介、人口数量、著名景点等。

HTML结构
html
复制代码
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>首页</title>
<div th:include="common :: headcommon"></div>
<script th:src="@{/js/index/city_detail.js}" type="text/javascript"></script>
<style>
    .container {
      width: 70%;
      padding: 40px 20px;
      margin: 40px auto 0;
      background-color: #fff;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .sight-detail {
      display: flex;
      align-items: start;
      padding-bottom: 20px;
      margin-top: 30px;
    }

    .sight-image {
      flex-shrink: 0;
      width: 40%;
      margin-right: 20px;
    }

    .sight-image img {
      width: 88%;
      height: auto;
      border-radius: 4px;
    }

    .sight-info {
      flex: 1;
      margin-top: 20px;
    }

    .sight-info h1, .sight-info p, .sight-info .detail-line strong {
      font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
      color: #333;
      line-height: 1.5;
      letter-spacing: 0.02em;
    }

    .sight-info h1 {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 1em;
    }

    .detail-line {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }

    .detail-line strong {
      width: 80px;
      font-weight: normal;
      color: #666;
    }

    @media (max-width: 768px) {
      .sight-detail {
        flex-direction: column;
        align-items: center;
      }

      .sight-image {
        width: 100%;
      }

      .sight-info {
        width: 100%;
        margin-top: 20px;
      }
    }

    .comment-images img {
      width: 100px;
      height: 100px;
      object-fit: cover;
      border-radius: 4px;
      margin-right: 10px;
      margin-bottom: 10px;
    }

    .comment-images {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .comment-card {
      background-color: #f9f9f9;
      border: 1px solid #e1e1e1;
      margin-bottom: 20px;
      padding: 15px;
      border-radius: 4px;
    }

    .comment-meta {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }

    .comment-author, .comment-date, .comment-score {
      font-size: large;
      margin-right: 20px;
    }
</style>
</head>
<body>

样式说明
.container: 定义了详情页面容器的宽度和样式。
.sight-detail: 使用Flexbox布局展示景点的图片和详细信息。
.sight-image img: 定义了景点图片的样式，包括宽度、高度和圆角效果。
.sight-info: 包含景点的详细信息，如名称、简介、人口数量和著名景点。
.comment-images: 定义了评论图片的样式，包括大小、裁剪方式和圆角效果。
.comment-card: 定义了评论卡片的样式，包括背景颜色、边框和内边距。
.comment-meta: 包含评论的元数据，如评论者名字、评论日期和评分。
页面功能
景点详细信息: 通过Flexbox布局展示景点的详细信息，包括图片、名称、简介等。
评论展示: 动态渲染景点的评论，包括评论者名字、评论日期、评分和图片。
总结

通过这两个页面的代码，我们展示了如何使用Thymeleaf和前端技术构建一个动态的旅游景点搜索和详情展示系统。用户可以通过搜索框输入城市名称，获取相关景点信息，并查看详细的景点介绍和评论。希望这篇博客对你理解和实现类似的功能有所帮助。如果你有任何问题或建议，请随时留言讨论。

sahdajs

关注

7
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
山东大学软件学院项目实训-创新实训-基于大模型的旅游平台（二十一）

<strong>简介：</strong><span id="districts"></span></div><div class="detail-line"><strong>著名景点：</strong><span id="address"></span></div><div class="detail-line"><strong>人口数量：</strong><span id="intro"></span>
复制链接

扫一扫