使用Java EE / Wildfly的单页面应用程序：服务器端配置 [英] Single page application with Java EE/Wildfly: server-side configuration
问题描述
我想在客户端编写一个带AngularJS的SPA，在服务器端编写Java EE。如果我理解正确，前端的想法是创建一个默认页面（让我们称之为 index.html ）并实现路由以交换此默认页面的部分内容。因此，对于每个请求，都会加载默认页面，路由逻辑会根据上下文路径替换其部分：
I want to write an SPA with AngularJS on client side and Java EE on server side. If I understand it correctly, the idea for the frontend is to create a default page (let's call it index.html) and implement routing to exchange parts of this default page. So with every request the default page is loaded and the routing logic replaces its parts depending on context path:
<!-- index.html -->
<html>
<body>
<!-- this block is replaced depending on context -->
<div ng-view></div>
</body>
</html>
<!-- page one -->
<div>
<h1>Page One</h1>
<a href="/specific">Some specific stuff</a>
</div>
<!-- page two -->
<div>
<h1>Page Two</h1>
</div>
现在，路由逻辑可能是这样的：
Now, the routing logic could be something like this:
angular.module('myApp', [])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', {templateUrl: 'pages/pageOne.html'})
.when('/someSpecific', {templateUrl: 'pageTwo.html'})
.otherwise({redirectTo: '/'});
}
]);
问题是，如何将其与Java EE和Wildfly服务器实例相结合？如果我声明 index.html 作为欢迎页面而不执行任何其他操作，则直接调用如 http://website.org/someSpecificContext 将失败，因为没有页面映射到路径（并且不应该），因此不会加载页面和角度代码。如果我在servlet过滤器中从每个可能的子路径重定向到index.html，那么路径信息将丢失，因此每个调用都将在索引页面中结束。也许这是一个愚蠢的新手问题，但我真的被困在这里并且会感激任何帮助。
The question is, how do I couple this with Java EE and a Wildfly server instance? If I declare index.html as the welcome page and do nothing else, the direct calls like http://website.org/someSpecificContext will fail because no page is mapped to the path (and shouldn't be), so no page and no angular code will be loaded. If I make a redirection from every possible subpath to index.html in a servlet filter, then the path information will be lost, so every call will end in the index page. Maybe it's a silly newbie question, but I'm really stuck here and would appreciate any help.
推荐答案
我个人使用下载重写处理程序。遗憾的是，没有关于此功能的大量文档。您可以在此处以及这里。你必须基本上重写那些只有Angular知道的html 5 url，但是当Angular要求后端数据时你必须用你的服务器端REST组件（我想你正在使用REST）做出响应。我的REST资源位于 / api 根路径下。这是 undertow-handlers.conf 文件放在 WEB-INF 文件夹中的示例：
I personally use undertow rewrite handler for this. There is unfortunately not a lot of documentation about this feature. You can find info here and also here. You have to basically rewrite those html 5 urls that only Angular knows about, however you have to respond with your server side REST component (I suppose you're using REST) when Angular asks for backend data. My REST resources are under the /api root-path. This is an example of the undertow-handlers.conf file to be placed in the WEB-INF folder:
regex['(.*/order/?.*?$)'] and not regex['(.*/api.*)'] -> rewrite['/index.html']
regex['(.*/billing/?.*?$)'] and not regex['(.*/api.*)'] -> rewrite['/index.html']
这篇关于使用Java EE / Wildfly的单页面应用程序：服务器端配置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
