快捷導(dǎo)航

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

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

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

前言

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

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

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

簡單嘗試

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

我們用 Microsoft 的經(jīng)典 Northwind 數(shù)據(jù)庫進行測試。假設(shè)我們想要獲取產(chǎn)品列表，但我們只需要產(chǎn)品 ID 和名稱字段。我們的查詢?nèi)缦滤荆?/p>

{
  products {
    productId
    productName
  }
}

這是我們的查詢測試器中的結(jié)果：

GraphQL 就是這么簡單！

實際使用

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

我們可以參考這個簡單的應(yīng)用程序，我們將僅使用 fetch API 來調(diào)用 GraphQL 服務(wù)：https://stackblitz.com/edit/wijmo-with-graphql-lruhgx

當(dāng)然我們也可以添加更多的字段，方便我們?nèi)～@取其他自己想要的信息：

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 }}"
 })
})

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

此時我們配合一些表格類的控件，便可以將這些數(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和我們表格內(nèi)區(qū)域的映射關(guān)系就能完美的展示需要的內(nèi)容

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 調(diào)用之后，在 then()方法中轉(zhuǎn)換為 JSON 并用結(jié)果填充我們的 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ù)已經(jīng)綁定到了工作表上，且這是一種雙向綁定關(guān)系，因此一旦數(shù)據(jù)有變動，頁面的表格內(nèi)渲染的數(shù)據(jù)也會相應(yīng)的變動！

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

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

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

深入討論

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

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

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

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

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

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

現(xiàn)在我們希望將產(chǎ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è)置為兩位小數(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);

結(jié)果如下所示：

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

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

因此我們可以參考這篇學(xué)習(xí)指南來實現(xiàn)數(shù)據(jù)展示的同時按照我們設(shè)定的標(biāo)準(zhǔn)進行數(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 以確定是否應(yīng)訂購新單位。我們確保該商品不會停產(chǎn)；如果unitsInStock低于reorderLevel（并且unitsOnOrder為0），我們會顯示錯誤消息。

后記

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

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

您可能感興趣的文章: