React Berry Fullstack - 三个版本

335 阅读2分钟

编码员们好!

本文介绍了React Berry Dashboard的全栈版本,这是一个现代的、相当流行的仪表盘模板,采用M-UI(传统的Material-UI)组件库的风格。 React模板通过不同的API服务器(都是免费的)提供简单的JWT Token认证来增强。Node JS、Flask和Django。

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

另一个重要的部分是由所有API服务器共享并由Berry Dashboard实现的统一API接口。换句话说,从Django后端API过渡到Node JS API是可能的,而不需要在React前端修改代码。关于这个概念的更多信息,请随时阅读文档或联系Discord 上的支持团队。

React Berry Dashboard - Login Page.

如何使用该代码

Berry的所有全栈版本都可以在本地环境中使用相同的工作流程进行编译和启动。

  • 下载API后端:Node JS、Flask或Django
  • 编译并启动API服务器
  • 下载并编译Berry的React前端
  • Create users,sign in ,并访问私人页面。

让我们在下面的部分构建React Berry的全栈版本,例如,使用Django API服务器。构建说明由产品文档和Github上保存的README文件提供。

构建后端API服务器

管理JWT令牌的API服务器有一个简单直观的代码库和一些不错的功能。DRF库、JWT认证、SQLite持久性和Docker部署。

Django API Server - Open-source Product.

第1步- 克隆源代码(发布在Github上)

$ 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
$
$ # Virtualenv modules installation (Windows based systems)
$ # virtualenv env
$ # .\env\Scripts\activate

第3步 - 使用PIP安装依赖项

$ pip install -r requirements.txt

4步 - 启动API服务器

$ python manage.py migrate
$ python manage.py runserver 5000 

在这一点上,Django API应该已经启动并运行,我们可以使用POSTMAN来测试服务并创建用户,或者继续前进并构建React Berry前端。

编译并启动React UI

React Berry Dashboard也发布在Github上,我们可以按照产品README中的规定,在终端窗口中输入几个命令来编译和启动UI。

第1步- 从Github克隆React Berry

$ git clone https://github.com/app-generator/react-berry-dashboard.git
$ cd react-berry-dashboard 

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

$ npm i
// OR
$ yarn

第3步 - 以开发模式启动

$ npm run start 
// OR
$ yarn start

一旦产品启动(这可能需要一段时间),我们应该能够与API服务器通信,以创建用户和验证。如果有人需要更新后端服务器地址,可以在src/config/constant.js

const config = {     ...
    API_SERVER: 'http://localhost:5000/api/' 
};

React Berry Dashboard - Icons Page

以同样的方式,我们可以使用Flask或Node JS(很快就会是Laravel)作为这个惊人的基于材料的设计的后端API服务器。

谢谢你的阅读!更多资源,请访问: