Весенняя загрузка Отдых тимилеф JavaScript не возвращает HTML - PullRequest
0 голосов
/ 22 марта 2019

HI Я пробую пример, приведенный в spring.io Руководство по началу работы .

это не показывает никакой ошибки, но я не получаю представление HTML когда я открываю ссылку http://localhost:8070/testJson в моем браузере, все, что он показывает, это вывод в формате JSON, подобный этому

{"id":1,"content":"Hello World !"}

Но я хочу, чтобы он отображал правильное представление HTML, и я не могу использовать @Controller здесь, я хочу показать HTML, используя jquascript Jquery. Как я могу это сделать?

вот мой метод управления

@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);
});
});

мое приложение. Свойства здесь

server.port=8070

Местоположение my.js находится в каталоге src / main / resources / static / my.js

1 Ответ

0 голосов
/ 22 марта 2019

Если вы хотите добавить интерфейс, который может взаимодействовать с вашим 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);
});
});

В вашем контроллере отдыха, путь /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.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...