如何使用Django和React构建待办事项应用程序WordPress

动态
会员
群组
论坛
资讯
Sign in
如何使用Django和React构建待办事项应用程序

admin
2021年5月19日
0 Comments
如何使用Django和React构建待办事项应用程序
介绍
在本教程中，您将使用Django和React构建一个To-Do应用程序。

React是用于开发SPA（单页应用程序）的JavaScript框架。它拥有可靠的文档和周围充满活力的生态系统。

Django是一个Python Web框架，可简化Web开发中的常见做法。Django是可靠的，AddInstaller并且拥有一个充满活力的稳定库生态系统，可满足常见的开发需求。

对于此应用程序，React充当前端或客户端框架，处理用户界面并通过对Django后端的请求获取和设置数据，Django后端是使用Django REST框架（DRF）构建的API。

在本教程的最后，您将拥有一个可以正常运行的应用程序：

注意：本教程的源代码可在GitHub上找到。

该应用程序将允许用户创建任务并将其标记为已完成或未完成。

先决条件
要遵循本教程，您需要：

为Python 3安装并设置本地编程环境
安装Node.js并创建本地开发环境
警告：本教程中提供的代码仅用于教育目的，不用于生产用途。

本教程已通过Python pipv3.9.1 ，v20.2.4，Django v3.1.6，djangorestframeworkv3.12.2，django-cors-headersv3.7.0，Node v15.8.0，npmv7.5.4，React v17.0.1和axiosv0.21.0进行了验证。

第1步-设置后端
在本部分中，您将创建一个新的项目目录并安装Django。

打开一个新的终端窗口，并运行以下命令来创建一个新的项目目录：

mkdir django-todo-react
复制

接下来，导航到目录：

cd django-todo-react
复制

现在使用pip以下命令安装Pipenv ：

pip install pipenv
复制

注意：根据您的安装，可能需要使用pip3而不是pip。

并激活一个新的虚拟环境：

pipenv shell
复制

使用Pipenv安装Django：

pipenv install django
复制

然后创建一个新项目，名为backend：

django-admin startproject backend
复制

接下来，导航到新创建的后端目录：

cd backend
复制

启动一个名为的新应用程序todo：

python manage.py startapp todo
运行迁移：

python manage.py migrate
并启动服务器：

python manage.py runserver
https://riricaf.com在您的网络浏览器中导航到：

如何使用Django和React构建待办事项应用程序
此时，您将看到Django应用程序实例成功运行。完成后，您可以停止服务器（CONTROL+C或CTRL+C）。

注册todo申请
现在，您已经完成了后端的设置，您可以开始将todo应用程序注册为已安装的应用程序，以便Django可以识别它。

backend/settings.py在您的代码编辑器中打开文件，然后将其添加todo到INSTALLED_APPS：backend / settings.py

Application definition

INSTALLED_APPS = [
‘django.contrib.admin’,
‘django.contrib.auth’,
‘django.contrib.contenttypes’,
‘django.contrib.sessions’,
‘django.contrib.messages’,
‘django.contrib.staticfiles’,
‘todo’,
]
复制

然后，保存您的更改。

定义Todo模型
让我们创建一个模型来定义Todo项目应如何存储在数据库中。

todo/models.py在代码编辑器中打开文件，并添加以下代码行：待办事项/ models.py

from django.db import models

Create your models here.

class Todo(models.Model):
title = models.CharField(max_length=120)
description = models.TextField()
completed = models.BooleanField(default=False)

def _str_(self):
    return self.title

复制

上面的代码段描述了Todo模型的三个属性：

title
description
completed
该completed属性是任务的状态。任务将随时完成或未完成。因为您已经创建了Todo模型，所以将需要创建一个迁移文件：

python manage.py makemigrations todo
复制

并将更改应用到数据库：

python manage.py migrate todo
复制

您可以Todo使用Django默认提供的管理界面进行测试，以查看CRUD操作是否在您创建的模型上起作用。

todo/admin.py使用代码编辑器打开文件，并添加以下代码行：待办事项/admin.py

from django.contrib import admin
from .models import Todo

class TodoAdmin(admin.ModelAdmin):
list_display = (‘title’, ‘description’, ‘completed’)

Register your models here.

admin.site.register(Todo, TodoAdmin)
复制

然后，保存您的更改。

您将需要创建一个“超级用户”帐户来访问管理界面。在终端中运行以下命令：

python manage.py createsuperuser
复制

系统将提示您输入超级用户的用户名，电子邮件和密码。请确保输入您可以记住的详细信息，因为您将需要它们登录到管理仪表板。

再次启动服务器：

python manage.py runserver
复制

http://localhost:8000/admin在Web浏览器中导航到。并使用之前创建的用户名和密码登录：

Django应用程序管理界面的屏幕截图。
您可以Todo使用此界面创建，编辑和删除项目：

显示待办事项的Django应用程序管理界面的屏幕快照。
试用了该界面之后，您可以停止服务器（CONTROL+C或CTRL+C）。

第2步-设置API
在本部分中，您将使用Django REST框架创建一个API。

安装djangorestframework和django-cors-headers使用Pipenv：

pipenv install djangorestframework django-cors-headers
复制

您需要将rest_framework和添加corsheaders到已安装的应用程序列表中。backend/settings.py在代码编辑器中打开文件，然后更新INSTALLED_APPS和MIDDLEWARE部分：backend / settings.py

Application definition

INSTALLED_APPS = [
‘django.contrib.admin’,
‘django.contrib.auth’,
‘django.contrib.contenttypes’,
‘django.contrib.sessions’,
‘django.contrib.messages’,
‘django.contrib.staticfiles’,
‘corsheaders’,
‘rest_framework’,
‘todo’,
]

MIDDLEWARE = [
‘django.middleware.security.SecurityMiddleware’,
‘django.contrib.sessions.middleware.SessionMiddleware’,
‘django.middleware.common.CommonMiddleware’,
‘django.middleware.csrf.CsrfViewMiddleware’,
‘django.contrib.auth.middleware.AuthenticationMiddleware’,
‘django.contrib.messages.middleware.MessageMiddleware’,
‘django.middleware.clickjacking.XFrameOptionsMiddleware’,
‘corshea