【WeX5的正確打開方式】系列目錄:

(1)入門篇之進擊的Hello World

(2)入門篇之進擊的Hello World(續)

(3)WeX5綁定機制

(4)WeX5綁定機制(續)

(5)WeX5綁定機制(續2)

(6)數據組件初探

(7)數據組件詳解

本文是【WeX5的正確打開方式】系列的第7篇文章,詳細介紹WeX5中數據組件的增刪改查以及數據定位方法。

前言

? ? 上一篇 數據組件初探 我們簡單介紹了數據組件的引入和底層結構以及特性,并實現了簡單的數據展示和數據改動。上一篇中簡單提到了,數據組件就是后臺數據庫表在前端的一個映射,前后端開發人員只要預定好數據組件的內容,就可以簡單實現前后端開發的分離。既然數據組件是一個數據庫表的映射,那它的基本結構就是一張 2 維表格,舉個栗子,定義一個 html5開發工具 的數據組件,xid 為 devtool :

+-------+--------------------+----------------------------+---------+
| index | name               | url                        | country |
+-------+--------------------+----------------------------+---------+
|   1   | JetBrains WebStorm | https://www.jetbrains.com/ | USA     |
|   2   | Sencha Architect   | https://www.sencha.com/    | USA     |
|   3   | Justep Wex5        | http://www.1400584.live/       | CN      |
|   4   | Adobe Dreamweaver  | http://www.adobe.com/      | USA     |
|   5   | Google Web Toolkit | https://www.google.com/    | USA     |
+-------+--------------------+------------------------- --+---------+

? ? 數據組件的 xid 就是數據庫表的名字,簡單理解就是我們的身份證,通過xid可以找到這個數據庫表。數據組件中還有一個 idColumn 屬性,上表中的 index就是 idColumn,就是說這一列是數據庫表的 id 列,比如我們的身份證號就是一個 id 列。再看數據組件的內容,為了實現某個數據的增刪改查,我們還必須定位到相應的行和列,這涉及到了數據組件的定位方法。

? ? 下面分別介紹數據組件的定位機制和增刪改查方法。

數據定位

? ? 首先是數據組件的定位,Wex5 中的組件實例查詢方法 comp(xid) 當然是可以找到相應的數據組件了。另外,由于是直接掛在 model 組件之下的,Wex5 為了簡化數據組件的引用,model.xid 的方法也可以引用到數據組件。比如上文的 html5開發工具數據表,就可以直接使用 Model.devtool 來使用。從性能上考慮,不推薦使用 comp(xid) 的方式去查詢組件實例,因為一個應用中的組件可能很多,那遍歷查詢這一堆組件顯然是不劃算的。

? ? 獲取到數據組件之后,接下來看看如何定位到某一行,wex5 中的 API 主要有:

  1 Data.getCurrentRow(); // 獲取當前行 
  2 Data.getFirstRow();   // 獲取第一行
  3 Data.getLastRow();    // 獲取最后一行
  4 Data.next();          // 游標移動到下一行
  5 Data.pre();           // 游標移動到上一行
  6 Data.first();         // 游標移動到第一行
  7 Data.last();          // 游標移動到最后一行
  8 Data.to(row);         // 游標移動到指定行

? ? 獲取到某一行的時候,整一行的數據就是一個一維數組,這個時候提供列參數就可以直接對數據進行讀寫了。

? ? 數據定位機制中除了代碼直接定位之外,系統也會捕捉鼠標、觸屏等用戶交互操作來進行數據的定位。在界面中,如果用戶鼠標點擊或者觸屏點擊了某一個數據行,那游標就自動移動到那一行,不指定行參數的數據操作就會默認為對該行的操作。要注意的是使用 tab 鍵轉移輸入焦點是不會自動進行數據定位的。

? ? 數據的定位就這些,使用起來是還是非常簡單的,通常我們也是定位數據后再進行增刪改查操作。

增刪改查

? ? ?任何一個與數據相關的程序,都離不開這“增刪改查”,數據組件當然也必須要有增刪改查幾種操作。

? ? ? 增:

Data.newData(option); ——– 后端新增,返回一行或者多行新增數據

Data.add(defaultValues,parent);——–前端新增一行數據,狀態需要開發者設定,defaultValues,parent參數同上;不會觸發data相關事件

刪:

Data.deleteData(rows); ——– 刪除指定行數據
Data.deleteAllData() ——– 刪除所有數據

改:

Data.setValue(col,value,row); 
Row.val(col,value);

查:

Data.getValue(col,row); 
Row.val(col);

