使用React（Axios）和Python（Django）进行简单的Web应用开发，深受大学生喜爱！

3 年 ago
宇, 华
3 minutes

专为忙碌的人设计！

    1. 在指定目录下创建一个名为”プロジェクト名”的文件夹，进入该文件夹，并使用”crate react-app (–template typescript)”命令创建前端基础！

 

    1. 在根目录下，使用”django-admin startproject”和”django-admin startapp”命令创建后端基础

 

    1. 在前端中安装Axios，并在App.js或App.tsx中创建一个按钮，用于向端口8000发送GET请求（只要能使用Axios发送GET请求即可）

 

    1. 在后端的startapp指定的目录中，创建views.py和urls.py（新建）文件并指定响应和请求的URL

 

    1. 在startproject指定的目录的urls.py文件中，包含startapp指定目录的urls.py文件

 

    1. 在startproject指定的目录的settings.py文件中，编写已安装的app、middleware和跨域资源共享（CORS）的解决方案

 

    1. 从根目录中使用cd front&&yarn start命令，启动3000端口

 

    1. 从根目录中使用cd back&& python manage.py migrate（只需首次）&&python manage.py runserver命令，启动8000端口的服务器

 

    在这种状态下，点击3000端口视图的Push!!按钮，如果显示Yay!!则表示成功！

请给我好好看！

非常感谢你！

スクリーンショット 2021-08-22 14.07.47.png

创作的动机

在团队开发中，决定使用React作为前端，Python作为后端。

我以前只接触过Flask这个框架，在使用Python编写后端时。所以这次我打算学习一下Django，并且记录了我制作原型应用的过程写在了这篇文章里！

项目目录图

根目录/
┣ 后端
┃ ┣ 后端(在根目录下使用django-admin startproject创建的)
┃ ┣ 后台(使用django-admin startapp创建的)
┃ ┗ manage.py
┃
┣ 前端
┃ ┣ 公共目录
┃ ┗ 源代码目录
┃ ┗ App.js
┗ 说明文件等等、、、

这次我们决定将后端和前端的源代码放在一个项目中。

环境

操作系统

    macOS Catalina 10.15.7

前方

    node v16.0.0

往后

    • python 3.9.0

 

    • Django 3.2.6

 

    • django-cors-headers 3.8.0

 

    djangorestframework 3.12.4

我认为在后端实现中，使用venv来单独构建Django的虚拟环境会考虑到其他项目的好处。

这次由于不符合目的，不会解释如何使用venv创建虚拟环境并应用于项目，但我会在下面提供参考资料。

另外，如果想要在Web开发中大量使用Python的人，建议使用名为vertualenvwrapper的库来管理通过venv构建的虚拟环境！

    1. venv: Python 虚拟环境管理

 

    1. 引入Virtualenvwrapper

 

    [环境配置] 对于希望同时进行机器学习和Web开发的优秀人才来说

前端实现1

1. mkdir project名&&cd project名
# 今回はsample_appにしています

2. yarn create react-app front  
#TypeScriptを使用する場合は --template typescriptも

3. cd front&&yarn add Axios

这样一来，一次性完成了前端所需环境的建立。

本次使用了Yarn作为软件包管理器，但也可以使用npm。

因此，在後面我們附上了有關 Axios 的簡短說明，如果你不知道 Axios 是什麼，請看一下！

前端实现2

将位于front目录中的src目录中的App.js文件按照以下方式进行修改。

import { useState } from "react";
import "./App.css";
import logo from "./logo.svg";
import axios from "axios";

function App() {
  const [text, setText] = useState("");

  const handleClick = () => {
    axios.get("http://127.0.0.1:8000/test").then((res) => {
      console.log(res);
      setText(res.data);
    });
  };
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <button type="button" onClick={handleClick}>
          PUSH!!
        </button>
        <h1>{text}</h1>
      </header>
    </div>
  );
}

export default App;

外观看起来会是这个样子

front見た目

大致解释

    1. 配置了一个按钮，并在点击该按钮时触发handleClick函数。

 

    1. handleClick函数在点击时利用Axios发送GET请求到”http://127.0.0.1:8000/test”这个URL（请在后面的后端部分启动服务器时将URL/test写在这里！）。

 

    1. 将返回的Response中的data通过setText方法显示在按钮下方。

 

    由于后端包含了Yay!!这个字符串作为响应，所以显示效果如下：
スクリーンショット 2021-08-22 12.54.12.png

背部实施1

请返回根目录（在这种情况下是sample_app）！我们将安装所需的后端开发库。

pip install Django                     
pip install djangorestframework 
pip install django-cors-headers

大致解释

Django

Django是Python开发后端时使用的一个框架之一。

有一个可以做类似的事情的框架，叫做Flask，但这次我们会使用Django。
Django和Flask有什么区别？我们将比较这两种Python的Web框架。

Django REST框架

Django REST framework和Flask一样容易构建Web API服务器！太棒了！

Django跨域头信息

使用djnago-cors-headers库，为前端建立的端口授予后端访问权限。进行这个操作的原因是为了避免CORS（跨域资源共享）的错误提示，如果对CORS不太了解的人可以借此机会学习一下！（我也会学习的…）稍微了解CORS后，就可以结束了。

回溯实现2

使用django-admin命令创建项目和用于WebAPI服务器的应用程序。

1. django-admin startproject back&&cd back

2. django-admin startapp backend

后台实施3.

    backディレクトリの中のsettings.pyをいじる
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
   +'rest_framework',
   +'corsheaders',
]

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',
]

#これを追加
CORS_ALLOWED_ORIGINS = [
    'http://localhost:3000',
]

请指定CORS_ALLOWED_ORIGINS以允许来自哪个域名（哪个URL）的访问。
请指定您设置的前端端口（我设置在3000端口上，所以指定如上所示）。

    backディレクトリの中のviews.pyとulrs.pyを設定する

视图.py

from rest_framework import status
from rest_framework.decorators import api_view
from rest_framework.response import Response

@api_view(["GET"])
def test(request):
    return Response("Yay!!", status=status.HTTP_201_CREATED)

如果通过test函数发来请求，就编写代码返回”Yay!!”的响应。

请创建urls.py文件(如果没有的话，请先执行touch urls.py命令创建文件)。

from django.urls import path
from rest_framework.urlpatterns import format_suffix_patterns
from backend import views

urlpatterns = [
    path('test', views.test),
]

urlpatterns = format_suffix_patterns(urlpatterns)

当收到/test的请求时，在views.py中的test函数中传递请求。

修改back目录下的urls.py（我认为这个文件本来就存在）。

调整back目录中的urls.py文件（我认为这个文件原本就存在）。

from django.urls import path, include

urlpatterns = [
    path('', include('backend.urls')),
]

设置项目本身具有指定URL的应用程序存在

这样编码工作就完成了！！

应用程序的操作方法

从根目录开始，
– 输入”cd front && yarn start”，运行会在端口3000上启动。
– 输入”cd back && python manage.py migrate（仅初次运行） && python manage.py runserver”，会在端口8000上启动服务器。
– 在这种状态下，点击端口3000上的视图中的”Push!!”按钮，如果出现”Yay!!”表示成功！

結尾的話

非常感谢仔细阅读到这里的各位朋友！

我认为这篇文章诚实，但有许多地方解释不够简洁，导致阅读起来比较困难。

只需建立这样的基础机制，掌握数据库知识，就能轻松地创建自己想要的应用程序！

祝您拥有美好的开发生活！！！

bannerAds