Django 权限系统项目实战详细图文教程1--前后端架构搭建设计-北京尧图网络

来源引用网络知识与某站曹老师视频相互结合学习记录仅供参考架构搭建一、后端架构搭建创建项目1、PyCharm 工具→文件(F)→新建项目...→选中“Django”项目→自定义输入名称后单击“创建”按钮推荐使用项目虚拟环境2、打开项目“python_admin”应用下的“settings.py”配置文件删除“INSTALLED_APPS”配置项下的“admin”设置项admin 系统是 Django 内置的管理系统这里需要把它给删除掉不然的话请求可能会有冲突3、在项目开发过程中为了维护方便采用多模块子模块方式PyCharm 工具→工具(T)→运行 manage.py 任务...CtrlAltR→打开 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_keyTrue) username models.CharField(max_length100, uniqueTrue, verbose_name用户名) password models.CharField(max_length100, verbose_name密码) avatar models.CharField(max_length255, nullTrue, verbose_name用户头像) email models.CharField(max_length100, nullTrue, verbose_name用户邮箱) phonenumber models.CharField(max_length11, nullTrue, verbose_name手机号码) login_date models.DateField(nullTrue, verbose_name最后登录时间) status models.IntegerField(nullTrue, verbose_name账号状态(0正常 1停用)) create_time models.DateField(nullTrue, verbose_name创建时间) update_time models.DateField(nullTrue, verbose_name更新时间) remark models.CharField(max_length500, nullTrue, verbose_name备注) class Meta: db_table sys_user迁移数据生成数据库表9、PyCharm 工具(I)菜单栏选中“运行 manage.py 任务...快捷键 CtrlAltR”使用 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,baidu2000126.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,douban126.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,hao123126.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,chrome126.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,1126.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,111qq.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(), nametest), # 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 PlusElement 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 classhome img altVue logo src../assets/logo.png HelloWorld msgWelcome 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”文件中替换原来的代码再修改一下删除 langts 代码部分因为“ts”目前还不支持template div classbutton-example div classbutton-row el-buttonDefault/el-button el-button typeprimaryPrimary/el-button el-button typesuccessSuccess/el-button el-button typeinfoInfo/el-button el-button typewarningWarning/el-button el-button typedangerDanger/el-button /div div classbutton-row el-button plainPlain/el-button el-button typeprimary plainPrimary/el-button el-button typesuccess plainSuccess/el-button el-button typeinfo plainInfo/el-button el-button typewarning plainWarning/el-button el-button typedanger plainDanger/el-button /div div classbutton-row el-button roundRound/el-button el-button typeprimary roundPrimary/el-button el-button typesuccess roundSuccess/el-button el-button typeinfo roundInfo/el-button el-button typewarning roundWarning/el-button el-button typedanger roundDanger/el-button /div div classbutton-row el-button dashedDashed/el-button el-button typeprimary dashedPrimary/el-button el-button typesuccess dashedSuccess/el-button el-button typeinfo dashedInfo/el-button el-button typewarning dashedWarning/el-button el-button typedanger dashedDanger/el-button /div div classbutton-row el-button :iconSearch circle / el-button typeprimary :iconEdit circle / el-button typesuccess :iconCheck circle / el-button typeinfo :iconMessage circle / el-button typewarning :iconStar circle / el-button typedanger :iconDelete 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”页面已经成功更改。未完待续......

Django 权限系统项目实战详细图文教程1--前后端架构搭建设计

相关推荐

容器虚拟化基础--NameSpace空间隔离详解

Java多线程八股文：核心知识点与高频面试题解析

OpenHarmony上Flutter勋章模块实战：从数据模型到多机型适配

更多资讯

NVFP4：让大模型从零预训练跑在4位浮点上

MX Linux 25.1双Init并存：SysVinit与systemd自由切换

SheerID-Verification-Tool部署指南：从本地到生产环境的无缝迁移

NVFP4预训练大模型：从量化训练到部署的全面解析

统一API架构下GPT-5.2与DeepSeek-V3.2模型选型与路由降级实战

AI驱动流程自动化实战：架构师视角的拆解与落地要点

今日更新

微信云开发旅游小程序实战：LBS打卡+UGC社交全栈方案

金融AI代理平台核心拆解：从多代理协作到财报分析实战

基于大数据的智慧旅游推荐与可视化平台架构实践

本周精选

金融AI落地指南：从调研报告到技术选型与工程实践

大模型上下文成本与注意力优化技术深度解析——为何O(n²)平方复杂度无法被常规优化消除｜TaoToken 统一 Key 通道实测

基于GMM的语音识别系统原理与MATLAB实现详解

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？