Передача результатов из функции-обработчика ServerRequest в HTML / Thymeleaf - PullRequest
Новая
       94

Передача результатов из функции-обработчика ServerRequest в HTML / Thymeleaf

0 голосов
/ 04 мая 2020

Я решил заняться Spring-Boot и Webflux, чтобы создать веб-сервис, который был у меня в голове несколько лет. Я абсолютно новичок в этом, но я знаю немного Java, поэтому я играю с некоторыми примерами и столкнулся с некоторыми проблемами, которые я не могу понять.

Сейчас я пытаюсь чтобы отобразить результаты (видео и имя), функция обработчика генерирует на моей странице HTML через Thymeleaf, но она не будет отображаться на странице.

Функция Handeler

(есть отдельная функция маршрутизатора) 

public Mono<ServerResponse> listVideos(ServerRequest request) {

        Flux<Path> files = fileService.getAllFiles();

        Flux<VideoDetails> videoDetailsFlux = files.map(path -> {
            VideoDetails videoDetails = new VideoDetails();
            videoDetails.setName(path.getFileName().toString());
            videoDetails.setLink(request.uri().toString() + '/' + videoDetails.getName());
            return videoDetails;
        }).filter(videoDetails -> !videoDetails.getName().startsWith(".")).doOnError(t -> {
            throw Exceptions.propagate(t);
        });

        return ServerResponse.ok()
                .contentType(MediaType.TEXT_HTML)       //This was APPLICATION_JSON
                .render("videos", videoDetailsFlux);

                /* 
                .cacheControl(CacheControl.noCache())         
                .location(request.uri())   
                .body(videoDetailsFlux, VideoDetails.class);
                */


    }

    @Data
    private static class VideoDetails {
        private String name;
        private String link;
    }

Первоначально возвращено JSON. Я знаю, что должен был бы использовать Javascript, чтобы передать JSON на веб-страницу, но я хотел бы сделать это с тимелистом. Разве js будет лучшим способом сделать это?

видео. html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>Stream Home</title>
</head>
<body>
    <h1 > THIS IS THE VIDEOS PAGE</h1>
</div>
<table id="allMovies" class="table table-striped">
    <thead>
    <tr>
        <th width="70%">Name</th>
        <th>Link</th>
    </tr>
    </thead>
    <tbody>
    <tr class="" data-th-each="video : ${VideoDetailsFlux}">
        <td>${video.name}</td>
        <td>[[${video.link}]]</td>    
    </tr>
    </tbody>
</table>
</div>
</body>
</html>


Я также пытался поместить метод в собственный класс контроллера, например:

VideoController. java

@GetMapping("/videos")
    public Mono<ServerResponse> listVideos(ServerRequest request, final Model model) {

    Flux<Path> files = fileService.getAllFiles();

        Flux<VideoDetails> videoDetailsFlux = files.map(path -> {
            VideoDetails videoDetails = new VideoDetails();
            videoDetails.setName(path.getFileName().toString());
            videoDetails.setLink(request.uri().toString() + '/' + videoDetails.getName());
            return videoDetails;
        }).filter(videoDetails -> !videoDetails.getName().startsWith(".")).doOnError(t -> {
            throw Exceptions.propagate(t);
        });

        IReactiveDataDriverContextVariable reactiveDataDrivenMode =
                new ReactiveDataDriverContextVariable(videoDetailsFlux);

        model.addAttribute("videos", reactiveDataDrivenMode);

        System.out.println("|||||||||||||||LIST_VIDEOS");

        return ServerResponse.ok().render("videos");

    }

 @Data
    private static class VideoDetails {
        private String name;
        private String link;
    }

видео. html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>Stream Home</title>
</head>
<body>
    <h1 > THIS IS THE VIDEOS PAGE</h1>
</div>
<table id="allMovies" class="table table-striped">
    <thead>
    <tr>
        <th width="70%">Name</th>
        <th>Link</th>
    </tr>
    </thead>
    <tbody>
    <tr class="" data-th-each="video : ${videos}">
        <td>${video.name}</td>
        <td>[[${video.link}]]</td>
    </tr>
    </tbody>
</table>
</div>
</body>
</html>

Но я думаю, что не могу смешать ServerRequest и Model, потому что я получаю (type = Internal Server Error, status = 500) NullPointerException. Затем я попробовал его как метод String only, но тогда я не знаю, как получить uri () без «response.uri ()».

Может быть, кто-то может помочь мне лучше понять, что я ' Я делаю неправильно. У меня, вероятно, есть общее неправильное понимание того, как это должно работать.

РЕДАКТИРОВАТЬ:

Я получил это работает так: Но я не уверен насчет самодельного BaseUri вместо «запроса ServerRequest». Холод это вызывает проблемы позже?

VideoController. java

@GetMapping("/videos")
    public String listVideos(final Model model) {

    String baseUrl = "/videos";   

    Flux<Path> files = fileService.getAllFiles();

        Flux<VideoDetails> videoDetailsFlux = files.map(path -> {
            VideoDetails videoDetails = new VideoDetails();
            videoDetails.setName(path.getFileName().toString());
            videoDetails.setLink(baseUrl + '/' + videoDetails.getName());
            return videoDetails;
        }).filter(videoDetails -> !videoDetails.getName().startsWith(".")).doOnError(t -> {
            throw Exceptions.propagate(t);
        });

        IReactiveDataDriverContextVariable reactiveDataDrivenMode =
            new ReactiveDataDriverContextVariable(videoDetailsFlux);

        model.addAttribute("videos", reactiveDataDrivenMode);

        System.out.println("|||||||||||||||LIST_VIDEOS");

        return "videos";

    }

видео. html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>Stream Home</title>
</head>
<body>
    <h1 > THIS IS THE VIDEOS PAGE</h1>
</div>
<table id="allMovies" class="table table-striped">
    <thead>
    <tr>
        <th width="70%">Name</th>
        <th>Link</th>
    </tr>
    </thead>
    <tbody>
    <tr class="" data-th-each="video : ${videos}">
        <td>[[${video.name}]]</td>
        <a th:href=${video.link}>[[${video.link}]]</a>
    </tr>
    </tbody>
</table>
</div>
</body>
</html>
...