接【案例:图书管理1】项目实践出现的505问题-CSDN博客

本文链接：https://blog.csdn.net/Hhy220125/article/details/147432391

代码实操过程中经常会遇到形形色色的问题，时常会因为敲不出完整的代码，实现不出想要的效果而崩溃！但是，任何的bug在你不屑的努力下，就一定可以击破并解决，然后得到满满的成就感，本次项目运行过程中出现了脚本代码爆红以及前端页面505的页面，刚开始以为是自己电脑配置的问题，没有在代码上多花功夫，一直在调配pom.xml上的配置，但后面在老师的指引下，发现原来是在books.html的div中出现脚本代码与版本配置存在一定的冲突！幸好坚持下来并运行成功了！一切成功在冥冥之中一定会有预示，如果你刚好遇到505，请不要放弃，你一定可以做到的！加油！！!

1.问题实例：

2.解决办法

查看所有脚本代码是否出现问题，包括代码的解析是否成功！

正确脚本实例：

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>图书管理</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
    <link rel="stylesheet" th:href="@{/css/AdminLTE.css}">
    <link rel="stylesheet" th:href="@{/css/pagination.css}">
    <script th:src="@{/js/jquery.min.js}"></script>
</head>
<body>
<div class="box-body">
    <div class="pull-left" th:if="${session.user != null and session.user.role != null and session.user.role == 'ADMIN'}">
        <div class="btn-group">
            <button type="button" class="btn btn-default"> 新增</button>
        </div>
    </div>
    <!--数据搜索 -->
    <div class="pull-right">
        <div class="has-feedback">
            <form th:action="@{/book/search}" method="post">
                图书名称：<input name="name">&nbsp&nbsp&nbsp&nbsp
                图书作者：<input name="author">&nbsp&nbsp&nbsp&nbsp
                <input class="btn btn-default" type="submit" value="查询">
            </form>
        </div>
    </div>
    <div class="table-box">
        <!-- 数据表格 -->
        <table id="dataList" class="table table-bordered table-striped table-hover text-center">
            <thead>
            <tr>
                <th>图书名称</th>
                <th>图书作者</th>
                <th>出版社</th>
                <th>图书状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <th:block th:each="book : ${books}">
                <tr>
                    <td th:text="${book.name}"></td>
                    <td th:text="${book.author}"></td>
                    <td th:text="${book.press}"></td>
                    <td>
                        <th:block th:if="${book.status == '0'}">
                            可借阅
                        </th:block>
                        <th:block th:if="${book.status =='1'}">
                            借阅中
                        </th:block>
                        <th:block th:if="${book.status =='2'}">
                            归还中
                        </th:block>
                    </td>
                    <td class="text-center">
                        <button th:if="${book.status =='0'}" type="button" class="btn bg-olive btn-xs"
                                th:onclick="|findBookById(${book.id})|"> 借阅
                        </button>
                        <button th:if="${book.status =='1' || book.status =='2'}" type="button"
                                class="btn bg-olive btn-xs"
                                disabled="true">借阅
                        </button>
                    </td>
                </tr>
            </th:block>
            </tbody>
        </table>
    </div>
</div>

</body>
<script>
    function findBookById(id) {
        $.get("/book/find/"+id)
    }
</script>
</html>

由于我使用的是jdk21.0,所以在会话的使用过程中，我将以下脚本代码：

    <div class="pull-left" th:if="${#session.getAttribute('user').role =='ADMIN'}">
        <div class="btn-group">
            <button type="button" class="btn btn-default"> 新增
            </button>
        </div>
    </div>

使用更简洁的 Thymeleaf 表达式来访问会话属性。比如：

<div class="pull-left" th:if="${session.user != null and session.user.role != null and session.user.role == 'ADMIN'}">
    <div class="btn-group">
        <button type="button" class="btn btn-default"> 新增</button>
    </div>
</div>

最终，再在配置的环境中不断调试运行，实现最终的结果！

tips：在项目脚本代码调试中，也可以清除 IDE 缓存并重新构建项目：

如果你使用的是 IntelliJ IDEA，可以通过 File -> Invalidate Caches / Restart 来清除缓存，然后重新构建项目。
如果你使用的是 Eclipse，可以尝试 Project -> Clean 来清理项目。