一、環境準備與驗證

這里為減少篇幅，默認大家都安裝好了這些軟件。不會下載安裝的，教程也很多，這里不再做贅述。話不多說，咱們開始：

1. 安裝驗證

確保已安裝以下軟件并驗證版本：

# 驗證Node.js
node -v  # 應顯示v16.x或更高，我安裝的是v20.18.0
npm -v# 驗證Python
python --version  # 應顯示3.8.x或更高，這是 Django 5.0 支持的最低版本。我用的3.12.9
pip --version# 驗證MySQL
mysql --version

2. 開發工具準備

• ?PyCharm專業版：用于Django后端開發
• ?VSCode：用于Vue前端開發
• ?Navicat（可選）：數據庫可視化工具

?二、MySQL數據庫配置?

如果有數據庫可視化工具就直接點點點創建即可，這里不做贅述，只說明如何用命令行創建：

mysql -u root -p //登錄數據庫，回車后輸入密碼即可CREATE DATABASE fullstack;  //創建數據庫，注意分號結尾SHOW DATABASES; //產看數據庫是否創建成功

?示例：

注意，這里不用手動創建數據表或者使用原生SQL語句，下面在Django 中定義模型類并通過遷移系統創建表。這就是我們常說的ORM（對象關系映射）

?三、后端項目初始化（PyCharm）

這里有兩種方法，專業版的可以直接手動創建，不是專業版的可以用另一種命令行創建的方法。

• 這里推薦大家學習使用如何用命令行創建，能夠學到關于虛擬環境的創建方法。虛擬環境對于我們日后的學習如何管理python項目很有用。
• 在虛擬環境中安裝的庫不會影響全局 Python 環境和其他虛擬環境。這樣就可以為每個項目精確地安裝所需的依賴，避免了不同項目之間依賴庫版本的沖突。
• 而且可以通過導出虛擬環境中的依賴列表（使用?pip freeze > requirements.txt 命令），來快速重建相同的環境

1. 創建Django項目

手動創建：

1. 打開PyCharm → New Project
2. 選擇"Django"項目類型
3. 配置：
   • Location:?your-path/backend
   • Python解釋器：選擇3.8+
   • 勾選"Create virtual environment"
   • Django版本：5.0.3
4. 點擊Create

命令行創建?

首先創建一個虛擬環境，注意我這里使用 conda 創建虛擬環境。

conda create -n django_env python=3.12.9  //創建虛擬環境conda activate django_env //激活虛擬環境pip install django==5.0.3 //安裝必要庫mkdir fullstack-project //創建文件夾，存放前后端項目文件cd fullstack-project //切換到文件夾django-admin startproject backend  //命令行創建項目文件python manage.py startapp Login  //創建登錄應用pip install django-cors-headers mysqlclient// 在該虛擬環境下安裝必要依賴?

其中：?

• django-cors-headers：用于解決 Django 項目中的跨域問題，配置靈活，使用簡單。
• mysqlclient：用于 Python 連接 MySQL 數據庫，性能優越，功能強大，是 Django 推薦的 MySQL 數據庫驅動之一。

?用PyCharm打開即可看到目錄結構長這樣：

2.配置項目

修改?backend/settings.py:

