为啥我的 vaadin 按钮显示不正确？

Posted 2023-02-27

【中文标题】为啥我的 vaadin 按钮显示不正确？

【英文标题】：Why is my vaadin button not displaying correctly?为什么我的 vaadin 按钮显示不正确？

【发布时间】：2019-08-18 22:30:33

【问题描述】：

几乎是标题，我到处寻找答案，但我要么在设置中错过了一些东西，要么在 spring 中错过了一些东西，要么我无法阅读。

我认为我的页面应该是一个漂亮的蓝色按钮或其他东西（我知道我删除了网格），我关注了https://www.baeldung.com/spring-boot-vaadin，但我得到了this，这是我的 build.gradle 和相关代码：

build.gradle：

plugins 
    id 'org.jetbrains.kotlin.plugin.jpa' version '1.3.21'
    id 'org.springframework.boot' version '2.1.3.RELEASE'
    id 'org.jetbrains.kotlin.jvm' version '1.3.21'
    id 'org.jetbrains.kotlin.plugin.spring' version '1.3.21'
    id 'com.devsoap.vaadin-flow' version '1.0'
    //id 'org.gretty' version '2.3.1'
    id 'java'
    // solves the problem with long classpath using JAR instead of classpath on command line
    id "ua.eshepelyuk.ManifestClasspath" version "1.0.0"


vaadin 
    version '12.0.0'


apply plugin: 'io.spring.dependency-management'

version = '0.0.1-SNAPSHOT'
sourceCompatibility = '1.8'

configurations 
    compileOnly 
        extendsFrom annotationProcessor
    


springBoot 
    mainClassName = "com.cpsc471.TheatreManagmentApplicationKt"


repositories 
    mavenCentral()
    maven  url "https://maven.vaadin.com/vaadin-addons" 
    vaadin.repositories()
    // Add the pre-release repository
    vaadin.prereleases()
    // Add the snapshot repository
    vaadin.snapshots()
    // Add the addons repository
    vaadin.addons()


ext 
    set('vaadinVersion', '13.0.1')


noArg
    annotation("MappedSuperclass")


dependencies  
    implementation 'org.springframework.boot:spring-boot-starter-cache'
    implementation 'org.springframework.boot:spring-boot-starter-data-rest'
    implementation 'org.springframework.boot:spring-boot-starter-jdbc'
    implementation 'org.springframework.boot:spring-boot-starter-mail'
    implementation 'org.springframework.boot:spring-boot-starter-security'
    implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
    implementation 'org.springframework.boot:spring-boot-starter-validation'
    implementation 'org.springframework.boot:spring-boot-starter-web'
    implementation 'org.springframework.boot:spring-boot-starter-tomcat'
    implementation "org.springframework.boot:spring-boot-starter-data-jpa"
    implementation 'com.fasterxml.jackson.module:jackson-module-kotlin'
    implementation 'com.vaadin:vaadin-spring-boot-starter:13.0.2'
    implementation 'org.jetbrains.kotlin:kotlin-reflect'
    implementation 'org.jetbrains.kotlin:kotlin-stdlib-jdk8'
    implementation 'org.springframework.retry:spring-retry' 

    implementation 'com.h2database:h2'

    implementation vaadin.bom()
    implementation vaadin.platform()
    implementation vaadin.lumoTheme()
    compile vaadin.springBoot()

    compileOnly 'org.projectlombok:lombok'

    runtimeOnly 'org.springframework.boot:spring-boot-devtools'
    runtimeOnly 'org.postgresql:postgresql'

    annotationProcessor 'org.projectlombok:lombok'

    testImplementation 'org.springframework.boot:spring-boot-starter-test'
    testImplementation 'org.springframework.security:spring-security-test'


dependencyManagement 
    imports 
        mavenBom "com.vaadin:vaadin-bom:$vaadinVersion"
    


compileKotlin 
    kotlinOptions 
        freeCompilerArgs = ['-Xjsr305=strict']
        jvmTarget = '1.8'
    


compileTestKotlin 
    kotlinOptions 
        freeCompilerArgs = ['-Xjsr305=strict']
        jvmTarget = '1.8'
    

主视图：

import com.cpsc471.model.types.User;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.grid.Grid;
import com.vaadin.flow.component.icon.VaadinIcon;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.data.value.ValueChangeMode;
import com.vaadin.flow.router.Route;

