Невозможно отобразить необработанное содержимое файла с помощью Spring Boot REST API, Thymeleaf и JS fetch - PullRequest
Новая
       72

Невозможно отобразить необработанное содержимое файла с помощью Spring Boot REST API, Thymeleaf и JS fetch

0 голосов
/ 07 октября 2019

У меня есть приложение Spring Boot, которое при загрузке домашней страницы (http://localhost:8080) отображает все имена файлов в определенном каталоге в браузере успешно без каких-либо проблем.

Теперь я хотел бы сделатьэти имена файлов представляют собой гиперссылки, при нажатии на которые в браузере будет отображаться содержимое этого файла.

При этом я получаю ошибку JS. Запрос даже не доходит до сервера. Что-то не так с тем, как я вызываю функцию и передаю в ней параметр имени файла?

Ошибка: 

VM164:1 Uncaught ReferenceError: database.properties is not defined
at <anonymous>:1:17

HomeController.java 

@Controller
public class HomeController {
    @GetMapping({"", "/", "/home"})
    public String index(Model model) {
        return "home";
    }
}

DirListController.java 

@RestController
public class DirListController {

    @Autowired
    private SshConnService sshConnService;

    @GetMapping("/api/dir")
    public List<String> showAllDirs(Model model) throws Exception {
        return sshConnService.listAllFiles(); //returns [database.properties, messaging.properties, ....]
    }

}

RawFileContentController.java 

@RestController
public class RawFileContentController {

    @Autowired
    private SshConnService sshConnService;

    @GetMapping("/api/rawFileContent")
    public String showRawFileContent(@RequestParam(value = "filename") String filename) throws Exception {
        return sshConnService.catFile(filename);
    }

}

home.html 

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>Directory List</title>
    </head>
    <body>
        <h1>Directory List</h1>
        <table id="categoryTable" class="table" style="margin-top:10px;">
            <thead>
                <tr>
                    <th>Name</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
        <h2>File Contents</h2>
        <table id="contentTable" class="table" style="margin-top:10px;">
            <thead>
                <tr>
                    <th>File Content</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
        <script src="/webjars/jquery/3.0.0/jquery.min.js"></script>
        <script src="/js/main.js"></script>
    </body>
</html>

js / main.js 

$(document).ready(function () {
    viewAllDirs();
});


/*** Show all files within a directory **/
async function viewAllDirs() {
    $('#categoryTable tbody').empty();
    const dirResponse = await dirService.findAll();
    const dirJson = dirResponse.json();
    dirJson.then(filename => {
        filename.forEach(filename => {
            console.log(filename);
            //make the filename clickable and display it's content onclick
            let categoryRow = `$(<tr><td><a href="javascript:viewFileContent(${filename})">${filename}</a></td></tr>)`;
            $('#categoryTable tbody').append(categoryRow);
        });
    });
}

const dirService = {
    findAll: async () => {
        return await fetch('/api/dir');
    }
};



/*** View File Contents **/
async function viewFileContent(filename) {
    $('#contentTable tbody').empty();
    const rawFileContentResponse = await rawFileContentService.findByFilename(filename);
    const rawFileContentResponseJson = rawFileContentResponse.json();
    console.log(rawFileContentResponseJson);
    let contentRow = `$(<tr><td>${rawFileContentResponseJson}</td></tr>)`;
    $('#contentTable tbody').append(contentRow);
}

const rawFileContentService = {
    findByFilename: async (filename) => {
        return await fetch('/api/rawFileContent?filename=' + filename);
    }
};

pom.xml 

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>bootstrap</artifactId>
    <version>4.1.3</version>
</dependency>
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>font-awesome</artifactId>
    <version>5.8.2</version>
</dependency>
...