spring 当我尝试迭代List或String[]时,Thymeleaf代码不起作用< String>

9wbgstp7  于 2023-03-11  发布在  Spring
关注(0)|答案(1)|浏览(90)

我有这个thymeleaf模板代码片段

`                      <tr th:each="file : ${files}">
                                <td>
                                    <a target="_blank" class="btn btn-success"
                                       th:href="@{/home/get-file/{file}(file = ${file})}">View</a>
                                    <a class="btn btn-danger"
                                       th:href="@{/home/delete-file/{file}(file = ${file})}">Delete</a>
                                </td>
                                <th scope="row" th:text="${file}">ExampleFile.txt</th>
                            </tr>`

当文件为String[]时它不工作,当文件为List<String>时也不显示任何内容
我试过在两种不同的类型之间转换。
我的迭代方式有什么问题吗?我相信语法是正确的。另外,这是我的model:Model,就在控制器端点方法返回之前,看起来所有的数据都在那里:
enter image description here
“”“UPDATE'"”这是传递模型的方式:“控制器”

@PostMapping("/upload")
public String handleFileUpload(@RequestParam("fileUpload") MultipartFile file,
                               ->>Model model<--) throws IOException {
    fileService.addFile(SecurityContextHolder.getContext().getAuthentication(), file, model);
    return "result";
}

“服务”

public int addFile(Authentication authentication, MultipartFile multipartFile, Model model) throws IOException {
    String userName = authentication.getName();
    User user = userMapper.getUser(userName);
    Integer userId = user.getUserId();
    String fileName = multipartFile.getOriginalFilename();
    if (!fileIsDuplicate(userId, fileName)) {
        try {
            byte[] fileData = multipartFile.getBytes();
            String contentType = multipartFile.getContentType();
            String fileSize = String.valueOf(multipartFile.getSize());
            File file = new File(fileName, contentType, fileSize, (long)userId, fileData);
            int id = fileMapper.insertFile(file);
      -----> ------->>>model.addAttribute("files", fileMapper.getFilesByUserId(userId).toArray(new String[0]));
            model.addAttribute("result", "success");

            return id;
        } catch (IOException e) {
            e.printStackTrace();
            model.addAttribute("result", "error");
            model.addAttribute("message", "Exception occurred while trying to save file.");
            return -1;
        }
    }
    model.addAttribute("result", "error");
    model.addAttribute("message", "You have tried to add a duplicate file.");
    return -1;
}