INSTALLED_APPS = [...'rest_framework','corsheaders','Login',
]MIDDLEWARE = ['corsheaders.middleware.CorsMiddleware',#需注意與其他中間件順序，這里放在最前面即可...
]# 允許所有域名跨域訪問（開發環境使用，生產環境需要配置具體域名）
CORS_ORIGIN_ALLOW_ALL = True# 數據庫配置
DATABASES = {'default': {'ENGINE': 'django.db.backends.mysql','NAME': 'fullstack',  //要創建的數據庫名，我用的是fullstack'USER': 'your_mysql_username',  //數據庫用戶名'PASSWORD': 'your_mysql_password',  //數據庫密碼'HOST': 'localhost','PORT': '3306',}
}

3.模型定義(Login/models.py)

也就是通過簡答的代碼創建數據表，簡單解釋下：

1. 將數據庫表映射為類：每個數據庫表對應一個類（稱為模型類）。
2. 將表中的記錄映射為對象：表中的每一行數據對應一個對象實例。
3. 通過對象操作數據庫：開發者可以通過操作對象來實現對數據庫的增、刪、改、查操作，而無需直接編寫 SQL 語句。

（Login/models.py）from django.db import models# Create your models here.
class User(models.Model):username = models.CharField(max_length=50)password = models.CharField(max_length=50)

編寫完后打開終端cd到當前目錄下，我們要創建遷移文件并應用遷移，也就是讓代碼生效：

# 創建遷移文件并應用遷移
python manage.py makemigrations
python manage.py migrate

示例：

如果這時候你安裝有可視化數據庫軟件，打開刷新即可看到?：

4.創建視圖 (Login/views.py)

from rest_framework import status
from rest_framework.views import APIView
from rest_framework.response import Response
from .models import Userclass RegisterView(APIView):def post(self, request):username = request.data.get('username')password = request.data.get('password')if username and password:user = User.objects.create(username=username, password=password)return Response("User created successfully", status=status.HTTP_201_CREATED)else:return Response("Username and password are required", status=status.HTTP_400_BAD_REQUEST)

5.配置URL

注意：這里需要配置兩處urls。除默認創建好的，還要在Login目錄下手動創建一個urls.py文件，注意區分！具體配置如下：

（backend/urls.py）?
from django.contrib import admin
from django.urls import path,includeurlpatterns = [path('admin/', admin.site.urls),path('Login/', include('Login.urls')),
]（backend/Login/urls.py）
from django.urls import path
from .views import RegisterViewurlpatterns = [path('register/', RegisterView.as_view(), name='register'),
]

?6.啟動后端

在完成上面操作后，在終端當前目錄下，運行以下命令，啟動后端：

python manage.py runserver

?示例：

四、前端項目初始化（VSCode）

1.創建vue3項目

這里記得進入到目錄fullstack-project下

進入目錄后運行以下命令：注意這個命令是安裝Node.js中之后才能運行的。這一指令將會安裝并執行?create-vue，它是 Vue 官方的項目腳手架工具。你將會看到一些諸如 TypeScript 和測試支持之類的可選功能提示：

如果不知道怎么選的按我這個就行，然后回車應該還會有功能，不用再空格選了，直接回車。frontend創建好后進入該目錄，然后按提示依次運行命令即可：

注意：npm run format?是一個用于代碼格式化的命令，通常用于確保代碼風格一致。它并不是啟動項目的必要步驟。這里直接跳過，運行啟動命令即可正常啟動。

運行命令啟動看是否創建成功，點擊出現的默認url：

npm run dev

示例：

2.配置項目?

VS Code打開剛創建好的前端項目，這里還要做一些小配置，為前后端聯調做準備。

Ctrl+` 打開終端，安裝以下依賴項，其中，axios 用于與后端進行數據交互，vue-router 用于實現頁面的路由管理

npm install axios vue-router

安裝好后還要手動修改一下目錄結構：

frontend/
├── src/
│   ├── api/            # API請求封裝
│   ├── router/         # 路由配置
│   ├── views/          # 頁面組件
│   ├── App.vue
│   └── main.ts

然后將main.ts中的第一行樣式注銷：這是為了防止默認樣式干擾操作。

配置代理 (解決跨域)

在?frontend/vite.config.js?中添加：

import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'// https://vite.dev/config/
export default defineConfig({plugins: [vue(),vueDevTools(),],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))},},server: {proxy: {'/api': {target: 'http://localhost:8000',changeOrigin: true,}}}})

3.創建注冊頁面?

這里為方便直接在App.vue文件中作修改。拿去復制即可：

<template><div class="container"><div class="box"><div class="header"><h2>歡迎注冊</h2><svg t="1743150356672" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"p-id="4191" width="48" height="48"><pathd="M767.818667 409.173333C867.338667 444.266667 938.666667 539.136 938.666667 650.666667c0 42.709333-10.496 83.978667-30.261334 120.842666-1.792 3.338667-4.992 8.928-9.696 16.96l14.613334 53.557334c6.506667 23.893333-15.402667 45.813333-39.296 39.296l-53.642667-14.634667-6.229333 3.669333A254.933333 254.933333 0 0 1 682.666667 906.666667c-77.994667 0-147.84-34.88-194.805334-89.888a352.608 352.608 0 0 1-56.64 4.554666c-63.338667 0-124.266667-16.853333-177.472-48.298666-1.834667-1.088-6.410667-3.733333-13.632-7.893334l-80.544 21.653334c-23.914667 6.432-45.76-15.573333-39.146666-39.434667l21.792-78.752a961.205333 961.205333 0 0 1-15.904-27.317333A336.384 336.384 0 0 1 85.333333 480c0-188.618667 154.965333-341.333333 345.888-341.333333 159.914667 0 297.984 108.010667 335.818667 259.296 0.949333 3.765333 1.173333 7.552 0.778667 11.2z m-68.106667-13.952C662.88 282.037333 555.178667 202.666667 431.221333 202.666667 275.434667 202.666667 149.333333 326.933333 149.333333 480c0 46.272 11.498667 90.837333 33.194667 130.698667 2.88 5.290667 10.176 17.706667 21.621333 36.746666a32 32 0 0 1 3.413334 25.013334l-10.517334 37.994666 39.232-10.549333a32 32 0 0 1 24.234667 3.146667c14.272 8.192 22.773333 13.098667 25.802667 14.890666A283.882667 283.882667 0 0 0 431.221333 757.333333c6.154667 0 12.288-0.192 18.389334-0.576A255.061333 255.061333 0 0 1 426.666667 650.666667c0-141.386667 114.613333-256 256-256 5.728 0 11.413333 0.192 17.045333 0.554666z m133.706667 397.056a32 32 0 0 1 3.338666-24.725333 996.672 996.672 0 0 0 15.242667-26.293333A190.997333 190.997333 0 0 0 874.666667 650.666667c0-106.037333-85.962667-192-192-192s-192 85.962667-192 192 85.962667 192 192 192a190.933333 190.933333 0 0 0 98.570666-27.2c2.208-1.322667 8.288-4.874667 18.517334-10.837334a32 32 0 0 1 24.522666-3.210666l12.565334 3.424-3.424-12.565334zM330.666667 426.666667a42.666667 42.666667 0 1 1 0-85.333334 42.666667 42.666667 0 0 1 0 85.333334z m192 0a42.666667 42.666667 0 1 1 0-85.333334 42.666667 42.666667 0 0 1 0 85.333334z m85.333333 202.666666a32 32 0 1 1 0-64 32 32 0 0 1 0 64z m149.333333 0a32 32 0 1 1 0-64 32 32 0 0 1 0 64z"fill="#000000" p-id="4192"></path></svg></div><div class="content"><form @submit.prevent="login"><div class="form-item"><label>用戶名:</label><input v-model="username" type="text" required placeholder="請輸入用戶名"></div><div class="form-item"><label>密碼:</label><input v-model="password" type="password" required placeholder="請輸入密碼"></div><div class="button-group"><button class="register-btn">注冊</button></div></form></div></div></div><!-- <RouterView /> -->
</template>
<script setup lang="ts">
import axios from 'axios'
import { ref } from 'vue'
const username = ref('')
const password = ref('')const login = async () => {try {const response = await axios.post('http://localhost:8000/Login/register/', {username: username.value,password: password.value})console.log(response)alert(response.data)} catch (error: any) {console.log(error.response)}}</script>
<style scoped>
.container {display: flex;justify-content: center;align-items: center;height: 100vh;/* 使用視口高度，確保容器高度覆蓋整個屏幕 */.box {width: 400px;height: 400px;border-radius: 10px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);.header {display: flex;justify-content: center;align-items: center;margin-top: 10px;h2 {margin-left: 10px;}}.form-item {/* display: flex; */flex-direction: column;margin: 20px 0;label {display: block;margin-bottom: 8px;color: #666;margin-left: 50px;}input {width: 300px;height: 30px;border: 1px solid #ccc;border-radius: 5px;margin-left: 50px;}}.content {.form-item1 {display: flex;align-items: center;label {margin-bottom: 8px;color: #666;margin-left: 30px;}input {width: 300px;height: 30px;border: 1px solid #ccc;border-radius: 5px;}}.button-group {display: flex;justify-content: center;margin-top: 30px;.register-btn {background-color: #67C23A;color: white;width: 200px;height: 40px;border-radius: 4px;border: none;/* 去掉邊框 */cursor: pointer;/* 鼠標移上去顯示手型 */font-size: 16px;transition: background-color 0.3s;/*平滑過渡：當元素的背景顏色發生變化時，不會立即切換，而是會在0.3秒內逐漸過渡到新的顏色。*/}.register-btn:hover {background-color: #85ce61;}}}}
}
</style>

樣式：
?

在 Vue 3 中，const login = async () => { ... } 是一種常用的定義異步函數的方法，但它并不是 Vue 3 特有的寫法，而是 JavaScript 的語法。這種寫法在 Vue 3 的代碼中非常常見，尤其是在處理異步邏輯（如 API 請求）時。

這時候試著輸入內容，點擊注冊，即可看到彈框內容：注冊成功。

查看數據庫看到，內容成功存入數據庫：

總結?

順利走到這就實現了一個簡單的前后端聯調注冊功能^-^