Vaadin 14 Springboot javascript does not work

Question

我正在尝试开发我的第一个vadin 14应用程序，我也使用Spring启动框架。我已经创建了一个javascript文件，我把它放在文件夹前端/src与团队。js的名字，我试图导入它与@JsModule("src/teams.js")。我的根视图类看起来像这样:

@Route("")
@PageTitle("Teams organization store init")
@Slf4j
@JsModule("src/teams.js")
@Tag("TeamsEntry")
public class TeamsEntryView extends VerticalLayout implements BeforeEnterObserver {
public TeamsEntryView() {
initTeams();
}
private void initTeams() {
var ui = UI.getCurrent();
var page = ui.getPage();
log.info("Teams initialization...");
page.executeJs(getTeamsConfig()).toCompletableFuture().whenComplete(((jsonValue, throwable) ->
log.info("Teams initialization completed: {} with throwable {}", jsonValue.toJson(), throwable.getMessage())
));
}
private String getTeamsConfig() {
return """
console.log('ss');
window.initTeams();
console.log('xx');
return true;
""";
}
...

我的js文件是这样的:

window = {
initTeams: function () {
console.log('initTeams...');
}
}

在本例中，我看到"ss"在浏览器的控制台中，但仅此而已。如果我去掉window.initTeams();线，我得到"one_answers";xx"也如果我在js文件中声明了一个简单的函数并且调用它时没有"窗口";第一类得到了类似的结果。如果我使用@Javascript或page.addJavascript("src/teams.js")，当页面加载时我得到这个错误:">意想不到的character"如果我尝试调用join()或get()在可完成的未来浏览器冻结。如果我使用@Javascript("frontend://src/teams.js")，我会得到一些CORS错误，比如如果它试图从"前端"下载一些东西。主人我试过把@JsModule放在一个组件上，而不是我的视图。这行不通。我试过把我的js文件放到根目录下，放到资源文件夹下。

我找不到任何其他的解决方案来导入和使用我的js文件到vaadin14与春季启动。此外，我不确定为什么浏览器冻结，如果我调用"join()"在可完成的未来，它的结果sentToBrowser返回false，即使我看到控制台日志在浏览器的日志…

有人能告诉我我应该如何做javascript导入，为什么我目前的代码不工作，为什么"join()"请冻结浏览器?

提前感谢!

@Edit

我也尝试过这个注释@JavaScript("./src/teams.js")和这样的js:

function initTeams () {  
console.log('initTeams...');  
console.log("Teams initialized!")  
}

@Edit

好了，我终于让它工作了。js文件必须在root/src/main/webapp/src文件夹下。既不是@JavaScript也不是@JsModule为我工作，所以我不得不导入我的js文件为:

var ui = UI.getCurrent();
var page = ui.getPage();
page.addJavaScript("src/teams.js");

然后我可以叫它像window.initTeams()或像initTeams()，两者都很好。尽管下面的可完成的future仍然不会执行，并且isSentToBrowser()总是返回false。

page.executeJs(getTeamsConfig()).toCompletableFuture().whenComplete(((jsonValue, throwable) ->
log.info("Teams initialization completed: {} with throwable {}", jsonValue.toJson(), throwable.getMessage())
));

我必须提到如果我以'开始路径。如page.addJavaScript(".src/teams.js");，则找不到文件。

有谁能回答，为什么完美的未来永远不会执行?

Answer 1

问题是下面的代码重新定义了window对象:

window = {
initTeams: function () {
console.log('initTeams...');
}
}

你是想给window对象添加一个函数吗?像这样:

window.initTeams = function () {
console.log('initTeams...');
};

如果你想保持代码在视觉上与你的相似:

window = {
...window,
{
initTeams: function() {
console.log('initTeams...');
}
}
}

其他选项:

window['initTeams'] = function() {...}
Object.assign(window, {initTeams: function() {...}})
Object.defineProperty(window, 'initTeams', {value: function() {console.log('foo')}});

另外，为了获得更多的知识，不能调用@Edit部分中提到的代码。调用initTeams()相当于调用window.initTeams()。该函数必须存在于window对象中。这就是为什么，例如，您会看到一些自定义元素，如customElements.define(...)和window.customElements.define(...)。