让我们创建一个React和Django搭配的应用程序（使用Typescript和TailwindCSS & Python）

2 年 ago
文, 翔
6 minutes

引言

以下是创建使用React和Django进行合作的应用程序的步骤。

在前端开发中使用Typescript和Tailwind CSS，在后端使用Python。

本文主要记录了所使用技术的设置。

1. Django（后端）的基本设置

我参考了这篇文章 https://qiita.com/shiranon/items/8182445975dff4cf19a6（关于Django和React的构建以及API连接-构建篇）的部分内容。

安装Django

请使用pip3命令安装Django

安装Django REST Framework

使用pip3安装djangorestframework库

创建一个Django项目

以下是用汉语对上述内容进行的原生改写，只提供一种选项：
本文中，假定项目名为backend。因此，执行 $ django-admin startproject backend。

默认文件 (DEFAULT_FILE)

执行命令后，将按项目名称创建一个目录。
其中的内容如下所示。（△表示需要编辑的内容）

projectName
├─ manage.py        【プロジェクト管理、App作成、データ管理など】
└─ projectName      
	├─ __init__.py
	├─ settings.py  【△プロジェクトの構成】
	├─ urls.py      【△URLを関数に対応】
	├─ asgi.py      【リクエスト処理】
	└─ wsgi.py      【リクエスト処理】

创建一个应用程序

以下のコマンドを使用して、Appの作成と同時にApi作成用のAppも作成します。
$ python manage.py startapp
$ python manage.py startapp

$ python manage.py startapp app
$ python manage.py startapp api

执行。

默认文件

当执行命令时，将在应用的名称下创建一个目录。
目录的内容如下。

App
├─ __init__.py
├─ admin.py          【デフォルトのadmin管理者】
├─ apps.py           【app起動】
├─ migrations        【DB変更記録】
|	└─ __init__.py
├─ models.py         【△DBに対する操作】
├─ tests.py          【Unitテスト】
└─ views.py          【△関数】

注册APP

创建了一个App后，需要在项目的settings.py文件中注册该App。同时，还要注册rest_framework。

设置.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'app', #追加
    'api.apps.ApiConfig', #追加
	'rest_framework', #追加
]

设置URL与视图函数之间的关系

在浏览器中通过URL显示网页，需要设置URL与视图函数之间的关联。

在App目录中创建urls.py文件。

from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name='index'),
]

编辑项目的urls.py文件。

from django.urls import include, path # includeを追加

urlpatterns = [
    path('admin/', admin.site.urls), ＃デフォルトの管理者画面
    path('app/', include('app.urls')),
]

编辑App的views.py文件。

from django.shortcuts import render, HttpResponse
def index(request):
    return HttpResponse("Hello, world")

当访问指定的URL时，会调用视图中的函数来实现该机制。

在这里访问localhost:8000/index/，将会显示“你好，世界”。

服务器启动

在包含manage.py文件的目录中执行以下命令。

请运行以下命令：在终端输入“python manage.py runserver 8000”。

默认的端口号是8000, 所以可以不指定端口号而直接运行$ python manage.py runserver。

如果想指定船号，请使用 `$ python manage.py runserver <port号>`。

现在，Django的基本设置已经完成了。

创立一个API

准备数据库

以下是在具体的Django上操作数据库的方法：https://qiita.com/shintake_heito/private/6362c008004d97d3eeda

本次将准备API化的数据库。

编辑App的models.py。

from django.db import models
# Create your models here.

class User_Model(models.Model):

    class Meta:
        db_table = 'User'

    user_id = models.CharField(
        verbose_name='userid',
        blank=True,
        null=True,
        max_length=225,
        default='',
    )

    user_name = models.CharField(
        verbose_name='username',
        blank=True,
        null=True,
        max_length=225,
        default='',
    )

    user_email = models.CharField(
        verbose_name='useremail',
        blank=True,
        null=True,
        max_length=225,
        default='',
    )

    def __str__(self):
        return self.user_id

在这里，我创建了三个项目：用户ID、用户名和用户邮箱。

使用manage.py执行迁移操作。

$ python manage.py makemigrations
$ python manage.py migrate

由于需要通过管理界面进行数据输入，所以将其记录在admin.py中。

from django.contrib import admin
from .models import User_Model

admin.site.register(User_Model)

