ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

SpringBoot+Vue前后端分离项目实战:智能消费记账系统设计与实现

2026/9/4 23:55:23 拓冰建站 浏览量
SpringBoot+Vue前后端分离项目实战:智能消费记账系统设计与实现 简介这是一套面向计算机专业本科生的毕业设计与课程实践项目资源聚焦大学生日常消费场景提供完整的智能记账系统解决方案。系统采用SpringBootVue前后端分离架构基于MySQL实现数据持久化覆盖用户管理、预算设定、收支记录、统计分析及管理员交互等核心功能有效替代传统手工记账模式提升财务规划效率与数据可视化能力。压缩包共352个文件含82个Java后端逻辑文件、36个Vue前端组件、15个JS交互脚本、10个XML配置文件、3个MP4操作演示视频、3个BAT一键部署脚本及1个SQL数据库初始化脚本整体22.97MB结构清晰、开箱即用。目前已有45人学习下载资源配套详细教程文档与完整运行视频涵盖环境搭建、数据库导入、前后端联调及常见启动问题排错说明特别适合Java Web开发入门到进阶的实战训练。1. 项目概述与核心价值最近几年但凡涉及到计算机、软件工程、信息管理这类专业的毕业设计或者课程大作业“基于SpringBootVue的前后端分离项目”几乎成了一个标准答案。这背后反映的其实是技术栈的成熟和教学实践的趋同。我当年带学生做毕设从SSH到SSM再到现在的SpringBootVue能明显感觉到技术门槛在降低但做出一个“能跑、能用、能讲清楚”的项目对学生综合能力的考验一点没少。今天要拆解的这个“大学生智能消费记账系统”就是一个非常典型的、符合当下教学要求的实战案例。它不是一个简单的CRUD增删查改玩具而是融合了用户画像、消费分析、预算管理等轻度智能概念的完整应用。对于正在寻找毕设或课设题目的同学来说这个选题有几个天然优势需求场景贴近自身生活理解成本低技术栈主流且完整涵盖了从后端API、数据库设计到前端交互、数据可视化的全链路业务逻辑有深度可挖掘可以从简单的记账延伸到消费分类、趋势预测、预算预警等方便你填充论文内容和进行答辩展示。说它“智能”并不是指用了多高深的AI算法而是在传统记账基础上增加了基于规则的数据分析和建议。比如系统能自动根据消费记录中的关键字如“奶茶”、“火锅”进行归类能按月统计各类别支出占比并生成饼图能设置月度预算并在超支时提醒用户。这些功能点每一个拆开都是SpringBoot处理业务逻辑、Vue渲染动态图表、MySQL存储和聚合数据的绝佳练习场。这个项目的核心价值在于“开箱即用”和“高分潜力”。所谓开箱即用意味着它的代码结构清晰依赖配置完整你从GitHub或码云上clone下来按照文档配置好数据库和开发环境几分钟就能看到登录界面跑起来极大降低了初期搭建的挫败感。而高分潜力则源于它提供了一个扎实的、可扩展的底座。导师看毕设最怕看到“空中楼阁”——想法天花乱坠代码一塌糊涂。这个项目给了你一个五脏俱全的“楼阁”你需要做的是在理解每一块砖瓦技术模块如何搭建的基础上去进行个性化的“装修”功能增强或业务逻辑深化这样既能保证项目基础分又能体现你的个人思考和工作量。2. 技术栈选型与架构设计解析为什么是SpringBoot Vue MySQL这个“黄金组合”这不是偶然而是经过大量实践验证后对于校园项目而言在学习成本、开发效率、社区资源三者间找到的最佳平衡点。2.1 后端SpringBoot为何是“不二之选”对于Java技术栈的后端开发SpringBoot几乎是毕业设计的“标配”。它的核心优势在于“约定大于配置”。回想早期的SSH/SSM框架光是把Spring、MyBatis、Tomcat整合起来写一堆XML配置文件就能劝退不少新手。SpringBoot通过Starter依赖和自动配置让你用几个注解就能跑起一个Web服务。在这个记账系统中我们主要用到了SpringBoot的几个核心模块Spring Web: 用于构建RESTful API。通过RestController,RequestMapping,GetMapping/PostMapping等注解可以非常清晰地定义出用户管理、账单增删改查、数据统计等接口。Spring Data JPA / MyBatis-Plus: 用于数据库操作。两者都是优秀的ORM框架。JPA更“Spring”用起来更简洁适合快速原型开发MyBatis-Plus则提供了更灵活的SQL编写能力性能调优也更直观。这个项目大概率用了其中之一。它们能极大减少手写基础CRUD SQL的工作量让你更专注于业务逻辑。Spring Security 或 JWT: 用于权限认证。大学生记账系统用户注册登录、权限隔离虽然可能就一个普通用户角色是基本功能。Spring Security功能强大但稍重对于轻量级项目使用JWTJSON Web Token实现无状态认证是更流行的选择。用户登录后后端生成一个加密的Token返回给前端前端后续请求都在Header中带上这个Token后端进行验证。Spring Boot DevTools: 开发热部署工具。改完代码不用重启服务省时省力提升开发体验。选择SpringBoot意味着你遇到的大部分问题在Stack Overflow、CSDN、博客园都能找到海量的解决方案学习曲线相对平缓。2.2 前端Vue.js的渐进式魅力Vue之所以能取代早年的JSP、Thymeleaf成为前后端分离的前端首选是因为它完美契合了学生项目的需求上手快、生态丰富、够用且优雅。这个记账系统的前端预计会用到Vue的核心技术栈Vue 3 Composition API: 现在是Vue 3的时代。相比于Vue 2的Options APIComposition API用setup函数逻辑组织更灵活特别是对于复杂组件比如一个包含图表、筛选、列表的账单页面代码可读性和复用性更好。Vue Router: 管理前端路由。实现页面间的无刷新跳转例如从“首页”跳转到“记账”页再跳转到“统计”页。Vuex 或 Pinia: 状态管理。虽然对于中小项目用响应式APIreactive,ref也能管理状态但引入PiniaVue官方推荐的新状态管理库可以更规范地管理用户信息、全局配置等跨组件数据。Element Plus 或 Ant Design Vue: UI组件库。这是提升开发效率的关键。这些库提供了现成的按钮、表单、表格、弹窗、日期选择器等组件你只需要关注数据绑定和业务逻辑不用从零开始写CSS调整样式能让界面快速达到“美观可用”的水平。ECharts 或 AntV: 数据可视化库。记账系统的“智能”分析部分强烈依赖图表。ECharts是国内最流行的选择文档丰富示例众多实现折线图消费趋势、饼图消费占比、柱状图分类对比非常简单。Axios: HTTP客户端。用于调用后端的SpringBoot API处理请求和响应拦截比如自动添加Token统一处理错误。2.3 前后端分离架构详解“前后端分离”是这个项目的关键架构特征。它不仅仅是技术上的分离更是职责和开发模式的分离。后端SpringBoot: 专注“数据和服务”。它提供一套标准的、无状态的RESTful API接口返回JSON格式的数据。它的职责是接收前端请求、处理业务逻辑记账、分类、计算、操作数据库MySQL、返回处理结果。它不关心数据如何展示。前端Vue: 专注“交互和展示”。它通过Axios调用后端API获取JSON数据然后利用Vue的响应式系统和组件将数据渲染成用户看到的网页界面表格、表单、图表。它负责处理用户的所有操作点击、输入、筛选并调用对应的接口。沟通桥梁API文档。前后端通过事先约定好的API接口文档进行协作。后端开发人员定义好每个接口的URL、请求方法GET/POST、请求参数、响应格式。前端开发人员就可以并行开发用Mock数据模拟后端接口。常用的API文档工具是Swagger或Knife4jSpringBoot集成后可以自动生成可视化文档前后端同学都能实时查看和测试极大减少沟通成本。2.4 数据库MySQL的稳定之选MySQL作为最流行的开源关系型数据库是教学和中小型项目的绝对主流。对于记账系统它的表设计大概如下user表存储用户基本信息id, username, password_hash, avatar, create_time。account_book表核心的账单表id, user_id, amount, type[收入/支出], category[餐饮、交通...], remark, consume_time, create_time。这里category可以设计为字典表关联也可以直接存字符串。budget表预算表id, user_id, category, budget_amount, month。category表消费分类字典表id, name, icon, user_id[可为空表示系统默认分类]。数据库设计的关键点在于索引的建立。比如在account_book表的user_id和consume_time上建立联合索引可以极大加速“查询某个用户某段时间的账单”这个高频操作。这也是你在论文中体现技术深度的好地方。3. 核心功能模块拆解与实现要点拿到一个“开箱即用”的项目最忌讳的就是只运行不看代码。我们要像解剖一样把核心功能模块拆开理解每一部分的实现逻辑。这里我结合常见实现给你梳理几个关键模块的要点和容易踩的坑。3.1 用户认证与权限模块这是系统的门户安全性和体验是重点。实现方式主流采用JWT。用户登录/api/auth/login时后端校验用户名密码成功后使用如JJWT库生成一个Token包含用户ID、过期时间等信息签名后返回前端。前端将其存储在localStorage或Vuex/Pinia中。关键代码SpringBoot:// 登录接口 PostMapping(/login) public Result login(RequestBody LoginForm form) { User user userService.findByUsername(form.getUsername()); if (user null || !passwordEncoder.matches(form.getPassword(), user.getPassword())) { return Result.error(用户名或密码错误); } // 生成JWT Token String token JwtUtil.generateToken(user.getId().toString(), user.getUsername()); // 返回用户基本信息不含密码和Token LoginVO vo new LoginVO(user, token); return Result.success(vo); }拦截器配置需要创建一个拦截器HandlerInterceptor对除了登录、注册等白名单外的所有API请求进行拦截从Header中取出Token进行验证。Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) { String token request.getHeader(Authorization); if (StringUtils.isEmpty(token) || !JwtUtil.verifyToken(token)) { // 返回401未授权状态码 response.setStatus(HttpStatus.UNAUTHORIZED.value()); return false; } // 验证通过可以将用户信息存入Request域方便后续使用 String userId JwtUtil.getUserId(token); request.setAttribute(userId, userId); return true; }前端配合在Axios的请求拦截器中自动为每个请求加上Token。// axios请求拦截器 axios.interceptors.request.use(config { const token store.state.user.token; // 假设token存在Vuex中 if (token) { config.headers[Authorization] token; } return config; });注意JWT Token一旦签发在过期前无法主动使其失效。这是JWT的一个特点。对于毕业设计级别的项目通常可以接受。如果要求更高可以引入Redis存储Token黑名单但复杂度会增加。3.2 智能记账与消费分类模块这是系统的核心业务。“智能”主要体现在消费记录的自动分类上。实现思路手动选择分类前端提供下拉框用户从预设分类餐饮、购物、学习等中选择。这是最基础的方式。关键词自动匹配在remark备注字段上做文章。例如建立一张category_keyword表存储分类和关键词的映射“餐饮” - [“火锅”, “奶茶”, “食堂”]。用户输入备注“今天喝了杯喜茶”后端收到后遍历关键词表匹配到“奶茶”关键词则自动将分类设置为“餐饮”。这需要维护一个关键词库。机器学习分类进阶收集大量已分类的消费记录作为训练集使用简单的文本分类算法如朴素贝叶斯训练模型。对于新记录用模型预测分类。这可以作为论文的亮点但实现和训练数据获取有一定难度。数据库设计优化account_book表的category字段建议存储分类ID而非名称通过外键关联category表。这样便于分类信息的统一管理和修改。前端实现要点记账表单应提供良好的用户体验。使用Element Plus的el-form结合el-select选择分类el-date-picker选择时间el-input输入金额和备注。金额输入框可以限制只能输入数字并实时格式化显示如输入“1000”显示“1,000”。3.3 数据统计与可视化模块这是体现项目价值和“智能”分析能力的门面。后端API设计统计接口的设计要灵活支持按日、周、月、年等不同维度查询。例如GET /api/statistics/daily?startDate2023-10-01endDate2023-10-31获取每日支出趋势。GET /api/statistics/category?month2023-10获取某月各分类支出占比。后端利用MyBatis-Plus的QueryWrapper或编写XML映射文件使用MySQL的SUM、GROUP BY、DATE_FORMAT等函数进行数据聚合。// 示例查询某用户某月各分类支出 GetMapping(/category) public Result getCategoryStat(RequestParam String month, HttpServletRequest request) { String userId (String) request.getAttribute(userId); ListCategoryStatVO list accountBookService.getCategoryStat(userId, month); return Result.success(list); } // Service层SQL逻辑使用MyBatis-Plus QueryWrapperAccountBook wrapper new QueryWrapper(); wrapper.select(category_id, SUM(amount) as total) .eq(user_id, userId) .eq(type, 支出) .apply(DATE_FORMAT(consume_time, %Y-%m) {0}, month) .groupBy(category_id); ListMapString, Object maps accountBookMapper.selectMaps(wrapper);前端图表渲染使用ECharts。关键在于将后端返回的JSON数据转换成ECharts需要的option配置。通常会在Vue组件的mounted或使用watch监听数据变化后调用echartsInstance.setOption()方法。template div refchartDom stylewidth: 600px; height: 400px;/div /template script setup import { ref, onMounted, onUnmounted } from vue; import * as echarts from echarts; import { getCategoryStat } from /api/statistics; const chartDom ref(null); let myChart null; const initChart async () { const res await getCategoryStat(2023-10); const data res.data; // 假设返回 [{name:餐饮, value: 1500}, ...] const option { tooltip: { trigger: item }, legend: { orient: vertical, left: left }, series: [{ type: pie, radius: 50%, data: data, emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: rgba(0, 0, 0, 0.5) } } }] }; myChart echarts.init(chartDom.value); myChart.setOption(option); }; onMounted(() { initChart(); window.addEventListener(resize, () myChart?.resize()); }); onUnmounted(() { window.removeEventListener(resize, () myChart?.resize()); myChart?.dispose(); }); /script实操心得ECharts图表容器必须指定明确的宽高。在Vue组件中最好在onMounted钩子中初始化图表因为此时DOM已渲染。别忘了在组件销毁时onUnmounted调用dispose()方法释放资源并移除可能绑定的全局事件监听器如resize防止内存泄漏。3.4 预算管理与预警模块这是让记账系统从“记录”走向“管理”的关键功能。数据库表设计budget表需要关联用户、分类和月份。一个用户可以为自己设置多个分类在不同月份的预算。业务逻辑设置预算前端提供表单选择分类、月份和预算金额。计算已支出根据account_book表统计该用户、该分类、该月份下的总支出。预警判断可以设置一个预警阈值如预算的80%。当已支出 / 预算金额 0.8时系统判定为预警状态。实现方式实时计算每次用户查看预算页面时实时查询计算。适合数据量不大的情况。定时任务使用Spring的Scheduled注解每天凌晨计算所有用户的预算使用情况将预警结果存入数据库或缓存前端直接读取。这种方式性能更好。Component public class BudgetCheckTask { Autowired private BudgetService budgetService; // 每天凌晨1点执行 Scheduled(cron 0 0 1 * * ?) public void checkBudgetAndWarn() { // 1. 查询所有有效的预算记录 // 2. 对每条预算计算对应月份和分类的实际支出 // 3. 判断是否超支或预警并更新预算记录的预警状态字段 // 4. 可选如果需要主动推送可以在这里集成WebSocket或消息队列 budgetService.checkAllBudgets(); } }前端展示在预算列表或首页用进度条组件直观展示预算使用情况。Element Plus的el-progress组件就很适合可以根据百分比改变颜色如80%绿色80%-100%橙色100%红色。4. 项目部署与上线实操指南一个只能在本地运行的毕业设计是不完整的。将项目部署到服务器能让你的作品更具说服力也是毕设答辩的加分项。这里给出一个最主流的部署方案Linux服务器 Nginx Docker可选。4.1 后端SpringBoot应用部署SpringBoot应用部署非常方便因为它内嵌了Tomcat服务器。打包在项目根目录使用Maven命令打包。mvn clean package -DskipTests。这会在target目录下生成一个*.jar文件如smart-account-0.0.1-SNAPSHOT.jar。上传使用FTP工具如FileZilla或SCP命令将jar包上传到你的Linux服务器如阿里云、腾讯云学生机的某个目录例如/home/app/。运行在服务器上运行java -jar smart-account-0.0.1-SNAPSHOT.jar。应用就会启动默认监听8080端口。后台运行与日志直接运行会占用终端且退出终端程序就停了。使用nohup命令让它在后台运行nohup java -jar smart-account-0.0.1-SNAPSHOT.jar app.log 21 。这样日志会输出到app.log文件。生产环境配置在application.properties中通常会有spring.profiles.active配置。你可以创建application-prod.properties文件覆盖开发环境的配置比如数据库连接地址改为服务器上的MySQL、日志级别等。打包时指定激活prod配置文件mvn clean package -DskipTests -Pprod。4.2 前端Vue应用部署Vue项目需要先打包成静态文件然后由Web服务器如Nginx托管。打包在前端项目目录下运行npm run buildVue CLI或pnpm buildVite。这会在项目下生成一个dist目录里面就是所有静态资源HTML, JS, CSS。上传将整个dist目录上传到服务器例如放到/home/web/目录下。配置NginxNginx的作用是作为Web服务器托管前端文件并作为反向代理将API请求转发给后端的SpringBoot应用。安装Nginxsudo apt install nginx(Ubuntu/Debian)。编辑Nginx配置文件通常位于/etc/nginx/sites-available/default或新建一个配置文件。server { listen 80; # 监听80端口 server_name your-domain.com; # 你的域名或服务器IP # 前端静态文件 location / { root /home/web/dist; # 前端dist目录路径 index index.html; try_files $uri $uri/ /index.html; # 支持Vue Router的history模式 } # 反向代理到后端SpringBoot应用 location /api/ { proxy_pass http://localhost:8080/; # 后端应用运行的地址和端口 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } }重启Nginxsudo nginx -s reload。现在访问你的服务器IP或域名就能看到前端页面并且前端发起的/api/xxx请求会被Nginx转发到后端8080端口。4.3 数据库部署与初始化服务器安装MySQLsudo apt install mysql-server。安全配置运行sudo mysql_secure_installation进行初始安全设置设置root密码、移除匿名用户等。创建数据库和用户登录MySQL为你的项目创建专用的数据库和用户并授予权限。CREATE DATABASE smart_account DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; CREATE USER smart_user% IDENTIFIED BY YourStrongPassword123!; GRANT ALL PRIVILEGES ON smart_account.* TO smart_user%; FLUSH PRIVILEGES;导入数据将本地的数据库结构SQL文件导入到服务器。mysql -u smart_user -p smart_account local_dump.sql。4.4 使用Docker容器化部署进阶强烈推荐对于新手手动部署上述步骤可能遇到各种环境问题。Docker可以完美解决“在我的机器上能跑”的困境。编写Dockerfile后端在SpringBoot项目根目录创建Dockerfile。# 使用官方Java运行环境作为基础镜像 FROM openjdk:11-jre-slim # 维护者信息 LABEL maintaineryour.nameexample.com # 将打包好的jar包复制到容器内重命名为app.jar COPY target/*.jar /app.jar # 暴露端口 EXPOSE 8080 # 启动命令 ENTRYPOINT [java, -jar, /app.jar]编写Dockerfile前端在Vue项目根目录创建Dockerfile使用Nginx镜像托管静态文件。# 构建阶段 FROM node:16-alpine as build-stage WORKDIR /app COPY package*.json ./ RUN npm install COPY . . RUN npm run build # 生产阶段 FROM nginx:stable-alpine COPY --frombuild-stage /app/dist /usr/share/nginx/html COPY nginx.conf /etc/nginx/conf.d/default.conf EXPOSE 80 CMD [nginx, -g, daemon off;]同时需要编写一个简单的nginx.conf文件配置同上。编写docker-compose.yml这是最优雅的方式用一个文件定义所有服务后端、前端、数据库。version: 3.8 services: mysql: image: mysql:8.0 container_name: smart-account-mysql environment: MYSQL_ROOT_PASSWORD: root123456 MYSQL_DATABASE: smart_account MYSQL_USER: smart_user MYSQL_PASSWORD: user123456 volumes: - mysql_data:/var/lib/mysql ports: - 3306:3306 networks: - app-network backend: build: ./backend # 指向SpringBoot项目目录内含Dockerfile container_name: smart-account-backend depends_on: - mysql environment: SPRING_DATASOURCE_URL: jdbc:mysql://mysql:3306/smart_account?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai SPRING_DATASOURCE_USERNAME: smart_user SPRING_DATASOURCE_PASSWORD: user123456 ports: - 8080:8080 networks: - app-network frontend: build: ./frontend # 指向Vue项目目录内含Dockerfile container_name: smart-account-frontend depends_on: - backend ports: - 80:80 networks: - app-network volumes: mysql_data: networks: app-network: driver: bridge一键部署在服务器上安装Docker和Docker Compose后将整个项目目录包含前后端代码和docker-compose.yml上传。在该目录下执行docker-compose up -d所有服务就会自动构建并启动。访问服务器IP的80端口即可看到完整应用。部署避坑指南端口冲突确保服务器防火墙如ufw开放了80、8080、3306等端口。sudo ufw allow 80/tcp。数据库连接失败Docker Compose中后端连接数据库的host不能写localhost要写服务名mysql因为它们在同一个Docker网络内。前端请求404检查Nginx配置中proxy_pass的后端地址是否正确以及后端服务是否成功启动。查看日志是关键docker-compose logs backend。静态资源加载失败检查前端打包后dist目录下的文件路径以及Nginx配置中的root路径是否正确。Vue Router使用history模式时try_files $uri $uri/ /index.html;这行配置必不可少。5. 毕业设计深度优化与答辩亮点提炼一个能运行的项目只是及格线要想拿高分必须在理解和优化的基础上展现你的独立思考。以下是一些可以深挖的方向任意做好一两个都能让你的论文和答辩增色不少。5.1 性能优化实践数据库索引优化这是最实在的优化。分析系统慢查询日志MySQL可开启slow_query_log对account_book表的user_id,consume_time,category_id等查询条件字段建立合适的索引。在你的论文中可以展示加索引前后的SQL执行时间对比。API响应缓存对于一些不常变化但频繁请求的数据如消费分类列表、用户基本信息可以使用Spring Cache集成Redis进行缓存。例如在查询分类列表的方法上添加Cacheable(value categories, key #userId)注解。前端资源优化打包分析使用npm run build -- --report生成打包分析报告查看哪些依赖体积过大。考虑按需引入组件库如unplugin-vue-components。图片懒加载对于账单列表中的图片如果有使用img loadinglazy或Vue的懒加载指令。API请求防抖在统计图表根据时间筛选器重新查询时对触发查询的事件进行防抖处理避免频繁请求。5.2 功能扩展与“智能”深化多维度数据导出实现将消费记录、统计报表导出为Excel或PDF。后端可以使用Apache POI或EasyExcel生成Excel使用iText或Flying Saucer生成PDF。前端提供导出按钮。消费趋势预测机器学习入门使用Python的scikit-learn库或Java的Weka/Smile库基于用户历史消费数据训练一个简单的线性回归模型预测下个月的总支出。这个功能可以作为独立的“数据分析模块”通过Python提供REST服务SpringBoot调用。这能充分体现“智能”二字。多端适配使用Vue的响应式设计和移动端UI库如Vant或者采用Uni-app框架将系统适配成微信小程序。答辩时展示手机上的效果会很出彩。数据备份与恢复增加用户手动备份账本数据为JSON文件并支持从文件恢复的功能。这涉及到SpringBoot的文件上传下载和JSON解析。5.3 论文与答辩准备要点论文结构不要写成代码说明书。建议章节包括绪论背景意义、国内外现状、相关技术介绍SpringBoot, Vue等、系统分析需求分析、可行性分析、系统设计架构设计、数据库设计、接口设计、系统实现核心模块截图关键代码片段解释、系统测试功能测试、性能测试、总结与展望。代码展示论文中贴代码要精只贴最核心、最能体现你工作的部分如JWT拦截器、消费统计的SQL、ECharts配置等。每段代码要有简要说明。答辩演示准备两套环境一套本地用于开发演示可断点调试一套部署在公网用于直接访问。讲好故事线不要平铺直叙地讲功能。可以这样开头“作为一名大学生我常常疑惑钱花在哪了所以我想做一个系统来解决这个问题。首先我需要一个安全登录演示登录... 登录后最核心的是记账演示快速记账和自动分类... 光记录不够还要分析演示图表指出异常消费... 为了管住手我加了预算功能演示设置和预警... 最后为了让项目更完整我把它部署到了云服务器浏览器打开公网地址。”预设问题提前准备老师可能问的问题为什么选这个技术栈成熟、社区活跃、降低开发成本前后端分离有什么好处职责清晰、并行开发、易于维护Token安全吗JWT的签名机制如何防止泄露数据库设计第三范式考虑了吗解释你的表结构设计思路这个系统有什么不足或可以改进的地方诚实回答如未做高并发考虑、预测模型较简单等并给出改进思路。记住毕业设计考察的不仅仅是你实现了什么更是你为什么这么做、过程中遇到了什么问题以及如何解决的。把这个“智能消费记账系统”吃透把它变成你自己的项目你的毕业设计之路就已经成功了一大半。本文还有配套的精品资源点击获取