React Django - 开源的全栈式种子项目

方石剑
431 阅读2分钟

编码员们好!

本文介绍了一个开源的全栈项目，它使用了一个现代的React UI（用Chakra设计的风格），由一个简单的Django API服务器（也是免费的）驱动。Django React Purity可以作为未来终端产品的启动代码库，也可以由初学者用于电子学习活动。对于新手来说，React是一个流行的JavaScript库，用于编码Facebook的用户界面，而Django是一个领先的网络框架，用于管理后端逻辑。

谢谢你的阅读!- 内容由**App Generator**提供。

React Django - Open-Source Full-Stack Seed Project, GIF animated presentation

产品特点

这个免费的产品带有一个production-ready JWT认证流程，用于UI和后台的Docker脚本，以及一个允许业余和商业终端产品无限复制的许可。

  • 创新的Chakra UI设计
  • React, Redux, Redux-persist
  • 认证。JWT登录/注册/注销
  • 全栈就绪使用Django API服务器（开源项目）。
    • Django / DRF / SQLite3 - 一个简单的、易于使用的后端
    • 使用JWT进行认证（登录、注销、注册）
    • Docker、Unitary测试

该产品采用two-tier 模式构建，React前端与API后端在逻辑和物理上都是解耦的。要使用该产品，必须成功完成一个简短的动作列表。

  • Compile and start TheDjango API Backend
    • 默认情况下，服务器在端口5000上启动
  • Compile and start React UI
    • UI将从端口3000 开始，并期望在端口5000上有一个正在运行的后端
  • Configuration (可选)
    • 改变API端口
    • 配置React UI用于与后端通信的API端口

在Docker中启动

在本地环境中使用该产品的最快方式可能是通过Docker。该产品的两个部分都可以在Docker中使用。

步骤#1- 克隆/下载源代码

$ git clone  https://github.com/app-generator/django-react-purity-dashboard.git

第2步- 启动Django API

$ cd django-api
$ docker-compose pull   # download dependencies 
$ docker-compose build  # local set up
$ docker-compose up     # start the app

此时，API应该已经在http://localhost:5000 ，我们可以使用POSTMAN或curl ，测试界面。

第3步- 启动React UI（使用另一个终端）。

$ cd react-ui
$ docker-compose pull   # download dependencies 
$ docker-compose build  # local set up
$ docker-compose up     # start the app

一旦所有上述命令被执行，React UI 应该在浏览器中可见。默认情况下，该应用程序会重定向访客用户进行认证。
在我们注册一个新用户并登录后，所有的私人页面都可以访问。

React Django Purity - Login Page.

React Django Purity - 用户资料页面

React Django Purity - User profile Page.

React Django Purity - 主仪表板页面

React Django Purity - Main Dashboard Page

**谢谢你的阅读!**更多资源，请访问。

avatar
文章
阅读
粉丝