腳本之家服務器常用軟件

快捷導航

使用JavaScript?將數(shù)據(jù)網(wǎng)格綁定到?GraphQL?服務的操作方法

更新時間：2023年11月29日 10:04:40 作者：葡萄城技術團隊

GraphQL是管理JavaScript應用程序中數(shù)據(jù)的優(yōu)秀工具,本教程展示了GraphQL和SpreadJS如何簡單地構建應用程序,?GraphQL?和?SpreadJS都有更多功能可供探索,因此您可以做的事情遠遠超出了這個示例,感興趣的朋友一起看看吧

前言

作為一名前端開發(fā)人員，GraphQL對于我們來說是令人難以置信的好用。它可以用來簡化數(shù)據(jù)訪問，這讓我們的工作變得更加容易。

什么是 GraphQL？它是一個抽象層，位于任意數(shù)量的數(shù)據(jù)源之上，并為您提供一個簡單的 API 來訪問所有數(shù)據(jù)。

GraphQL 的美妙之處在于您可以準確定義要從服務器返回的數(shù)據(jù)以及您希望其格式化的方式。它還允許您通過單個請求從多個來源獲取數(shù)據(jù)。 GraphQL 還使用類型系統(tǒng)來提供更好的錯誤檢查和消息傳遞。

簡單嘗試

我們可以用一個demo網(wǎng)址來嘗試感受一下GraphQL的魅力所在：https://demodata.grapecity.com/northwind/ui/graphql

我們用 Microsoft 的經典 Northwind 數(shù)據(jù)庫進行測試。假設我們想要獲取產品列表，但我們只需要產品 ID 和名稱字段。我們的查詢如下所示：

{
  products {
    productId
    productName
  }
}

這是我們的查詢測試器中的結果：

GraphQL 就是這么簡單！

實際使用

日常開發(fā)過程中我們可以用我們常用的JavaScript來直接操作GraphQL，并將自己想要的數(shù)據(jù)呈現(xiàn)在頁面上，

我們可以參考這個簡單的應用程序，我們將僅使用 fetch API 來調用 GraphQL 服務：https://stackblitz.com/edit/wijmo-with-graphql-lruhgx

當然我們也可以添加更多的字段，方便我們取獲取其他自己想要的信息：

fetch("https://demodata.grapecity.com/northwind/graphql", {
 method: "POST",
 headers: {
 "Content-Type": "application/json",
 Accept: "application/json"
 },
 body: JSON.stringify({
 query:
 "{ products { productId, productName, unitPrice, unitsInStock, unitsOnOrder, reorderLevel, discontinued, categoryId }}"
 })
})

我們打開控制臺可以看到返回的結果以及綁定的數(shù)據(jù)內容：

此時我們配合一些表格類的控件，便可以將這些數(shù)據(jù)很友好地渲染在頁面上，這里我們以葡萄城公司的純前端表格控件SpreadJS為例：

安裝 Wijmo：

npm install @grapecity/spread-sheets

我們可以在app.Vue中添加以下模塊

import Vue from "vue";
import '@grapecity/spread-sheets-resources-zh';
GC.Spread.Common.CultureManager.culture("zh-cn");
import '@grapecity/spread-sheets-vue'
import GC from '@grapecity/spread-sheets';
import './styles.css';

緊接著我們只需要建立數(shù)據(jù)的key和我們表格內區(qū)域的映射關系就能完美的展示需要的內容

var colInfos = [
    { name: "productId", displayName: "productId" },
    { name: "productName", displayName: "productName", size: 100 },
    { name: "unitPrice", displayName: "unitPrice", size: 80 },
    { name: "unitsInStock", displayName: "unitsInStock" },
    { name: "unitsOnOrder", displayName: "unitsOnOrder", size: 80 },
    { name: "reorderLevel", displayName: "reorderLevel", size: 80 },
    { name: "discontinued", displayName: "discontinued", cellType: new GC.Spread.Sheets.CellTypes.CheckBox(), size: 80 },
    { name: "categoryId", displayName: "categoryId", size: 100},
];
sheet.bindColumns(colInfos);

現(xiàn)在我們有了數(shù)據(jù)和展示的組件，我們可以將它們放在一起。在 fetch 調用之后，在 then()方法中轉換為 JSON 并用結果填充我們的 sheet即可。

fetch("https://demodata.grapecity.com/northwind/graphql", {
 ...
})
 .then(r => r.json())
 .then(data => bindData(data));
function bindData(data) {
 sheet.setDataSource(data.data.products);
}

我們的數(shù)據(jù)已經綁定到了工作表上，且這是一種雙向綁定關系，因此一旦數(shù)據(jù)有變動，頁面的表格內渲染的數(shù)據(jù)也會相應的變動！

這是我們的網(wǎng)格渲染時的樣子：

只需要一點點代碼，我們就可以得到一個綁定到 GraphQL 源的功能齊全的在線表格！當然除了GraphQL的強大以外，也不得不佩服SpreadJS對于數(shù)據(jù)渲染的便捷和可靠性。

如果您想自己嘗試這個應用程序，這里有一個實例：https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/features/data-binding/sheet-level-binding/vue

深入討論

類別信息動態(tài)渲染

