React Django - 软仪表盘（免费产品）
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
各位程序员朋友们好！
本文介绍了一个open-source full-stack project基于Soft UI Dashboard，并使用React 和 Django作为后端框架构建的仪表盘。该产品已在 GitHub 上以 MIT 许可证发布，可用作商业仪表盘的代码库，或用于在线学习，尤其适合初学者。
该产品采用一种two-tier架构，其中React UI与后端解耦，并通过 JSON Web Tokens (JWT) 与后端通信。对于新手来说，React是一个流行的 JavaScript 库，用于编写用户界面，由 Facebook 提供支持。
- 👉 Django React Soft Dashboard - 产品页面
- 👉 Django React 软仪表盘- 在线演示
✅ Soft Dashboard React
这款免费模板由 Creative-Tim 基于 Material-UI 设计，Material-UI 是 React 最流行的组件库。Soft UI Dashboard React内置超过 70 个前端独立元素，例如按钮、输入框、导航栏、导航标签、卡片和提示框，让您可以自由选择和组合。
如果您想获取灵感或直接向客户展示一些内容，可以使用我们预置的示例页面快速启动开发。每个页面都布局合理，设计美观，形状赏心悦目。Soft UI Dashboard React 拥有您快速搭建出色项目所需的一切。
✅ 产品使用方法
这款开源产品是一个完整的全栈种子产品，它采用以下two-tier架构，涵盖从用户界面到数据库的所有层：
React Frontend（Soft UI模板）JWT Authentication用户可以注册、登录和注销Django API Backend：负责任且坚持不懈
要使用该产品，我们需要构建两个部分：API 后端和 React 前端。这两个部分已经配置完毕，可以使用兼容的设置进行工作和通信。现在让我们开始编译产品并在浏览器中使用它。
启动 Django API 后端
要成功编译后端服务器，Python3和GIT必须正确安装，并且能够在终端窗口中访问。
👉 步骤 1 - 使用 Git 克隆源代码
$ git clone https://github.com/app-generator/api-server-django.git
$ cd api-server-django
👉 步骤 2 - 创建虚拟环境
$ # Virtualenv modules installation (Unix based systems)
$ virtualenv env
$ source env/bin/activate
👉 步骤 3 - 使用以下命令安装依赖项
PIP
$ pip install -r requirements.txt
👉 步骤 4 - 启动 API 服务器
$ python manage.py migrate
$ python manage.py runserver 5000
此时，服务器应该在端口上运行5000，我们可以使用 POSTMAN 测试接口，或者curl创建和验证用户。
启动 React UI
这部分需要用到 NodeJS，版本最好在 12.x 或以上。一旦NodeJS可以通过终端访问 NodeJS，我们就可以从公共仓库克隆 React UI 并开始编译产品。
👉 步骤 1 - 使用 Git 克隆源代码
$ git clone https://github.com/app-generator/react-soft-ui-dashboard.git
$ cd react-soft-ui-dashboard
👉 步骤 2 - 通过
NPM以下方式安装依赖项：Yarn
$ npm i
// OR
$ yarn
👉 步骤 3 - 启动开发模式
$ npm run start
// OR
$ yarn start
此时，我们应该能在浏览器端口上看到登录页面3000。默认情况下，访客用户会被重定向到登录页面，因为其他所有页面（例如仪表盘、用户个人资料等）都受到保护。身份验证成功后，我们就可以访问所有私有页面了。
用户个人资料页面- React Soft 仪表盘
RTL 页面- React Soft 仪表板
感谢阅读！更多资源，请访问：
- 👉 更多React 应用- 索引由 AppSeed 提供
- 👉 免费React 仪表盘- 一篇发表在 Dev 上的热门文章
- 👉 React 用户身份验证- JWT Token 身份验证 | 博客文章