後端開發者的福音，不用寫一行javascript和CSS輕鬆實現CRUD

vaadin介紹

今天在github發現一個開源庫vaadin，vaadin主要特點：
1.不用前後端分離開發應用
2.整個應用使用java實現(包括前端所有功能)
3.包含大量的UI組件
詳細的功能介紹可以去git上查看

https://github.com/tangyajun/platform.git

使用vaadin實現CRUD

1. 創建spring-boot項目

新建一個spring-boot項目crud-ui-with-vaadin

選擇Spring-Data-JPA和H2 DataBase

點擊finish

2.導入vaadin

<properties>
    <java.version>1.8</java.version>
    <vaadin.version>14.0.9</vaadin.version>
</properties>
<dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>com.vaadin</groupId>
                <artifactId>vaadin-bom</artifactId>
                <version>${vaadin.version}</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
        </dependencies>
    </dependencyManagement>

3. 創建domain對象和repository

創建domain對象
使用@Entity註解標註

@Entity
@Getter
@Setter
public class Customer {
	@Id
	@GeneratedValue
	private Long id;
	private String name;
	private Integer gender;
	private Integer age;
	private String phone;
	private String email;
	private String address;
	public Customer() {

	}
	public Customer(String name,int gender,int age,String phone,
	                String email,String address) {
		this.name=name;
		this.gender=gender;
		this.age=age;
		this.phone=phone;
		this.email=email;
		this.address=address;
	}
	@Override
	public String toString() {
		return String.format("Customer[id=%d,name='%s',gender=%d,age=%d,phone='%s',email='%s',address='%s'",
				id,name,gender,age,phone,email,address);
	}
}

創建repository

public interface CustomerRepository extends JpaRepository<Customer,Long> {
	/**
	 * 根據姓名查詢
	 * @param name 
	 * @return
	 */
	List<Customer> findByNameStartingWithIgnoreCase(String name);
}

4. 創建視圖類

實現查詢列表

1.創建查詢視圖類

@Route
public class MainView extends VerticalLayout {
    private final CustomerRepository repo;
	final Grid<Customer> grid;
	final TextField filter;
	private final Button addNewBtn;
	public MainView(CustomerRepository repo) {
		this.repo = repo;
		// 創建客戶列表grid
		this.grid = new Grid<>(Customer.class);
		// 創建查詢過濾文本框
		this.filter = new TextField();
		// 實例化新建按鈕
		this.addNewBtn = new Button("新建", VaadinIcon.PLUS.create());
		HorizontalLayout actions = new HorizontalLayout(filter, addNewBtn);
		// 添加到視圖
		add(actions, grid);
        /**
        * 設置grid 高度，列名
        */
		grid.setHeight("300px");
		grid.setColumns("id", "name", "gender","age","phone","email","address");
		grid.getColumnByKey("id").setWidth("50px").setFlexGrow(0);
		filter.setPlaceholder("請輸入客戶姓名");

		// 設置文本過濾器事件模式(內容改變觸發)
		filter.setValueChangeMode(ValueChangeMode.EAGER);
		// 添加事件監聽
		filter.addValueChangeListener(e -> listCustomers(e.getValue()));
	}
}

2.實現查詢過濾方法

void listCustomers(String filterText) {
		if (StringUtils.isEmpty(filterText)) {
			grid.setItems(repo.findAll());
		}
		else {
		// 調用repository查詢數據
		 grid.setItems(repo.findByNameStartingWithIgnoreCase(filterText));
		}
	}

實現增刪改功能

創建編輯視圖類，使用form表單佈局

@SpringComponent
@UIScope
public class CustomerEditor extends FormLayout implements KeyNotifier {
	private final CustomerRepository repository;
	private Customer customer;
	/**
	* 定義編輯的文本對象(等同<input type="text" />)
	*/
	TextField name = new TextField(" name");
	TextField gender = new TextField("gender");
	TextField age=new TextField("age");
	TextField phone=new TextField("");
	TextField email=new TextField("email");
	TextField address=new TextField("address");
    /**
    * 定義操作按鈕(等同<input type="button"/>)
    */
    Button save = new Button("保存", VaadinIcon.CHECK.create());
	Button cancel = new Button("取消");
	Button delete = new Button("刪除", VaadinIcon.TRASH.create());
	HorizontalLayout actions = new HorizontalLayout(save, cancel, delete);
	/**
	* 定義binder
	*/
	Binder<Customer> binder = new Binder<>(Customer.class);
	/**
	* 定義
	*/
	private ChangeHandler changeHandler;
    @Autowired
	public CustomerEditor(CustomerRepository repository) {
		this.repository = repository;
		/*
		*綁定domain對象中的屬性
		* Integer類型需要使用StringToIntegerConverter轉換
		*/ 
		binder.forField(age).withConverter(new StringToIntegerConverter(""))
		.bind(Customer::getAge,Customer::setAge);
		binder.forField(gender).withConverter(new StringToIntegerConverter(""))
		.bind(Customer::getGender,Customer::setGender);
	
		add(name, gender,age,phone,email,address, actions);

		// 綁定實例屬性
		binder.bindInstanceFields(this);
		
		save.getElement().getThemeList().add("primary");
		delete.getElement().getThemeList().add("error");
		/**
		* 添加按鈕點擊事件
		*/
		addKeyPressListener(Key.ENTER, e -> save());

		// 添加按鈕單機監聽事件
		save.addClickListener(e -> save());
		delete.addClickListener(e -> delete());
		cancel.addClickListener(e -> editCustomer(customer));
		// 保存後設置爲不可見
		setVisible(false);
	}
}

實現刪除和保存

void delete() {
		repository.delete(customer);
		changeHandler.onChange();
	}

	void save() {
		repository.save(customer);
		changeHandler.onChange();
	}

加載查詢列表數據

@Bean
	public CommandLineRunner loadData(CustomerRepository repository) {
		return (args) -> {
			repository.save(new Customer("Jack", 1,20,"1861111121","[email protected]","廣東"));
			repository.save(new Customer("Chloe", 0,28,"11223232","[email protected]","湖南"));
			repository.save(new Customer("Kim", 1,30,"15810911761","[email protected]","山東"));
			repository.save(new Customer("David", 1,22,"13693669002","Palmer","河北"));
			repository.save(new Customer("Michelle", 1,23,"170111121","Dessler","北京"));

			// fetch all customers
			log.info("Customers found with findAll():");
			log.info("-------------------------------");
			for (Customer customer : repository.findAll()) {
				log.info(customer.toString());
			}
			log.info("");
			Customer customer = repository.findById(1L).get();
			log.info("Customer found with findOne(1L):");
			log.info("--------------------------------");
			log.info(customer.toString());
			log.info("");

			log.info("Customer found with findByLastNameStartsWithIgnoreCase('Chloe'):");
			log.info("--------------------------------------------");
			for (Customer bauer : repository
					.findByNameStartingWithIgnoreCase("Chloe")) {
				log.info(bauer.toString());
			}
			log.info("");
		};
	}