? ? ?還是用上一篇 數據組件初探 來作示范,增加幾個按鈕,各按鈕方法如下:

  1 // 增
  2 Model.prototype.myAdd = function(event) {
  3     var data = this.data1;
  4     data.add({
  5         name : 'God Usopu',
  6         height : 180,
  7         weight : 70
  8     });
  9 };
 10 // 刪
 11 Model.prototype.myDelete = function(event) {
 12     var data = this.comp('data1');
 13     var row = data.getLastRow();
 14     data.deleteData(row);
 15 };
 16 // 改
 17 Model.prototype.myModify = function(event) {
 18     var data = this.comp('data1');
 19     var row = data.getLastRow();
 20     data.setValue("name", "changed", row);
 21 };
 22 // 查
 23 Model.prototype.mySearch = function(event) {
 24     var data = this.comp('data1');
 25     var lRow = data.getLastRow(), row, results = 
[]; 26 data.first(); 27 do { 28 row = data.getCurrentRow(); 29 if (data.val('height') > 180) { 30 results.push(data.val('name')); 31 } 32 data.next(); 33 } while (lRow != row); 34 alert(results); 35 }; 36
? ? 效果:

? ??001

? ? 上面這個案例的操作都是在最后一行進行的,假如按照上文中的數據定位移動游標的話,就可以實現在任意位置的增刪改查了。

后端數據組件baasData

? ? 之前的文章中,案例使用的都是data組件,而不是后端數據組件baasData,如果需要與后端數據庫進行交互的話,就必須使用baasData組件進行開發了。

相比data組件,baasData增加了與后臺的交互接口:

? ??002

? ? tableName、url與queryAction、saveAction 這幾項區別于Data組件的核心屬性。tableName也就是數據庫中的數據庫表,url是服務地址,還有兩個Action分別是系統自帶的對數據庫的查詢操作和保存操作。WeX5中也可以通過代碼調用后端服務:

  1 justep.Baas.sendRequest({
  2     "url" : "/服務的地址",
  3     "action" : "需要的操作",
  4     "async" : false,
  5     "params" : {參數列表},
  6     "success" : function(data) {
  7         if(data != null){
  8             // data operation
  9         }
 10     }
 11 });

? ? 本質上都是通過XHR來進行前后端通信的,比如說記事本案例中的查詢:

? ??003

? ? 實質上發送的 XHR 請求是這樣的:

005

? ? 你也可以用原生的 XHR 來請求一下,效果是一樣一樣的:

  1 var request = new XMLHttpRequest(); // 新建XMLHttpRequest對象
  2 request.onreadystatechange = function() { // 狀態發生變化時,函數被回調
  3     if (request.readyState === 4) { // 成功完成
  4         // 判斷響應結果:
  5         if (request.status === 200) {
  6             // 成功,通過responseText拿到響應的文本:
  7             console.log(request.responseText);
  8         } else {
  9             // 失敗,根據響應碼判斷失敗原因:
 10             console.log(request.status);
 11         }
 12     } else {
 13         // HTTP請求還在繼續...
 14     }
 15 }
 16 // 發送請求:
 17 request.open('POST', '/baas/justep/account/queryAccount');
 18 request.send('{p: "just test"}');

? ? 自己實現 XHR 請求有多繁瑣,上述代碼已經體現得淋漓盡致了,前后端的小伙伴們要約定好請求的參數,萬一后端同學一時興起一不注意改了后端接口,你 send 過去的參數就報廢了。而 WeX5 定義了一套規則,對于普通數據庫的查詢可以即時調用,如果你有更高要求,也可以去自定義 action,WeX5 也提供前后端一體的解決方案。有興趣的同學可以看看官方文檔介紹:http://docs.wex5.com/net-develop-4/

后端交互

? ? 與后端交互的時候,除了增刪改查之外,還有【保存】和【刷新】兩個操作。

? ? 保存:

Data.saveData(option) ——- 業務數據保存方法,向后端提交修改的數據,包括從Data數據

刷新:

Data.refreshData(option)? —- 業務數據刷新,會刺激從data級聯刷新
Data.open()? —- 加載數據行為和refreshData一致,只是當Data.isLoaded()==false時執行數據加載
Data.loadNextPageData(option)? —- 加載下一頁的數據
Data.loadAllPageData(option)? —- 在分頁狀態加載所有數據
Data.loadPageData(pageIndex,option)? —- 分頁模式下加載第N頁數據,參數pageIndex指定需要加載的頁,limit!=-1時可以使用
Data.loadData(data,append,parent,index)? —- 加載數據到Data

上面各方法的參數請參考API文檔,在此不再贅述。

這些 API 也封裝了前后端交互以及數據綁定的操作,更新數據庫的同時可以觸發前端界面的自動刷新,這也就是前幾章說的數據界面雙向綁定了。在數據表格展示比較多的場合,雙向綁定才是王道??!

總結

? ? 本篇詳細介紹了數據組件的常用操作,包括數據的增刪改查、前后端交互的CRUD,不單有 WeX5 的手把手操作教學,也簡單分析了一下底層的實現。小茄才疏學淺,文中若有不當之處,萬望指正!

本文源自WeX5開發者——小茄投稿,開發者可在WeX5論壇中記錄html5 ?app開發過程中的點滴。

也可以直接發送到WeX5官方郵箱中投稿,Email地址:[email protected]