Logo

菜单

发布于 2026-01-06 2 阅读
0

我的天！用 Google Sheets 作为数据库构建一个（非常）简单的博客

我的天！用 Google Sheets 作为数据库构建一个（非常）简单的博客

在我们深入探讨之前，

链接博客的截图

链接的 Google Sheets 电子表格的屏幕截图

Google Sheets 是一款功能强大的数据存储和整理工具，理论上可以作为博客的数据库。但是，由于 Google Sheets 不符合 ACID 标准，因此不建议将其用作博客的数据库。

ACID 是原子性 (Atomicity)、一致性 (Consistency)、隔离性 (Isolation) 和持久性 (Durability) 的首字母缩写，这四个关键属性确保了数据库的数据完整性和可靠性。作为一款电子表格应用程序，Google Sheets 无法提供与符合 ACID 标准的传统数据库相同的数据完整性和可靠性。

在本教程中，我将一步一步地向您展示如何使用 Google Sheets 作为数据库轻松构建一个非常简单的博客。我们将创建一个自定义 API，用于从电子表格中获取数据、处理数据并将其显示在页面上。

谁可以学习本教程？

基本上任何对 JavaScript 和 Fetch API 的工作原理有基本了解的人都可以。

项目设置

首先，我们需要一个文本编辑器（如果系统资源不足，Notepad++ 是一个不错的选择）和一个​​ Google 帐户（显然）。

设置主 API 并将其连接到 Google Sheets

如果系统提示，请前往docs.google.com并使用您的 Google 帐户登录。

  1. 点击页面右上角的导航菜单，然后选择“工作表”。您将被引导至一个页面，在该页面上您可以点击（+）图标创建新工作表。

  2. 创建新工作表后，我们需要获取工作表 ID。获取工作表 ID 非常简单。如果您的工作表 URL 为 `<URL>` https://docs.google.com/spreadsheets/d/1AxVnqOgcu7h6rr030PtV7WIEiQRMAgYIL6uReg_x8BQ/edit#gid=0，则工作表 ID 为 `<ID>` 1AxVnqOgcu7h6rr030PtV7WIEiQRMAgYIL6uReg_x8BQ。

  3. 导航至 A1 单元格并输入“标题”。之后，点击 B1 单元格并输入“作者”。C1 单元格应显示“内容”。

  4. 好的，目前我们只有一张电子表格，其中一列用于标题，另一列用于内容。

  5. 现在我们将创建一个 API，允许我们从电子表格中检索数据并返回一个对象数组。每个对象应包含键（Title，，By以及Content一个id）。

  6. 在菜单栏中，点击“扩展”按钮，然后选择“Apps Script”。您将被重定向到一个带有代码编辑器的新标签页。

将以下函数添加到您的代码中。

function getSheetData() {
  var sheet = SpreadsheetApp.getActiveSheet();
  var data = sheet.getDataRange().getValues();
  var jsonData = [];
  for (var i = 1; i < data.length; i++) {
    var row = data[i];
    var obj = {};
    for (var j = 0; j < row.length; j++) {
      obj[sheet.getRange(1, j + 1).getValue()] = row[j];
    }
    obj["id"] = i;
    jsonData.push(obj);
  }
  return jsonData;
}
Enter fullscreen mode Exit fullscreen mode

该getSheetData()函数从电子表格的活动工作表中检索所有数据，并将其转换为对象数组，每个对象代表工作表中的一行数据。它使用两个嵌套循环遍历数据：外层循环遍历每一行，内层循环遍历该行中的每个单元格。
外层循环使用索引i来引用当前行，内层循环使用索引 j 来引用当前行的当前单元格。该sheet.getRange(1, j + 1).getValue()函数用于获取当前列的标题值，并将其用作对象的键。

现在，我们需要一个函数来接收 GET 请求，调用该getSheetData()函数，并使用该ContentService.createTextOutput()方法创建包含 JSON 数据的文本输出，然后使用转换方法将其转换为文本JSON.stringify()。该setMimeType()方法用于将响应的 MIME 类型设置为“application/json”，以便浏览器能够将响应解释为 JSON。请将以下函数添加到您的代码中。

function doGet(e) {
  var jsonData = getSheetData();
  return ContentService.createTextOutput(JSON.stringify(jsonData)).setMimeType(ContentService.MimeType.JSON);
}
Enter fullscreen mode Exit fullscreen mode

最终的代码应该类似于这样：

function getSheetData() {
  var sheet = SpreadsheetApp.getActiveSheet();
  var data = sheet.getDataRange().getValues();
  var jsonData = [];
  for (var i = 1; i < data.length; i++) {
    var row = data[i];
    var obj = {};
    for (var j = 0; j < row.length; j++) {
      obj[sheet.getRange(1, j + 1).getValue()] = row[j];
    }
    obj["id"] = i;
    jsonData.push(obj);
  }
  return jsonData;
}

