一、情况预备与验证
这里为淘汰篇幅，默认大家都安装好了这些软件。不会下载安装的，教程也很多，这里不再做赘述。话不多说，咱们开始：
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
- 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项目
手动创建：
- 打开PyCharm → New Project
- 选择"Django"项目类型
- 设置：
- Location: your-path/backend
- Python表明器：选择3.8+
- 勾选"Create virtual environment"
- Django版本：5.0.3
- 点击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',
- }
- }
也就是通过简答的代码创建数据表，简朴表明下：
- 将数据库表映射为类：每个数据库表对应一个类（称为模子类）。
- 将表中的记录映射为对象：表中的每一行数据对应一个对象实例。
- 通过对象操作数据库：开发者可以通过操作对象来实现对数据库的增、删、改、查操作，而无需直接编写 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)
- # 创建迁移文件并应用迁移
- 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 User
- class 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)
注意：这里必要设置两处urls。除默认创建好的，还要在Login目次下手动创建一个urls.py文件，注意区分！详细设置如下：
- （backend/urls.py）
- from django.contrib import admin
- from django.urls import path,include
- urlpatterns = [
- path('admin/', admin.site.urls),
- path('Login/', include('Login.urls')),
- ]
- （backend/Login/urls.py）
- from django.urls import path
- from .views import RegisterView
- urlpatterns = [
- path('register/', RegisterView.as_view(), name='register'),
- ]
在完成上面操作后，在终端当前目次下，运行以下命令，启动后端：
- python manage.py runserver
四、前端项目初始化（VSCode）
1.创建vue3项目
这里记得进入到目次fullstack-project下
进入目次后运行以下命令：注意这个命令是安装Node.js中之后才华运行的。这一指令将会安装并实行 create-vue，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示：
如果不知道怎么选的按我这个就行，然后回车应该还会有功能，不用再空格选了，直接回车。frontend创建好后进入该目次，然后按提示依次运行命令即可：
注意：npm run format 是一个用于代码格式化的命令，通常用于确保代码风格一致。它并不是启动项目的必要步骤。这里直接跳过，运行启动命令即可正常启动。
运行命令启动看是否创建成功，点击出现的默认url：
示例：
2.设置项目
VS Code打开刚创建好的前端项目，这里还要做一些小设置，为前后端联调做预备。
Ctrl+` 打开终端，安装以下依赖项，此中，axios 用于与后端举行数据交互，vue-router 用于实现页面的路由管理
- npm install axios vue-router
- frontend/
- ├── src/
- │ ├── api/ # API请求封装
- │ ├── router/ # 路由配置
- │ ├── views/ # 页面组件
- │ ├── App.vue
- │ └── 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,
- }
- }
- }
-
- })
这里为方便直接在App.vue文件中作修改。拿去复制即可：
样式：
在 Vue 3 中，const login = async () => { ... } 是一种常用的定义异步函数的方法，但它并不是 Vue 3 特有的写法，而是 JavaScript 的语法。这种写法在 Vue 3 的代码中非常常见，尤其是在处置惩罚异步逻辑（如 API 哀求）时。
这时候试着输入内容，点击注册，即可看到弹框内容：注册成功。
检察数据库看到，内容成功存入数据库：
总结
顺利走到这就实现了一个简朴的前后端联调注册功能^-^
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
