Django + React 全栈开发 demo

视频 https://www.youtube.com/watch?v=c-QsfbznSXI 笔记

在windows 系统上开发此项目，Linux 命令有所不同。先写 Django，后写 React。
此项目实现的功能是，用户可以注册并登录网站，创建或删除 note，note 包含 title和 content。

Django 后端

1. 创建虚拟环境

以安装必要的 python 包: python -m venv env, 此命令将生成一个文件夹 env.

2. 激活虚拟环境: ./env/Scripts/activate 或 activate，

命令运行成功之后，终端行之前将出现 (env) 前缀：

3. 安装项目依赖:

1. 首先在项目文件夹中新建文件 requirements.txt，含有项目所需的所有包：

asgiref
Django
django-cors-headers
djangorestframework
djangorestframework-simplejwt
PyJWT
pytz
sqlparse
psycopg2-binary
python-dotenv
1
2
3
4
5
6
7
8
9
10

其中：
django-cors-headers： 用于解决 cross origin request 问题
psycopg2-binary： postgreSQL(postgres, pg) 相关
python-dotenv： 用于加载环境变量

2. 安装以上的包: pip install -r requirements.txt

4. 新建 Django 工程

4.1 新建工程 backend

运行命令：django-admin startproject backend ，此命令将生成一个新目录 backend。

然后在此新的backend目录中新建名称为api 的 app：python manage.py startapp api

(env) PS D:\yt\django\django-react-tutorial> django-admin startproject backend
(env) PS D:\yt\django\django-react-tutorial> cd .\backend\
(env) PS D:\yt\django\django-react-tutorial\backend> python manage.py startapp api
1
2
3

Django 中的 app：一个 Django 由若干 app 组成，例如实现 authentication 的 app，一个组件也可以是一个 app, 这些 app 用于组织客制化的 code，对项目的代码实现逻辑上的划分。

工程结构：

4.2 设置 settings.py

这里用#1标记增加的或修改过的代码：

"""
Django settings for backend project.

Generated by 'django-admin startproject' using Django 5.0.6.

For more information on this file, see
https://docs.djangoproject.com/en/5.0/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/5.0/ref/settings/
"""

from pathlib import Path
from datetime import timedelta  # 1
from dotenv import load_dotenv  # 1
import os  # 1

load_dotenv()  # 1


# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent


# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/5.0/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = "django-insecure-r$)xv6rc71731q(5d)y3!!b*m=78d*fp*m9l0$-_nua(26m5q("

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = ["*"]  # 1 allow any host to host our django application

# 1 JWT tokens related
REST_FRAMEWORK = {
    "DEFAULT_AUTHENTICATION_CLASSES": (
        "rest_framework_simplejwt.authentication.JWTAuthentication",
    ),
    "DEFAULT_PERMISSION_CLASSES": [
        "rest_framework.permissions.IsAuthenticated",
    ],
}
# 1 JWT tokens related
SIMPLE_JWT = {
    "ACCESS_TOKEN_LIFETIME": timedelta(minutes=30),
    "REFRESH_TOKEN_LIFETIME": timedelta(days=1),
}

# Application definition

INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    "api",  # 1 新增的 app
    "rest_framework",  # 1
    "corsheaders",  # 1
]

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",  # 1 middleware for cors
]

ROOT_URLCONF = "backend.urls"

TEMPLATES = [
    {
        "BACKEND": "django.template.backends.django.DjangoTemplates",
        "DIRS": [],
        "APP_DIRS": True,
        "OPTIONS": {
            "context_processors": [
                "django.template.context_processors.debug",
                "django.template.context_processors.request",
                "django.contrib.auth.context_processors.auth",
                "django.contrib.messages.context_processors.messages",
            ],
        },
    },
]

WSGI_APPLICATION = "backend.wsgi.application"


# Database
# https://docs.djangoproject.com/en/5.0/ref/settings/#databases

