iT邦幫忙

DAY 10
5

進程。Processing系列 第 10

[進程。Processing] 10.源生(Data Store)

源,為水流所從出的地方。如:源頭、水源。
亦可作為事物的根由,如:起源、來源、根源。

在這邊藉由「源生」二字,作為資料生成的方式,介紹如何透過 Ext js Data Store 來進行資料的傳輸。
Ext js 針對資料存取的方式提供了很多元的管道(Data Store),如:XMLStore、JsonStore、JsonPStore 都有支援,甚至於發展出一套遠端資料存取的技術 Ext Direct,目的都是為了加速資料存取的速度,以及提供彈性的資料模型框架。

以往對於後端資料的存取,通常都是在 Server 端將資料從資料庫中取出之後,再於 Server 端將資料要展現的格式幫裝好,然後整個傳輸到前端,再由瀏覽器 Parsing HTML Tag 轉換成 DOM 而呈現在使用者眼前。這一個過程其實很耗費網路傳輸的時間,而且瀏覽器還要做很多後製的處理,才有辦法呈現出較好的成果。

而現在 AJAX 技術不斷的演進,我們在網頁中,已可以做到不用 Post Back,就可以直接將後端的資料,呈現在安排好的介面中,Ext js 在這邊面做了很多巧思,讓開發者可以專注在後端商業邏輯的設計,將資料打包成 XML 或者 JSON 格式,傳輸到前端,由前端定義好的 View-Model,自動建立好 Proxy-Stub,經由 Render 的程序,就可以快速的完成資料的存取與呈現,而且使用者享有豐富的 UI 操作經驗,對於資料的閱讀與分析著實是一大享受。

產生 Data Store 的方式也很簡單,

Ext.create('Ext.data.Store', {
    model: 'User',
    proxy: {
        type: 'ajax',
        url : 'users.json',
        reader: 'json'
    },
    autoLoad: true});

對於快速上手這件事情,James 一直念茲在茲,因為如果要花太多時間在處理資料的格式與包裝,對於開發與除錯來說是一大負擔。且 Ext js 的Column Model 與 Data Store 的定義也頗為簡單,只是資料該怎麼傳輸到前端?James 從以往網頁開發的經驗中,尋求解決的方法。

在 .Net Framework 中使用 DataContractSerializer 來做 JSON Data 的 Serialzation,還有網路上很有名的 Open Source Project:JSON.Net。他們都是將物件 Serialize 以進行網路傳輸的一種方式,但 James 問題是他需要大量的 Query。

「難道要針對每一種 Query 去設計一個 Class?我不能直接傳遞 SQL Statement 就取得資料然後轉成 JSON Data?」James 思考著。

「組成 JSON 格式,應該不是問題,只要定義好 Key-Value Pair 的格式即可(註1),問題是我要怎麼做 Serialization?」

James 透過 Google,研究相關 Serialization 傳輸方式,大多指向 Web Service。「真的要玩這麼大?Serialize 是一種將 Data 轉成 Stream 的方式以利網路傳輸,噫?HTTP Data 不也就是 Stream?我不乾脆就將結果 Output 到網頁,不就可以達到傳輸的功能!」

James 靈光一現,馬上撰寫一段程式碼來印證自己的想法。網頁輸出的是整理好的 JSON Data,接著 James 開始套用到 Ext js 的 Data Store上,將定義寫好,開始進行測試。

Imports System.Data.SqlClient

Public Class qryEISbySQL
  Inherits System.Web.UI. Page

  Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me .Load
    Dim strSQL As String = Request("sql")
    Dim connEIS As New SqlConnection( My.Settings.EISConnectionString)
    Dim cmdEIS As SqlCommand
    Dim drEIS As SqlDataReader
    Dim jsonString As String = ""
    Dim iRowCount As Integer = 0

    Try
      connEIS.Open()

      cmdEIS = New SqlCommand (strSQL, connEIS)

      drEIS = cmdEIS.ExecuteReader()

      Do While drEIS.Read()
        jsonString += "{"
        For i = 0 To drEIS.FieldCount - 1
          jsonString += """" + drEIS.GetName(i) + """:""" + drEIS.GetValue(i).ToString() + ""","
        Next i
        jsonString = jsonString.Substring(0, jsonString.Length - 1)
        jsonString += "}, "
        iRowCount += 1
      Loop
      jsonString = jsonString.Substring(0, jsonString.Length - 2)
      jsonString = "[" + jsonString + "]"
      cmdEIS.Cancel()
      drEIS.Close()
      Response.Write(jsonString)
    Catch ex As Exception
      Response.Write(ex.Message)
    Finally
      If Not connEIS.State = ConnectionState.Closed Then
        connEIS.Close()
      End If
      connEIS = Nothing
    End Try
  End Sub

