如何通过单击每个用户的用户名(Vaadin 23)，为每个用户动态创建一个ProfileView

Question

首先是技术细节:用Java、IntelliJ、Springboot和Vaadin23编写代码。

嘿，伙计们，我现在正在做一个Web应用项目，在那里我有一个电影数据库和一个用户社交网络。每个用户都有一个ID、用户名、名称等。当然，我已经实现了userService、userRepository等功能。所有的东西都在工作，并连接到我的数据库。

到目前为止，我有一个ProfileView，它显示当前使用“身份验证用户”登录的用户的配置文件，但我希望编辑ProfileView，以便它也可以显示其他用户的配置文件。

具体来说，我想做以下工作:我有一个带有网格的SearchView，在那里我可以找到所有的用户。(已经开始工作了)在这个网格中，我可以点击一个按钮，它将引导我找到这个特定用户的单个ProfileView。

网格正常工作，按钮已经存在，但还没有功能。

我想试着用URL模板作为一个事前事件，为每个用户的每个ProfileView创建单独的URL。但是，正式的vaadin页面上的文档对我的具体问题并没有真正的帮助。

有谁知道如何完成这件事，该怎么做？我真的不知道如何处理这个问题，如果这个问题不够具体的话，我很抱歉。我的ProfileView和SearchView的截图附在一起。

这是我的SearchView类的第一部分：

@Route(value = "searchUser", layout = MainLayout.class)
@PageTitle("Search User")
@PermitAll
@Uses(Icon.class)

公共类SearchView扩展VerticalLayout {

Grid<User> grid = new Grid<>(User.class);
TextField filterText = new TextField();

private final UserService userService;
private AuthenticatedUser authenticatedUser;

public SearchView(UserService userService, AuthenticatedUser authenticatedUser) {
    this.userService = userService;
    this.authenticatedUser = authenticatedUser;
    addClassName("Search-View");
    setSizeFull();
    configureGrid();

    add(getToolbar(), grid);
    updateList();
}


private void configureGrid() {
    grid.addClassNames("user-grid");
    grid.setSizeFull();
    grid.setColumns("username", "name");
    grid.addColumn(
            new ComponentRenderer<>(Button::new, (button, UI) -> {
                button.addThemeVariants(ButtonVariant.LUMO_ICON,
                        ButtonVariant.LUMO_ERROR,
                        ButtonVariant.LUMO_TERTIARY);
                button.addClickListener(e -> switchTo());
                button.setIcon(new Icon(VaadinIcon.USER_CARD));
            })).setHeader("View profile");

这是我的ProfileView课程：

@Route(value = "ProfileView", layout = MainLayout.class)
@PageTitle("Profile Page")
@PermitAll
@Uses(Icon.class)

公共类ProfileView扩展VerticalLayout {

private final AuthenticatedUser authenticatedUser;
private UserService userService;

Grid<User> grid = new Grid<>(User.class);

private TextField firstName = new TextField("First name");
private TextField lastName = new TextField("Last name");
private EmailField email = new EmailField("Email address");

private Button watchedMovies = new Button("See watched Movies");
private Button watchList = new Button("See Watchlist");
private Button seeFriends = new Button("See Friends");
private Button privacy = new Button("Privacy Settings");


private Binder<User> binder = new Binder<>(User.class);

public ProfileView(UserService userService, AuthenticatedUser authenticatedUser) {
    this.userService = userService;
    this.authenticatedUser = authenticatedUser;



    addClassName("profile-view");
    add(createTitle());
    add(createFormLayout());
    add(createButtonLayout());

    binder.bindInstanceFields(this);
    clearForm();

   firstName.setValue(authenticatedUser.get().get().getFirstname());
   lastName.setValue(authenticatedUser.get().get().getLastname());
   email.setValue(authenticatedUser.get().get().getEmail());

}

private void clearForm() {
    binder.setBean(new User());
}

private Component createTitle() {
    return new H3("Personal information of " + authenticatedUser.get().get().getFirstname());
}

private Component createFormLayout() {
    FormLayout formLayout = new FormLayout();
    formLayout.add(firstName, lastName, email);
    return formLayout;
}

private Component createButtonLayout() {
    HorizontalLayout buttonLayout = new HorizontalLayout();
    buttonLayout.addClassName("button-layout");
    watchedMovies.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
    watchList.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
    seeFriends.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
    privacy.addThemeVariants(ButtonVariant.LUMO_SUCCESS);

    //TODO switch MovieListView to WatchList and switch to personalized page
    watchedMovies.addClickListener(e -> UI.getCurrent().navigate(WatchedMoviesView.class));
    watchList.addClickListener((e -> UI.getCurrent().navigate(Watchlist.class)));
    seeFriends.addClickListener(e -> UI.getCurrent().navigate(FriendlistView.class));
    privacy.addClickListener(e-> UI.getCurrent().navigate(PrivacyView.class));

    buttonLayout.add(watchedMovies);
    buttonLayout.add(watchList);
    buttonLayout.add(seeFriends);
    buttonLayout.add(privacy);
    return buttonLayout;
}

}

Answer 1

您可以通过URL将视图/路由参数化。检查关于Routing and URL parameters的文档

@Route(value = "user/profile")
public class PublicUserProfileView extends Div implements HasUrlParameter<String> {
    @Override
    public void setParameter(BeforeEvent event, String username) {
        setText(String.format("User profile for %s!", username));
    }
}

然后，从网格中可以使用UI.navigate传递用户名。

作为一个随机的边注:为了安全起见，我会将“公共配置文件”和“我的配置文件”的视图分开。如果只允许当前登录用户预览其公共配置文件的能力。