DATABASES = {
    "default": {
        "ENGINE": "django.db.backends.sqlite3",
        "NAME": BASE_DIR / "db.sqlite3",
    }
}


# Password validation
# https://docs.djangoproject.com/en/5.0/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        "NAME": "django.contrib.auth.password_validation.UserAttributeSimilarityValidator",
    },
    {
        "NAME": "django.contrib.auth.password_validation.MinimumLengthValidator",
    },
    {
        "NAME": "django.contrib.auth.password_validation.CommonPasswordValidator",
    },
    {
        "NAME": "django.contrib.auth.password_validation.NumericPasswordValidator",
    },
]


# Internationalization
# https://docs.djangoproject.com/en/5.0/topics/i18n/

LANGUAGE_CODE = "en-us"

TIME_ZONE = "UTC"

USE_I18N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/5.0/howto/static-files/

STATIC_URL = "static/"

# Default primary key field type
# https://docs.djangoproject.com/en/5.0/ref/settings/#default-auto-field

DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"

CORS_ALLOW_ALL_ORIGINS = True  # 1
CORS_ALLOWS_CREDENTIALS = True  # 1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150

4.3 JWT 认证

实现认证的步骤：

1. 用户使用 username + password 登录前端
2. 前端发送请求给后端，此请求包含第1步的 username + password
3. 后端生成两个 token：即 jwt access token 和 jwt fresh token，发给前端
4. 前端在 local storage 存储这两个token
5. 前端之后每次发送请求，首先读取 local storage，
   • 如果 access_token 为空，要求前端重新登录
   • 如果 access_token 已过期，自动发送 refresh token 给后端某个 api，获得新的 access token 并存储到 local storage，将 access token 附加到请求头。如果由于 refresh token 过期等原因，未能从后端获得 access token，要求前端重新登录
   • 如果 access_token 非空且未过期，将 access token 附加到请求头，不需执行其他操作。

4.3.1 新建文件 ./backend/api/serializers.py:

from django.contrib.auth.models import User
from rest_framework import serializers

class UserSerializer(serializers.ModelSerializer):
    class Meta:
        model = User
        fields = ["id", "username", "password"]
        # don't want to return the password when returning the user
        extra_kwargs = {"password": {"write_only": True}}

    def create(self, validated_data):
        print(validated_data)
        user = User.objects.create_user(**validated_data)
        return user
1
2
3
4
5
6
7
8
9
10
11
12
13
14

4.3.2 修改./backend/api/views.py:

from django.shortcuts import render
from django.contrib.auth.models import User
from rest_framework import generics
from .serializers import UserSerializer
from rest_framework.permissions import IsAuthenticated, AllowAny


class CreateUserView(generics.CreateAPIView):
    queryset = User.objects.all()
    serializer_class = UserSerializer
    permission_classes = [AllowAny]
1
2
3
4
5
6
7
8
9
10
11

4.3.3 修改 ./backend/backend/urls.py:

from django.contrib import admin
from django.urls import path, include
from api.views import CreateUserView
from rest_framework_simplejwt.views import TokenObtainPairView, TokenRefreshView

urlpatterns = [
    path("admin/", admin.site.urls),
    path("api/user/register/", CreateUserView.as_view(), name="register"),
    path("api/token/", TokenObtainPairView.as_view(), name="get_token"),
    path("api/token/refresh/", TokenRefreshView.as_view(), name="refresh"),
    path("api-auth/", include("rest_framework.urls")),
]
1
2
3
4
5
6
7
8
9
10
11
12

4.3.4 数据库迁移

分两步：
Step 1: make migrations
终端执行命令：python manage.py makemigrations

(env) PS D:\yt\django\django-react-tutorial\backend> python manage.py makemigrations
No changes detected
(env) PS D:\yt\django\django-react-tutorial\backend> 
1
2
3

makemigrations 的作用是生成迁移文件，这些文件指定了需要执行的数据库迁移操作。