End Class

James 將一串 SQL Statement 傳入 qryEISbySQL.aspx 果然傳回包裝好的 JSON String,接著將這一段程式套用在每一個 Grid 的 js 中。

qryPO_Parts.aspx 開啟後,資料果然整整齊齊的塞在 Grid 當中。「太帥了!這樣我就可以有一個 Data Store Generator了!」

James 開心的撰寫了兩支程式,for ERP Data Store 與 EIS Data Store,並撰寫了一個 Query JSON 的測試程式,輸入 SQL Statement 來取得 JSON Data。

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="qryJson.aspx.vb" Inherits="ERP.qryJson" %>


<html lang="zh-tw">
<head id="Head1" runat="server">
  <title >Query ERP by SQL--Return Json</ title>
  <script type="text/javascript" src="js/jquery-1.7.2.min.js"></ script>
  <script type="text/javascript">
    function loadJson() {
      var srvUrl = "BusinessObject/qry" + form1.cboType.value + "bySQL.aspx" ;
      alert(srvUrl);
      $.ajax({
        url: srvUrl+ '?sql='+form1.txtSQL.value,
        success: function (data) {
          form1.txtJson.value=data;        
        }
      });
    }
  </script >


  <p >
    程式名稱:qryJson.aspx </p>
  <p >
    用途:呼叫 BusinessObject/qryERPbySQL.aspx,傳回以 SQL statement 查詢 ERP 的結果(Json data
    的格式) </p>
  <p >
    傳遞參數: 'sql=' + form1.txtSQL.value</p >
  <p >
    回傳資料:data in json <br />
  </p >
  <form id="form1" runat="server">
  <div >
    <asp :DropDownList ID="cboType" runat="server">
      <asp :ListItem Selected="True">ERP </asp: ListItem>
      <asp :ListItem> EIS</asp :ListItem>
      <asp :ListItem> WMS</asp :ListItem>
    </asp :DropDownList>
    <br />
    SQL Statement <br>
    <textarea id="txtSQL" cols="100" name="txtSQL" rows="10"></ textarea>  
    <input id="btnQuery" type="button" value="查詢" onclick=" loadJson();"><br >
    <br >
    Output Json<br >
    <textarea id="txtJson" cols="100" name="txtJson" rows="10"></ textarea><br >
  </div >
  <div id="result"></ div>
  </form >

經過幾番的測試調整,這一段測試的程式已經完成,可以輸入一段 SQL Statement,就可以得到 JSON 的資料結果。(圖1)

圖1:qryJason.aspx 輸出結果

註1:JSON 格式每一種 framework 輸出的格式不盡相同,端看接收端的 parser 怎麼處理,Ext js 這邊採用的 JSON 格式主要為 [{"fieldA":"valueA", "fieldB":"valueB"},{"fieldC":"valueC","fieldD":"valueD"}],這種格式的資料並沒有資料型別,型別則是要另外定義於 Data Store 中,要有資料型別的判定,可以改用 XML Data Store 或 JsonPStore。

Prev Next

本篇全系列文章


上一篇
[進程。Processing] 09.表格(Grid)
下一篇
[進程。Processing] 11.定義(Definition)
系列文
進程。Processing31
0
海綿寶寶
iT邦超人 1 級 ‧ 2012-10-10 09:26:58

jamesjan提到:
大多指向 Web Service。「真的要玩這麼大

其實說到底
「這麼大」的 Web Service 最後產出的結果
馬洗 HTTP response 而已
炸死你

海綿大早謝謝

以對 Web 開發來說,Web Form 確實比 Web Service 來的好開發多了,不過現在也不用 Web Service 了,改個面貌叫 Web API...用 API 感覺又高尚了不少...XD

現在 MVC 架構風行,讓用 Web Form 開發系統感覺起來是一件很遜的事情。落寞

不過也不能這樣講,還是要看系統的規模大小而定。

0
ted99tw
iT邦高手 1 級 ‧ 2012-10-10 09:52:02

吼,海綿寶寶又跑出人嚇人,James不用客氣,最厲害的空手道就使出來吧!!偷笑

泰大...空手道我不會...好像 一本道 不少...驚

我...我是說 來就存在的

jamesjan提到:
一本道

噴鼻血

0
SunAllen
iT邦高手 1 級 ‧ 2012-10-10 09:52:44

jamesjan提到:
大多指向 Web Service

查查看什麼東東忙

...炸死你自爆了...驚

我要留言

立即登入留言