Django React模板--有免费样本

方石剑
703 阅读4分钟

编码员们好!

本文介绍了如何将**Django和React捆绑在一起，并编写一个可以在多个项目中重复使用的全栈模板**。对于新手来说，Django是一个用于后台开发的领先的Python框架，而React是最流行的JS库，用于编码由Facebook支持的用户界面。为了使这篇文章更加有用，我们提供了一份带有开源全栈启动器的短名单。

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

  • 第一节：项目总览
  • 第2节：Django--简短介绍
  • 第3节：什么是React
  • 第4节：设置Django API后端
  • 第5节：使用POSTMAN测试Django API
  • 第6节：编写React UI代码与Django通信
  • 第7节：编译样本(后端和前端)

注意：所有文章资源都可以从Github下载。

React仪表板被配置为与一个简单的Django API服务器一起工作。如需支持，请随时在Discord上提出任何问题。

1# - 项目概述

在过去的几年里，Web开发已经有了很大的发展，我们可以用不同的组合和模式来编码相同的功能。例如，如果我们的目标是建立一个简单的单页网站，我们可以使用Wix、Gatsby、Next、Eleventy（11ty），或者老式的Php与jQuery捆绑。 可能性是无限的，最终的堆栈取决于许多因素：我们所知道的技术，项目预算，以及学习新东西的意愿。 在这篇文章中，我们将重点介绍一个现代的堆栈，它使用Django作为后台技术，并使用React驱动的简单UI。

该产品将使用一个 "两层 "架构，React前端通过一个由Django驱动的简单API与后端进行通信。

它是如何工作的

  • Django API暴露了一个简单的认证接口。
  • React UI由浏览器启动和加载
  • UI在启动时启动登录，并对用户进行认证。
  • 服务器获得用户的证书并允许登录
  • React得到服务器的响应
  • 用户可以访问React UI的私人页面。

要完成本教程，工作站必须安装一些工具和库，用于编辑和编译这个基本的模板。让我们从必须安装的开始。

  • Node JS- 由React UI使用
  • Python v3- Django使用的语言
  • GIT- 命令行版本控制工具
  • PIP- 由Python3提供的官方软件包管理器
  • NPM- 一个用于Javascript的软件包管理器
  • (可选)Yarn- 一个比NPM更快的替代品
  • (可选)VsCode或 Atom - 现代代码编辑器

在这个过程中，能够使用系统控制台工作可能是一个加分项。

2# -什么是Django

Django是一个现代的网络框架，它具有 "包含电池 "的概念，这意味着它为现代网络开发中需要的许多常见功能提供了模块和库。

  • 基于会话的认证
  • 通过一个强大的ORM进行抽象的数据库访问
  • 内置的安全模式
  • 辅助工具：表单、模型和数据验证

Django可以通过多种方式安装，最推荐的方式是使用PIP，即官方的Python软件包管理器。下面是带有命令的完整列表。

步骤#1- 创建一个虚拟环境

$ # Create the environment
$ virtualenv env 
$
$ # Activate the virtual environment
$ source env/bin/activate

第2步- 安装最新的Django版本

$ pip install Django

步骤#3- 建立一个基本的Django项目

$ mkdir hellodjango 
$ cd hellodjango 
$
$ django-admin startproject config .

第4步 - 启动该项目

$ python manage.py runserver

如果一切顺利，我们应该在访问http://localhost:8000 ，看到默认的Django闪屏。

Django - Default Starter Page.

3# -什么是React

React是一个开源的前端JavaScript库，用于构建用户界面或UI组件。它由Facebook以及个人开发者和公司组成的社区维护。React可以作为开发单页或移动应用程序的基础。

另一个重要的事实是它的受欢迎程度：2021年的统计数据显示，React被用作前端开发的主要技术，超过了Vue、Angular或Svelte等其他框架。关于这个神奇的库的更多信息，请随时访问。

通过遵循官方的React教程，我们只需在终端输入几个命令，就可以搭建一个项目骨架。

第1步- 安装create-react-app（CRA）工具

$ npm install -g create-react-app

第2步- 创建React应用骨架

$ npx create-react-app reactapp

第3步 - 安装React的依赖性

$ npm run start
// OR 
$ yarn start

上述命令应该会自动打开浏览器窗口，打开React默认页面。