创建一个超级用户来登录管理网站。

python manage.py createsuperuser

创建超级用户后，访问 localhost:8000/admin/ 并登录。

django_admin_page_login.png
django_input_data.png

DB序列化配置

接下来，进行数据库的序列化。
在api应用文件夹中创建serializers.py文件，并按照以下内容进行编写。

from rest_framework import serializers
from app.models import User_Model


class UserSerializer(serializers.ModelSerializer):
    class Meta:
        model = User_Model
        fields = ('user_id', 'user_name','user_email')

请按照以下方式编写api应用程序文件夹中的views.py文件。

from rest_framework import viewsets, routers
from app.models import User_Model
from .serializers import UserSerializer

class UserApi(viewsets.ModelViewSet):
    queryset = User_Model.objects.all()
    serializer_class = UserSerializer

    def get_queryset(self):
        queryset = User_Model.objects.all()
        L_id = self.request.query_params.get('id')
		# queryでidを受けるとidでDBに検索をかけるようにしている。

        if L_id:
            queryset = queryset.filter(user_id=L_id)
        return queryset

router = routers.DefaultRouter()
router.register(r'user', UserApi)

设置路由配置

在项目的urls.py文件中，按照以下方式进行编写。

from django.contrib import admin
from django.urls import include, path
from api import views as api_views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('app/', include('app.urls')),
    path('api/', include(api_views.router.urls)), #追加
]

现在，API的准备工作已经完成了。

运行服务器，并访问http://localhost:8000/<api应用程序>，将显示数据库中的数据。

3. React（前端）的配置

3. React（前端）的设置

创建一个React项目，并使用TailwindCSS。

创建一个React项目

请使用以下命令，在中文中表达这一句子：
$ npm create-react-app 本文设定项目名称为frontend。因此，执行命令 $ npm create-react-app frontend。

创建一个基于TypeScript的React项目

要创建一个使用Typescript的React项目，

运行以下命令以在本地创建一个名为的React应用，并使用typescript模板：
执行 create-react-app –template typescript

这里使用 –template typescript 来指定typescript的模板。

使用 TailwindCSS

TailwindCSS公式推荐使用Vite、Parcel、Next.js或Remix来创建项目，因为create-react-app不支持设置PostCSS以及重要的工具如postcss-import。（具体方法请参考TailwindCSS文档，例如：https://tailwindcss.com/docs/guides/vite）

由于可能出现错误，请参考“构建时的错误处理”章节。

然而，即使在使用create-react-app创建的项目中，也可以使用TailwindCSS。
安装步骤如下：
1.

$ npx create-react-app my-project
$ cd my-project

2）请将以下内容用中文进行本地简述，只需一种选择：

2- 作者探讨了现代社会中的孤独感以及数码技术对人际关系的影响。他指出，虽然数码技术为人们提供了更广泛的社交机会，但同时也加剧了人与人之间的隔阂。他提出，在这样的背景下，我们需要寻找平衡的方法，利用数码技术与现实社交相结合，以缓解孤独感并维持健康的人际关系。

npm install -D tailwindcss
npx tailwindcss init

设置tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

创建一个index.css文件
在./src/index.css中写入以下内容。

@tailwind base;
@tailwind components;
@tailwind utilities;

这样TailwindCSS的设置就完成了。

4. React和Django的协作

在Django的一侧创建index.html。

在 Django 应用程序的目录中创建名为 templates 的文件夹，并在其中创建 index.html 文件。

<!DOCTYPE html>

{% load static %}

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Reactアプリ</title>
</head>
<body>
    <div id="root"></div>
    <script type="text/javascript" src="{% static 'js/bundle.js' %}" ></script>
</body>
</html>

在这里，将页面的内容从static/js/bundle.js中加载。
bundle.js是React的构建文件，在React端进行构建时会生成该文件（需要进行React端的配置）。

在React的侧边安装所需的模块。

在JavaScript的情况下，使用babel-loader，在TypeScript的情况下，使用ts-loader。

JavaScript： $ npm 安装 –save-dev babel-loader

TypeScript： $ npm 安装 –save-dev ts-loader

在React的一侧创建webpack.config.js。

const path = require('path');