Step 2: apply migrations
终端执行命令：python manage.py migrate:

PS D:\yt\django\django-react-tutorial\backend> python manage.py migrate       
Operations to perform:
  Apply all migrations: admin, auth, contenttypes, sessions
Running migrations:
  Applying contenttypes.0001_initial... OK
  Applying auth.0001_initial... OK
  Applying admin.0001_initial... OK
  ............................
  Applying sessions.0001_initial... OK
PS D:\yt\django\django-react-tutorial\backend>
1
2
3
4
5
6
7
8
9
10

这两步用于配置数据库，确保正确设置所需的表格等等。

因此，每当连接到新数据库时，都需要再次执行上述相同的步骤来配置新数据库。

4.4 运行程序

运行命令：python manage.py runserver

PS D:\yt\django\django-react-tutorial\backend> python manage.py runserver
Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).
May 10, 2024 - 11:34:36
Django version 5.0.6, using settings 'backend.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.
1
2
3
4
5
6
7
8
9

浏览器访问 http://127.0.0.1:8000/api/user/register，

下一步要做的就是传一个 username 和 password 给 server，server 生成新的 user

4.5 实现用户注册

实现 sign in ，并从 server 获取 access token:

1. 在 http://127.0.0.1:8000/api/user/register 界面创建用户，填写 Username 和 Password 并 post，
   
2. 在 http://127.0.0.1:8000/api/token/ 路径输入上述 Username 和 Password，就会生成 access token 和 refresh token：
   
   前端将会存储这两个 token，以后前端每次向后端发送一条请求，请求里都必须附带 access token。(不受保护的路径除外)

复制上面的 refresh token，打开url：http://127.0.0.1:8000/api/token/refresh/ ，粘贴，提交， 可以得到新的 access token，如下图所示：

至此，用户注册、登录功能已经实现。Ctrl + C 停止服务器，接下来，实现创建 note 以及 删除 note 功能。

4.6 创建或删除 note 实现

4.6.1 修改./backend/api/models.py:

from django.db import models
from django.contrib.auth.models import User


class Note(models.Model):
    title = models.CharField(max_length=100)
    content = models.TextField()
    created_at = models.DateTimeField(auto_now_add=True)
    author = models.ForeignKey(User, on_delete=models.CASCADE, related_name="notes")

    def __str__(self):
        return self.title
1
2
3
4
5
6
7
8
9
10
11
12

这里，一个 author 可以有多个 note，是 one-many 的关系。
ForeignKey 是说，一个 note 链接到 一个 user，
on_delete=models.CASCADE 含义：如果删除某个 user，那么，将同时删除此用户的全部 note。
related_name="notes" 含义： notes 字段引用所有的 note, 通过 .notes 可以获得一个用户创建的全部 note 对象。

4.6.2 修改文件./backend/api/serializers.py:

from django.contrib.auth.models import User
from rest_framework import serializers
from .models import Note 


class UserSerializer(serializers.ModelSerializer):
    class Meta:
        model = User
        fields = ["id", "username", "password"]
        # don't want to return the password when returning the user
        # 能写不能读
        extra_kwargs = {"password": {"write_only": True}}

    def create(self, validated_data):
        print(validated_data)
        user = User.objects.create_user(**validated_data)
        return user


class NoteSerializer(serializers.ModelSerializer):
    class Meta:
        model = Note
        fields = ["id", "title", "content", "created_at", "author"]
        # 能读不能写
        extra_kwargs = {"author": {"read_only": True}}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

4.6.3 修改文件 .\backend\api\views.py

from django.shortcuts import render
from django.contrib.auth.models import User
from rest_framework import generics
from .serializers import UserSerializer, NoteSerializer
from rest_framework.permissions import IsAuthenticated, AllowAny
from .models import Note

