基于 Django+Vue+Ollama 技术栈构建的管理系统框架

原创已于 2025-10-22 11:38:37 修改 · 置顶 · 481 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#django #vue.js #python

于 2025-10-17 12:03:31 首次发布

python 专栏收录该内容

12 篇文章

订阅专栏

这是一个新出的开发框架，对新手特别友好！！！

首先进入管理端：

首先看到的仪表盘，当前展示的虚拟基础数据由后端 Django 集成 pandas 处理统计逻辑，通过 API 返回用户量、操作频次等聚合数据，前端则用 Vue 结合 Chart.js 渲染折线图、饼图等可视化组件，后续接入真实数据源时，只需修改 Django 的数据源配置（如对接 MySQL、PostgreSQL），前端无需改动即可实现数据更新，充分体现前后端分离的解耦优势

用户管理模块支持对所有用户进行增删改查操作，后端通过 Django REST Framework 提供完整的 CRUD API，权限控制依托 Django 的 Group 与 Permission 系统，选中用户分配角色时，通过 API 直接关联用户与角色模型，前端则用 Element Plus 的 Table 组件展示用户列表，支持分页、筛选与批量操作，操作按钮直接绑定后端 API 请求，简化开发流程

菜单管理模块可自定义系统内具体页面，后端通过 Django Model 定义菜单结构（含父级 ID、路由路径、图标标识等字段），提供菜单层级调整与状态切换 API，前端则用 Vue 的 Tree 组件展示菜单层级关系，编辑时通过 API 实时更新菜单数据，新增页面只需在 Vue 中创建对应组件并关联菜单路由，即可快速集成至系统

角色管理模块支持先定义角色再精准分配页面访问权限，后端通过 Django Group 模型创建角色，结合 Permission 模型定义页面访问权限，通过 API 实现角色与权限的关联绑定，前端则用 Vue 的 Form 组件编辑角色信息，配合 Checkbox 组件实现权限多选，提交后直接调用 API 保存配置，确保权限控制颗粒度

通知管理模块支持编辑内容后向全量用户发送，后端集成 django-ckeditor 提供富文本编辑能力，发送功能通过 Celery 异步任务处理，避免阻塞主线程，前端则用 Vue 的富文本编辑器组件编辑通知内容，发送按钮触发 API 请求后，后端通过 Celery 批量推送至所有用户，前端实时接收并展示

日志管理模块会自动记录所有操作行为（包括查看通知、修改信息等动作），后端通过 django-activity-log 记录操作人、操作时间、IP 地址、操作内容等日志数据，提供按时间、用户筛选的查询 API，前端则用 Table 组件展示日志列表，支持分页与关键词搜索，方便追溯操作轨迹

知识库管理相当于文章管理模块，后端通过 Django Model 定义知识库内容结构，提供编辑、删除、分类调整的 API，前端则用富文本编辑器实现内容修改，表格组件展示知识库列表，点击编辑即可调用 API 更新数据，灵活适配各类资料的维护需求

现在进入用户端，首页作为核心入口，采用 Vue 组件化开发模式，页面布局基于 Vue 的模板语法与 Sass 预处理器实现，支持按业务需求灵活替换头部导航、轮播图等组件，后端则通过 Django 的 TemplateView 提供基础页面渲染，同时借助 Django REST Framework 封装接口，确保前端组件与后端数据的高效联动；

系统监控功能能实时查看设备 CPU 占用、运行内存等状态，后端通过 Django 集成 psutil 库采集硬件数据，再借助 Django Channels 实现 WebSocket 实时推送，前端则用 Vue 结合 ECharts 渲染动态监控图表，让数据可视化更直观；

此外模板还集成了 AI 助手功能，核心依托 Ollama 本地化部署的大模型，后端通过 Django 封装 Ollama 的 API 接口，处理会话上下文管理与请求转发，前端则用 Vue 的 Pinia 管理会话历史，配合 vue-chat-scroll 组件实现类似主流 AI 工具的对话交互体验；