用Gridsome开始使用电子表格生活~尝试从电子表格中获取数据~

2 年 ago

清, 扬

3 minutes

目标

我想把这种类型的电子表格数据显示在网站上。

行动环境 zuò

macOS 10.14.6

项目创建和准备

Gridsome

vue.jsの静的サイトジェネレーター

gridsome-source-google-sheets

GridsomeのプラグインでスプレッドシートのデータをGraphQLで取得できるようになります。

在开始之前，为了了解GraphQL是什么，我参考了下面的文章。非常感谢。

GraphQLの全体像とWebApp開発のこれから

1. 安装 Gridsome 命令行界面工具

# yarn を使う場合
$ yarn global add @gridsome/cli
# npm を使う場合
$ npm install --global @gridsome/cli

2. 创建项目

$ gridsome create sheetSample
$ cd  sheetSample

3. 網站顯示

$ gridsome develop

一旦打开网站并正常显示，就表示可以了。

静态文件将生成在 /dist 文件夹中。

$ gridsome build

需要安装插件来使用电子表格的数据。

# yarn を使う場合
yarn add gridsome-source-google-sheets
# npm を使う場合
npm install gridsome-source-google-sheets

准备sheetId和apiKey。

module.exports = {
  siteName: 'Gridsome',
  plugins: [
    {
      use: 'gridsome-source-google-sheets',
      options: {
        sheetId: 'GOOGLE_SHEET_ID', 
        apiKey: 'GOOGLE_API_KEY',
        // type: 'TYPE_NAME', //Optional - default is googleSheet. Used for graphql queries.
      }
    }
  ]
}

准备好 sheetId 和 apiKey。

设置apiKey

启用Google Sheets API

将创建的API密钥粘贴到gridsome.config.js文件的GOOGLE_SHEET_ID部分。

設置sheetId

我会生成一个分享链接给你，用来共享这个创建好的电子表格。

我将确认电子表格的URL。

https://docs.google.com/spreadsheets/d/GOOGLE_SHEET_ID/edit#gid=0

将”GOOGLE_SHEET_ID”部分替换为”sheetId”。
将获取到的sheetId粘贴到gridsome.config.js文件中的”GOOGLE_SHEET_ID”部分。

从电子表格中提取数据

尝试使用GraphQL获取数据。

GraphQL是一种用于构建API的查询语言，由Facebook于2012年开发。与传统的RESTful架构相比，GraphQL具有更高的灵活性和效率。它允许客户端明确地声明需要的数据，并以单个请求的方式获取。GraphQL的优势包括不需要多个请求和响应，支持数据类型和关联查询等。因此，GraphQL能够提供更好的开发体验和更高效的数据交互。

$ gridsome develop

让我们访问这里吧

让我们创建并确认在实际访问网站时使用的查询。

query {
  allGoogleSheet  {
    edges {
      node  {
        id
        title
        description
      }
    }
  }
}

执行此操作将获得以下结果。

{
  "data": {
    "allGoogleSheet": {
      "edges": [
        {
          "node": {
            "id": "11",
            "title": "あああああ11",
            "description": "テストテスト11"
          }
        },
        {
          "node": {
            "id": "10",
            "title": "あああああ10",
            "description": "テストテスト10"
          }
        },
        {
          "node": {
            "id": "9",
            "title": "あああああ9",
            "description": "テストテスト9"
          }
        },
        {
          "node": {
            "id": "8",
            "title": "あああああ8",
            "description": "テストテスト8"
          }
        },
        {
          "node": {
            "id": "7",
            "title": "あああああ7",
            "description": "テストテスト7"
          }
        },

将电子表格数据显示在网站上。

在这个块中，您将填写所需的查询（即在“GraphQL中尝试获取数据”中创建的查询）。

<template>
  <Layout>
    <table border="1">
      <thead>
        <tr>
          <th>id</th>
          <th>title</th>
          <th>description</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="page in $page.allGoogleSheet.edges" :key="page.id">
          <td>{{ page.node.id }}</td>
          <td>{{ page.node.title }}</td>
          <td>{{ page.node.description }}</td>
        </tr>
      </tbody>
    </table>
  </Layout>
</template>

<page-query>
query {
  allGoogleSheet  {
    edges {
      node  {
        id
        title
        description
      }
    }
  }
}
</page-query>

结果 (jié guǒ)

我能够表达出来。

由于ID不是按降序，而是按升序排列，所以我将尝试按升序排列。

query {
  allGoogleSheet(order: ASC, sortBy: "id")  {
    edges {
      node  {
        id
        title
        description
      }
    }
  }
}

排列已改变了呢！

尝试使用模板

模板 – Gridsome

让我们使用模板来创建常见的详细页面。

创建模板

<template>
  <layout>
    <div>{{$page.googleSheet.title}}</div>
    <div>{{$page.googleSheet.description}}</div>
  </layout>
</template>

<page-query>
query Post ($path: String!) {
  googleSheet (path: $path) {
    title
    description
  }
}
</page-query>

module.exports = {
  siteName: 'Gridsome',
  plugins: [
    {
      use: 'gridsome-source-google-sheets',
      options: {
        sheetId: 'GOOGLE_SHEET_ID',
        apiKey: 'GOOGLE_API_KEY',
        // type: 'TYPE_NAME', //Optional - default is googleSheet. Used for graphql queries.
      }
    }
  ],
  templates: {
    googleSheet: [
      {
        path: '/:id',
        component: './src/templates/googleSheet.vue'
      }
    ]
  }
}

指定template的路径是通过指定path为/:id来实现的。

当访问 http://localhost:8080/:id 时，会获取 id 为 1 的数据并显示在模板上。

2. 创建链接

连接-格里德桑

<template>
  <Layout>
    <table border="1">
      <thead>
        <tr>
          <th>id</th>
          <th>title</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="page in $page.allGoogleSheet.edges" :key="page.id">
          <td><g-link :to="page.node.id">{{ page.node.id }}</g-link></td>
          <td>{{ page.node.title }}</td>
        </tr>
      </tbody>
    </table>
  </Layout>
</template>

<page-query>
query {
  allGoogleSheet(order: ASC, sortBy: "id")  {
    edges {
      node  {
        id
        title
        description
      }
    }
  }
}
</page-query>

现在，当点击ID链接时，会显示相应的标题和详细信息。

最终

可以试试用Headless CMS和JamStack来制作博客系统。

使用 gridsome-source-google-sheets 插件可以方便地使用 Google Sheets API，通过使用 GraphQL 获取数据，这样处理起来更加简单，可以更专注于前端开发，感觉非常好。
此外，如果能在 Google Sheets 上准备好数据，我觉得可以在个人开发小规模项目或是希望快速创建一些东西的时候非常方便。

$ gridsome build

如果在生成静态网站时，它可以获取电子表格的数据并使用vercel或netlify来运行构建命令进行部署，那么似乎可以创建一个更新到最新状态且流畅舒适的网站。

因为我对Gridsome很感兴趣，所以尝试了一下使用Spreadsheet插件。

如果您能告诉我任何推荐的插件，我会非常感激。

我参考过的东西。

Introduction to GraphQL | GraphQL