module.exports = {
    mode: 'development',
    entry: './src/index.js',　//buildするファイル
    output: {
        filename: 'bundle.js',　//build後のファイル名
        path: path.join(__dirname, '../django_react/react_app/static/js') //buildファイルが作成される場所
    },
    module: {
        rules: [
		//JavaScriptの場合のloader設定
			{
				test: /\.js[x]?$/,  
				exclude: /node_modules/,
				use: {
					loader: 'babel-loader',
					options: {
						presets: [
							'@babel/preset-env',
							'@babel/preset-react' 
						],
						plugins: ['@babel/plugin-syntax-jsx'] 
					}
				}
			}
        
		//Typescriptの場合のloader設定
			{
				test: /\.ts[x]?$/,  
				exclude: /node_modules/,
				use: 'ts-loader',
			},

		//TailwindCSSファイルを読み込むための設定
			{
				test: /\.css$/,
				use: [
					'style-loader',
					'css-loader',
					{
						loader: 'postcss-loader',
						options: {
							postcssOptions: {
								ident: 'postcss',
								plugins: [
									require('tailwindcss'),
									require('autoprefixer'),
								],
							},
						},
					},
				],
			},
		],	
    },

    resolve: {
        extensions: ['.js', '.jsx', '.json']
	}
};

创建.env文件

我们要跳过对包之间的依赖关系进行检查。
创建一个.env文件并按以下方式进行记录。

SKIP_PREFLIGHT_CHECK=true

建设

试着搭建一下。

在中国只需要一个选择，将以下内容用中文原生表达出来：
使用npx webpack命令（需要npm 5.2+版本），可以直接执行webpack命令，而无需依赖npm脚本。

构建时的错误处理

错误内容：TypeScript未生成任何输出文件…

Module build failed (from ./node_modules/ts-loader/index.js):
Error: TypeScript emitted no output for...

对应方法：检查 tsconfig.json 文件。

    1. 如果noEmit为true，TypeScript将不会生成文件。

 

    1. {

 

    1. “compilerOptions”: {

 

    1. // …

 

    1. “noEmit”: true,

 

    1. // …

 

    1. }

 

    1. }

禁止生成sourceMap。
{
“compilerOptions”: {
// …
“sourceMap”: false,
// …
}
}

TailwindCSS错误

ERROR in ./src/index.css 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @tailwind base;
| @tailwind components;
| @tailwind utilities;

应对步骤

    1. 安装需要的loaders和PostCSS

npm：$ npm install style-loader css-loader postcss-loader tailwindcss postcss autoprefixer –save-dev

yarn：$ yarn add style-loader css-loader postcss-loader tailwindcss postcss autoprefixer –dev

配置webpack

在webpack.config.js中添加以下内容。
module: {
rules: [
//用于加载TailwindCSS文件的配置
{
test: /\.css$/,
use: [
‘style-loader’,
‘css-loader’,
{
loader: ‘postcss-loader’,
options: {
postcssOptions: {
ident: ‘postcss’,
plugins: [
require(‘tailwindcss’),
require(‘autoprefixer’),
],
},
},
},
],
},
],
},

配置PostCSS文件

如果没有postcss.config.js，请在React项目的目录下创建一个。
将TailwindCSS和Autoprefixer的配置填写如下

module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

5. 在React中调用API

安装Axios

安装用于调用API的React库。
$ npm install axios

错误处理

有可能出现以下错误。

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: react-scripts@5.0.1
npm ERR! Found: typescript@5.2.2

作为处理方法，修改 package.json 中所列版本的 dependencies。
在 package.json 中添加以下内容并进行记录。

"overrides": {
  "typescript": "^5.2.2",
},

调用API

在React的组件中使用axios来调用API。

import React, {useState, useEffect} from 'react';
import axios from 'axios';


const Content = () => {
    interface User {
        user_id: string;
    }

    const [userInfo, setUserInfo] = useState<User[]>([]);

    useEffect(() => {
        axios.get('http://localhost:8000/api/user/')
            .then(res => {
                setUserInfo(res.data);
            });
    }, []);

    return (
        <div>
            <div>
                {userInfo.map(user => <div key={user.user_id}>{user.user_id}</div>)}
            </div>
        </div>
    );
}

export default Content;

在这里, 使用axios对API进行访问，从数据库中获取数据，并将这些数据显示在屏幕上。

React和Django的协作已经成功完成。

bannerAds