显示为空的Vaadin LoginForm组件_Vaadin_Vaadin Flow_Vaadin14

显示为空的Vaadin LoginForm组件

vaadin

显示为空的Vaadin LoginForm组件,vaadin,vaadin-flow,vaadin14,Vaadin,Vaadin Flow,Vaadin14,我有一些代码可以将Vaadin LoginForm组件添加到我的页面中 LoginForm组件=新的LoginForm（）； component.addLoginListener（e->{ 布尔值isAuthenticated=myAuthMethod（）；如果（未经验证）{ 系统输出打印（“测试”）； }否则{ 组件设置错误（true）； } }); 添加（组件）；但它只是显示一个空白页。我的dom编辑器在Chrome中显示一个空标记我正在运行瓦丁14.07 你知道为什么会这样吗？我

我有一些代码可以将Vaadin LoginForm组件添加到我的页面中

LoginForm组件=新的LoginForm（）；
component.addLoginListener（e->{
布尔值isAuthenticated=myAuthMethod（）；
如果（未经验证）{
系统输出打印（“测试”）；
}否则{
组件设置错误（true）；
}
});
添加（组件）；

但它只是显示一个空白页。我的dom编辑器在Chrome中显示一个空标记

我正在运行瓦丁14.07

你知道为什么会这样吗？

我也有这个问题。这可能是另一个原因。但是，我可以通过运行一个干净的安装Maven来解决这个问题。

我也有这个问题。这可能是另一个原因。但是，我可以通过运行清理和安装Maven来解决此问题。

首次添加组件时，内部前端依赖项列表可能尚未注册该组件，因此在启动时不会从npm加载相关的客户端文件

在这种情况下，需要一个简单的maven安装来更新前端依赖项列表。启动后，服务器应自动加载相应的文件，从而正确显示组件。

首次添加组件时，内部前端依赖项列表可能尚未注册该组件，因此不会在启动时从npm加载相关的客户端文件

在这种情况下，需要一个简单的maven安装来更新前端依赖项列表。启动后，服务器应自动加载相应的文件，从而正确显示组件。

登录表单对我有效。您的问题可能超出了此处显示的代码范围。我们需要知道您如何实例化和显示

LoginForm

示例应用程序下面是一个使用Vaadin 14.1.2的示例应用程序。我使用了由。我没有动POM文件。我使用捆绑的Jetty服务器运行该应用程序，并在macOS上使用Google Chrome 79.0.3945.79版（官方版本）（64位）

我创建了一个简单的

User

类

package work.basil.example;

import java.util.Objects;
import java.util.UUID;

public class User
{
    private UUID id;
    private String username;

    public User ( UUID id , String username )
    {
        this.id = Objects.requireNonNull( id );
        this.username = Objects.requireNonNull( username );
    }

    // ------------|  Object  |---------------------------------
    @Override
    public boolean equals ( Object o )
    {
        if ( this == o ) return true;
        if ( o == null || getClass() != o.getClass() ) return false;
        User user = ( User ) o;
        return id.equals( user.id );
    }

    @Override
    public int hashCode ( )
    {
        return Objects.hash( id );
    }

    @Override
    public String toString ( )
    {
        return "User{ " +
                "id=" + id +
                " | username='" + username + '\'' +
                " }";
    }
}

和一个

验证器

类。对于这个简单的演示案例，注释掉或在始终传递用户或始终拒绝用户的行中

package work.basil.example;

import java.util.Optional;
import java.util.UUID;

public class Authenticator
{
    Optional < User > authenticate ( String username , String password )
    {
        User user = new User( UUID.fromString( "76317e14-20a5-11ea-978f-2e728ce88125" ) , username );
        return Optional.of( user );
        //        return Optional.empty();
    }
}

将其与此

MainView

布局结合在一起

package work.basil.example;

import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.login.AbstractLogin;
import com.vaadin.flow.component.login.LoginForm;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.server.PWA;
import com.vaadin.flow.server.VaadinSession;

import java.util.Objects;
import java.util.Optional;

/**
 * The main view contains a button and a click listener.
 */
@Route ( "" )
@PWA ( name = "Project Base for Vaadin", shortName = "Project Base" )
public class MainView extends VerticalLayout
{

    public MainView ( )
    {
        this.display();
    }

    private void display ( )
    {
        if ( Objects.isNull( VaadinSession.getCurrent().getAttribute( User.class ) ) )
        {
            this.removeAll();
            this.add( this.makeLoginForm() );
        } else
        { // Else we have a User, so must be authenticated.
            this.removeAll();
            this.add( new ContentView() );
        }
    }

    private LoginForm makeLoginForm ( )
    {
        Authenticator authenticator = new Authenticator();
        LoginForm component = new LoginForm();
        component.addLoginListener( ( AbstractLogin.LoginEvent loginEvent ) -> {
            Optional < User > user = authenticator.authenticate( loginEvent.getUsername() , loginEvent.getPassword() );
            if ( user.isPresent() )
            {
                VaadinSession.getCurrent().setAttribute( User.class , user.get() );
                this.display();
            } else
            {
                component.setError( true );
            }
        } );
        return component;
    }
}

