grapher

圖形繪圖儀 (Graphical Grapher)

Get an overview of all your Grapher links and Collection2 schemas, and create queries just by clicking (with live results).

概述所有Grapher鏈接和Collection2模式，只需單擊(帶有實時結果)即可創建查詢。

View demo 查看演示 Download Source 下載源

安裝 (Installation)

meteor add herteby:graphical-grapher

用法 (Usage)

服務器 (Server)

import {initialize} from 'meteor/herteby:graphical-grapher' initialize() //exposes the methods "grapher.live" and "grapher.live_docs"

Note: although the "Bypass firewall" feature only works in development, you may want to skip initializing it in production, just so that potential attackers don't get to see your DB schema.

注意：盡管“繞過防火墻”功能僅在開發中有效，但是您可能要跳過在生產中對其進行初始化，以免潛在的攻擊者看不到您的數據庫架構。

Vue (Vue)

import {GraphicalGrapher} from 'meteor/herteby:graphical-grapher' //Add the GraphicalGrapher component to a route or template

React (React)

Graphical Grapher is built in Vue, but it also includes a React wrapper that imports Vue dynamically when it's mounted. This means that your bundle size is not affected

Graphical Grapher內置于Vue中，但它還包含一個React包裝器，該包裝器在安裝Vue時動態導入。 這意味著您的捆綁包大小不會受到影響

import {GraphicalGrapherReact} from 'meteor/herteby:graphical-grapher' //Add the GraphicalGrapherReact component to a route or render function

道具 (Props)

You can pass some props to configure Graphical Grapher. This works in both Vue and React.

您可以傳遞一些道具來配置Graphical Grapher。 這在Vue和React中都適用。

NameDefaultDescription

indent	tab character	String used to indent resulting query. You can for example set this to a string containing 2 or 4 spaces instead.
lessUsedFields	['$filter','$postFilters','$postOptions']	An array containing the fields which should be hidden unless "Show less used fields" is checked.
hideSchemalessCollections	false	If set to true, it won't show collections that lack schemas and links at all, instead of just greying them out.
singleResult	false	The initial state of "Single result"
includeCreate	true	The initial state of "Add "Collection.createQuery""

名稱 默認 描述

縮進	制表符	用于縮進結果查詢的字符串。 例如，您可以將其設置為包含2或4個空格的字符串。
lessUsedFields	['$ filter'，'$ postFilters'，'$ postOptions']	包含應隱藏的字段的數組，除非選中“顯示較少使用的字段”。
hideSchemalessCollections	假	如果設置為true，它將不顯示根本沒有架構和鏈接的集合，而只是將其灰顯。
singleResult	假	“單一結果”的初始狀態
includeCreate	真正	初始狀態為“添加“ Collection.createQuery””

Compiling .vue files

編譯.vue文件

If you want to make changes to the .vue files in this package, you will need to recompile them to .js afterwards. Just run this in the graphical-grapher folder: npm install; npx webpack

如果要更改此程序包中的.vue文件，則以后需要將它們重新編譯為.js。 只需在npm install; npx webpack -grapher文件夾中運行它即可： npm install; npx webpack npm install; npx webpack

翻譯自: https://vuejsexamples.com/get-an-overview-of-all-your-grapher-links-and-collection2-schemas/

grapher

總結

以上是生活随笔為你收集整理的grapher_概述所有Grapher链接和Collection2模式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。