Logo

菜单

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

React Material Dashboard - 全栈版本 DEV's Worldwide Show and Tell Challenge Presented by Mux: Pitch Your Projects!

React Material 控制面板 - 全栈版本

由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！

各位程序员好，

本文介绍React Material Dashboard的全栈版本，这是一款由 Creative-Tim 精心打造的高级设计，现已支持多种 API 后端服务器：Node.js、Flask 和 Django。该用户界面预配置了 JWT 身份验证，并采用统一 API 接口，使其能够兼容多种后端：Node.js、Flask 和 Django（FASTapi 和 Laravel 即将推出）。

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

全栈 React Material 控制面板 - 小部件页面。

产品特性

该产品旨在帮助开发者跳过基础知识，更快地上手一个全新的全栈产品，该产品已集成身份验证功能，并拥有像素级精细的用户界面和可直接用于生产环境的后端。这款全栈产品的独特之处在于它兼容多个服务器上的 JSON API：

  • Node.js API：TypeScript、灵活的持久化方案（SQLite、Mongo）、TypeORM、验证
  • Django API：基于 DRF、SQLite 和 Docker 的 JWT 身份验证
  • Flask API：基于 Flask-JWT-extended、SQL-Alchemy 和 Docker 构建。
  • 即将推出的 API：FASTapi、Laravel API

默认情况下，用户界面会将访客用户重定向到登录页面。用户通过身份验证后，所有私有页面都会解锁。

已实现 JWT 身份验证流程：登录、注销、注册。

全栈 React Material 控制面板 - 登录页面。

如何使用该产品

全栈 React Material Dashboard采用两层架构构建，其中 UI 与后端 API 服务器解耦，并通过 JWT 令牌保护的请求进行通信。推荐的入门方法是按照以下简单步骤进行设置：

  • 步骤一：构建并启动后端服务器
  • 步骤二：构建并启动用户界面
  • 通过注册页面创建新用户
  • 验证身份并访问私人页面
  • 在现有代码库的基础上添加你的魔法。

启动后端服务器

如前所述，该用户界面配置为可与多个共享通用 API 接口的后端服务器配合使用，例如 Django、Node.js 和 Flask。根据您的许可证（免费或商业版），系统将授予您访问所请求 API 服务器的权限。在本页面中，我们将编译并启动免费版的Node.js API（开源产品）。

步骤 1 - 克隆源文件

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

步骤二：通过 NPM 或 Yarn 安装依赖项

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

步骤 3 - 运行 SQLite 迁移并创建所需的表

$ yarn typeorm migration:run
Enter fullscreen mode Exit fullscreen mode

步骤 4 - 启动 API 服务器 - 开发模式

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

API 使用的 API 接口是一个简单的 JWT 身份验证层，它公开以下方法：

  • 用户 API：
    • /api/users/register创建新用户
    • /api/users/login验证现有用户
    • /api/users/logout删除关联的 JWT 令牌
    • /api/users/checkSession检查现有 JWT 令牌的有效性
    • /api/users/edit- 更新与注册用户相关的信息

此时，后端 API 应该已经启动并运行在地址上：http://localhost:5000我们可以继续进行设置并构建 React UI。

启动 React UI

React Material Dashboard是一款商业产品，因此需要获得许可才能访问源代码。如果您没有许可，请访问产品页面并购买。

步骤一：克隆项目

$ git clone https://github.com/app-generator/priv-react-material-dashboard-pro.git
$ cd priv-react-material-dashboard-pro
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 Material 控制面板 - 定价卡片页面。

后端集成

后端 API 服务器地址保存在src/config/constant.js.

export const API_SERVER = "http://localhost:5000/api/";
Enter fullscreen mode Exit fullscreen mode

前端 API 已创建于src/api/auth.js。

const axios = Axios.create({
    baseURL: `${baseURL}/api`,
    headers: { "Content-Type": "application/json" },
});
Enter fullscreen mode Exit fullscreen mode

至此，这款简易full-stack产品应该已经上线并可供使用，用于创建和验证新用户。如需更多资源和支持，请访问：

文章来源：https://dev.to/sm0ke/react-material-dashboard-full-stack-version-3i8f
ES6 模板字面量简介
我为什么决定加入 Themes T...