@Route(value = "test")
public class MainView extends VerticalLayout 

    private EmployeeEditor editor;
    private TextField filter;
    private Button addNewBtn;

    public MainView (EmployeeEditor editor) 
        setSizeFull();
        this.editor = editor;
        this.filter = new TextField();
        this.addNewBtn = new Button("New employee", VaadinIcon.PLUS.create());

        HorizontalLayout actions = new HorizontalLayout(filter, addNewBtn);
        add(actions, editor);

        filter.setPlaceholder("Filter by last name");
        filter.setValueChangeMode(ValueChangeMode.EAGER);
    

自定义组件：

package com.cpsc471.model;

import com.cpsc471.model.types.User;
import com.vaadin.flow.component.KeyNotifier;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.icon.VaadinIcon;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.data.binder.Binder;
import com.vaadin.flow.spring.annotation.SpringComponent;
import com.vaadin.flow.spring.annotation.UIScope;

import javax.swing.plaf.basic.BasicMenuUI;

@SpringComponent
@UIScope
public class EmployeeEditor extends VerticalLayout implements KeyNotifier 
    private User employee;

    private TextField firstName = new TextField("First name");
    private TextField lastName = new TextField("Last name");

    private Button save = new Button("Save", VaadinIcon.CHECK.create());
    private Button cancel = new Button("Cancel");
    private Button delete = new Button("Delete", VaadinIcon.TRASH.create());

    private HorizontalLayout actions = new HorizontalLayout(save, cancel, delete);
    private Binder<User> binder = new Binder<>(User.class);
    private BasicMenuUI.ChangeHandler changeHandler;

春季启动应用程序（kotlin）：

import org.springframework.boot.autoconfigure.SpringBootApplication
import org.springframework.context.annotation .Bean
import org.springframework.context.annotation .Configuration
import org.springframework.security.config.annotation .web.builders.HttpSecurity
import org.springframework.security.config.annotation .web.configuration.EnableWebSecurity
import org.springframework.security.config.annotation .web.configuration.WebSecurityConfigurerAdapter
import org.springframework.security.core.userdetails.User
import org.springframework.security.core.userdetails.UserDetailsService
import org.springframework.security.provisioning.InMemoryUserDetailsManager
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer

import org.springframework.boot.SpringApplication
import org.springframework.boot.web.servlet.support.SpringBootServletInitializer

@SpringBootApplication
class TheatreManagmentApplication : SpringBootServletInitializer()

fun main(args: Array<String>) 
    SpringApplication.run(TheatreManagmentApplication::class.java, *args)


@Configuration
@EnableWebSecurity
class WebSecurityConfig : WebSecurityConfigurerAdapter() 
    @Throws(Exception::class)
    protected override fun configure(http: HttpSecurity) 
        http
                .authorizeRequests()
                .antMatchers("/", "/home","/h2/**").permitAll()
                .anyRequest().authenticated()
                .and()
                .formLogin()
                .loginPage("/login")
                .permitAll()
                .and()
                .logout()
                .permitAll()

        http.csrf().disable()
        http.headers().frameOptions().disable()
    

    @Bean
    override fun userDetailsService(): UserDetailsService 
        val user = User.withDefaultPasswordEncoder()
                .username("user")
                .password("password")
                .roles("USER")
                .build()

        return InMemoryUserDetailsManager(user)
    


@Configuration
class MvcConfig : WebMvcConfigurer 
    override fun addViewControllers(registry: ViewControllerRegistry) 
        registry.addViewController("/home").setViewName("home")
        registry.addViewController("/").setViewName("home")
        registry.addViewController("/hello").setViewName("hello")
        registry.addViewController("/login").setViewName("login")
    

【问题讨论】：

你确定所有的HTTP请求都没有错误吗？看看你的浏览器开发工具是否所有对资源的请求（html、CSS、脚本）都成功响应200。我猜Spring安全配置不够但我没有尝试。检查this。

【参考方案1】：

从所附的截图来看，客户端部分似乎根本没有初始化，因为vaadin-button web 组件被渲染为纯文本，EmployeeEditor 没有被渲染。 由于前端依赖版本不匹配，我观察了几次。 我注意到附加的 gradle 配置中有两个不同的 Vaadin 版本：12.0.0 和 13.0.1。它可能是此类问题的根本原因。 对齐这些版本后，请从项目根目录中删除node_modules 和package.json，然后重新运行项目。 你也可以试试Vaadin starter。