请注意,正如在所附的调试器会话屏幕截图中所看到的,当我回到控制器层并准备返回视图时,模型中有文件值,这意味着在后端控制器端点方法返回时,模型不为空。
这是我的主页

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" type="text/css" media="all" th:href="@{/css/bootstrap.min.css}">
        <title>Home</title>
    </head>
    <body class="p-3 mb-2 bg-light text-black">
        <div class="container">
            <div id="logoutDiv">
                <form action="#" th:action="@{/logout}" method="POST">
                    <button type="submit" class="btn btn-secondary float-right" id="btn-logout">Logout</button>
                </form>
            </div>
            <div id="contentDiv" style="clear: right;">
                <nav style="clear: right;">
                    <div class="nav nav-tabs" id="nav-tab" role="tablist">
                        <a class="nav-item nav-link active" id="nav-files-tab" data-toggle="tab" href="#nav-files" role="tab" aria-controls="nav-files" aria-selected="true">Files</a>
                        <a class="nav-item nav-link" id="nav-notes-tab" data-toggle="tab" href="#nav-notes" role="tab" aria-controls="nav-notes" aria-selected="false">Notes</a>
                        <a class="nav-item nav-link" id="nav-credentials-tab" data-toggle="tab" href="#nav-credentials" role="tab" aria-controls="nav-credentials" aria-selected="false">Credentials</a>
                    </div>
                </nav>
                <div class="tab-content" id="nav-tabContent">
                    <div class="tab-pane fade show active" id="nav-files" role="tabpanel" aria-labelledby="nav-files-tab">
                            <form action="#" enctype="multipart/form-data" th:action="@{/file/upload}" method="POST">
                            <div class="container">
                                <div class="row" style="margin: 1em;">
                                    <div class="col-sm-2">
                                        <label for="fileUpload">Upload a New File:</label>
                                    </div>
                                    <div class="col-sm-6">
                                        <input type="file" class="form-control-file" id="fileUpload" name="fileUpload">
                                    </div>
                                    <div class="col-sm-4">
                                        <button type="submit" class="btn btn-dark" id="uploadButton">Upload</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <div th:if="${not #strings.isEmpty(error)}" th:text="${error}"></div>
                        <div class="table-responsive">
                            <table class="table table-striped" id="fileTable">
                                <thead>
                                    <tr>
                                        <th style="width: 20%" scope="col"></th>
                                        <th style="width: 80%" scope="col">File Name</th>
                                    </tr>
                                </thead>
                                <tbody>
                                <tr th:each="file : ${files}">
                                    <td>
                                        <a target="_blank" class="btn btn-success"
                                               th:href="@{/file/{file}(file = ${file})}">View</a>
                                        <a class="btn btn-danger"
                                           th:href="@{/file/delete/{file}(file = ${file})}">Delete</a>
                                    </td>
                                    <td scope="row" th:text="${file}">ExampleFile.txt</td>
                                </tr>
                                </tbody>
                                <tbody>
                                    <tr th:each="file : ${filess}">
                                        <td scope="row" th:text="${file}">File</td>
                                    </tr>
                                </tbody>
                            </table>

                        </div>
                    </div>
                    <div class="tab-pane fade" id="nav-notes" role="tabpanel" aria-labelledby="nav-notes-tab">
                        <button style="margin: 0.25em;" type="button" class="btn btn-info float-right"
                                onclick="showNoteModal()" id="btnAddNewNote">
                            + Add a New Note
                        </button>
                        <div class="table-responsive">
                            <table class="table table-striped" id="userTable">
                                <thead>
                                <tr>
                                    <th style="width: 20%" scope="col"></th>
                                    <th style="width: 20%" scope="col">Title</th>
                                    <th style="width: 60%" scope="col">Description</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr th:each="note : ${notes}">
                                    <td>
                                        <button id="btnEditNote" type="button" class="btn btn-success"
                                                th:data-id="${note.getNoteId()}"
                                                th:data-title="${note.getNoteTitle()}"
                                                th:data-description="${note.getNoteDescription()}"
                                                th:onclick="showNoteModal(this.getAttribute('data-id'), this.getAttribute('data-title'), this.getAttribute('data-description'))">
                                            Edit
                                        </button>
                                        <a id="ancDeleteNote" class="btn btn-danger"
                                           th:href="@{/note/delete-note/{noteId}(noteId = ${note.getNoteId()})}">Delete</a>
                                    </td>
                                    <th id="tableNoteTitle" scope="row" th:text="${note.getNoteTitle()}">Example Note Title</th>
                                    <td id="tableNoteDescription" th:text="${note.getNoteDescription()}">Example Note Description</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="modal fade" id="noteModal" tabindex="-1" role="dialog" aria-labelledby="noteModalLabel"
                             aria-hidden="true">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="noteModalLabel">Note</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <form action="#" method="POST" th:action="@{/note/add-note}" th:object="${newNote}">
                                            <input type="hidden" name="noteId" th:field="*{noteId}" id="note-id">
                                            <div class="form-group">
                                                <label for="note-title" class="col-form-label">Title</label>
                                                <input type="text" name="noteTitle" th:field="*{title}" class="form-control"
                                                       id="note-title" maxlength="20" required>
                                            </div>
                                            <div class="form-group">
                                                <label for="note-description" class="col-form-label">Description</label>
                                                <textarea class="form-control" name="noteDescription" th:field="*{description}"
                                                          id="note-description" rows="5" maxlength="1000" required></textarea>
                                            </div>
                                            <button id="noteSubmit" type="submit" class="d-none"></button>
                                        </form>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                        <button type="button" id="btnSaveChanges" class="btn btn-primary" onclick="$('#noteSubmit').click();">Save
                                            changes
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="nav-credentials" role="tabpanel" aria-labelledby="nav-credentials-tab">
                        <button style="margin: 0.25em;" type="button" class="btn btn-info float-right" onclick="showCredentialModal()">
                            + Add a New Credential
                        </button>
                        <div class="table-responsive">
                            <table class="table table-striped" th:object="${credentials}" id="credentialTable">
                                <thead>
                                    <tr>
                                        <th style="width: 20%" scope="col"></th>
                                        <th style="width: 35%" scope="col">URL</th>
                                        <th style="width: 20%" scope="col">Username</th>
                                        <th style="width: 25%" scope="col">Password</th>
                                    </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>
                                        <button type="button" class="btn btn-success">Edit</button>
                                        <a class="btn btn-danger">Delete</a>
                                    </td>
                                    <th scope="row">Example Credential URL</th>
                                    <td>Example Credential Username</td>
                                    <td>Example Credential Password</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>

                        <div class="modal fade" id="credentialModal" tabindex="-1" role="dialog" aria-labelledby="credentialModalLabel" aria-hidden="true">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="credentialModalLabel">Credential</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <form action="#" method="POST">
                                            <input type="hidden" name="credentialId" id="credential-id">
                                            <div class="form-group">
                                                <label for="credential-url" class="col-form-label">URL</label>
                                                <input type="text" name= "url" class="form-control" id="credential-url" maxlength="100" required>
                                            </div>
                                            <div class="form-group">
                                                <label for="credential-username" class="col-form-label">Username</label>
                                                <input type="text" name= "username" class="form-control" id="credential-username" maxlength="30" required>
                                            </div>
                                            <div class="form-group">
                                                <label for="credential-password" class="col-form-label">Password</label>
                                                <input type="text" name= "password" class="form-control" id="credential-password" maxlength="30" required>
                                            </div>
                                            <button id="credentialSubmit" type="submit" class="d-none"></button>
                                        </form>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                        <button type="button" class="btn btn-primary" onclick="$('#credentialSubmit').click();">Save changes</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript" src="/js/home.js"></script>

        <script th:src="@{/js/jquery-slim.min.js}"></script>
        <script th:src="@{/js/popper.min.js}"></script>
        <script th:src="@{/js/bootstrap.min.js}"></script>
        <!--For opening the note modal-->
        <script type="text/javascript">
            // For opening the note modal
            function showNoteModal(noteId, noteTitle, noteDescription) {
                $('#note-id').val(noteId ? noteId : '');
                $('#note-title').val(noteTitle ? noteTitle : '');
                $('#note-description').val(noteDescription ? noteDescription : '');
                $('#noteModal').modal('show');
            }

            // For opening the credentials modal
            function showCredentialModal(credentialId, url, username, password) {
                $('#credential-id').val(credentialId ? credentialId : '');
                $('#credential-url').val(url ? url : '');
                $('#credential-username').val(username ? username : '');
                $('#credential-password').val(password ? password : '');
                $('#credentialModal').modal('show');
            }
        </script>
    </body>