function doGet(e) {
  var jsonData = getSheetData();
  return ContentService.createTextOutput(JSON.stringify(jsonData)).setMimeType(ContentService.MimeType.JSON);
}
Enter fullscreen mode Exit fullscreen mode

部署我们的 API

  • 点击顶部菜单中的“部署”按钮
  • 屏幕上应该会出现一个对话框。点击“设置”图标，然后选择“Web应用程序”。再次点击该图标，然后选择“库”。
  • 在“以……身份运行应用”字段中，选择您的 Google 帐户。
  • 在“谁可以访问该应用程序”字段中，选择“任何人”。
  • 点击“部署”按钮。
  • 此时会弹出一个对话框，显示“当前 Web 应用 URL”，您可以使用该 URL 访问您的 Web 应用。该 Web 应用 URL 即为 API 链接。

注意：
如果您是第一次使用 Apps Script，可能会看到一个菜单，提示“此 Web 应用需要您授权访问您的数据”。点击“授权访问”。此时会弹出一个窗口，要求您使用 Google 帐户登录。您会看到一个警告屏幕，提示 Google 尚未验证此 Web 应用。点击“高级”按钮，然后点击“转到项目名称”链接。接下来，您会看到一个授权屏幕，必须点击“允许”才能继续。

当您将 Google Apps Script 部署为 Web 应用时，它将通过一个唯一的 URL 访问。此 URL 的格式由部署配置决定。默认情况下，URL 的格式如下：https://script.google.com/macros/s/{SCRIPT_ID}/exec
其中 SCRIPT_ID 是脚本的唯一标识符。您可以在 Apps Script 编辑器中找到 SCRIPT_ID，方法是单击窗口右上角的“项目设置”按钮，它会在页面右上角的“项目 ID”标题下方显示。

设置另一个用于获取行数的 API

在这个项目中，我们需要另一个 API 来获取电子表格中的行数。由于每一行代表一篇博文，博文总数就是 2 行the number of rows in the spreadsheet - 1。所以，如果我们的电子表格包含三行，则意味着有两篇博文，因为第一行的每个单元格都包含每一列的标题。就像之前一样，前往“扩展”>“Apps Script”。

  1. 在侧边栏中，导航至“文件”，然后单击 (+) 图标创建新文件。给文件命名length.gs（或者随意命名）。将以下代码粘贴到编辑器中。
function doGet(e) {

  var spreadsheet = SpreadsheetApp.openById(SHEET_ID);

  var sheet = spreadsheet.getActiveSheet();

  var rowCount = sheet.getLastRow();

  return ContentService.createTextOutput(rowCount);
}
Enter fullscreen mode Exit fullscreen mode

此脚本使用SpreadsheetAppGoogle Apps Script API 中的类来访问由其 ID 标识的特定电子表格。

然后，它使用 ID 打开电子表格SpreadsheetApp.openById(SHEET_ID)，并使用方法检索活动工作表getActiveSheet()。之后，它使用方法检索工作表中的行数getLastRow()。最后，它使用方法将行数作为 GET 请求的响应返回ContentService.createTextOutput(rowCount)。

填充电子表格单元格

现在，我们的 API 已经配置完毕，是时候开始在电子表格中输入一些数据了。第一Title列用于存储博客文章的标题，第二Content列用于存储文章的实际内容。By第三列用于输入博客作者的姓名。

您可以在内容列中自由添加 HTML 标签。Google 表格的一大优点是，我们无需担心数据保存问题，因为所有内容都会自动同步到您的 Google 云端硬盘帐户。

设置前端

前端的搭建相当简单。你可以使用原生 JavaScript 或你选择的框架，不过本教程将使用原生 JavaScript。该numberOfPosts()函数负责通过我们的第二个 API 获取帖子数量，而该render()函数则负责借助我们的主 API 获取实际的帖子。

以下是JavaScript代码。

图片描述

以下是 CSS 代码。

图片描述

最后，这是HTML代码。

HTML 代码

为什么会有人想这么做？

由于 Google Sheets 易于使用且可随时随地访问，并具备数据验证、条件格式和数据透视表等高级功能，因此对于资源有限的小型项目或团队来说，Google Sheets 也是一个不错的选择。

GitHub 仓库

如有任何疑问，请在评论区留言，我将乐意解答。

文章来源：https://dev.to/daviduzondu/building-a-really-simple-blog-with-google-sheets-as-the-database-4db4
无服务器架构：隐性成本、锁定风险和...
什么是 React 快速刷新？