GraphQL 最有趣的功能之一是將許多不同的查詢聚合到一個請求中。此功能可用于最大程度地減少與服務器的往返次數(shù)，從而提高應用程序的響應能力。當然，對服務器進行多次往返仍然是合適的，但這是一個非常實用的功能。

在我們的示例中，我們加載了產品。我們還獲得了每個產品的類別ID，因為每個產品都與另一個數(shù)據(jù)集中的類別相關聯(lián)。而我們相應的信息中希望添加類別信息，并通過CategoryID 查找類別。 GraphQL 的一個很酷的事情是我們可以便可以在一個查詢中加載產品和類別兩類信息！

以下是一個查詢擴展后的樣子：

{
  products {
    productId
    productName
    unitPrice
    unitsInStock
    unitsOnOrder
    reorderLevel
    discontinued
    categoryId
  }
  categories {
    categoryId
    categoryName
  }
}

如果我們將其放入查詢測試器中，我們可以看到現(xiàn)在得到兩個數(shù)組（一個用于產品，另一個用于類別）

現(xiàn)在我們希望將產品的類別信息按照我們給定類別信息進行展示，我們可以借助SpreadJS的數(shù)據(jù)綁定功能中對列的單元格類型來實現(xiàn)這個需求：

var combo = new GC.Spread.Sheets.CellTypes.ComboBox();
combo
    .items(data.data.categories)
    .editorValueType(GC.Spread.Sheets.CellTypes.EditorValueType.value);
var colInfos = [
    { name: "productId", displayName: "productId" },
    { name: "productName", displayName: "productName", size: 100 },
    { name: "unitPrice", displayName: "unitPrice", size: 80 },
    { name: "unitsInStock", displayName: "unitsInStock" },
    { name: "unitsOnOrder", displayName: "unitsOnOrder", size: 80 },
    { name: "reorderLevel", displayName: "reorderLevel", size: 80 },
    { name: "discontinued", displayName: "discontinued", cellType: new GC.Spread.Sheets.CellTypes.CheckBox(), size: 80 },
    { name: "Category", displayName: "categoryId", cellType: combo,  size: 100},
];
sheet.bindColumns(colInfos);

如此一來我們在頁面上看到的就不是類別的ID了，而是類別的名稱

格式化數(shù)據(jù)

對于測量計算行業(yè)的開發(fā)人員來說，對于數(shù)據(jù)的精確是有規(guī)定的，即使給的數(shù)據(jù)中不存在小數(shù)，但是頁面上展示數(shù)據(jù)時也是需要格式化成規(guī)定的小數(shù)位，而對此我們只要在數(shù)據(jù)綁定時為列信息添加格式化的信息即可

這里我們可以將Price設置為兩位小數(shù)為例，只要添加一條formatter參數(shù)即可：

var colInfos = [
    { name: "productId", displayName: "productId" },
    { name: "productName", displayName: "productName", size: 100 },
    { name: "Price", displayName: "unitPrice",formatter: "[$￥-804]#,##0.00", size: 80 },
    { name: "unitsInStock", displayName: "unitsInStock" },
    { name: "unitsOnOrder", displayName: "unitsOnOrder", size: 80 },
    { name: "reorderLevel", displayName: "reorderLevel", size: 80 },
    { name: "discontinued", displayName: "discontinued", cellType: new GC.Spread.Sheets.CellTypes.CheckBox(), size: 80 },
    { name: "categoryId", displayName: "categoryId", size: 100},
];
sheet.bindColumns(colInfos);

結果如下所示：

數(shù)據(jù)驗證

我們要做的下一件事是向我們的應用程序添加驗證。SpreadJS中數(shù)據(jù)驗證是存在繼承性的，上一行同一列的單元格存在數(shù)據(jù)驗證，那么下一個行同一位置就會繼承上一行的數(shù)據(jù)驗證效果。

因此我們可以參考這篇學習指南來實現(xiàn)數(shù)據(jù)展示的同時按照我們設定的標準進行數(shù)據(jù)的驗證：

spread.options.highlightInvalidData = true;
var dv = GC.Spread.Sheets.DataValidation.createNumberValidator(GC.Spread.Sheets.ConditionalFormatting.ComparisonOperators.greaterThan, "11");
dv.showInputMessage(true);
dv.inputMessage("Units too low and none on order!");
dv.inputTitle("tip");
activeSheet.setDataValidator(0, 4, 1,1,dv,GC.Spread.Sheets.SheetArea.viewport);

在此驗證處理程序中，我們查看unitsInStock 以確定是否應訂購新單位。我們確保該商品不會停產；如果unitsInStock低于reorderLevel（并且unitsOnOrder為0），我們會顯示錯誤消息。

后記

GraphQL 是管理 JavaScript 應用程序中數(shù)據(jù)的優(yōu)秀工具。它與SpreadJS配合得很好，尤其是我們的數(shù)據(jù)綁定功能組件。本教程展示了 GraphQL 和 SpreadJS如何簡單地構建應用程序。 GraphQL 和 SpreadJS都有更多功能可供探索，因此您可以做的事情遠遠超出了這個示例。

到此這篇關于使用JavaScript 將數(shù)據(jù)網(wǎng)格綁定到 GraphQL 服務的操作方法的文章就介紹到這了,更多相關js使用 GraphQL內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: