ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

Django+Vue个人理财系统毕业设计实战指南

Django+Vue个人理财系统毕业设计实战指南 简介这是一套面向计算机专业本科生的毕业设计级个人理财系统完整交付包基于PythonDjango后端与Vue前端构建解决个人收支管理、财务规划与多角色协同监控等实际问题适用于课程设计、毕设参考及全栈开发能力训练。资源共383个文件涵盖49个核心Python后端逻辑文件、40个Vue组件页面、28个PNG图标与界面素材、18个JS交互脚本、2个SQL数据库脚本及3个MP4演示视频另有bat批处理脚本如安装/运行/构建和备份.vue.bak文件压缩包仅18.9MB结构清晰、开箱即用。已有428人学习下载提供可直接部署的源码、含ER图与系统设计说明的毕业论文、MySQL数据库文件及全流程操作演示视频覆盖管理员用户双角色权限体系、账单分类管理、收支明细记录与统计分析模块助读者快速理解前后端分离架构落地细节与财务类业务建模方法。1. 这不是又一个 Todo List一套真实可跑的 DjangoVue 个人理财系统专为毕业设计打磨的全栈闭环你可能已经见过太多“基于 Django 的博客系统”“用 Vue 写的待办清单”但真正能放进毕业答辩 PPT、经得起导师现场演示、数据库表结构合理、前后端职责清晰、连密码修改逻辑都带.bak备份文件的完整理财系统——并不多。这套资源不是教学 Demo而是从用户角色分离管理员/普通用户、账单类型动态管理、收支双线记录到统计图表渲染虽未明说但源码含 ECharts 集成痕迹的闭环设计。它用 Django 做稳健的后端 API 和权限控制Vue 做响应式前端交互MySQL 存储真实财务数据所有模块都服务于“让大学生能讲清楚技术选型理由、能改出自己业务逻辑、能部署到本地或轻量云环境”这个核心目标。如果你正卡在毕业设计选题、开题报告里写不出技术深度或者调试时发现update-password.vue.bak比主文件还新——说明你拿到的不是模板而是一份被反复迭代过的实战工程。2. Django 后端从模型设计到 RESTful API 的落地细节2.1 为什么选 Django 而非 Flask关键在权限与 ORM 的开箱即用毕业设计不是造轮子比赛。Django 自带的User模型、auth系统、admin后台和ModelAdmin扩展能力直接覆盖了本系统中“管理员管理用户”“用户修改密码”“角色权限隔离”三大刚需。Flask 虽轻量但实现同等功能需手动集成Flask-Login、Flask-Security、自定义中间件和权限装饰器——对答辩时间紧张的学生而言调试登录态失效比理解ForeignKey(on_deletemodels.CASCADE)更耗精力。本项目models.py中的BillType账单类型、IncomeBill收入账单、ExpenseBill支出账单均继承自抽象基类BaseBill字段如amountDecimalField、dateDateField、remarkTextField全部按财务场景设精度与约束而非简单用CharField存金额字符串。这种设计让后续统计查询如IncomeBill.objects.filter(date__year2024).aggregate(Sum(amount))天然支持聚合运算避免前端做字符串转数字再累加的脆弱逻辑。2.2 核心模型关系与迁移命令实操系统数据库结构围绕“用户-账单-类型”三元关系构建。BillType表由管理员维护IncomeBill和ExpenseBill通过type_id外键关联同时各自关联UserDjango 默认auth.User。这种设计避免了用bill_type字符串硬编码分类如“工资”“餐饮”便于后期扩展多语言标签或图标配置。执行迁移前需确认settings.py中DATABASES配置指向本地 MySQL 实例# settings.py DATABASES { default: { ENGINE: django.db.backends.mysql, NAME: personal_finance_db, USER: root, PASSWORD: your_mysql_password, HOST: 127.0.0.1, PORT: 3306, OPTIONS: { charset: utf8mb4, }, } }提示MySQL 8.0 默认认证插件为caching_sha2_passwordDjango 连接可能报错Authentication plugin caching_sha2_password cannot be loaded。解决方法是在 MySQL 中执行ALTER USER rootlocalhost IDENTIFIED WITH mysql_native_password BY your_password;或在DATABASES中添加OPTIONS: {auth_plugin: mysql_native_password}。生成并执行迁移# 进入 manage.py 所在目录 python manage.py makemigrations python manage.py migrate迁移成功后用python manage.py createsuperuser创建管理员账号即可访问/admin/后台管理BillType和用户。2.3 REST API 设计用 Django REST Framework 暴露标准化接口项目未使用原生 Django View而是基于djangorestframework构建 API。关键点在于权限控制粒度管理员可访问/api/admin/users/用户列表、/api/admin/billtypes/账单类型 CRUD普通用户仅能访问/api/user/income/、/api/user/expense/、/api/user/profile/views.py中典型视图如下# api/views.py from rest_framework import generics, permissions from rest_framework.response import Response from django.contrib.auth.models import User from .models import IncomeBill, ExpenseBill, BillType from .serializers import IncomeBillSerializer, ExpenseBillSerializer, BillTypeSerializer class IncomeBillListCreateView(generics.ListCreateAPIView): serializer_class IncomeBillSerializer permission_classes [permissions.IsAuthenticated] def get_queryset(self): # 仅返回当前用户的数据 return IncomeBill.objects.filter(userself.request.user) def perform_create(self, serializer): # 自动绑定 user 字段 serializer.save(userself.request.user)对应serializers.py中需显式声明user字段为只读防止前端伪造# api/serializers.py class IncomeBillSerializer(serializers.ModelSerializer): class Meta: model IncomeBill fields [id, amount, date, remark, type, user] read_only_fields [user] # 关键禁止前端传入 user ID注意perform_create方法是 Django REST Framework 的标准钩子用于在保存前注入上下文数据。若遗漏此步user字段为空会导致 IntegrityError这是毕业设计调试中最常见的 500 错误之一。3. Vue 前端从BreadCrumbs.vue.bak看组件化开发的真实迭代痕迹3.1 为什么保留.bak文件Vue 组件演进的证据链项目中出现IndexAsideStatic.vue.bak、BreadCrumbs.vue.bak等备份文件绝非冗余。它们是 Vue 组件重构过程的快照比如BreadCrumbs.vue.bak可能是旧版静态面包屑硬编码路径而当前BreadCrumbs.vue已改为基于vue-router的route.matched动态生成。这种备份习惯说明开发者经历过“路由嵌套导致面包屑错乱”的典型问题——当IncomeBill列表页嵌套在FinanceModule下而FinanceModule又是Dashboard的子路由时this.$route.matched返回的数组顺序直接影响层级渲染。实际代码中动态面包屑逻辑如下!-- components/BreadCrumbs.vue -- template div classbreadcrumb span v-for(item, index) in breadcrumbs :keyindex router-link v-ifitem.path index breadcrumbs.length - 1 :toitem.path{{ item.meta.title }}/router-link span v-else{{ item.meta.title }}/span span v-ifindex breadcrumbs.length - 1 classseparator//span /span /div /template script export default { data() { return { breadcrumbs: [] } }, watch: { $route() { this.updateBreadcrumbs() } }, mounted() { this.updateBreadcrumbs() }, methods: { updateBreadcrumbs() { // 过滤掉无 meta.title 的路由如 404 this.breadcrumbs this.$route.matched.filter(route route.meta route.meta.title) } } } /script该组件依赖router/index.js中每个路由的meta配置// router/index.js { path: /finance/income, name: IncomeList, component: () import(/views/finance/IncomeList.vue), meta: { title: 收入账单, requireAuth: true } }3.2update-password.vue.bak揭示的密码安全实践update-password.vue.bak文件名暗示原始密码修改组件曾存在安全隐患新版已重构。当前UpdatePassword.vue应包含以下关键校验前端两次输入密码一致性检查、新密码强度提示至少8位含大小写字母数字后端Djangoset_password()方法自动哈希非明文存储、旧密码验证调用user.check_password(old_password)API 调用示例// api/user.js export function updatePassword(data) { return request({ url: /api/user/update-password/, method: post, data: { old_password: data.oldPassword, new_password: data.newPassword, confirm_password: data.confirmPassword } }) }对应 Django 视图需继承APIView并手动验证# api/views.py from django.contrib.auth import authenticate, login from rest_framework.views import APIView from rest_framework.response import Response from rest_framework import status class UpdatePasswordView(APIView): permission_classes [permissions.IsAuthenticated] def post(self, request): user request.user old_password request.data.get(old_password) new_password request.data.get(new_password) if not user.check_password(old_password): return Response({error: 原密码错误}, statusstatus.HTTP_400_BAD_REQUEST) user.set_password(new_password) user.save() return Response({message: 密码修改成功})提示Django 默认密码哈希算法为 PBKDF2 SHA256无需额外配置。若答辩被问及“如何保证密码安全”应回答“使用 Django 内置set_password()它自动调用PBKDF2PasswordHasher迭代次数默认 260000 次远超常见暴力破解成本。”4. 全栈联调从install.bat到run.bat的本地运行全流程4.1 批处理脚本解析Windows 环境下的自动化部署逻辑项目提供的1-install.bat、2-run.bat、3-build.bat并非简单包装命令而是针对学生开发环境的容错设计1-install.bat依次执行pip install -r requirements.txt、npm install、python manage.py migrate2-run.bat并行启动 Django 开发服务器python manage.py runserver 8000和 Vue 开发服务器npm run serve3-build.bat执行npm run build生成dist/静态文件并复制到 Djangostatic/目录供collectstatic使用关键细节在于端口与代理配置。Vue CLI 默认启动http://localhost:8080而 Django 在8000。为避免跨域vue.config.js必须配置代理// vue.config.js module.exports { devServer: { port: 8080, proxy: { /api: { target: http://127.0.0.1:8000, changeOrigin: true, pathRewrite: { ^/api: /api // 保持 API 路径一致 } } } } }这样前端axios.get(/api/user/profile/)实际请求http://127.0.0.1:8000/api/user/profile/规避浏览器同源策略。4.2 数据库初始化导入 SQL 文件与初始数据填充项目附带的database.sql或dump.sql文件需手动导入。推荐使用命令行避免图形界面字符集问题# 创建数据库UTF8MB4 支持 emoji 和四字节 Unicode mysql -u root -p -e CREATE DATABASE personal_finance_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; # 导入数据 mysql -u root -p personal_finance_db database.sql若database.sql包含INSERT INTO auth_user语句需注意 DjangoUser模型的password字段存储的是哈希值如pbkdf2_sha256$260000$...不可直接插入明文。更稳妥的做法是运行python manage.py loaddata initial_data.json若提供 fixtures或通过createsuperuser创建管理员后在 admin 后台手动添加测试用户。4.3 常见启动失败排查表现象可能原因解决方案ModuleNotFoundError: No module named rest_frameworkrequirements.txt未正确安装运行pip install -r requirements.txt确认djangorestframework版本与 Django 兼容DRF 3.14 支持 Django 4.2Vue 页面空白控制台报Failed to fetchDjango 服务未启动或代理配置错误检查2-run.bat是否两个窗口均正常运行验证http://127.0.0.1:8000/api/user/profile/能否在浏览器直接访问登录后跳转 404Vue Routermode: history未配置后端 fallback开发阶段用mode: hash生产部署需 Nginx 配置try_files $uri $uri/ /index.html;MySQL 连接拒绝本地 MySQL 服务未运行或端口被占用执行 netstat -ano5. 毕业设计答辩加分项三个可现场演示的技术亮点5.1 账单类型动态管理的数据库设计优势答辩时展示BillType表的 ER 图并对比两种实现硬编码方案前端下拉框写死[工资, 奖金, 兼职]→ 后端if type 工资分支判断 → 扩展新类型需改前后端代码本项目方案BillType表存name投资收益、icon、is_incomeTrue→ 前端v-for渲染 → 新增类型只需后台添加记录这种设计让“管理员新增‘理财收益’类型用户立即可在收入账单中选择”成为可演示功能体现数据库范式思想消除重复组和系统可维护性。5.2 权限控制的双重验证机制系统在 Django 层permission_classes和 Vue 层路由守卫做了双重拦截// router/index.js router.beforeEach((to, from, next) { const token localStorage.getItem(token) if (to.meta.requireAuth !token) { next(/login) } else if (to.meta.requireAdmin !store.state.user.is_staff) { next(/403) // 普通用户访问管理员路由 } else { next() } })答辩时可现场演示用普通用户 token 访问/admin/users/前端跳转 403 页面同时抓包查看 API 返回403 Forbidden—— 证明权限未被绕过。5.3 本地部署的最小可行验证法不依赖宝塔或 Docker用最简方式验证系统完整性运行1-install.bat确保 Python 3.8、Node.js 16、MySQL 5.7 已安装运行2-run.bat等待两个 CMD 窗口显示Starting development server和Django version 4.2.7浏览器打开http://localhost:8080登录后新增一笔“早餐支出” → 查看http://localhost:8000/admin/expensebill/是否同步出现此流程 3 分钟内可完成且每一步都有明确输出日志杜绝“环境配置失败”的答辩风险。本文还有配套的精品资源点击获取
返回列表