wex5 ——— 前臺界面展現數據庫內容

本文主要介紹簡單的前臺界面與數據庫鏈接，並展現其內容

鏈接數據庫，配置數據源

一、建立數據庫：

　　點擊根目錄下的啓動MySQL管理工具

打開會話管理器，點擊打開進去主界面

右擊x5選擇建立新的-->數據庫

二、在studio中鏈接數據庫

點擊工具欄中的窗口 ——>首選項——>Studio配置——>數據源

點擊增長，選擇數據庫類型，並添加相應信息，例如：

默認密碼爲x5，以後點擊測試鏈接，提示鏈接成功以後，點擊肯定，關閉彈窗

這個時候數據庫已經加進來了，可是進去數據庫的界面查看，並無新加的mytest數據庫，是由於咱們尚未配置。

打開Baas下的db.config.m文件

將mytest勾選上，並保存關閉

此時切換到數據庫界面，右擊數據源刷新，會看到新增的mytest數據庫出現了

此時能夠雙擊mytest數據庫對其進行編輯，添加表及數據等

新增服務與前臺界面對接

一、在Baas下新建文件夾，在文件夾中新建服務，例如：

點擊新建數據表Action，選擇相應數據庫與表

點擊肯定，新增Action。這裏包含了兩個Action，一個爲查詢一個爲保存。若是隻須要展現數據，能夠不勾選saveAction

二、前臺頁面顯示數據：

在界面model中添加baasData數據組件，並選擇該組件的tableName，在彈窗中選擇本身新增的action點擊肯定

在內容區域，添加展現數據的組件，並綁定其data屬性

下面就是顯示其具體數據：個人數據庫中是一個user表，其中包含id，name,age。這裏我只用一個span作展現，其餘的能夠本身發揮

添加span組件，並綁定其bind-text屬性，在彈窗中選擇須要顯示的屬性，這裏我選擇name。雙擊name，下面的文本域會出現相應的代碼。注意：若是是$model.baasData1.val("name")，列表就會只循環數據庫的第一條數據。這裏應該是 $object.val("name")

到這裏與數據庫的初級鏈接已經實現。

三、最後在瀏覽器中查看：

在根目錄中啓動MySQL數據庫，並使其保持打開狀態，

右擊Baas點擊模型編譯，

啓動Tomcat，

右擊前臺界面選擇用瀏覽器運行

結果：

與數據庫中數據匹配。

至於數據的增刪改，能夠在當前頁面中添加button組件，或者對其餘組件綁定事件，在事件中對數據庫中數據進行編輯。

若是須要對數據進行過濾顯示，能夠在數據組件的onBeforeRefresh事件中調用數據組件的 setFilter 方法：

this.comp("baasData1").setFilter("f1", "id= 1");

如圖：

排序：this.comp("baasData1").setOrderBy("name", "asc");

 

 

 

自定義服務：

在以前Baas新建的文件夾下新建java文件

注意：java文件的名稱要與服務文件名稱同樣，且首字母要大寫

新建的java文件

在Zhyell中寫 baasjava 按alt+/組合鍵，補全代碼

鼠標放在JSONObject上，按ctrl+shift+o組合鍵 補全引用

此時能夠自定義本身的方法：

其中代碼的意思爲：在控制檯輸出一串減號，接收前臺傳過來的abc參數並在控制檯輸出，往前臺傳一個值1000

方法建立完成後須要在服務中新建action與方法鏈接：

填寫名稱及須要調用的方法。注意第三個紅框，第一個zhyell是文件夾的名稱，第二個Zhyell是java文件的名稱，第三個userlogin爲java文件中的方法名，填寫完成後保存。便可像以前前臺界面調用後臺action同樣使用當前action。這裏不在重複