这篇文章是社区成员 Marcus Hellberg (@marcushellberg) 的客座文章。Marcus 是 Vaadin 社区团队的负责人。他喜欢通过创建在线内容和在活动中与开发人员交流来帮助开发人员发现和学习现代 Web 技术。

构建 Web 应用程序可能是一项艰巨的任务。有很多活动部件：您需要使用 HTML 定义结构，然后使用 CSS 使其看起来符合您的期望。对于前端应用程序，您还需要使用 JavaScript 编写应用程序逻辑并通过 REST 将其连接到您的后端。当然，您还需要实现后端逻辑和 REST 服务。

这些事情本身并不难，但是构建既美观又运行良好的东西需要掌握多种语言，并且通常意味着要花费大量时间进行设置和其他不增加最终用户价值的任务。

为什么不考虑 Vaadin 作为替代方案呢？它效率更高，并提供许多额外的好处。

Vaadin：一个现代的 Java Web 应用程序框架

Vaadin 是一个针对 JVM 的全栈框架，它采用了一种不同的 Web 应用程序构建方法。它具有：

• 具有 Java API 的一套广泛的可定制 UI 组件。
• 自动浏览器通信。
• 强大的数据绑定和端到端类型安全。
• 对 Spring 技术的内置支持。

让我们来看一个具体的例子。下面，我们通过将 `VerticalLayout` 组件映射到 `contacts` 路径来创建视图。我们使用 Spring 将服务类注入构造函数以进行后端访问。然后，我们实例化一个 Vaadin Grid 组件并将 `Contact` 对象列表传递到网格中。最后，我们将 `H1` 标题和网格添加到我们的视图中以显示它们。

@Route("contacts") // localhost:8080/contacts
public class ContactsView extends VerticalLayout {

 // Autowire a Spring @Service
 public VaadinView(ContactService service) {

   // Instantiate Vaadin data grid component
   Grid<Contact> grid = new Grid<>(Contact.class);

   // Pass in a list of Contacts to show in the grid
   grid.setItems(service.findAll());
  
   // Define columns
   grid.addColumn(Contact::getFirstName).setHeader("First Name");
   grid.addColumn(Contact::getLastName).setHeader("Last Name");
   grid.addColumn(Contact::getEmail).setHeader("Email");
   grid.addColumn(contact -> contact.getCompany().getName()).setHeader("Company");

   // Add components to the layout to show them
   add(
       new H1("All contacts"),
       grid
   );
 }
}

在上面的示例中，`@Route` 是一个专门的 `@Component`，它确保 `ContractsView` 是上下文中的常规 Spring bean。

值得注意的是我们没有做的事情：我们没有编写 HTML 模板、CSS、JavaScript 或 REST 端点。我们使用了现有的 Spring 后端并将其连接到我们的 UI，所有这些都在 Java 中完成。

使用 Spring Boot 更轻松地进行 Vaadin 开发

Spring Boot 是 Vaadin 应用程序最流行的后端。Vaadin 和 Spring Boot 都是为开发人员而构建的。它们足够易于快速学习，但也足够强大，可以在生产环境中运行。

Vaadin 视图默认情况下由 Spring 管理，这意味着您可以自动连接服务并访问数据库和其他服务器资源。您可以使用 Spring Security 处理身份验证并限制对应用程序某些部分的访问。

学习使用 Spring Boot 和 Vaadin 进行 Web 应用程序开发

Vaadin 最近发布了 关于 Spring Boot 和 Vaadin 的综合教程系列。它适合任何具有 Java 知识并希望学习构建 Web 应用程序的人。

文本和视频教程涵盖了完整的应用程序开发生命周期：

• 设置开发环境。
• 使用 Vaadin 支持创建新的 Spring Boot 项目。
• 使用 Spring Data 访问数据库。
• Vaadin 视图、布局、表单和数据绑定。
• 使应用程序可安装并定义离线回退页面。
• 单元和浏览器测试。
• 云部署。

[阅读 Spring Boot 和 Vaadin 教程]