Node JS API - 结合 React UI：Berry Dashboard

2025-06-10

Node JS API - 结合 React UI：Berry Dashboard

你好，程序员们，

本文介绍了一个使用、和构建的简单Node JS API 服务器。该产品可用于快速启动后端服务器，或仅用于教学目的。为了使本文更具实用性，我将提到一个已配置为与此 Node/Express 服务器配合使用的开源 React Dashboard。ExpressSQLiteTypescript

感谢阅读！ - 内容由App Generator提供。

（已配置为与 Node JS API 服务器通信）

React Berry Dashboard - 使用 React 和 Material UI 制作的开源全栈种子项目。

✨ 如何使用代码

如上所述，该产品的代码库简洁，任何具备 NodeJS 基础知识的人都可以在终端窗口中输入几条命令，在本地编译并启动服务器。以下是从 README 文件中提取的构建命令。在输入任何命令之前，请确保您拥有合适的Node JS版本，推荐版本为 12.x 或更高版本。另一个依赖项是启动并运行MongoDB服务器。

✨步骤＃1-克隆源代码

$ git clone https://github.com/app-generator/api-server-nodejs.git
$ cd api-server-nodejs
Enter fullscreen mode Exit fullscreen mode

✨步骤＃2-安装依赖项

$ npm i
// OR
$ yarn
Enter fullscreen mode Exit fullscreen mode

✨步骤＃2-启动 API 服务器（开发模式）

$ npm dev
// OR
$ yarn dev
Enter fullscreen mode Exit fullscreen mode

服务器启动并运行后，我们可以使用 POSTMAN 查询 API 服务器并查看响应。该服务器的 API 定义也可以在 Github 的这个位置找到。

默认情况下，我们的服务器在端口上启动，但我们可以在项目根目录中保存的文件5000中自定义该值。.env

API：

  • 注册-创建新用户
  • 登录 - 验证用户身份，成功后返回（JWT）令牌
  • 注销——终止会话
  • 检查会话 - 验证会话是否仍然处于活动状态

✨ 注册请求

使用POSTMAN我们可以轻松测试 API 服务器。让我们创建一个新用户：

编辑 URL

http://localhost:5000/api/users/register
Enter fullscreen mode Exit fullscreen mode

编辑请求正文

{
    "username":"test",
    "password":"pass", 
    "email":"test@myserver.com"
}
Enter fullscreen mode Exit fullscreen mode

如果用户创建成功，我们应该在响应字段中看到类似这样的内容：

{
    "userID": "60e7db4331173d284832a0ab",
    "msg": "The user is created"
}
Enter fullscreen mode Exit fullscreen mode

Node JS API - 在 POSTMAN 中注册 API 请求。

很简单！用类似的方法，我们可以验证用户身份或检查会话是否仍然处于活动状态。

✨ 验证用户身份（登录）

编辑网址

http://localhost:5000/api/users/login
Enter fullscreen mode Exit fullscreen mode

请求正文

{
    "password":"pass", 
    "email":"test@myserver.com"
}
Enter fullscreen mode Exit fullscreen mode

响应应包括生成的 JWT 令牌，从这一点我们可以执行请求并访问 API 公开的私有部分。

接下来该做什么？我们可以连接一个 React UI 来与我们的简单 API进行通信并验证用户身份。

✨ React Node JS Berry

这个由CodedThemes设计的开源 React Dashboard可以从产品页面下载（无需注册锁）或直接从 Github 下载。

✨步骤＃1-克隆项目

$ git clone https://github.com/app-generator/react-berry-admin-template.git
$ cd react-berry-admin-template
Enter fullscreen mode Exit fullscreen mode

✨步骤＃2 - 通过 NPM 或 yarn 安装依赖项

$ npm i
// OR
$ yarn
Enter fullscreen mode Exit fullscreen mode

✨步骤＃3 - 以开发模式启动

$ npm run start 
// OR
$ yarn start
Enter fullscreen mode Exit fullscreen mode

一旦 React UI 启动并运行，我们就可以创建和验证用户并访问网站的私人区域。

React Node JS Berry - 登录页面。

✨ React Node JS Berry - UI 图标

React Node JS Berry - UI 图标页面。

感谢阅读！欢迎在评论区留言提问。

鏂囩珷鏉ユ簮锛�https://dev.to/sm0ke/node-js-api-open-source-seed-project-hja
Devto 翻译
PREV
Node JS 初学者 - 实用指南（附示例）AWS 安全 LIVE！
NEXT
Next JS 模板