# 创建 note
# ListCreateAPIView, do two things:
# listing all notes created by a user or create a new note
class NoteListCreate(generics.ListCreateAPIView):
    serializer_class = NoteSerializer
    # Cannot call this route, unless authenticated and pass a valid jwt token
    permission_classes = [IsAuthenticated]

    # overriding get_queryset(django docs)
    def get_queryset(self):
        user = self.request.user
        # get all notes written by this "user", that's what filter means
        return Note.objects.filter(author=user)

    # overriding perform_create(django docs)
    def perform_create(self, serializer):
        if serializer.is_valid():
            serializer.save(author=self.request.user)
        else:
            print(serializer.errors)

# 删除 note
class NoteDelete(generics.DestroyAPIView):
    serializer_class = NoteSerializer
    permission_classes = [IsAuthenticated]

    def get_queryset(self):
        user = self.request.user
        return Note.objects.filter(author=user)


class CreateUserView(generics.CreateAPIView):
    queryset = User.objects.all()
    serializer_class = UserSerializer
    permission_classes = [AllowAny]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

4.6.4 新建文件 ./backend/api/urls.py:

from django.urls import path
from . import views

urlpatterns = [
    path("notes/", views.NoteListCreate.as_view(), name="note-list"),
    path("notes/delete/<int:pk>/", views.NoteDelete.as_view(), name="delete-note"),
]
1
2
3
4
5
6
7

4.6.5 链接 url，修改： ./backend/backend/urls.py:

from django.contrib import admin
from django.urls import path, include
from api.views import CreateUserView
from rest_framework_simplejwt.views import TokenObtainPairView, TokenRefreshView