</html>

和我的result.html模板

<link rel="stylesheet" type="text/css" media="all" th:href="@{/css/bootstrap.min.css}">

    <title>Result</title>
</head>
<body class="p-3 mb-2 bg-light text-black">
    <div class="container justify-content-center w-50 p-3" style="margin-top: 5em;">
        <div th:if="${result == 'success'}" class="alert alert-success fill-parent">
            <h1 class="display-5">Success</h1>
            <span>Your changes were successfully saved. Click <a href="/home" id="aResultSuccess">here</a> to continue.</span>
        </div>
        <div th:if="${result == 'notSaved'}" class="alert alert-danger fill-parent">
            <h1 class="display-5">Error</h1>
            <span>Your changes were not saved. Click <a>here</a> to continue.</span>
        </div>
        <div th:if="${result == 'error'}" class="alert alert-danger fill-parent">
            <h1 class="display-5">Error</h1>
            <span th:text="${message}">Example Error Message</span>
            <span>Click <a href="/home" id="aResultFailure">here</a> to continue.</span>
        </div>
    </div>
</body>
yjghlzjz

yjghlzjz1#

我认为原因是我提供了一个result.html视图,当我从result.html单击返回到home.html时,它只是一个将我带到home.html的元素。当我添加了一个请求到按钮,把我从结果视图带回到主视图,这是负责更新模型。我认为模型's的信息保存在前端的某个地方,但我猜事实并非如此?

相关问题