React App - The Default Page.

4# - 编写Django API后端代码

作为一个2003年首次发布的成熟框架，Django被称为一个完整的、batteries-included 的库。为了成功地服务于React接口，我们简单的Django服务器将使用JWT web tokens ，实现一个简单的认证服务，暴露一些基本方法。

  • /api/users/register: 创建一个新的用户
  • /api/users/login: 验证一个现有的用户
  • /api/users/logout：删除相关的JWT令牌
  • /api/users/edit - 编辑与一个注册用户相关的信息

为了尽可能地保持简单，后端服务器将使用默认的SQLite持久化和Django REST框架（DRF）来实现API节点。

在之前创建的项目中，让我们创建一个新的Django应用程序，名为 "API"。

$ cd hellodjango
$ python manage.py startapp app

startapp 命令应该创建一个新的目录api ，其结构是这样的。

api/
    __init__.py
    admin.py
    apps.py
    migrations/
        __init__.py
    models.py
    tests.py
    views.py

创建一个API接口来管理事务，通常是这样的。

  • 创建模型
  • 创建序列化器
  • 编写视图或视图集
  • 通过创建路由来注册视图集

下面是一个简单的用户模型定义。

class User(AbstractBaseUser, PermissionsMixin):
    username = models.CharField(db_index=True, max_length=255)
    email = models.EmailField(db_index=True, unique=True)
    is_active = models.BooleanField(default=True)
    date = models.DateTimeField(auto_now_add=True)

为用户模型创建序列化器

序列化器允许我们转换复杂的Django数据结构，如querysets或Python原生对象中的模型实例，可以很容易地转换JSON/XML格式，但序列化器也可以将JSON/XML序列化为原生Python。

class UserSerializer(serializers.ModelSerializer):
    date = serializers.DateTimeField(read_only=True)

    class Meta:
        model = User
        fields = ["id", "username", "email", "date"]
        read_only_field = ["id"]

编写视图集的代码--代码将只提供给Login方法（完整的代码在文章末尾有）。

API接口的路由应该是这样的。

  • /api/users/register: 创建一个新用户
  • /api/users/login: 验证一个现有的用户
  • /api/users/logout：删除相关的JWT令牌
  • /api/users/edit - 编辑一个注册用户的信息

ViewSet类带有内置的动作，如list,retrieve,create,update,destroy 。

from api.authentication.serializers import LoginSerializer

class LoginViewSet(viewsets.GenericViewSet, mixins.CreateModelMixin):
    permission_classes = (AllowAny,)
    serializer_class = LoginSerializer

    def create(self, request, *args, **kwargs):
        serializer = self.get_serializer(data=request.data)

        serializer.is_valid(raise_exception=True)

        return Response(serializer.validated_data, status=status.HTTP_200_OK)

Register the viewsets - 又称路由

from rest_framework import routers
from api.user.viewsets import UserViewSet

router = routers.SimpleRouter(trailing_slash=False)
router.register(r"edit", UserViewSet, basename="user-edit")
router.register(r"register", RegisterViewSet, basename="register")
router.register(r"login", LoginViewSet, basename="login")
router.register(r"checkSession", ActiveSessionViewSet, basename="check-session")
router.register(r"logout", LogoutViewSet, basename="logout")

urlpatterns = [
    *router.urls,
]

初学者须知

以上部分旨在提出概念，而不提供完整的实现。好奇的人可以分析整个项目，发布在Github上。如有疑问，请随时在Discord中寻求支持。

Django API Server - Cover Image.

5# - 使用POSTMAN测试Django API

一旦我们的API启动并运行，我们就可以使用POSTMAN，一个流行的免费工具来测试后端代码。我们假设Django API服务器是在5000端口启动的，并且注册方法是完整的代码和功能。

Postman - 创建一个新的集合和带有属性的请求

  • 请求。POST overhttp://localhost:5000/api/users/register
  • 头部内容类型。application-json
  • 身体数据：user/password 和email

Django API POSTMAN - Registration Header

身体内容指定了新用户的证书。

Django API POSTMAN - Registration Body

注册API响应

Django API POSTMAN - Registration Response.

在这一点上，用户在数据库中被创建，我们可以进行认证并继续我们的全栈项目。

6# - 代码React UI