package work.basil.example；
导入com.vaadin.flow.component.button.button；
导入com.vaadin.flow.component.login.AbstractLogin；
导入com.vaadin.flow.component.login.LoginForm；
导入com.vaadin.flow.component.notification.notification；
导入com.vaadin.flow.component.orderedlayout.VerticalLayout；
导入com.vaadin.flow.router.Route；
导入com.vaadin.flow.server.PWA；
导入com.vaadin.flow.server.VaadinSession；
导入java.util.Objects；
导入java.util.Optional；
/**
*主视图包含一个按钮和一个单击侦听器。
*/
@路线（“”）
@PWA（name=“Vaadin的项目基础”，shortName=“项目基础”）
公共类主视图扩展了垂直布局
{
公共主视图（）
{
这个.display（）；
}
专用空白显示（）
{
if（Objects.isNull（VaadinSession.getCurrent（）.getAttribute（User.class）））
{
这个。removeAll（）；
this.add（this.makeLoginForm（））；
}否则
{//否则我们有一个用户，因此必须进行身份验证。
这个。removeAll（）；
添加（新ContentView（））；
}
}
私有LoginForm makeLoginForm（）
{
验证器验证器=新验证器（）；
LoginForm组件=新的LoginForm（）；
component.addLoginListener（（AbstractLogin.LoginEvent LoginEvent）->{
可选User=authenticator.authenticate（loginEvent.getUsername（），loginEvent.getPassword（））；
if（user.isPresent（））
{
VaadinSession.getCurrent（）.setAttribute（User.class，User.get（））；
这个.display（）；
}否则
{
组件设置错误（true）；
}
} );
返回组件；
}
}

对于“注销”功能，您的代码只需从会话中删除

User

对象，然后再次调用

MainView:：display

。

LoginForm

正在为我工作。您的问题可能超出了此处显示的代码范围。我们需要知道您如何实例化和显示

LoginForm

我创建了一个简单的

User

类

package work.basil.example;

import java.util.Objects;
import java.util.UUID;

public class User
{
    private UUID id;
    private String username;

    public User ( UUID id , String username )
    {
        this.id = Objects.requireNonNull( id );
        this.username = Objects.requireNonNull( username );
    }

    // ------------|  Object  |---------------------------------
    @Override
    public boolean equals ( Object o )
    {
        if ( this == o ) return true;
        if ( o == null || getClass() != o.getClass() ) return false;
        User user = ( User ) o;
        return id.equals( user.id );
    }

    @Override
    public int hashCode ( )
    {
        return Objects.hash( id );
    }

    @Override
    public String toString ( )
    {
        return "User{ " +
                "id=" + id +
                " | username='" + username + '\'' +
                " }";
    }
}

和一个

验证器

类。对于这个简单的演示案例，注释掉或在始终传递用户或始终拒绝用户的行中

package work.basil.example;

import java.util.Optional;
import java.util.UUID;

public class Authenticator
{
    Optional < User > authenticate ( String username , String password )
    {
        User user = new User( UUID.fromString( "76317e14-20a5-11ea-978f-2e728ce88125" ) , username );
        return Optional.of( user );
        //        return Optional.empty();
    }
}

将其与此

MainView

布局结合在一起

package work.basil.example;

import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.login.AbstractLogin;
import com.vaadin.flow.component.login.LoginForm;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.server.PWA;
import com.vaadin.flow.server.VaadinSession;

import java.util.Objects;
import java.util.Optional;

/**
 * The main view contains a button and a click listener.
 */
@Route ( "" )
@PWA ( name = "Project Base for Vaadin", shortName = "Project Base" )
public class MainView extends VerticalLayout
{

    public MainView ( )
    {
        this.display();
    }

    private void display ( )
    {
        if ( Objects.isNull( VaadinSession.getCurrent().getAttribute( User.class ) ) )
        {
            this.removeAll();
            this.add( this.makeLoginForm() );
        } else
        { // Else we have a User, so must be authenticated.
            this.removeAll();
            this.add( new ContentView() );
        }
    }

    private LoginForm makeLoginForm ( )
    {
        Authenticator authenticator = new Authenticator();
        LoginForm component = new LoginForm();
        component.addLoginListener( ( AbstractLogin.LoginEvent loginEvent ) -> {
            Optional < User > user = authenticator.authenticate( loginEvent.getUsername() , loginEvent.getPassword() );
            if ( user.isPresent() )
            {
                VaadinSession.getCurrent().setAttribute( User.class , user.get() );
                this.display();
            } else
            {
                component.setError( true );
            }
        } );
        return component;
    }
}

package work.basil.example；
导入com.vaadin.flow.component.button.button；
导入com.vaadin.flow.component.login.AbstractLogin；
导入com.vaadin.flow.component.login.LoginForm；
导入com.vaadin.flow.component.notification.notification；
导入com.vaadin.flow.component.orderedlayout.VerticalLayout；
导入com.vaadin.flow.router.Route；
导入com.vaadin.flow.server.PWA；
导入com.vaadin.flow.server.VaadinSession；
导入java.util.Objects；
导入java.util.Optional；
/**
*主视图包含一个按钮和一个单击侦听器。
*/
@路线（“”）
@PWA（name=“Vaadin的项目基础”，shortName=“项目基础”）
公共类主视图扩展了垂直布局
{
公共主视图（）
{
这个.display（）；
}
专用空白显示（）
{
if（Objects.isNull（VaadinSession.getCurrent（）.getAttribute（User.class）））