基于Vue的社区老年人健康信息管理系统设计与实现

1. 项目概述与设计思路

1.1 这个项目到底做了什么

先聊个现象：每次到毕业季，后台总有人问我类似的问题——“老哥，有没有前端项目推荐？最好是Vue的，工作量适中、能写论文、答辩能讲清楚的那种”。以前我都会丢几个项目过去，但说实话，真正能同时满足“业务完整”“页面够多”“技术栈规整”“论文好写”这四个条件的项目并不多。所以要单独拆一个出来聊聊——基于Vue的社区老年人健康信息管理系统，这个题目在计算机毕业设计里属于典型的高性价比选题。

简单说，它要解决的事情就一件：把社区里老年人的健康数据管起来。传统方式是纸质档案，社区医生上门随访靠登记本，老人体检报告散落各处，家属想知道父母血压血糖情况只能打电话问。这个系统把这些数据集中到线上，让社区医护、老人自己、家属三方都能看到健康档案、体检记录、慢病随访和用药提醒。说人话就是：给社区健康管理配了一个线上台账，该查的能查，该提醒的能提醒，该统计的能统计。

这个“该”字背后，决定了系统必须有几个核心角色和权限。管理员管账号和公告，医护人员录入健康档案和随访记录，老年人和家属只读查看自己的数据，部分场景下老人可以给医生留言。数据字段要覆盖姓名、身份证、联系方式、既往病史、过敏史、体检项（血压、血糖、心率、BMI等）、用药情况、随访时间。页面数量粗略一数就是十来个，放到毕业设计里，工作量正好落在“有内容但不至于把自己写到崩溃”的区间里。

1.2 为什么前端偏偏选Vue而不是别的

先说我的观点：毕业设计选型，第一原则不是“技术最酷”，而是“技术栈稳定、资料多、你能讲明白”。Vue在这个维度上确实有天然优势。

第一，Vue的上手曲线平缓。如果你之前只写过网页三件套，用Vue写单页应用几乎是无缝切换，模板语法贴近HTML，v-for、v-if、v-model这些指令半天就能用顺手，不必非得先啃透响应式原理才能写页面。项目里那些表格、表单、弹窗，用Vue写起来效率极高。

第二，Vue的中文生态太成熟了。Element Plus（UI组件库）、Vue Router（路由）、Pinia（状态管理）、Axios（HTTP请求）这套组合，社区里有大把的现成案例和踩坑记录，遇到问题搜一下基本都有答案。答辩时老师问“为什么用Vue”，你答“组件化开发提高复用性、数据驱动视图、生态完善”，这几个点也完全站得住。

第三，前后端分离的开发模式适合毕业设计两个人协作或者一个人全栈。前端跑npm run dev，后端跑Spring Boot，接口约定好，两边可以并行开发。调试的时候用Vite的代理转发请求，完全绕开跨域问题——这个细节后面会专门讲。

当然，也有同学问，那用React行不行？行，但React在JSX语法、Hooks思维上对新手更陡峭，配套Antd组件库虽也不错，但中小型管理系统的资料密度确实不如Vue。纯后端项目（比如只用Thymeleaf模板）也行，但在“页面交互感”和“答辩展示效果”上明显吃亏。Vue是这条路上最稳的选择，没有之一。

1.3 整体方案选型：前端、后端、数据库怎么配

这套系统的完整技术栈，按我经手的类似毕业设计，比较顺手的组合如下：

这套组合的隐藏优势在于：它给论文提供的素材非常丰富。前端可以写“基于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 vite@latest health-web -- --template vue cd health-web npm install

装完依赖后，打开package.json看看有没有vue-router、pinia、axios、element-plus、echarts这几个包。没有就补装：

npm install vue-router@4 pinia axios element-plus echarts

第三步：把项目默认代码清干净再动工。默认生成的App.vue和HelloWorld.vue是Vite的宣传页，直接删掉换成一个空壳子：

<template> <router-view /> </template> <script setup> </script>

main.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 :inline="true" :model="queryParams"> <el-form-item label="姓名"> <el-input v-model="queryParams.name" placeholder="请输入姓名" clearable /> </el-form-item> <el-form-item label="身份证号"> <el-input v-model="queryParams.idCard" placeholder="请输入身份证号" clearable /> </el-form-item> <el-form-item> <el-button type="primary" @click="handleQuery">查询</el-button> <el-button @click="handleReset">重置</el-button> </el-form-item> </el-form> <el-button type="success" style="margin-bottom: 10px" @click="openDialog()"> 新增档案 </el-button> <el-table :data="tableData" border stripe> <el-table-column prop="name" label="姓名" width="100" /> <el-table-column prop="gender" label="性别" width="80" /> <el-table-column prop="age" label="年龄" width="80" /> <el-table-column prop="idCard" label="身份证号" width="180" /> <el-table-column prop="phone" label="联系电话" width="130" /> <el-table-column prop="address" label="家庭住址" show-overflow-tooltip /> <el-table-column label="操作" width="220" fixed="right"> <template #default="{ row }"> <el-button link type="primary" @click="openDialog(row)">编辑</el-button> <el-button link type="danger" @click="handleDelete(row.id)">删除</el-button> </template> </el-table-column> </el-table> <el-pagination v-model:current-page="queryParams.pageNum" v-model:page-size="queryParams.pageSize" :total="total" :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" @size-change="getList" @current-change="getList" /> </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。我自己就遇到过，改起来很费劲。

登录流程建议做成这样：

1. 前端请求POST /api/auth/login，传username+password。
2. 后端校验通过，返回{ token, userInfo }。
3. 前端把token存localStorage，用户信息存Pinia。
4. 跳转首页。
5. 后续请求Axios拦截器自动携带token。

退出登录时同理，前端调POST /api/auth/logout，后端可选择性让token失效（比如记录黑名单），然后前端清掉本地数据跳回登录页。

3.4 打包部署与Nginx配置

本地开发没问题，你以为就完了？毕业设计最后要交，老师大概率要求你把系统部署起来演示。本地跑是一回事，部署到服务器是另一回事，这里有一堆坑。

先打包：

npm run build

生成的文件在dist目录。如果你用的是Vite默认配置，直接把这个目录扔给Nginx就行。但有几个前置检查：

第一个：路由模式的问题。Vue Router如果用的是createWebHistory（history模式），部署到Nginx后，你访问http://服务器ip/health/record刷新页面，大概率报404。为什么？因为Nginx没配置重写规则，它不知道这个路径应该交给前端路由处理。解决方法是Nginx配置加一行：

location / { try_files $uri $uri/ /index.html; }

意思是：找不到这个文件时，回退到index.html，让前端路由接管。

如果不想处理这些，直接把路由模式改成createWebHashHistory（hash模式），地址栏会多个#号，但没有任何刷新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 高频问题速查表

这几类问题我在带毕设过程中遇到最多，直接给你列成表：

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没配好白屏，要么演示到一半数据库连不上。提前三天做一次完整的“关机重启全流程演练”，所有环境从零跑一遍，确保每一步都能复现。演示当天才不会慌。

系统本身其实不难，难的是把每个环节做到心里有数。代码能跑、文档能讲、环境能复现，这三件事都踏实了，你交出去的东西就是能让人信得过的东西。