如何实现网站文本框内容与Google Sheets的存在性校验系统？

作为编程新手，你可以按以下分步落地、从简到繁的方式实现需求：

1. 先完成Google Sheets的基础配置 #

• 打开目标表格，点击右上角「分享」，设置权限为「知道链接的任何人可查看」（后续可换成更安全的服务账号权限，先从简单模式入手）。
• 提取表格ID：从Sheets URL里复制https://docs.google.com/spreadsheets/d/[表格ID]/edit中d/和/edit之间的字符串。
• 确定校验范围：比如要检查输入内容是否在「Sheet1」的A列里，范围就是Sheet1!A:A。

2. 前端页面实现（HTML+JavaScript） #

先写一个极简页面，包含输入框、校验按钮和结果展示区：

<!DOCTYPE html>
<html>
<head>
    <title>内容校验工具</title>
</head>
<body>
    <input type="text" id="inputText" placeholder="输入要校验的内容">
    <button onclick="checkContent()">校验</button>
    <div id="result"></div>

    <script>
        async function checkContent() {
            const input = document.getElementById('inputText').value.trim();
            const resultDiv = document.getElementById('result');
            
            if (!input) {
                resultDiv.textContent = '请输入内容';
                return;
            }

            // 发送请求到后端接口
            try {
                const response = await fetch('http://localhost:3000/check', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ content: input })
                });
                const data = await response.json();
                
                resultDiv.textContent = data.exists ? '✅ 内容存在于表格中' : '❌ 内容未找到';
            } catch (error) {
                resultDiv.textContent = '⚠️ 校验失败，请稍后重试';
                console.error(error);
            }
        }
    </script>
</body>
</html>

3. 后端服务搭建（Node.js/Express，新手友好） #

后端负责和Google Sheets交互，避免前端直接调用API的跨域、权限问题：

1. 安装依赖：

npm init -y
npm install express google-spreadsheet cors

2. 准备Google服务账号密钥：
   • 去Google Cloud Console创建新项目，启用「Google Sheets API」。
   • 创建服务账号，下载密钥JSON文件，重命名为credentials.json放在项目根目录。
   • 回到Google Sheets，把服务账号的邮箱（密钥JSON里的client_email）添加为表格的查看者。
3. 编写后端代码（server.js）：

const express = require('express');
const { GoogleSpreadsheet } = require('google-spreadsheet');
const cors = require('cors');
const app = express();
const PORT = 3000;

// 允许跨域请求
app.use(cors());
app.use(express.json());

// 配置Google Sheets信息
const SHEET_ID = '你的表格ID';
const CREDENTIALS_PATH = './credentials.json';

// 校验内容的接口
app.post('/check', async (req, res) => {
    const { content } = req.body;
    if (!content) {
        return res.status(400).json({ exists: false });
    }

    try {
        // 连接表格
        const doc = new GoogleSpreadsheet(SHEET_ID);
        await doc.useServiceAccountAuth(require(CREDENTIALS_PATH));
        await doc.loadInfo();
        
        // 获取目标工作表
        const sheet = doc.sheetsByTitle['Sheet1'];
        // 加载所有行数据
        const rows = await sheet.getRows();
        
        // 检查内容是否存在（_rawData[0]对应A列，可根据你的列调整索引）
        const exists = rows.some(row => row._rawData[0] === content);
        res.json({ exists });
    } catch (error) {
        console.error('Sheets请求失败:', error);
        res.status(500).json({ exists: false });
    }
});

app.listen(PORT, () => {
    console.log(`服务运行在 http://localhost:${PORT}`);
});

4. 运行测试 #

• 启动后端：node server.js
• 打开前端HTML页面，输入内容点击校验，即可看到结果。

新手避坑提示 #

• 跨域问题：如果前端和后端不在同一域名下，必须用cors中间件允许跨域，或者部署到同一服务器。
• 权限问题：确保服务账号邮箱有表格的查看权限，否则会触发权限错误。
• 性能优化：如果表格数据量很大，不要每次加载所有行，可以用sheet.getRange()缩小查询范围，提升校验速度。

内容的提问来源于stack exchange，提问作者0xRa1n