本文旨在解决在浏览器环境（客户端脚本）中直接使用 `@replit/database` 导致 `ReferenceError: database is not defined` 的问题。我们将深入探讨 `@replit/database` 的运行环境，阐明其作为 Node.js 模块的特性，并提供一套完整的解决方案，包括在 Node.js 服务器端正确安装、导入和初始化数据库，以及如何通过构建 API 接口实现客户端与服务器端数据库的安全交互。
理解 @replit/database 的运行环境
@replit/database 是一个专门为 Node.js 环境设计的模块，用于在 Replit 平台上与内置的键值存储数据库进行交互。当你在浏览器中尝试直接使用 require 语句导入或实例化 database 对象时，会遇到 ReferenceError: database is not defined 错误。这是因为浏览器环境不原生支持 Node.js 的模块加载机制（require）以及像 @replit/database 这样的服务器端库。
客户端（浏览器）脚本和服务器端（Node.js）脚本运行在不同的环境中。客户端脚本负责用户界面和与服务器的通信，而服务器端脚本则处理业务逻辑、数据存储和API请求。因此，数据库操作，尤其是涉及到敏感数据和持久化存储的，应当始终在服务器端进行。
正确安装与导入 @replit/database
要在 Node.js 项目中使用 @replit/database，首先需要在项目目录下通过 npm 进行安装。
安装依赖
打开你的终端或 Replit Shell，执行以下命令：
npm install @replit/database
在 Node.js 服务器中导入和初始化
安装完成后，你可以在你的 Node.js 服务器文件中（例如 app.js 或 server.js）导入并实例化数据库。请注意，为了遵循 JavaScript 的命名约定，通常将构造函数命名为首字母大写，例如 Database。
const Database = require("@replit/database"); // 导入 Database 构造函数
const usersDb = new Database(); // 实例化数据库对象在 Node.js 服务器中集成数据库操作
由于 @replit/database 只能在服务器端使用，客户端脚本不能直接访问它。正确的做法是，服务器端提供 API 接口（例如 RESTful API），客户端通过 HTTP 请求（如 fetch 或 XMLHttpRequest）与这些接口进行交互。服务器接收到请求后，再使用 usersDb 对象执行相应的数据库操作。
以下是一个修正后的服务器端 app.js 示例，演示如何处理用户注册和登录请求：
const express = require('express');
const path = require('path');
const Database = require("@replit/database"); // 导入 @replit/database
const app = express();
// 初始化数据库实例
const usersDb = new Database();
// 配置 Express 中间件
app.use(express.json()); // 用于解析请求体中的 JSON 数据
app.use(express.urlencoded({ extended: true })); // 用于解析 URL-encoded 数据
// 路由：提供前端页面
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'pages', 'index.html'));
});
// --- API 接口 ---
// 用户注册 API
app.post('/signup', async (req, res) => {
const { username, password, email, data } = req.body;
if (!username || !password || !email) {
return res.status(400).json({ message: 'Username, password, and email are required.' });
}
try {
const existingUser = await usersDb.get(username);
if (existingUser) {
return res.status(409).json({ message: 'Username already exists.' });
}
// 存储用户数据，实际应用中密码应进行哈希处理
await usersDb.set(username, { username, password, email, additionalData: data });
res.status(201).json({ message: 'User registered successfully.' });
} catch (error) {
console.error('Signup error:', error);
res.status(500).json({ message: 'Server error during signup.' });
}
});
// 用户登录 API
app.post('/signin', async (req, res) => {
const { username, password } = req.body;
if (!username || !password) {
return res.status(400).json({ message: 'Username and password are required.' });
}
try {
const userData = await usersDb.get(username);
if (!userData) {
return res.status(401).json({ message: 'Invalid username or password.' });
}
// 实际应用中，这里应该比较哈希后的密码
if (userData.password === password) {
// 登录成功，可以返回用户信息或认证令牌
res.status(200).json({ message: 'Login successful.', user: { username: userData.username, email: userData.email } });
} else {
res.status(401).json({ message: 'Invalid username or password.' });
}
} catch (error) {
console.error('Signin error:', error);
res.status(500).json({ message: 'Server error during signin.' });
}
});
// 启动服务器
const PORT = 3000;
app.listen(PORT, () => {
console.log(`Server started on http://localhost:${PORT}`);
});客户端脚本与服务器交互
在客户端（浏览器中运行的 db.js 或直接嵌入在 index.html 中的脚本），你不再直接操作 database 对象，而是通过 fetch API 向服务器端定义的 /signup 和 /signin 接口发送请求。
以下是一个修正后的客户端 db.js 示例：
// 注意：这个文件应该在浏览器中运行，不能包含 Node.js 的 require 语句
async function signUp(username, password, email, data) {
try {
const response = await fetch('/signup', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ username, password, email, data }),
});
const result = await response.json();
if (response.ok) {
console.log('Sign up successful:', result.message);
return true;
} else {
console.error('Sign up failed:', result.message);
return false;
}
} catch (error) {
console.error('Error during sign up:', error);
return false;
}
}
async function signIn(username, password) {
try {
const response = await fetch('/signin', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ username, password }),
});
const result = await response.json();
if (response.ok) {
console.log('Sign in successful:', result.message, 'User:', result.user);
return result.user; // 返回用户信息
} else {
console.error('Sign in failed:', result.message);
return null;
}
} catch (error) {
console.error('Error during sign in:', error);
return null;
}
}
// 示例调用 (可以在 index.html 中触发)
// document.addEventListener('DOMContentLoaded', () => {
// // 注册用户
// signUp("testuser", "testpass", "test@example.com", "some_data")
// .then(success => {
// if (success) {
// // 登录用户
// signIn("testuser", "testpass");
// }
// });
// });在 index.html 中，你只需要像往常一样引入这个客户端脚本：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homepage</title>
</head>
<body>
<h1>Welcome to the Homepage!</h1>
<!-- 你的其他HTML内容 -->
<script src="/db.js"></script>
</body>
</html>请注意，app.get('/database', ...) 路由在新的架构中不再需要，因为 db.js 应该作为静态文件直接提供或通过 script 标签引入。如果 db.js 包含需要服务器动态处理的内容，那么它就不应该直接在浏览器中运行，而应该被重构。
最佳实践与注意事项
- 客户端-服务器分离： 始终将数据库操作限制在服务器端。客户端只负责发送请求和显示数据。
-
数据安全：
- 密码哈希： 在实际应用中，绝不能明文存储用户密码。在将密码存入数据库之前，务必使用 bcrypt 等库进行哈希处理。
- 输入验证： 在服务器端对所有来自客户端的输入进行严格验证，以防止注入攻击和不正确的数据。
- 认证与授权： 实现适当的用户认证（例如，使用 JWT）和授权机制，确保只有授权用户才能访问特定资源。
- 错误处理： 服务器端和客户端都应包含健壮的错误处理机制，以便在出现问题时能够优雅地处理并向用户提供有用的反馈。
- Replit Secrets： 如果你的数据库操作涉及到敏感信息（如 API 密钥），应使用 Replit 的 Secrets 功能来存储，并在服务器端通过 process.env.SECRET_NAME 访问，避免将其硬编码在代码中。
- 异步操作： @replit/database 的操作是异步的，因此在服务器端处理数据库请求时，请始终使用 async/await 或 .then().catch() 来正确处理 Promise。
总结
@replit/database 是一个强大的 Node.js 模块，用于 Replit 上的数据持久化。然而，它必须在服务器端（Node.js 环境）进行初始化和使用。为了让客户端脚本能够与数据库交互，你需要构建一个服务器端 API，客户端通过 HTTP 请求调用这些 API。这种客户端-服务器架构不仅是正确使用 @replit/database 的方式，也是构建安全、可扩展 Web 应用程序的基本原则。通过遵循本文提供的指南，你可以有效地在 Replit 项目中集成和使用 @replit/database。
