来源引用网络知识与某站曹老师视频相互结合学习记录，仅供参考！
架构搭建
一、后端架构搭建
创建项目
1、PyCharm 工具→文件(F)→新建项目...→选中“Django”项目→自定义输入名称后单击“创建”按钮，推荐使用项目虚拟环境；
2、打开项目“python_admin”应用下的“settings.py”配置文件，删除“INSTALLED_APPS”配置项下的“admin”设置项，admin 系统是 Django 内置的管理系统，这里需要把它给删除掉，不然的话请求可能会有冲突；
3、在项目开发过程中，为了维护方便，采用多模块子模块方式，PyCharm 工具→工具(T)→运行 manage.py 任务...（Ctrl+Alt+R）→打开 Django 内置工具来创建子模块；这里创建 3 个子模块（烦请根据实际项目需要自行创建）；
# user用户模块 startapp user # role角色模块 startapp role # menu菜单模块 startapp menu4、分别在“user用户、role角色、menu菜单”子模块下新建名称为“urls”的 Python 文件；
5、修改项目“python_admin”应用下的“urls.py”文件中的映射关系，填写完成后建议先注释一下，因为其他子模块中的“urls.py”文件现在都是空的，此时若运行项目则会报错，得至少有一个请求；
from django.urls import path, include urlpatterns = [ # 导包引入from django.urls import include # 表示前端用户请求是“某某”开头的话会全部分发到对应的模块中，具体的请求再去对应的子模块里去匹配处理 # path('user/', include('user.urls')), # 用户模块 # path('role/', include('role.urls')), # 角色模块 # path('menu/', include('menu.urls')), # 菜单权限模块 ]配置数据库连接
6、新建数据库，数据库名烦请自定义，配置文件中设置对应即可；
7、修改项目“python_admin”应用下的“settings.py”配置文件，设置“DATABASES”项数据库连接信息；注意配置的数据库表要与你的实际情况一致，这里仅供参考；
DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME': 'db_admin', 'USER': 'root', 'PASSWORD': '123', 'HOST': '192.168.88.145', 'PORT': '3306' } }创建实体
8、打开 user 子模块中的“models.py”文件，创建用户实体类，输入以下内容；
from django.db import models # Create your models here. class SysUser(models.Model): id = models.AutoField(primary_key=True) username = models.CharField(max_length=100, unique=True, verbose_name='用户名') password = models.CharField(max_length=100, verbose_name='密码') avatar = models.CharField(max_length=255, null=True, verbose_name='用户头像') email = models.CharField(max_length=100, null=True, verbose_name='用户邮箱') phonenumber = models.CharField(max_length=11, null=True, verbose_name='手机号码') login_date = models.DateField(null=True, verbose_name='最后登录时间') status = models.IntegerField(null=True, verbose_name='账号状态(0正常 1停用)') create_time = models.DateField(null=True, verbose_name='创建时间') update_time = models.DateField(null=True, verbose_name='更新时间') remark = models.CharField(max_length=500, null=True, verbose_name='备注') class Meta: db_table = 'sys_user'迁移数据生成数据库表
9、PyCharm 工具(I)菜单栏选中“运行 manage.py 任务...（快捷键 Ctrl+Alt+R）”，使用 Django5 manage.py 提供的内置命令，先执行“makemigrations user”生成数据库迁移文件，再执行“migrate user”执行迁移文件，同步到数据库中会生成“sys_user”数据表；
添加测试数据
10、数据库表生成后，目前是没有任何数据信息记录的，所以需要添加一些测试数据，新建查询输入命令，然后运行，执行成功后刷新数据库表，查看测试数据已经成功添加；
insert into `sys_user` (`id`, `username`, `password`, `avatar`, `email`,`phonenumber`, `login_date`, `status`, `create_time`, `update_time`, `remark`) values ('1','python','123456','20240906202303.jpg','baidu2000@126.com','13333333333','2024-08-08','1','2024-08-08','2024-08-08','超级管理员'); insert into `sys_user` (`id`, `username`, `password`, `avatar`, `email`,`phonenumber`, `login_date`, `status`, `create_time`, `update_time`, `remark`) values ('3','dev','123456','20240808230603.jpg','douban@126.com','15555555555','2024-08-08','0','2024-08-08','2024-08-14','测试用户'); insert into `sys_user` (`id`, `username`, `password`, `avatar`, `email`,`phonenumber`, `login_date`, `status`, `create_time`, `update_time`, `remark`) values ('6','test','123456','20240808230603.jpg',NULL,NULL,NULL,'1',NULL,NULL,NULL); insert into `sys_user` (`id`, `username`, `password`, `avatar`, `email`,`phonenumber`, `login_date`, `status`, `create_time`, `update_time`, `remark`) values ('7','prod','123456','20240808230603.jpg',NULL,NULL,NULL,'1',NULL,NULL,NULL); insert into `sys_user` (`id`, `username`, `password`, `avatar`, `email`,`phonenumber`, `login_date`, `status`, `create_time`, `update_time`, `remark`) values ('8','6','123456','20240808230603.jpg',NULL,NULL,NULL,'0',NULL,NULL,NULL); insert into `sys_user` (`id`, `username`, `password`, `avatar`, `email`,`phonenumber`, `login_date`, `status`, `create_time`, `update_time`, `remark`) values ('11','9','123456','20240808230603.jpg',NULL,NULL,NULL,'1',NULL,NULL,NULL); insert into `sys_user` (`id`, `username`, `password`, `avatar`, `email`,`phonenumber`, `login_date`, `status`, `create_time`, `update_time`, `remark`) values ('14','marry','123456','default.jpg','hao123@126.com','16666666666',NULL,'1','2024-08-13',NULL,'33'); insert into `sys_user` (`id`, `username`, `password`, `avatar`, `email`,`phonenumber`, `login_date`, `status`, `create_time`, `update_time`, `remark`) values ('15','jack','123456','default.jpg','chrome@126.com','17777777777',NULL,'1','2024-08-13','2024-09-06','禁用用户测试4'); insert into `sys_user` (`id`, `username`, `password`, `avatar`, `email`,`phonenumber`, `login_date`, `status`, `create_time`, `update_time`, `remark`) values ('16','queen','123456','default.jpg','1@126.com','18888888888',NULL,'1','2024-08-18','2024-08-18','115'); insert into `sys_user` (`id`, `username`, `password`, `avatar`, `email`,`phonenumber`, `login_date`, `status`, `create_time`, `update_time`, `remark`) values ('17','king','123456','default.jpg','111@qq.com','19999999999',NULL,'1','2024-09-05',NULL,'555');开发业务接口示例（仅供参考）
开发接口建议尽可能的去遵循 Restful 规范，特殊情况特殊处理；
11、修改“user”子模块应用下的“views.py”文件，输入以下内容；
from django.http import JsonResponse from django.shortcuts import render from django.views import View # Create your views here. # 定义TestView类(导包引入from django.views import View) class TestView(View): def get(self, request): # 导包引入from django.http import JsonResponse return JsonResponse({'code': 200, 'info': '测试'})12、在“user”子模块应用下的“urls.py”文件中添加映射，定义下请求的映射关系；
from django.urls import path from user.views import TestView urlpatterns = [ path('test', TestView.as_view(), name='test'), # test测试 ]13、修改项目“python_admin”应用下的“urls.py”文件内容，添加 user 子模块用户模块映射关系；
from django.contrib import admin from django.urls import path, include urlpatterns = [ # 导包引入from django.urls import include # 表示前端用户请求是“某某”开头的话会全部分发到对应的模块中，具体的请求再去对应的子模块里去匹配处理 path('user/', include('user.urls')), # 用户模块 # path('role/', include('role.urls')), # 角色模块 # path('menu/', include('menu.urls')), # 菜单权限模块 ]14、运行项目，浏览器输入“http://127.0.0.1:8000/user/test”测试验证功能正常；
15、开发业务接口，查询所有用户信息；修改“user”子模块应用下的“views.py”文件内容，查询出所有用户信息，经过测试验证，不可以把查询出来的所有数据传给前端，对象不能直接传递，因为QuerySet 不是一个 JSON 序列化，它必须得是一个 JSON 序列化的才行；
from django.http import JsonResponse from django.shortcuts import render from django.views import View from user.models import SysUser # Create your views here. # 定义TestView类(导包引入from django.views import View) class TestView(View): def get(self, request): # 导包引入from user.models import SysUser，通过objects.all()查询所有用户信息 userList_obj = SysUser.objects.all() print(userList_obj, type(userList_obj)) # 导包引入from django.http import JsonResponse return JsonResponse({'code': 200, 'info': '测试', 'data': userList_obj})16、转化为 JSON 序列化数据信息，修改“user”子模块应用下的“views.py”文件内容，通过调用 all() 方法，返回QuerySet 类型的对象给数据集，然后通过 values 方法转存为字典类型数据集，最后通过 list 方法，转换成 List 集合再返回给前端；
from django.http import JsonResponse from django.shortcuts import render from django.views import View from user.models import SysUser # Create your views here. # 定义TestView类(导包引入from django.views import View) class TestView(View): def get(self, request): # 导包引入from user.models import SysUser，通过objects.all()查询所有用户信息 userList_obj = SysUser.objects.all() print(f'打印查看userList_obj类型：{type(userList_obj)}，查看: {userList_obj}，') # 转存字典，里面的对象转换为了字典类型 userList_dict = userList_obj.values() print(f'打印查看userList_dict2类型: {type(userList_dict)}，查看：{userList_dict}') # 把外层的容器转为List userList = list(userList_dict) print(f'打印查看userList类型: {type(userList)}，查看：{userList}') # 导包引入from django.http import JsonResponse return JsonResponse({'code': 200, 'info': '测试', 'data': userList})17、浏览器输入“http://127.0.0.1:8000/user/test”测试验证能够正常访问到所有数据，转换后的 List 就是一个标准的 JSON 序列化；
二、前端架构搭建
推荐使用 vue ui 来搭建vue项目；vue ui是一个可视化图形界面，可以方便地去创建、更新和管理vue项目，包括下载router、vuex、axios、elementui等插件，配置好一些属性以及依赖关系，方便使用。
安装 node
自行网络下载安装，推荐安装 node.js 的版本是 v16.13.2 稳定版，最好是版本一致，不然可能会有其他问题；这里本地计算机已经有一个 14 版本的了，版本有些低了，建议可下载安装新的版本，如若暂时使用，出现版本不一致问题，烦请自行解决；
可自行“Node.js — Download Node.js®”下载安装其他版本（所有node版本：https://nodejs.org/dist/），这里安装本地计算机系统选择了一个长期稳定的版本 v22.23.1 LTS；
安装 Vue Cli 脚手架
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统；
vue-cli 是官方（介绍 | Vue CLI）发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目，因为 vue ui 是在 Vue Cli 基础上封装的；
# 首先系统需要全局安装Vue脚手架--安装目前最新版 npm install -g @vue/cli # 安装指定版本 npm install vue-cli@版本号 -g # 或 npm install @vue/cli@版本号 -g # 查看脚手架版本号 npm view vue-cli versions --json # 或 npm view @vue/cli versions --json # 如果已经安装过其他版本，需要升级或降级，先卸载再重新安装 # 卸载 npm uninstall vue-cli -g # 或 npm uninstall @vue/cli -gnpm服务器在国外，不配置的话下载可能会很慢或者根本连不上；可自行设置，或可自行耐心等待（warn 警告可暂不理会，提示某某包的功能已弃用，不再维护）；
安装完成后输入验证命令“vue --version”或“vue -V”自行查看；
vue ui 搭建 vue 项目
命令行窗口执行“vue ui”命令后会自动打开一个 Vue 项目管理器页面（自行查看）；
创建项目，烦请根据实际情况自行选择文件路径，单击“➕ 在此创建新项目”按钮在此目录下创建；
自定义命名，包管理器下拉框选中“npm”，关闭初始化 git 仓库选项，单击“下一步 →”按钮；
选择“手动”配置，单击“下一步 →”按钮；
选择功能，开启“Babel、Router、Vuex”选项，单击“下一步 →”按钮；
默认即可，单击“创建项目”按钮；
预设名可不输入，直接单击“创建项目，不保存预设”按钮（自行选择）；
正在创建项目，稍等一会（预计 1 分钟左右）；
项目提示已经创建完了，创建完成之后会生成一个项目目录，可自行打开查看；
自行导入查看；
打开“package.json”文件查看，可自行保存一份源文件；
{ "name": "python_vue5_admin", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build" }, "dependencies": { "core-js": "^3.8.3", "vue": "^3.2.13", "vue-router": "^4.0.3", "vuex": "^4.0.0" }, "devDependencies": { "@vue/cli-plugin-babel": "~5.0.0", "@vue/cli-plugin-router": "~5.0.0", "@vue/cli-plugin-vuex": "~5.0.0", "@vue/cli-service": "~5.0.0" }, "browserslist": [ "> 1%", "last 2 versions", "not dead", "not ie 11" ] }安装 axios element-plus 等依赖
修改“package.json”文件内容，修改完成后鼠标选中“package.json”文件，右键单击在菜单中选择“Run 'npm install'”选项开始安装；
{ "name": "python_vue5_admin", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build" }, "dependencies": { "axios": "^1.7.2", "core-js": "^3.8.3", "element-plus": "^2.2.6", "sass": "^1.52.3", "sass-loader": "^13.0.0", "vue": "^3.2.13", "vue-router": "^4.0.3", "vuex": "^4.0.0", "webpack": "^5.73.0", "svg-sprite-loader": "^6.0.11", "qs": "^6.10.5", "js-cookie": "^3.0.1", "jsencrypt": "^3.2.1" }, "devDependencies": { "@vue/cli-plugin-babel": "~5.0.0", "@vue/cli-plugin-router": "~5.0.0", "@vue/cli-plugin-vuex": "~5.0.0", "@vue/cli-service": "~5.0.0" }, "browserslist": [ "> 1%", "last 2 versions", "not dead", "not ie 11" ] }或者可自行手动完整相关依赖；
等待安装，稍等一会；
项目测试验证
依赖下载安装完成之后启动项目，在终端命令窗口输入“npm run serve”命令启动项目，启动成功后自行打开测试查看；
测试使用 Element Plus
Element Plus 是一个 Vue 前端 UI 框架；Element Plus 官网：https://element-plus.org/zh-CN/
导入 Element Plus 以及样式，修改“main.js”文件内容；
import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' createApp(App).use(store).use(router).use(ElementPlus).mount('#app')修改过后，这样就能使用 Element Plus 组件；
例如：选择 Element Plus 组件中 Basic 基础组件里面的 Button 按钮组件，复制代码；
注意备份“HomeView.vue”源文件，以便还原；
<template> <div class="home"> <img alt="Vue logo" src="../assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> </div> </template> <script> // @ is an alias to /src import HelloWorld from '@/components/HelloWorld.vue' export default { name: 'HomeView', components: { HelloWorld } } </script>把复制的代码粘贴到“HomeView.vue”文件中，替换原来的代码，再修改一下，删除 lang="ts" 代码部分，因为“ts”目前还不支持；
<template> <div class="button-example"> <div class="button-row"> <el-button>Default</el-button> <el-button type="primary">Primary</el-button> <el-button type="success">Success</el-button> <el-button type="info">Info</el-button> <el-button type="warning">Warning</el-button> <el-button type="danger">Danger</el-button> </div> <div class="button-row"> <el-button plain>Plain</el-button> <el-button type="primary" plain>Primary</el-button> <el-button type="success" plain>Success</el-button> <el-button type="info" plain>Info</el-button> <el-button type="warning" plain>Warning</el-button> <el-button type="danger" plain>Danger</el-button> </div> <div class="button-row"> <el-button round>Round</el-button> <el-button type="primary" round>Primary</el-button> <el-button type="success" round>Success</el-button> <el-button type="info" round>Info</el-button> <el-button type="warning" round>Warning</el-button> <el-button type="danger" round>Danger</el-button> </div> <div class="button-row"> <el-button dashed>Dashed</el-button> <el-button type="primary" dashed>Primary</el-button> <el-button type="success" dashed>Success</el-button> <el-button type="info" dashed>Info</el-button> <el-button type="warning" dashed>Warning</el-button> <el-button type="danger" dashed>Danger</el-button> </div> <div class="button-row"> <el-button :icon="Search" circle /> <el-button type="primary" :icon="Edit" circle /> <el-button type="success" :icon="Check" circle /> <el-button type="info" :icon="Message" circle /> <el-button type="warning" :icon="Star" circle /> <el-button type="danger" :icon="Delete" circle /> </div> </div> </template> <script setup> import { Check, Delete, Edit, Message, Search, Star, } from '@element-plus/icons-vue' </script> <style scoped> .button-example { display: flex; flex-direction: column; gap: 1rem; } .button-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; } .button-row > * { margin: 0; } </style>再次查看“Home”页面，已经成功更改。
未完待续......
