#javascript #jquery #rest #spring-boot #thymeleaf
#javascript #jquery #rest #spring-boot #thymeleaf
Вопрос:
ПРИВЕТ, я пытаюсь пример, приведенный в spring.io руководство по началу работы.
он не показывает никакой ошибки, но я не получаю HTML-представление при открытии ссылкиhttp://localhost:8070/testJson в моем браузере все, что он показывает, это вывод JSON, подобный этому
{"id":1,"content":"Hello World !"}
Но я хочу, чтобы он отображал правильный HTML-вид, и я не могу использовать @Controller здесь, я хочу показать HTML с помощью Jquery javascript, как я могу это сделать?
вот мой метод контроллера
@RestController
public class MyRestController {
private final Long counter = 1l;
@GetMapping("/testJson")
public TestJsonDto getTestJson(){
TestJsonDto testJsonDto=new TestJsonDto(counter,
"Hello World !");
return testJsonDto;
}
}
Это мой класс данных
public class TestJsonDto {
private Long id;
private String content;
public TestJsonDto(Long id, String content) {
this.id = id;
this.content = content;
}
public TestJsonDto() {
}
/*
GETTERS AND SETTERS WILL GO HERE
*/
И ниже приведен мой класс приложения
@SpringBootApplication
@EnableJpaRepositories
public class MyjarApplication {
public static void main(String[] args) {
SpringApplication.run(MyjarApplication .class, args);
}
}
Мой Html-файл
<!DOCTYPE html>
<html>
<head>
<title>Hello jQuery</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="/my.js"></script>
</head>
<body>
<div>
<p class="greeting-id">The ID is </p>
<p class="greeting-content">The content is </p>
</div>
</body>
</html>
и, наконец, это мой javascript
$(document).ready(function() {
$.ajax({
url: "http://localhost:8070/testJson"
}).then(function(testJsonDto) {
$('.greeting-id').append(testJsonDto.id);
$('.greeting-content').append(testJsonDto.content);
});
});
мое application.properties находится здесь
server.port=8070
Расположение my.js находится под src/main/resources/static/my.js
Комментарии:
1. Что вы видите при доступе к localhost: 8070 ?
2. localhost: 8070 — это другой контроллер, там я использую аннотацию @Controller и представляю модель и представление с помощью кнопки, связанной с show my / testJson, эта страница отображается правильно
3. Я также использую PdfViewResolver и CsvViewResolver в этом проекте, может ли это быть проблемой? но все мои остальные HTML-страницы отображаются корректно через @Controller и @GetMapping , которые возвращают строковое имя представления
4. Не уверен, понимаю ли я ожидаемое поведение, которое вы ищете. Похоже, вы хотите, чтобы ваш HTML отображался при доступе к » localhost: 8070 / testJson «, но это же местоположение уже используется для возврата объекта json. У вас должен быть один путь для HTML, другой для вашей конечной точки
5. Спасибо за комментарий, на самом деле это первый раз, когда я пытаюсь это сделать, можете ли вы поделиться какой-либо ссылкой или чем-то еще, чтобы начать работу с этим?
Ответ №1:
Если вы хотите добавить интерфейс, который может взаимодействовать с вашим API, вы можете структурировать свое приложение следующим образом:
Этот код настраивает ваше приложение, включая статические ресурсы, например, ваш resource/static/index.html будет отображаться для корневого пути localhost:8090 , если вы не подключаете этот путь к какому-либо контроллеру (убедитесь, что root не является неявно / явно пользователем в любом другом @Controller или аннотации).
@SpringBootApplication
@EnableJpaRepositories
public class MyjarApplication {
public static void main(String[] args) {
SpringApplication.run(MyjarApplication .class, args);
}
}
Итак, простой способ отобразить HMTL, который вы хотите, — поместить этот HTML в resource/static/index.html :
<!DOCTYPE html>
<html>
<head>
<title>Hello jQuery</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="/my.js"></script>
</head>
<body>
<div>
<p class="greeting-id">The ID is </p>
<p class="greeting-content">The content is </p>
</div>
</body>
</html>
и js следует поместить в resource/static/my.js :
$(document).ready(function() {
$.ajax({
url: "http://localhost:8070/testJson"
}).then(function(testJsonDto) {
$('.greeting-id').append(testJsonDto.id);
$('.greeting-content').append(testJsonDto.content);
});
});
В вашем контроллере rest path /testJson будет присутствовать getTestJson() :
@RestController
public class MyRestController {
private final Long counter = 1l;
@GetMapping("/testJson")
public TestJsonDto getTestJson(){
TestJsonDto testJsonDto=new TestJsonDto(counter,
"Hello World !");
return testJsonDto;
}
}
Итак, вы получаете доступ к localhost: 8090, чтобы получить интерфейс, и через javascript вы получаете доступ к localhost: 8090 / testJson, чтобы получить свой API.
Комментарии:
1. Большое вам спасибо за подробный ответ, внесу изменения завтра, к сожалению, мой отзыв о вашем ответе здесь не показан из-за моей низкой репутации
2. Нет проблем, дайте мне знать, если у вас возникнут какие-либо проблемы. Главное при запуске работы с rest и обычными контроллерами — понять, какой путь обслуживается каким кодом в соответствии с конфигурацией. Это меняется по мере добавления функциональности.
3. Но я не хочу, чтобы он отображался в root, мой RootController помечен @Controller и уже возвращает HTML-страницу модели и просмотра. и все мои HTML-файлы находятся в resources / template / *.html, тогда как мой файл javascript находится в resources/static/my.js . и я хочу, чтобы /testJson возвращался в /testJson, а не в root. P.S. Здесь я использую thymeleaf
4. Еще раз спасибо тебе, Кристиан Колорадо. Вы отличная помощь 🙂