1. 项目概述与设计思路1.1 这个项目到底做了什么先聊个现象每次到毕业季后台总有人问我类似的问题——“老哥有没有前端项目推荐最好是Vue的工作量适中、能写论文、答辩能讲清楚的那种”。以前我都会丢几个项目过去但说实话真正能同时满足“业务完整”“页面够多”“技术栈规整”“论文好写”这四个条件的项目并不多。所以要单独拆一个出来聊聊——基于Vue的社区老年人健康信息管理系统这个题目在计算机毕业设计里属于典型的高性价比选题。简单说它要解决的事情就一件把社区里老年人的健康数据管起来。传统方式是纸质档案社区医生上门随访靠登记本老人体检报告散落各处家属想知道父母血压血糖情况只能打电话问。这个系统把这些数据集中到线上让社区医护、老人自己、家属三方都能看到健康档案、体检记录、慢病随访和用药提醒。说人话就是给社区健康管理配了一个线上台账该查的能查该提醒的能提醒该统计的能统计。这个“该”字背后决定了系统必须有几个核心角色和权限。管理员管账号和公告医护人员录入健康档案和随访记录老年人和家属只读查看自己的数据部分场景下老人可以给医生留言。数据字段要覆盖姓名、身份证、联系方式、既往病史、过敏史、体检项血压、血糖、心率、BMI等、用药情况、随访时间。页面数量粗略一数就是十来个放到毕业设计里工作量正好落在“有内容但不至于把自己写到崩溃”的区间里。1.2 为什么前端偏偏选Vue而不是别的先说我的观点毕业设计选型第一原则不是“技术最酷”而是“技术栈稳定、资料多、你能讲明白”。Vue在这个维度上确实有天然优势。第一Vue的上手曲线平缓。如果你之前只写过网页三件套用Vue写单页应用几乎是无缝切换模板语法贴近HTMLv-for、v-if、v-model这些指令半天就能用顺手不必非得先啃透响应式原理才能写页面。项目里那些表格、表单、弹窗用Vue写起来效率极高。第二Vue的中文生态太成熟了。Element PlusUI组件库、Vue Router路由、Pinia状态管理、AxiosHTTP请求这套组合社区里有大把的现成案例和踩坑记录遇到问题搜一下基本都有答案。答辩时老师问“为什么用Vue”你答“组件化开发提高复用性、数据驱动视图、生态完善”这几个点也完全站得住。第三前后端分离的开发模式适合毕业设计两个人协作或者一个人全栈。前端跑npm run dev后端跑Spring Boot接口约定好两边可以并行开发。调试的时候用Vite的代理转发请求完全绕开跨域问题——这个细节后面会专门讲。当然也有同学问那用React行不行行但React在JSX语法、Hooks思维上对新手更陡峭配套Antd组件库虽也不错但中小型管理系统的资料密度确实不如Vue。纯后端项目比如只用Thymeleaf模板也行但在“页面交互感”和“答辩展示效果”上明显吃亏。Vue是这条路上最稳的选择没有之一。1.3 整体方案选型前端、后端、数据库怎么配这套系统的完整技术栈按我经手的类似毕业设计比较顺手的组合如下层次选型理由前端框架Vue 3 ViteVue 3是当前主流Vite启动快、配置简单UI组件库Element Plus中文文档完善表格表单日历组件齐全适合管理类系统状态管理Pinia比Vuex更轻、API更现代适合存储登录用户信息路由Vue Router 4SPA页面跳转和路由守卫的必要设施HTTPAxios统一拦截、携带token、处理响应码图表ECharts健康数据可视化血压趋势、年龄段分布的加分项后端Spring Boot MyBatis Plus接口开发效率高联表查询和分页方便数据库MySQL 5.7/8.0关系型数据模型清晰字段类型处理成熟认证方式JWTToken前后端分离场景下的标准认证方案简单可控这套组合的隐藏优势在于它给论文提供的素材非常丰富。前端可以写“基于Vue的组件化设计与实现”“路由守卫实现登录鉴权”“Axios拦截器统一处理异常”后端可以写“RESTful API设计”“JWT无状态认证”“MyBatis Plus分页查询优化”。每个章节都有实际代码支撑不至于论文写到最后变成纯堆名词。2. 核心细节解析与实操要点2.1 功能模块怎么拆才合理一个老年人健康管理系统功能如果只是简单的增删改查工作量是够了但答辩容易被问“那你这个系统的难点在哪”。所以模块设计要有层次既要能满足日常业务也要有一两个能拿出来讲亮点的功能点。我的建议是按“角色 业务主线”双维度拆分。业务主线是四条档案管理、体检随访、预警提醒、统计报表。档案管理老人的基础信息、既往病史、过敏史、家属联系人。这是所有业务的数据底座。要支持新增、编辑、条件查询按姓名、身份证号、社区和导出Excel。体检随访每次体检记录血压、血糖、心率、血脂、BMI等指标、医生随访记录随访日期、随访方式、指导意见。这部分数据量增长快列表必须做分页。预警提醒把体检指标和健康阈值做比较血压高于140/90或血糖高于阈值时系统自动标记异常在首页生成待处理提醒。这个功能代码量不多但给系统加了“智能感”。统计报表用ECharts展示性别比例、年龄段分布、高血压/糖尿病患病人数趋势。答辩演示时往这一站页面效果碾压平平无奇的表格。角色的权限划分管理员负责账号管理医护人员账号的开通和禁用、公告发布、数据统计查看。 医护人员核心操作者维护老人档案、录入体检、写随访记录、处理健康预警。 老人/家属小程序端或浏览器端查看自己的档案和体检报告接收提醒。这块如果时间紧可以做一个简化版只读页面通过身份证号手机号登录。模块拆好之后前端路由表基本就出来了/admin/user、/doctor/elder/list、/doctor/elder/add、/doctor/record/detail/:id、/dashboard、/health/alert差不多十一个页面左右。写论文时按模块逐个介绍条理非常清晰。2.2 前端目录结构与路由设计很多同学一手抖就把所有组件都堆在src/views下面写到后面自己都分不清哪个文件是哪个页面的。我习惯的项目结构是下面这样你可以直接抄src/ |-- api/ # 所有接口请求都放这里按业务模块拆分 | |-- auth.js # 登录、登出 | |-- elder.js # 老年人档案 | |-- health.js # 体检记录、随访 | |-- dashboard.js # 首页统计 |-- assets/ # 静态资源 |-- components/ # 公共组件上传组件、分页工具类组件等 |-- layout/ # 整体布局侧边栏 顶栏 内容区 |-- router/ | |-- index.js # 路由表 | |-- guard.js # 路由守卫 |-- store/ | |-- user.js # Pinia模块存储登录用户信息 |-- utils/ | |-- request.js # Axios实例封装 |-- views/ # 页面视图 | |-- login/ | |-- dashboard/ | |-- elder/ | |-- health/ | |-- system/ |-- App.vue |-- main.js这个结构最大的好处是“按业务切文件”接口、页面、组件互不纠缠。你后面改一个体检录入的接口直接进api/health.js改不会翻遍全项目找。路由设计上核心要处理两件事动态菜单和登录拦截。管理系统的左侧菜单跟用户权限有关医生登录能看到“体检录入”老人登录不能。最简洁的做法是前端一次性加载全部路由表然后通过路由守卫判断角色无权访问的直接next({ path: /401 })。这种方案代码量小适合毕业设计。如果你精力足够可以做成登录后根据后端返回的菜单列表动态注册路由但这会增加复杂度答辩讲起来也容易绕晕不建议非必要情况下用。路由守卫是必须写的不然用户直接访问/health/record这种地址没登录也能看到页面答辩老师可能会抓着这个点问。示例逻辑很简单router.beforeEach((to, from, next) { const token localStorage.getItem(token) if (to.path /login) { next() } else { if (!token) { next(/login) } else { next() } } })2.3 状态管理与接口层封装的细节状态管理在毕业设计这个体量下其实用不到太多全局状态——主要就是当前登录用户的姓名、角色、头像。但为了答辩时有话讲还是建议用Pinia建一个user模块存储用户信息的同时把退出登录时清数据的操作也写在action里。规范虽然简单但代表你理解了全局状态管理的使用场景不是乱用的。// store/user.js import { defineStore } from pinia export const useUserStore defineStore(user, { state: () ({ token: localStorage.getItem(token) || , userInfo: null }), actions: { setToken(token) { this.token token localStorage.setItem(token, token) }, setUserInfo(info) { this.userInfo info }, logout() { this.token this.userInfo null localStorage.removeItem(token) } } })接口层封装有一个关键决策点要不要在Axios拦截器里统一处理token和错误码。我的答案是必须做。你想想每个页面请求接口时都得手动带Authorization: Bearer xxx后端一旦返回401你每个页面都得写一遍判断累不累统一封装后这些全是自动的。// utils/request.js import axios from axios import { ElMessage } from element-plus import { useUserStore } from ../store/user import router from ../router const service axios.create({ baseURL: /api, // 配合Vite代理使用下文会说明 timeout: 10000 }) service.interceptors.request.use(config { const userStore useUserStore() if (userStore.token) { config.headers[Authorization] Bearer userStore.token } return config }) service.interceptors.response.use( response { const res response.data if (res.code ! 200) { ElMessage.error(res.message || 请求失败) return Promise.reject(new Error(res.message)) } return res }, error { if (error.response error.response.status 401) { ElMessage.error(登录状态已过期请重新登录) const userStore useUserStore() userStore.logout() router.push(/login) } else { ElMessage.error(error.message || 网络异常) } return Promise.reject(error) } ) export default service这里有个细节请求路径统一加/api前缀。为什么为了配合开发环境的代理。你本地开发时前端跑在http://localhost:5173后端跑在http://localhost:8080如果直接请求8080浏览器会报跨域错误。在vite.config.js里配置代理后前端请求/api/login代理会自动转发到http://localhost:8080/api/login浏览器完全感知不到跨域。这个方案比后端写CORS配置更干净也是目前主流做法。// vite.config.js server: { proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } }等你后面部署上线用Nginx反代时同样只需要把/api转发到后端地址即可前端代码一行不用改。3. 实操过程与核心环节实现3.1 环境准备从零到跑通Vue项目这一节写给完全没装过Vue开发环境的朋友。网上教程多但很多都过时了比如还在教Webpack配Vue2你照着配完直接原地崩溃。我重新整理一份当前跑通项目最低成本的步骤。第一步安装Node.js。去官网下载LTS版本即可目前建议18或20。装完在终端输入node -v验证能看到版本号就说明成功。很多老教程让你配npm config set registry因为默认源在国内慢这一步还是建议做的不然npm install卡半天你急不急npm config set registry https://registry.npmmirror.com第二步创建Vite项目。用Vite而不是Vue CLI创建Vue3项目节省大量等待时间npm create vitelatest health-web -- --template vue cd health-web npm install装完依赖后打开package.json看看有没有vue-router、pinia、axios、element-plus、echarts这几个包。没有就补装npm install vue-router4 pinia axios element-plus echarts第三步把项目默认代码清干净再动工。默认生成的App.vue和HelloWorld.vue是Vite的宣传页直接删掉换成一个空壳子template router-view / /template script setup /scriptmain.js里做全局初始化把Element Plus和路由挂上import { createApp } from vue import { createPinia } from pinia import ElementPlus from element-plus import element-plus/dist/index.css import App from ./App.vue import router from ./router const app createApp(App) app.use(createPinia()) app.use(router) app.use(ElementPlus) app.mount(#app)做完这些你的项目壳子就有了。注意每一步做完都跑一遍npm run dev确认能启动再继续下一步别憋着一次写完再调试到时候都不知道是哪个环节出的问题。3.2 核心页面与代码实现以健康档案列表为例管理类系统的页面套路高度一致顶部是搜索条件栏中间是表格底部是分页。以“老年人健康档案管理”页面为例我拆给你看。先定义接口请求// api/elder.js import request from ../utils/request export function getElderList(params) { return request({ url: /elder/page, method: get, params }) } export function addElder(data) { return request({ url: /elder, method: post, data }) } export function updateElder(data) { return request({ url: /elder, method: put, data }) } export function deleteElder(id) { return request({ url: /elder/${id}, method: delete }) }然后是页面。表格列至少包含姓名、性别、年龄、身份证号、联系电话、家庭住址、既往病史、操作编辑/删除/查看详情。搜索条件按姓名、身份证号、所属社区来写。template div el-form :inlinetrue :modelqueryParams el-form-item label姓名 el-input v-modelqueryParams.name placeholder请输入姓名 clearable / /el-form-item el-form-item label身份证号 el-input v-modelqueryParams.idCard placeholder请输入身份证号 clearable / /el-form-item el-form-item el-button typeprimary clickhandleQuery查询/el-button el-button clickhandleReset重置/el-button /el-form-item /el-form el-button typesuccess stylemargin-bottom: 10px clickopenDialog() 新增档案 /el-button el-table :datatableData border stripe el-table-column propname label姓名 width100 / el-table-column propgender label性别 width80 / el-table-column propage label年龄 width80 / el-table-column propidCard label身份证号 width180 / el-table-column propphone label联系电话 width130 / el-table-column propaddress label家庭住址 show-overflow-tooltip / el-table-column label操作 width220 fixedright template #default{ row } el-button link typeprimary clickopenDialog(row)编辑/el-button el-button link typedanger clickhandleDelete(row.id)删除/el-button /template /el-table-column /el-table el-pagination v-model:current-pagequeryParams.pageNum v-model:page-sizequeryParams.pageSize :totaltotal :page-sizes[10, 20, 50] layouttotal, sizes, prev, pager, next, jumper size-changegetList current-changegetList / /div /template重点提两个细节。第一个删除和编辑一定要带确认弹窗这个容易被忽略。没有ElMessageBox.confirm误删了一条老人档案数据找不回来就是医疗事故级别的麻烦。第二个表格列宽要按内容合理分配身份证号这种长字段必须给足宽度地址这类长文本用show-overflow-tooltip让超出的部分省略并悬浮显示页面才美观。3.3 前后端联调与数据传递规范前后端分离开发最怕的是两边对不上接口。我吃过不少亏所以每次带项目都强制用同一个接口文档模板。对这个项目后端返回的数据格式必须统一前端Axios拦截器才写得稳。建议统一封装成{ code: 200, message: success, data: {} }分页接口的返回值{ code: 200, message: success, data: { total: 100, records: [ { id: 1, name: 张三, gender: 男 } ] } }这样前端请求列表时取数据就是res.data.records取总数就是res.data.total简单直接。字段命名也提前说好后端如果用驼峰idCard前端就用驼峰如果用下划线id_card前端就用下划线。最怕两种混着来前端写row.idCard结果后端返回的是id_card一渲染全是undefined。我自己就遇到过改起来很费劲。登录流程建议做成这样前端请求POST /api/auth/login传usernamepassword。后端校验通过返回{ token, userInfo }。前端把token存localStorage用户信息存Pinia。跳转首页。后续请求Axios拦截器自动携带token。退出登录时同理前端调POST /api/auth/logout后端可选择性让token失效比如记录黑名单然后前端清掉本地数据跳回登录页。3.4 打包部署与Nginx配置本地开发没问题你以为就完了毕业设计最后要交老师大概率要求你把系统部署起来演示。本地跑是一回事部署到服务器是另一回事这里有一堆坑。先打包npm run build生成的文件在dist目录。如果你用的是Vite默认配置直接把这个目录扔给Nginx就行。但有几个前置检查第一个路由模式的问题。Vue Router如果用的是createWebHistoryhistory模式部署到Nginx后你访问http://服务器ip/health/record刷新页面大概率报404。为什么因为Nginx没配置重写规则它不知道这个路径应该交给前端路由处理。解决方法是Nginx配置加一行location / { try_files $uri $uri/ /index.html; }意思是找不到这个文件时回退到index.html让前端路由接管。如果不想处理这些直接把路由模式改成createWebHashHistoryhash模式地址栏会多个#号但没有任何刷新404的问题。省事很多毕业设计项目都用hash模式。就是地址看起来丑一点答辩时无关紧要。第二个静态资源路径问题。打包后你发现页面白屏打开浏览器控制台看到一个app.abc.js 404说明资源路径不对。Vite默认资源是绝对路径/assets/xxx.js如果你的项目部署在服务器根目录没问题但部署在二级目录比如http://ip/health-web/就死了。解决办法是在vite.config.js里加一行base: ./用相对路径问题解决。第三个API反向代理。Nginx里要把/api转发到你的Spring Boot服务location /api/ { proxy_pass http://127.0.0.1:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; }配置好之后重启Nginx整个系统就能在公网访问了。4. 常见问题与排查技巧实录4.1 高频问题速查表这几类问题我在带毕设过程中遇到最多直接给你列成表现象可能原因排查方向页面白屏无任何报错路由没有router-view或main.js里没挂载router检查App.vue模板是否有router-viewnpm install卡住不动网络问题默认源慢切换到npm镜像源控制台报跨域错误前端直连了后端地址没走代理检查vite.config.js代理配置请求必须带/api前缀表格数据为undefined字段名大小写或命名风格不一致F12看后端返回的JSON字段名和自己写的列字段对比登录后刷新页面又回登录页用户信息只存在内存刷新丢失把token和用户信息持久化到localStorage路由守卫拿token做判断打包后白屏base路径配置错误vite.config.js加base: ./打包部署后刷新子页面404history模式没配Nginx重写加try_files $uri $uri/ /index.html;或改用hash模式Element Plus样式没生效没引入完整样式文件main.js加import element-plus/dist/index.css修改代码页面不变Vite缓存或进程卡住重启npm run dev后端接口请求时间过长Spring Boot慢或数据库锁看后端日志、SQL执行情况4.2 几个值得展开讲的排查思路第一个跨域问题别慌着改后端CORS配置。很多同学一看到No Access-Control-Allow-Origin header就跑到后端写CrossOrigin注解或者配一个CorsFilter。当然这方案也能跑通但你没有思考清楚问题的本质开发环境用Vite代理部署后用Nginx反代全程都不会有跨域的问题根本不需要动后端。先检查一下自己是不是直接在前端用了http://localhost:8080这个地址如果是改成/api就好。第二个404要分两种看。开发模式下报404多半是路由路径写错了比如跳转/elder/list但你路由表里注册的是/elder。部署模式下404先刷新看是否还原还原说明是history模式的路由需要Nginx重写。排查思路完全不同。第三个接口报500怎么办。前端能给的信息很少这时候必须看后端控制台。最常见的500原因是数据库表字段被改动但实体类没同步或者MyBatis Plus的selectPage用法不对导致SQL拼接错误。有一点经验可以分享前端在catch里把完整的错误信息console.log出来和后端日志一对比定位会快很多。4.3 关于答辩和LW文档的几点过来人经验最后聊几句软的。很多同学把精力全放在写代码上忽略了LW文档的分量。实际上答辩时老师判断你是不是真做了这个项目看的是你有没有把核心流程讲清楚。LW文档的写作建议每张表格、每个功能模块截图放上去然后用“用户输入→系统处理→返回结果”三段式描述流程。比如体检记录录入描述就是“医护人员在录入页面填写老人的血压、血糖数据点击提交后前端校验必填项并调用后端接口后端将数据写入健康记录表返回成功后前端提示保存完成并刷新列表。”这种描述方式老师一听就明白比写一堆“基于当前系统架构设计并实现”这种虚词强太多。答辩常问的几个问题你提前准备“系统有几个角色各自能干什么”对应RBAC权限设计。“前端如何实现登录拦截”对应路由守卫。“后端如何校验token”对应JWT过滤器链。“大量体检数据如何优化加载”对应分页索引。“异常指标如何告警”对应阈值的逻辑判断代码展示。每个问题你都能按“实现思路 代码位置 现场演示”三步答上来基本就稳了。另外提醒一句把项目的npm run build跑通、部署环境提前准备到位。我见过太多演示现场翻车的情况——要么Node版本不匹配导致启动失败要么Nginx没配好白屏要么演示到一半数据库连不上。提前三天做一次完整的“关机重启全流程演练”所有环境从零跑一遍确保每一步都能复现。演示当天才不会慌。系统本身其实不难难的是把每个环节做到心里有数。代码能跑、文档能讲、环境能复现这三件事都踏实了你交出去的东西就是能让人信得过的东西。