urlpatterns = [
    path("admin/", admin.site.urls),
    path("api/user/register/", CreateUserView.as_view(), name="register"),
    path("api/token/", TokenObtainPairView.as_view(), name="get_token"),
    path("api/token/refresh/", TokenRefreshView.as_view(), name="refresh"),
    path("api-auth/", include("rest_framework.urls")),
    # 新增行，如果非以上任何路径，将转发到文件：api.urls
    path("api/", include("api.urls")),
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14

4.6.6 测试

再次运行数据库迁移的两条命令：ython manage.py makemigrations 以及 python manage.py migrate:

PS D:\yt\django\django-react-tutorial> cd backend
PS D:\yt\django\django-react-tutorial\backend> python manage.py makemigrations
Migrations for 'api':
  api\migrations\0001_initial.py
    - Create model Note
PS D:\yt\django\django-react-tutorial\backend> python manage.py migrate  
Operations to perform:
  Apply all migrations: admin, api, auth, contenttypes, sessions
Running migrations:
  Applying api.0001_initial... OK
PS D:\yt\django\django-react-tutorial\backend> 
1
2
3
4
5
6
7
8
9
10
11

运行程序：python manage.py runserver

因为未传 token, 所以出现上述错误提示。后端到这里先结束，接下来写前端。

React 前端

1 新建 React 工程

主目录运行命令：npm create vite@latest frontend -- --template react，将生成新的前端目录 frontend, 如下图：

2 安装必要的 React npm 包

进入 frontend 目录，运行命令： npm i axios react-router-dom jwt-decode，以下是运行结果，

PS D:\yt\django\django-react-tutorial> cd frontend 
PS D:\yt\django\django-react-tutorial\frontend> npm i axios react-router-dom jwt-decode
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'vite@5.2.11',
npm WARN EBADENGINE   required: { node: '^18.0.0 || >=20.0.0' },
npm WARN EBADENGINE   current: { node: 'v16.20.2', npm: '8.5.5' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'jwt-decode@4.0.0',
npm WARN EBADENGINE   required: { node: '>=18' },
npm WARN EBADENGINE   current: { node: 'v16.20.2', npm: '8.5.5' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'rollup@4.17.2',
npm WARN EBADENGINE   required: { node: '>=18.0.0', npm: '>=8.0.0' },
npm WARN EBADENGINE   current: { node: 'v16.20.2', npm: '8.5.5' }
npm WARN EBADENGINE }

added 291 packages, and audited 292 packages in 27s

104 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
PS D:\yt\django\django-react-tutorial\frontend> 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

因为出现了若干版本相关的警告，所以接下来卸载 node, 重新下载最新版本 node-v20.13.1-x64.msi 并安装，然后运行如下两条命令卸载以上包，重新安装：

npm un axios react-router-dom jwt-decode
npm i axios react-router-dom jwt-decode

PS D:\yt\django\django-react-tutorial\frontend> npm un axios react-router-dom jwt-decode

removed 13 packages, and audited 279 packages in 1s

103 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
PS D:\yt\django\django-react-tutorial\frontend> npm i axios react-router-dom jwt-decode 

added 13 packages, and audited 292 packages in 3s

104 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
PS D:\yt\django\django-react-tutorial\frontend> 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

3 组织 React 工程

3.1 删除 frontend/src/ 路径下的文件 index.css 以及 App.css。

3.2 删除 App.jsx 中不需要的代码：

import React from "react";

function App() {
  return <></>;
}

export default App;
1
2
3
4
5
6
7

3.3 删除 main.jsx 中的import './index.css':

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)
1
2
3
4
5
6
7
8
9

3.4 新建文件夹以及文件

src目录下新建3个文件夹 pages, styles, components，新建 2 个文件：constants.js, api.js,
frontend目录下新建文件 .env ：

constants.js:

export const ACCESS_TOKEN = "access"
export const REFRESH_TOKEN = "refresh"
1
2

acess token 和 refresh token 都将存储在 local storage 中，constants.js 文件用于访问存储的 token。

api.js 中写拦截器代码，拦截器用于拦截将要发送的任何请求，它会自动添加正确的请求头(request header)，就不必每个请求中手动重复写相关代码。这里设置 axios 拦截器：

// api.js
import axios from "axios";
import { ACCESS_TOKEN } from "./constants";

const api = axios.create({
  baseURL: import.meta.env.VITE_API_URL,
});

api.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem(ACCESS_TOKEN);
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

export default api;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

.env 文件设置：

VITE_API_URL="http://localhost:8000"
1

3.5 设置受保护的路由

components 文件夹下新建文件 ProtectedRoute.jsx，访问此文件中的路由需要 token。

import { Navigate } from "react-router-dom";
import { jwtDecode } from "jwt-decode";
import api from "../api";
import { REFRESH_TOKEN, ACCESS_TOKEN } from "../constants";
import { useState, useEffect } from "react";

function ProtectedRoute({ children }) {
  const [isAuthorized, setIsAuthorized] = useState(null);

  useEffect(() => {
    auth().catch(() => setIsAuthorized(false));
  }, []);

  // refresh the access token for us automatically
  const refreshToken = async () => {
    const refreshToken = localStorage.getItem(REFRESH_TOKEN);
    try {
      const res = await api.post("/api/token/refresh/", {
        refresh: refreshToken,
      });
      if (res.status === 200) {
        localStorage.setItem(ACCESS_TOKEN, res.data.access);
        setIsAuthorized(true);
      } else {
        setIsAuthorized(false);
      }
    } catch (error) {
      console.log(error);
      setIsAuthorized(false);
    }
  };

  // check if we need to refresh the token or we are good to go
  const auth = async () => {
    const token = localStorage.getItem(ACCESS_TOKEN);
    if (!token) {
      setIsAuthorized(false);
      return;
    }
    const decoded = jwtDecode(token);
    const tokenExpiration = decoded.exp;
    const now = Date.now() / 1000;  // in seconds

    if (tokenExpiration < now) {
      await refreshToken();
    } else {
      setIsAuthorized(true);
    }
  };

  if (isAuthorized === null) {
    return <div>Loading...</div>;
  }

  return isAuthorized ? children : <Navigate to="/login" />;
}

export default ProtectedRoute;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

3.6 设置 pages 目录

新建4 个文件：Home.jsx, Login.jsx, NotFound.jsx, Register.jsx:

这4个文件输入 rafce, 生成初始代码 （vscode 需要安装 extension: VS Code ES7+ React/Redux/React-Native/JS snippets）：
以 register.jsx 为例：

import React from 'react'

const Register = () => {
  return (
    <div>Register</div>
  )
}

export default Register
1
2
3
4
5
6
7
8
9

3.7 实现 Navigation

用 3.6 的 4 个page页测试导航。

src\App.js:

import react from "react"
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom"
import Login from "./pages/Login"
import Register from "./pages/Register"
import Home from "./pages/Home"
import NotFound from "./pages/NotFound"
import ProtectedRoute from "./components/ProtectedRoute"

function Logout() {
  localStorage.clear()
  return <Navigate to="/login" />
}

// Before registering, clear local storage to prevent from the possibilities 
// of reading old tokens
function RegisterAndLogout() {
  localStorage.clear()
  return <Register />
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route
          path="/"
          element={
            <ProtectedRoute>
              <Home />
            </ProtectedRoute>
          }
        />
        <Route path="/login" element={<Login />} />
        <Route path="/logout" element={<Logout />} />
        <Route path="/register" element={<RegisterAndLogout />} />
        <Route path="*" element={<NotFound />}></Route>
      </Routes>
    </BrowserRouter>
  )
}

