beanui

Angry BeanUI

一款通過Javabean來開發WEB UI的框架

以下一些場景是否會出現在您的工作當中：

• 我是一名Java開發人員，並不精通Web技術，但今天被安排開發一個簡單的頁面；
• 一個為期兩個月的Java後台服務（後台為主）項目，由於團隊無人精通前端，故花費了一個月做頁面；
• 前年做了一個圖書管理系統，去年做了一個採購管理系統，今年做了一個用戶管理系統；
• 我是一個名Java開發人員，實在沒有興趣參與Web開發；

目前究竟流行什麼Web UI框架？

以上提到的是我經常遇到的困惑，在如今前後端分離的大潮當中，Java也幾乎放棄了Web UI框架的投入，就算身為Java開發人員，我們也很少使用Struts、JSF等Java UI框架來開發，JSP也很少寫了。 但在一個Javaer的日常中，就算一百個不願意，還是會遇到UI的需求，但打開搜索引擎時，滿滿的都是層出不窮的新技術。也許就連身在其中的人也很難說清楚什麼是目前流行的Web框架。

前後端分離

說到前後端分離，這也是我常常思考的場景，如果簡單把我們開發的具備UI的系統分為兩類：

• 外部系統（如門戶網站、博客等）
• 內部系統（如管理系統等）

那麼外部系統往往都有專業的UI工作人員甚至是UI團隊來負責，而內部系統則不一定了，那麼這時候前端開發的任務便落到了後端工程師的身上。

這種情況下，前後端分離就變得不那麼美了，這意味著：

• 學習前端各種框架（Jquery、ReactJS、VUE、Angular）
• 學習前端的測試手段（unit、mock）
• 學習前端編譯、打包
• 其實還有很多的理論還有概念需要了解
• 總之前端的知識量絕對不亞於後端，甚至超過後端學習的難度

最後在你惡補知識後花了大力氣做出了前端頁面，可能依然被噴。

Javaer理想中的內部UI開發過程

• 不需要了解前端的各種知識
• 在開發完後端代碼（如Restful service）後僅需要簡單配置即可將頁面呈現

我們的內部系統往往不需要絢麗的效果、複雜的動畫、高度訂製的結構，他可能僅僅是後台服務的一個入口，或者管理一些配置，又或者是管理一些簡單的數據對象（如用戶、訂單、商品之類的），也可能是呈現一些常見的二維報表。他們最多的操作僅僅是對數據對象的CRUD。 故此，我想到了是否能夠通過Java反向生成前端代碼，在此之前已經有GWT等框架這麼做過了，但代碼入侵性過強。

關於BeanUI的特點

• 純配置式完全採用Java註解來進行UI描述
• 無侵入式代碼UI描述將不會對後端Restful service項目造成影響
• 快速開發
• 具備一定程度的UI訂製能力

Dependencies

1. 需要安裝npm：install nodejs 10.0.0 or npm 6.2.0;
2. 需要安裝apache maven;

安裝BeanUI

1. git clone https://github.com/magic-bunny/beanui
2. cd beanui
3. mvn install

安裝和運行BeanUI example

1. 將beanui/vue目錄拷貝到任意目錄%your_vue_path%
2. cd %your_vue_path% and npm install
3. 在pom.xml的beanui-maven-plugin插件中添加配置節點<workPath>%your_vue_path%</workPath>
4. cd beanui/demo and mvn install
5. java -jar demo-1.0.jar
6. 打開瀏覽器，輸入http://localhost:8080

在DEV模式下運行BeanUI examle

1. 將pom.xml文件的運行模式修改為dev <mode>dev</mode>
2. cd beanui/demo
3. mvn install

程序入口

開始構建一個BeanUI工程需要建立一個router.yml

注意：router.yml不是必須的，如果不配置，框架會掃描所有包含@Component的註解類並進行轉換，此時需要配置path屬性，若不配置則為/

如果需要一個最簡單的BeanUI項目，可參看single-demo

單頁面router實例

 path : /test
component : demo.view.layout.card.CardComponent

帶左側菜單router

 name : root
children :
  - title : home
    icon : star
    component : demo.view.layout.card.CardComponent

帶登錄頁面以及菜單router

 path : /login
component : demo.view.LoginComponent
children :
  - title : home
    icon : star
    component : demo.view.layout.card.CardComponent 

Javabean註解說明

需要了解各個控件在Javabean當中的寫法，請點擊

注意：由於使用了Element UI（餓了麼），因此幾乎可以完全參看Element UI的組件說明

BeanUI Maven插件說明

需要了解Maven插件的用法，請點擊

需要了解加強庫的用法，請點擊

License

BeanUI is licensed under the MIT license. See LICENSE for further details.