django react
I know it’s a very comprehensive title so I’ll keep it as simple as possible.
我知道这是一个非常全面的标题，所以我将使其尽可能简单。
In this article, we will make a book application from installation to the final product using Django and React. I hope to make a nice and simple introduction-development-product series for a CRUD (Create, Read, Update, Delete) application. I want to share the notes I took and the steps I followed while making an app without getting overwhelmed by a lot of information from both sides (back end and front end).
在本文中，我们将使用Django和React从安装到最终产品的制作一个书本应用程序。 我希望为CRUD(创建，读取，更新，删除)应用程序制作一个简单，漂亮的介绍-开发-产品系列。 我想分享我在制作应用程序时所采取的笔记和所采取的步骤，而又不会因为双方(后端和前端)的大量信息而感到不知所措。
I will try not to dwell on the questions such as what and why, but to explain it purposefully. For every command I use, I will cite since there may be people who do not know, in this way you can quickly get an idea from their documentation pages and return to the article.
我将不去赘述诸如什么以及为什么之类的问题，而是有目的地对其进行解释。 我会引用我使用的每个命令，因为可能有些人不知道，这样您就可以从他们的文档页面中快速了解想法并返回本文。
Django is a Python-based free and open-source web library based on the model-template-view architecture.
Django是一个基于Python的免费开源Web库，它基于model-template-view体系结构。
React is a JavaScript library that allows you to create user interfaces for your web projects on a component basis.
React是一个JavaScript库，允许您基于组件为Web项目创建用户界面。
入门＃1 (Getting started #1)
Here’s what you need to have installed on your computer before keeping to read the article:
在继续阅读本文之前，您需要在计算机上安装以下文件：
Python3PipNodeJSWhile I’m writing this article I use the following versions : Python 3.6~, pip 20.1.1, NodeJS 12.18.2 . If the scripts I use not work or give an error on different versions, please do not hesitate to ask me.
在撰写本文时，我使用以下版本： Python 3.6~ NodeJS 12.18.2 ， pip 20.1.1 ， NodeJS 12.18.2 。 如果我使用的脚本无法正常工作或在不同版本上出现错误，请随时询问我。
Let’s start by setting up a working environment. I created a folder named as DjangoReact. First step is installing pipenv. Pipenv is a tool that brings packaging processes(bundler, npm, yarn, composer, etc.) to python world. It automatically creates and manages a virtualenv for your projects, as well as adds/removes packages from your Pipfile as you install/uninstall packages.
让我们从设置工作环境开始。 我创建了一个名为DjangoReact的文件夹。 第一步是安装pipenv。 Pipenv是一种工具，可将打包过程(捆绑程序，npm，纱线，作曲家等)引入python world。 它会自动为您的项目创建和管理virtualenv，并在您安装/卸载软件包时从Pipfile中添加/删除软件包。
Paste the below code to the command line after going into the workspace:
进入工作区后，将以下代码粘贴到命令行：
python3.6 -m pip install pipenv --upgradeAfterward, via the below code we’ll install django 3.0.8(latest version) to our virtualenv via the below code:
然后，通过以下代码，我们将通过以下代码将django 3.0.8(最新版本)安装到我们的virtualenv中：
pipenv install --python 3.6 django==3.0.8After installation is done, our folder tree must be as follows:
安装完成后，我们的文件夹树必须如下所示：
DjangoReact
├── Pipfile
└── Pipfile.lockTo be activated virtualenv run pipenv shell code on the command line.
要激活virtualenv，请在命令行上运行pipenv shell代码。
Now, we can start to create our first Django project. You may see the parameters you could use by typing django-adminon the command line. For now, we just interested in a parameter called startproject. Since we want to install to the folder we are in (we have already created a folder at the beginning of the article), we are creating a project called DjangoReact to the folder we are in.
现在，我们可以开始创建第一个Django项目。 通过在命令行上输入django-admin ，您可能会看到可以使用的参数。 现在，我们只对一个名为startproject的参数startproject 。 由于我们要安装到我们所在的文件夹中(我们已经在本文开头创建了一个文件夹)，因此我们要在我们所在的文件夹中创建一个名为DjangoReact的项目。
django-admin startproject DjangoReact .Here is the final folder tree:
这是最终的文件夹树：
DjangoReact/
manage.py
DjangoReact/
__init__.py
settings.py
urls.py
asgi.py
wsgi.pyI want to take a note here that projects and applications are completely different kinds of things. The application is a web application that serves a specific purpose — blog, todolist, database records, etc. while the project is a collection of applications and configurations within a website. The project can contain more than one application.
我想在此说明项目和应用程序是完全不同的事物。 该应用程序是一个服务于特定目的的Web应用程序-博客，待办事项列表，数据库记录等，而项目则是网站内应用程序和配置的集合。 该项目可以包含多个应用程序。
To check, we run our server and check that it is working properly. When we run the python manage.py runserver code, the output in the terminal should be as follows.
为了进行检查，我们运行服务器并检查它是否正常运行。 当我们运行python manage.py runserver代码时，终端中的输出应如下所示。
(DjangoReact) $~ python manage.py runserverWatching for file changes with StatReloader
Performing system checks…
System check identified no issues (0 silenced).You have 17 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run ‘python manage.py migrate’ to apply them.July 17, 2020–14:22:01
Django version 3.0.8, using settings ‘backend.settings’
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.When we enter our localhost, the screen below appears. Yes! It works!
当我们输入本地主机时，将显示以下屏幕。 是! 有用！
One last little touch.
最后一点点触摸。
Yes! Now we can add Django to our skills.
是! 现在，我们可以将Django添加到我们的技能中。
模型，视图，路由…URL＃2 (Model, View, Routing…URLs #2)
Now, it’s time to create our first application. Our to-do list is as follows:
现在，是时候创建我们的第一个应用程序了。 我们的任务清单如下：
1. Books-> Creating-> Name?-> Author?-> Description?-> Image?-> Search-> Delete-> Update2. Feed-> List of all booksWe come into DjangoReact folder and create an application with ./manage.py startapp books command. After running the command, it will create a folder named ‘books’ inside our folder and install it. The final version of our folder is as follows:
我们进入DjangoReact文件夹，并使用./manage.py startapp books命令创建一个应用程序。 运行该命令后，它将在我们的文件夹中创建一个名为“ books”的文件夹并进行安装。 我们文件夹的最终版本如下：
DjangoReact/
├── books
│ ├── admin.py
│ ├── apps.py
│ ├── __init__.py
│ ├── migrations
│ │ └── __init__.py
│ ├── models.py
│ ├── tests.py
│ └── views.py
├── db.sqlite3
├── DjangoReact
│ ├── asgi.py
│ ├── __init__.py
│ ├── __pycache__
│ │ ├── __init__.cpython-36.pyc
│ │ ├── settings.cpython-36.pyc
│ │ ├── urls.cpython-36.pyc
│ │ └── wsgi.cpython-36.pyc
│ ├── settings.py
│ ├── urls.py
│ └── wsgi.py
├── manage.py
├── Pipfile
├── Pipfile.lock
└── todo.md