热搜风云榜
有用、有趣的内容
知识运维如何使用Django和React构建待办事项应用程序
知识运维
如何使用Django和React构建待办事项应用程序
By
ADMIN
2021年5月19日
4
0
- Advertisment -
spot_img
介绍
在本教程中,您将使用Django和React构建一个To-Do应用程序。
React是用于开发SPA(单页应用程序)的JavaScript框架。它拥有可靠的文档和周围充满活力的生态系统。
Django是一个Python Web框架,可简化Web开发中的常见做法。Django是可靠的,并且拥有一个充满活力的稳定库生态系统,可满足常见的开发需求。
对于此应用程序,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
http://localhost:8000在您的网络浏览器中导航到:
如何使用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’,
‘corsheaders.middleware.CorsMiddleware’,
]
复制
然后,将以下代码行添加到backend/settings.py文件的底部:backend / settings.py
CORS_ORIGIN_WHITELIST = [
‘http://localhost:3000’
]
复制
django-cors-headers是一个Python库,该库将防止由于CORS规则而通常会导致的错误。在CORS_ORIGIN_WHITELIST代码中,您已列入白名单