export default App
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

3.8 测试 Navigation

npm run dev， 测试ok

3.9 register/login 实现

components 目录下新建文件： Form.jsx，此组件为 register/login 共用。

import { useState } from "react";
import api from "../api";
import { useNavigate } from "react-router-dom";
import { ACCESS_TOKEN, REFRESH_TOKEN } from "../constants";
import "../styles/Form.css";
import LoadingIndicator from "./LoadingIndicator";

function Form({ route, method }) {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [loading, setLoading] = useState(false);
  const navigate = useNavigate();

  const name = method === "login" ? "Login" : "Register";

  const handleSubmit = async (e) => {
    setLoading(true);
    e.preventDefault();

    try {
      const res = await api.post(route, { username, password });
      if (method === "login") {
        localStorage.setItem(ACCESS_TOKEN, res.data.access);
        localStorage.setItem(REFRESH_TOKEN, res.data.refresh);
        navigate("/");
      } else {
        navigate("/login");
      }
    } catch (error) {
      alert(error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit} className="form-container">
      <h1>{name}</h1>
      <input
        className="form-input"
        type="text"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
        placeholder="Username"
      />
      <input
        className="form-input"
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="Password"
      />
      {loading && <LoadingIndicator />}
      <button className="form-button" type="submit">
        {name}
      </button>
    </form>
  );
}

export default Form;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

对应的 css styles/Form.css:

.form-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 50px auto;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  max-width: 400px;
}

