Хостинг одностраничного приложения с весенней загрузкой - PullRequest
Новая
       30

Хостинг одностраничного приложения с весенней загрузкой

0 голосов
/ 25 января 2019

Поэтому я пытаюсь разместить одностраничное приложение вместе с обычным REST API с пружиной.

Это означает, что все запросы, поступающие на обычные конечные точки /api/, должны обрабатываться соответствующим контроллером, а все остальные запросы должны направляться ресурсам в папке /static/built

Я получил это для работы, перехватывая все NoHandlerFoundExceptions и перенаправляя либо в файл js, либо в файл html. А затем использовал WebMvcConfigurer для сопоставления статического содержимого.

Но все это кажется мне хаком, так есть ли менее хакерский способ сделать это?

Ответы [ 3 ]

0 голосов
/ 25 января 2019

Самый простой способ заставить мои SPA работать с бэкэнд-API Spring - это иметь два разных контроллера: один для корневой индексной страницы SPA, а другой контроллер используется для управления различными конечными точками API RESTful:

Вот мои два контроллера:

MainController.java 

@Controller
public class MainController {

    @RequestMapping(value = "/")
    public String index() {
        return "index";
    }
}

MonitoringController.java 

@RestController
@RequestMapping(value = "api")
public class MonitoringEndpoints {

    @GetMapping(path = "/health", produces = "application/hal+json")
    public ResponseEntity<?> checkHealth() throws Exception {
        HealthBean healthBean = new HealthBean();
        healthBean.setStatus("UP");

        return ResponseEntity.ok(healthBean);
    }
}

Обратите внимание, как контроллер конечной точки API использует аннотацию @RestConroller, в то время как основной контроллер использует аннотацию @Conroller. Это из-за того, как Thymeleaf использует свой ViewResolver. Смотри:

Spring Boot MVC, не возвращая мой взгляд

Теперь перейдите и разместите свою страницу index.html по адресу src / main / resources / templates / index.html, потому что Spring по умолчанию ищет ваши html-страницы в этом месте.

Мои страницы index.html выглядят так: 

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head lang="en">
        <meta charset="UTF-8"/>
        <title>EDP Monitoring Tool</title>
    </head>
    <body>
        <!-- Entry point to our ReactJS single page web application -->
        <div id="root"></div>

        <script type="text/javascript" src="built/bundle.js"></script>
    </body>
</html>

Не уверен, как вы подключаете свой интерфейс, будь то приложение ReactJS или что-то в этом роде, но я верю, что эта информация будет вам полезна. Дайте мне знать, если я смогу ответить на дополнительные вопросы для вас.

Кроме того, если вы используете Webpack, вы можете настроить точку входа ваших файлов JS через файл webpack.config.js под ключом ввода, например, так: 

entry: ['./src/main/js/index.js']
0 голосов
/ 08 мая 2019

Удалось запустить приложение React + ReactRouter, добавив следующее отображение: 

@Controller
public class RedirectController {

  @GetMapping(value = {"/{regex:\\w+}", "/**/{regex:\\w+}"})
  public String forward404() {
    return "forward:/";
  }

}

Это было вдохновлено https://stackoverflow.com/a/42998817/991894

0 голосов
/ 25 января 2019

Я думаю, что вы ищете термин URL Rewrite.

например. https://getpostcookie.com/blog/url-rewriting-for-beginners/

...