使用vaadin在后端写前端

---

背景说明

从原古的SSH和现在的前后端分离架构，大部分WEB前端的开发都需要脚本语言，不论是JSP还是HTML或者angular，那有没有一种可以用后端代码写前端代码的实现呢？

学习过Swing的同学大概可以知道CS架构里是可以的，那BS架构里呢？答案是Vaadin

实践源码

vaadin则是可以用JAVA代码编写WEB端的控制代码。先看两个效果图


而以上个页面的所有代码都在后台，用JAVA编写，如下是一个继承com.vaadin.ui.UI的自定界面

import com.vaadin.annotations.Theme;
import com.vaadin.server.VaadinRequest;
import com.vaadin.ui.Button;
import com.vaadin.ui.Label;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

/**
 * This UI is the application entry point. A UI may either represent a browser window
 * (or tab) or some part of a html page where a Vaadin application is embedded.
 * <p>
 * The UI is initialized using {@link #init(VaadinRequest)}. This method is intended to be
 * overridden to add component to the user interface and initialize non-component functionality.
 */
@Theme("mytheme")
public class MyUI extends UI {
   

    @Override
    protected void init(VaadinRequest vaadinRequest) {
   
        final VerticalLayout layout = new VerticalLayout();

        final TextField name = new TextField();
        name.setCaption("Type your name here:");

        Button button = new Button("Click Me");
        button.addClickListener(e -> {