.form-input {
  width: 90%;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.form-button {
  width: 95%;
  padding: 10px;
  margin: 20px 0;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.form-button:hover {
  background-color: #0056b3;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

login.jsx 代码：

import Form from "../components/Form";

function Login() {
  return <Form route="/api/token/" method="login" />;
}

export default Login;

1
2
3
4
5
6
7
8

register.jsx 代码：

import Form from "../components/Form";

function Register() {
  return <Form route="/api/user/register/" method="register" />;
}

export default Register;

1
2
3
4
5
6
7
8

新建两个文件 components/LoadingIndicator.jsx 和 styles/LoadingIndicator.css
components/LoadingIndicator.jsx :

import "../styles/LoadingIndicator.css"

const LoadingIndicator = () => {
    return <div className="loading-container">
        <div className="loader"></div>
    </div>
}

export default LoadingIndicator
1
2
3
4
5
6
7
8
9

styles/LoadingIndicator.css

.loader-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader {
  border: 5px solid #f3f3f3; /* Light grey */
  border-top: 5px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

3.10 测试 register/login

frontend 目录 运行 npm run dev，同时 backend 目录运行 python manage.py runserver
在 register 路径输入用户名和密码，将自动重定向到 login 路径，再次输入用户名和密码登录，local storage 将会出现 access token 和 refresh token ，测试 ok。

3.11 Homepage 实现

目标： http://localhost:5173/ 界面实际展示的内容应该如下所示，列出所有的 notes，允许删除，并且能创建新的 note：

src/pages/Home.jsx:

import { useState, useEffect } from "react";
import api from "../api";
import Note from "../components/Note";
import "../styles/Home.css";

function Home() {
  const [notes, setNotes] = useState([]);
  const [content, setContent] = useState("");
  const [title, setTitle] = useState("");

  useEffect(() => {
    getNotes();
  }, []);

  const getNotes = () => {
    api
      .get("/api/notes/")
      .then((res) => res.data)
      .then((data) => {
        setNotes(data);
        console.log(data);
      })
      .catch((err) => alert(err));
  };

  const deleteNote = (id) => {
    api
      .delete(`/api/notes/delete/${id}/`)
      .then((res) => {
        if (res.status === 204) alert("Note deleted!");
        else alert("Failed to delete note.");
        getNotes();
      })
      .catch((error) => alert(error));
  };

  const createNote = (e) => {
    e.preventDefault();
    api
      .post("/api/notes/", { content, title })
      .then((res) => {
        if (res.status === 201) alert("Note created!");
        else alert("Failed to make note.");
        getNotes();
      })
      .catch((err) => alert(err));
  };

  return (
    <div>
      <div>
        <h2>Notes</h2>
        {notes.map((note) => (
          <Note note={note} onDelete={deleteNote} key={note.id} />
        ))}
      </div>
      <h2>Create a Note</h2>
      <form onSubmit={createNote}>
        <label htmlFor="title">Title:</label>
        <br />
        <input
          type="text"
          id="title"
          name="title"
          required
          onChange={(e) => setTitle(e.target.value)}
          value={title}
        />
        <label htmlFor="content">Content:</label>
        <br />
        <textarea
          id="content"
          name="content"
          required
          value={content}
          onChange={(e) => setContent(e.target.value)}
        ></textarea>
        <br />
        <input type="submit" value="Submit"></input>
      </form>
    </div>
  );
}

export default Home;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

Note.jsx :

import React from "react";
import "../styles/Note.css"

function Note({ note, onDelete }) {
    const formattedDate = new Date(note.created_at).toLocaleDateString("en-US")

    return (
        <div className="note-container">
            <p className="note-title">{note.title}</p>
            <p className="note-content">{note.content}</p>
            <p className="note-date">{formattedDate}</p>
            <button className="delete-button" onClick={() => onDelete(note.id)}>
                Delete
            </button>
        </div>
    );
}

export default Note
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Note.css :

.note-container {
  padding: 10px;
  margin: 20px 0;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.note-title {
  color: #333;
}

.note-content {
  color: #666;
}

.note-date {
  color: #999;
  font-size: 0.8rem;
}

.delete-button {
  background-color: #f44336; /* Red */
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.delete-button:hover {
  background-color: #d32f2f; /* Darker red */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

省略一些文件例如 LoadingIndicator.jsx 等。

部署数据库

1 创建远程数据库服务

在网站 choreo上部署。左侧 tab 选择 database，然后创建 PostgreSQL 服务。

创建一个名称为 db 的数据库，虽然注明 0.03美元每小时，但不会真正收费，因为是免费的开发版，数据库每小时后会自动关闭服务，需手动开启。

copy 以上参数，paste 到 django 后端，实现数据库连接。

backend 目录新建文件： \backend\.env:

DB_HOST=
DB_PORT=
DB_USER=
DB_NAME=
DB_PWD=
1
2
3
4
5

然后复制粘贴choreo上的各项参数，所有的值全部放在双引号中。

2 连接远程数据库

修改backend\backend\settings.py中的数据库设置：

DATABASES = {
    "default": {
        "ENGINE": "django.db.backends.sqlite3",
        "NAME": BASE_DIR / "db.sqlite3",
    }
}
1
2
3
4
5
6

改为：

DATABASES = {
    "default": {
        "ENGINE": "django.db.backends.postgresql",
        "NAME": os.getenv("DB_NAME"),
        "USER": os.getenv("DB_USER"),
        "PASSWORD": os.getenv("DB_PWD"),
        "HOST": os.getenv("DB_HOST"),
        "PORT": os.getenv("DB_PORT"),
    }
}
1
2
3
4
5
6
7
8
9
10

依次运行命令：

python manage.py migrate，此命令连接远程数据库，因此需要较长时间，这一命令完成后，可以像之前那样启动后端，但此时数据库是远程的 PostgreSQL.

python manage.py runserver，前端正常 work.

部署后端

1. 新建 github 仓库

需要将后端代码 push 到 github，之后，每次 commit 到 github, choreo 将自动更新部署。

1.1 新建 .gitignore 文件：

1.2 同时在 frontend\.gitignore 文件中也增加 env。

backend\.gitignore ：

.env
db.sqlite3
1
2

1.3 新建 Choreo 配置文件：backend\.choreo\endpoints.yaml:

version: 0.1

endpoints:
  - name: "REST API"
    port: 8000
    type: REST
    networkVisibility: Public
    context: /
1
2
3
4
5
6
7
8

1.4 新建 Procfile, 用以设置执行此应用程序的命令, `

0.0.0.0` 表示允许在任意 origin 或公共地址上允许访问 app.

web: python manage.py runserver 0.0.0.0:8000
1

1.5 本地新建 git 仓库

1. 将前端和后端代码都加到 git 中：

PS D:\yt\django\django-react-tutorial> git init
Initialized empty Git repository in D:/yt/django/django-react-tutorial/.git/
PS D:\yt\django\django-react-tutorial> git add .
warning: in the working copy of 'frontend/.eslintrc.cjs', LF will be replaced by CRLF the next time Git touches it
.....................
warning: in the working copy of 'frontend/vite.config.js', LF will be replaced by CRLF the next time Git touches it  
PS D:\yt\django\django-react-tutorial> git commit -m "first commit"
[master (root-commit) aa8caac] first commit
 59 files changed, 8381 insertions(+)
 create mode 100644 .gitignore
 .....
PS D:\yt\django\django-react-tutorial>
1
2
3
4
5
6
7
8
9
10
11
12

2. 然后将主分支名称改为 main ， github 要求使用此分支名:

PS D:\yt\django\django-react-tutorial> git branch
* master
PS D:\yt\django\django-react-tutorial> git branch -M main
PS D:\yt\django\django-react-tutorial> git branch
* main
PS D:\yt\django\django-react-tutorial> 
1
2
3
4
5
6

3. github 新建一个名称为 "Django-React-Full-Stack` 的仓库，必须设为 “public"， 因为 Choreo 免费开发版只支持访问 public 仓库。

4. 执行 github 上列出的如下命令：

PS D:\yt\django\django-react-tutorial> git remote add origin https://github.com/alice201601/Django-React-Full-Stack.git
error: remote origin already exists.
PS D:\yt\django\django-react-tutorial> git push -u origin main                                                       
Enumerating objects: 74, done.
1
2
3
4

1.6 部署
Choreo 新建工程：Django-React-Tutorial,
创建两个组件，组件类型 backend 选 service，frontend 选 web application,
frontend:

Choreo 构建相应的组件，并部署。

部署前端

代码修改后，使用的 git 命令:

git push origin main 上传到 github

若干步骤都和 Choreo 相关，省略。

部署完成

Django + React + PostgreSQL，运行ok：