本文旨在解决在浏览器环境（客户端脚本）中直接使用 `@replit/database` 导致 `ReferenceError: database is not defined` 的问题。我们将深入探讨 `@replit/database` 的运行环境，阐明其作为 Node.js 模块的特性，并提供一套完整的解决方案，包括在 Node.js 服务器端正确安装、导入和初始化数据库，以及如何通过构建 API 接口实现客户端与服务器端数据库的安全交互。
@replit/database 是一个专门为 Node.js 环境设计的模块，用于在 Replit 平台上与内置的键值存储数据库进行交互。当你在浏览器中尝试直接使用 require 语句导入或实例化 database 对象时，会遇到 ReferenceError: database is not defined 错误。这是因为浏览器环境不原生支持 Node.js 的模块加载机制（require）以及像 @replit/database 这样的服务器端库。
客户端（浏览器）脚本和服务器端（Node.js）脚本运行在不同的环境中。客户端脚本负责用户界面和与服务器的通信，而服务器端脚本则处理业务逻辑、数据存储和API请求。因此，数据库操作，尤其是涉及到敏感数据和持久化存储的，应当始终在服务器端进行。
要在 Node.js 项目中使用 @replit/database，首先需要在项目目录下通过 npm 进行安装。
打开你的终端或 Replit Shell，执行以下命令：
npm install @replit/database
安装完成后，你可以在你的 Node.js 服务器文件中（例如 app.js 或 server.js）导入并实例化数据库。请注意，为了遵循 JavaScript 的命名约定，通常将构造函数命名为首字母大写，例如 Database。
const Database = require("@replit/database"); // 导入 Database 构造函数
const usersDb = new Database(); // 实例化数据库对象由于 @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 包含需要服务器动态处理的内容，那么它就不应该直接在浏览器中运行，而应该被重构。
@replit/database 是一个强大的 Node.js 模块，用于 Replit 上的数据持久化。然而，它必须在服务器端（Node.js 环境）进行初始化和使用。为了让客户端脚本能够与数据库交互，你需要构建一个服务器端 API，客户端通过 HTTP 请求调用这些 API。这种客户端-服务器架构不仅是正确使用 @replit/database 的方式，也是构建安全、可扩展 Web 应用程序的基本原则。通过遵循本文提供的指南，你可以有效地在 Replit 项目中集成和使用 @replit/database。
以上就是在客户端脚本中正确初始化和使用 @replit/database的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
106
收藏
