如何通過單擊用戶名為每個用戶動態創建 ProfileView (Vaadin 23)

Question

首先是技術細節：Java、IntelliJ、Springboot 和 Vaadin23 編碼。

大家好，我目前正在開發一個 Web 應用程序項目，其中有一個電影數據庫和一個用戶社交網絡。 （它就像一個用於評價電影和獲取有關電影等信息的社交網絡）每個用戶都有一個 ID、用戶名、名稱等。當然，我已經實現了 userService、userRepository 等。一切正常並連接到我的數據庫.

到目前為止，我有一個 ProfileView，它顯示了當前使用“authenticateduser”登錄的用戶的個人資料，但我想編輯 ProfileView 以便它也可以顯示每個其他用戶的個人資料。

更具體地說，我想做以下事情：我有一個帶有網格的 SearchView，我可以在其中找到所有用戶。 （已經工作）在此網格中，我可以單擊一個按鈕，該按鈕應將我引導至該特定用戶的個人 ProfileView。

網格正在工作，按鈕已經存在但還沒有功能。

我考慮過使用 URL 模板和 beforeenterevent 來嘗試，為每個用戶的每個 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 參數化視圖/路由。 檢查有關路由和 URL 參數的文檔：

@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傳遞用戶名。

作為一個隨機的旁注：為了安全起見，我會將“公共個人資料”和“我的個人資料”的視圖分開。 如果只是為了允許當前登錄的用戶預覽他們的公開資料。