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

最新推荐文章于 2024-10-16 17:11:49 发布

sahdajs

最新推荐文章于 2024-10-16 17:11:49 发布

阅读量581

点赞数 22

文章标签：旅游

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

版权

构建用户中心：一个旅游行程管理系统

在这篇博客中，我们将介绍一个使用Thymeleaf和前端技术构建的用户中心页面。这一页面允许用户管理他们发布的旅游行程、收藏的行程和评论。通过这个用户中心，用户可以方便地查看、编辑和删除自己的内容。以下是实现这一功能的详细代码和说明。

代码结构概览

这段代码包括HTML结构、CSS样式以及JavaScript逻辑。我们将逐步解析每一部分的具体实现。

HTML结构

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>
</head>
<body>
<div th:replace="common :: #top_start"></div>

        <div class="fly-panel fly-panel-user">
            <div class="layui-tab layui-tab-brief" lay-filter="user">
                <ul class="layui-tab-title" id="LAY_mine">
                    <li data-type="mine-jie" lay-id="index" class="layui-this">我发表的旅游行程（<span th:text="${lists.size()}">89</span>）
                    </li>
                    <li data-type="collection" data-url="/collection/find/" lay-id="collection">
                        我收藏的旅游行程（<span th:text="${favArts.size()}">16</span>）
                    </li>
                    <li data-type="collection" data-url="/collection/find/" lay-id="collection">
                        我的评论（<span th:text="${commentList.size()}">16</span>）
                    </li>
                </ul>

<div class="layui-tab-content" style="padding: 20px 0;">
                    
                    <div class="layui-tab-item layui-show">
                        <ul class="mine-view jie-row">
                            <li th:each="list:${lists}">
                                <a class="jie-title" th:href="@{/article/details/{id}(id=${list?.id})}"
                                   th:text="${list?.title}">LayIM 3.5.0 发布，移动端版本大更新（带演示图）</a>
                                <i th:text="${#dates.format(list?.createTime, 'yyyy-MM-dd HH:mm:ss')}">2017/3/14 上午8:30:00</i>
                                <a class="mine-edit" th:href="@{/article_pub(id=${list?.id})}">编辑</a>
                                <button style="margin-left: 15px;height: 25px;" class="layui-btn" th:οnclick="delArt(this,[[${list?.id}]])">删除</button>
                                <span th:if="${list?.status eq 1}">审核通过</span>
                                <span th:if="${list?.status eq 0}" style="color: #ffffff;background-color: #0a30d0">待审核</span>
                                <span th:if="${list?.status eq 2}" style="color: #ffffff;background-color: #ff0000">审核不通过</span>
                                <em>[[${list?.checkNum}]]阅</em>
                            </li>
                        </ul>
                        <div id="LAY_page"></div>
                    </div>

<div class="layui-tab-item">
                        <ul class="mine-view jie-row">
                            <div th:each="favorite:${favorites}">
                                <li th:each="favArt:${favArts}" th:if="${favorite?.aid==favArt.id}">
                                    <a class="jie-title" th:href="@{/article/details/{id}(id=${favArt?.id})}"
                                       th:text="${favArt?.title}">layui 常见问题的处理和实用干货集锦</a>
                                    <i>收藏于</i>
                                    <i th:if="${favorite?.aid==favArt.id}"
                                       th:text="${#dates.format(favorite?.addTime, 'yyyy-MM-dd HH:mm')}">收藏于23小时前</i>
                                    <a style="position: absolute;right: 0; top: 0;" th:οnclick="delFav(this,[[${favArt?.id}]])">删除</a>
                                </li>
                            </div>
                        </ul>
                        <div id="LAY_page1"></div>
                    </div>

<div class="layui-tab-item">
                        <ul class="mine-view jie-row">
                            <div th:each="comment:${commentList}">
                                <li>
                                    <a class="jie-title" th:href="@{/article/details/{id}(id=${comment?.aid})}"
                                       th:utext="${comment?.content}">layui 常见问题的处理和实用干货集锦</a>
                                    <i>评论于</i>
                                    <i th:text="${#dates.format(comment?.comTime, 'yyyy-MM-dd HH:mm')}">评论于23小时前</i>
                                    <a style="position: absolute;right: 0; top: 0;" th:οnclick="delCom(this,[[${comment?.comid}]])">删除</a>
                                </li>
                            </div>
                        </ul>
                        <div id="LAY_page1"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:replace="common :: #foot_start"></div>
<script>
    // 用户收藏夹删除
    function delFav(obj,aid){
        layer.confirm('确认要删除吗？',function(index){
            // 发异步删除数据
            $.post("/user/delFav",{"aid":aid},function (data) {
                if(data.flag ==200){
                    layer.msg(data.msg,{icon:1,time:2000});
                } else if (data.flag==400) {
                    layer.msg(data.msg,{icon:0,time:2000});
                }
            });
        });
    }

    // 删除用户发表的旅游行程
    function delArt(obj,aid){
        layer.confirm('确认要删除旅游行程吗？',function(index){
            // 发异步删除数据
            $.post("/user/delArt",{"aid":aid},function (data) {
                console.log(aid);
                if(data.flag ==200){
                    layer.msg(data.msg,{icon:1,time:2000});
                    setTimeout(function () {window.location.href='/user/user_center';},2000);
                } else if (data.flag==400) {
                    layer.msg(data.msg,{icon:0,time:2000});
                }
            });
        });
    }

    // 删除用户的评论
    function delCom(obj,comid){
        layer.confirm('确认要删除评论吗？',function(index){
            // 发异步删除数据
            $.post("/user/delCom",{"comid":comid},function (data) {
                console.log(comid);
                if(data.flag ==200){
                    layer.msg(data.msg,{icon:1,time:2000});
                    setTimeout(function () {window.location.href='/user/user_center';},2000);
                } else if (data.flag==400) {
                    layer.msg(data.msg,{icon:0,time:2000});
                }
            });
        });
    }
</script>
</body>
</html>

页面结构解析

头部和导航栏：

头部包含页面标题和引用的外部资源。
导航栏包含三个主要选项：我的主页、用户中心和基本设置。

内容区域：

通过layui-tab创建了一个选项卡界面，包含用户发表的旅游行程、收藏的行程和评论三个选项卡。
每个选项卡下展示相应的内容，用户可以查看并管理这些内容。
样式部分

在这段代码中，样式主要通过引入的外部CSS库layui来实现，页面的布局和样式都由layui来处理。

JavaScript逻辑

JavaScript部分主要实现了删除功能，包括删除用户的收藏、发表的行程和评论。通过AJAX请求与服务器交互，实现数据的异步删除。

javascript
复制代码
<script>
    // 用户收藏夹删除
    function delFav(obj,aid){
        layer.confirm('确认要删除吗？',function(index){
            // 发异步删除数据
            $.post("/user/delFav",{"aid":aid},function (data) {
                if(data.flag ==200){
                    layer.msg(data.msg,{icon:1,time:2000});
                } else if (data.flag==400) {
                    layer.msg(data.msg,{icon:0,time:2000});
                }
            });
        });
    }