本教程的React部分是在一个从Github上克隆的开源项目上编码的，React Berry Dashboard，一个由CodedThemes 提供的Material-UI模板。最初的项目，基本上是一个没有生命力的React模板，将用一些简单的功能进行改进。

  • 与Django API兼容的可用的认证流程
  • 行动。登录、注销和注册
  • 访客用户被重定向到登录页面
  • 私人页面只对已认证的用户可见。

React Berry - 从公共资源库克隆模板来源

$ git clone https://github.com/codedthemes/berry-free-react-admin-template.git
$ cd berry-free-react-admin-template

安装依赖性 - 通过NPM或Yarn

$ npm i
// OR
$ yarn

React Datta Able- 以开发模式启动项目

$ npm run start
// OR
$ npm start

React Template - Berry Dashboard.

为了编写新功能的代码，项目的依赖性应该用一些有用的库来更新。

  • Formik- 用于增强和管理注册表格
  • Axios- 用来管理与Django API的通信

一旦新的依赖项被正确安装，我们就可以继续编写代码了。

项目配置 - 后台API的URL

该应用程序将在不同的地方使用一组共同的变量导入，如登录、注销等。为了使我们的生活更轻松，在一个文件中定义所有的变量可能是一个好主意：src/config.js 。

const config = {
    basename: '',
    defaultPath: '/dashboard/default',
    ... 
    API_SERVER: 'http://localhost:5000/api/' <-- The magic line
};

export default config;

最重要的值是由API_SERVER 变量保存的，基本上是我们Flask API的地址。当项目进入生产阶段时，这个地址应该相应地更新为公共API的地址。

因为我们想重定向访客用户进行认证，所以提供了一个Guard Component来检查每个客户端请求的认证环境。

import React from 'react';
import { Redirect } from 'react-router-dom';
import { useSelector } from 'react-redux';
import { BASE_URL } from '../../config/constant';

const GuestGuard = ({ children }) => {
    const account = useSelector((state) => state.account);
    const { isLoggedIn } = account;

    if (isLoggedIn) {
        return <Redirect to={BASE_URL} />;
    }

    return <React.Fragment>{children}</React.Fragment>;
};

export default GuestGuard;

下一步是声明一个全局store ，用户的状态被保存在这里。redux-store 使用一些变量和对象以简单的方式提供这些信息。

export const initialState = {
    token: '',
    isLoggedIn: false,
    isInitialized: false,
    user: null
};

const accountReducer = (state = initialState, action) => {
    switch (action.type) {
        case ACCOUNT_INITIALIZE: {
            const { isLoggedIn, user, token } = action.payload;
            return {
                ...state,
                isLoggedIn,
                isInitialized: true,
                token,
                user
            };
        }
        case LOGIN: {
            const { user } = action.payload;
            return {
                ...state,
                isLoggedIn: true,
                user
            };
        }
        case LOGOUT: {
            return {
                ...state,
                isLoggedIn: false,
                token: '',
                user: null
            };
        }
        default: {
            return { ...state };
        }
    }
};

与当前用户相关的变量应根据会话中执行的操作进行更新。

  • 访客访问：会话用户为Null，isLoggedIn 状态为false
  • 登录：用户被后端成功认证，并且。当然，isLoggedIn 状态变为真
  • 注销：所有会话数据被删除，isLoggedIn 再次变成假的

在这一点上，React UI可以用来注册和认证用户。

7# - 编译免费样本

上述所有代码已经在Github上的两个独立项目中提供。

第1步- 编译Django API服务器

$ git clone https://github.com/app-generator/api-server-django.git
$ cd api-server-django
$
$ virtualenv -p python3 venv
$ source venv/bin/activate
$
$ pip install -r requirements.txt
$
$ python manage.py migrate
$ python manage.py runserver 5000

在这一点上，我们可以使用POSTMAN来测试产品文档中描述的认证接口。统一API接口。

第2步- 编译React模板

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

在这一点上，随着前端和后端启动和运行，我们可以开始使用这个由简单的Django API驱动的开源React UI。

Django React Boilerplate - Login Page.

谢谢你的阅读!

在这篇长文中，我们试图涵盖一个用React和Django构建的全栈模板的基本概念。更多资源，请访问。

avatar
文章
阅读
粉丝