企业官网建设流程全解析

温馨提示：本人主页置顶文章(点我)开头有 CSDN 平台官方提供的学长联系名片！

一、项目背景与意义

随着人口老龄化程度不断加深，养老机构的管理压力持续增大。传统敬老院普遍依赖纸质台账和 Excel 表格记录老人档案、床位分配、护理排班、费用缴纳等信息，存在数据分散、查询困难、统计滞后、权限混乱等问题。开发一套信息化、规范化的养老院管理系统，能够有效提升机构运营效率，降低人工管理成本，同时为家属提供更透明的服务信息。

本项目采用前后端分离架构，后端基于 Spring Boot 构建 RESTful 接口，前端使用 Vue3 + Element Plus 实现管理界面，数据库选用 MySQL，适合作为毕业设计或课程设计项目，也可作为中小型养老机构的信息化改造参考。

二、系统功能模块设计

系统按角色划分为管理员、护理人员、家属三类用户，核心功能模块如下：

• 老人档案管理：录入老人基本信息、健康状况、既往病史、紧急联系人、入住时间等，支持按姓名、房间号、护理等级检索。
• 床位与房间管理：维护楼栋、房间、床位信息，记录床位状态（空闲、已入住、维修中），支持入住与退住登记。
• 护理服务管理：制定护理计划，记录每日护理执行情况，包括饮食、用药、翻身、康复训练等。
• 健康监测管理：记录血压、血糖、心率等体征数据，生成趋势图表，异常数据自动提醒。
• 费用管理：管理床位费、护理费、餐饮费等收费项目，生成账单并记录缴费状态。
• 家属探视与通知：登记探视记录，向家属推送老人健康与费用提醒。
• 员工与排班管理：维护护理人员信息，安排班次与负责区域。
• 系统管理：用户、角色、权限、菜单、操作日志管理。

三、技术选型

四、数据库设计

核心数据表设计如下，字段可根据实际需求扩展：

-- 老人档案表 CREATE TABLE elder ( id BIGINT PRIMARY KEY AUTO_INCREMENT, name VARCHAR(32) NOT NULL COMMENT '姓名', gender TINYINT COMMENT '性别 0女 1男', age INT COMMENT '年龄', id_card VARCHAR(20) COMMENT '身份证号', phone VARCHAR(20) COMMENT '联系电话', room_id BIGINT COMMENT '房间ID', bed_id BIGINT COMMENT '床位ID', care_level TINYINT COMMENT '护理等级 1-3', health_status VARCHAR(255) COMMENT '健康状况', emergency_contact VARCHAR(32) COMMENT '紧急联系人', emergency_phone VARCHAR(20) COMMENT '紧急联系电话', check_in_time DATETIME COMMENT '入住时间', status TINYINT DEFAULT 1 COMMENT '状态 1在住 0已退住', create_time DATETIME DEFAULT CURRENT_TIMESTAMP ); -- 床位表 CREATE TABLE bed ( id BIGINT PRIMARY KEY AUTO_INCREMENT, room_id BIGINT NOT NULL COMMENT '房间ID', bed_no VARCHAR(16) NOT NULL COMMENT '床位号', status TINYINT DEFAULT 0 COMMENT '0空闲 1已入住 2维修中' ); -- 护理记录表 CREATE TABLE care_record ( id BIGINT PRIMARY KEY AUTO_INCREMENT, elder_id BIGINT NOT NULL COMMENT '老人ID', staff_id BIGINT NOT NULL COMMENT '护理人员ID', care_type VARCHAR(32) COMMENT '护理类型', content VARCHAR(500) COMMENT '护理内容', record_time DATETIME COMMENT '记录时间' ); -- 健康监测表 CREATE TABLE health_record ( id BIGINT PRIMARY KEY AUTO_INCREMENT, elder_id BIGINT NOT NULL COMMENT '老人ID', blood_pressure VARCHAR(16) COMMENT '血压', blood_sugar DECIMAL(5,2) COMMENT '血糖', heart_rate INT COMMENT '心率', record_time DATETIME COMMENT '测量时间' );

五、后端核心实现

5.1 项目结构

elder-care-server ├── src/main/java/com/example/eldercare │ ├── config # 安全、跨域、MyBatis 配置 │ ├── controller # 接口层 │ ├── service # 业务层 │ ├── mapper # 数据访问层 │ ├── entity # 实体类 │ ├── dto # 传输对象 │ ├── common # 统一响应、异常处理 │ └── ElderCareApplication.java └── src/main/resources ├── application.yml └── mapper # XML 映射文件

5.2 统一响应与全局异常处理

@Data public class Result<T> { private Integer code; private String message; private T data; public static <T> Result<T> success(T data) { Result<T> r = new Result<>(); r.setCode(200); r.setMessage("操作成功"); r.setData(data); return r; } public static <T> Result<T> error(String message) { Result<T> r = new Result<>(); r.setCode(500); r.setMessage(message); return r; } }

5.3 老人档案接口示例

@RestController @RequestMapping("/api/elder") @RequiredArgsConstructor public class ElderController { private final ElderService elderService; @GetMapping("/page") public Result<IPage<Elder>> page( @RequestParam(defaultValue = "1") Integer pageNum, @RequestParam(defaultValue = "10") Integer pageSize, @RequestParam(required = false) String name, @RequestParam(required = false) Integer careLevel) { return Result.success(elderService.pageQuery(pageNum, pageSize, name, careLevel)); } @PostMapping public Result<Void> save(@RequestBody @Valid Elder elder) { elderService.saveOrUpdateElder(elder); return Result.success(null); } @DeleteMapping("/{id}") public Result<Void> delete(@PathVariable Long id) { elderService.removeById(id); return Result.success(null); } }

5.4 JWT 登录鉴权

@Component @RequiredArgsConstructor public class JwtAuthenticationFilter extends OncePerRequestFilter { private final JwtUtil jwtUtil; private final UserDetailsService userDetailsService; @Override protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain chain) throws ServletException, IOException { String header = request.getHeader("Authorization"); if (header != null && header.startsWith("Bearer ")) { String token = header.substring(7); if (jwtUtil.validate(token)) { String username = jwtUtil.getUsername(token); UserDetails user = userDetailsService.loadUserByUsername(username); UsernamePasswordAuthenticationToken auth = new UsernamePasswordAuthenticationToken(user, null, user.getAuthorities()); SecurityContextHolder.getContext().setAuthentication(auth); } } chain.doFilter(request, response); } }

六、前端核心实现

6.1 请求封装

import axios from 'axios' import { ElMessage } from 'element-plus' import router from '@/router' const request = axios.create({ baseURL: '/api', timeout: 10000 }) request.interceptors.request.use(config => { const token = localStorage.getItem('token') if (token) { config.headers.Authorization = `Bearer ${token}` } return config }) request.interceptors.response.use( res => { const { code, message, data } = res.data if (code === 200) return data ElMessage.error(message || '请求失败') return Promise.reject(new Error(message)) }, err => { if (err.response?.status === 401) { localStorage.removeItem('token') router.push('/login') } ElMessage.error(err.message) return Promise.reject(err) } ) export default request

6.2 老人档案列表页

<template> <div class="page"> <el-form :inline="true" :model="query"> <el-form-item label="姓名"> <el-input v-model="query.name" placeholder="请输入姓名" clearable /> </el-form-item> <el-form-item label="护理等级"> <el-select v-model="query.careLevel" clearable style="width: 140px"> <el-option label="一级护理" :value="1" /> <el-option label="二级护理" :value="2" /> <el-option label="三级护理" :value="3" /> </el-select> </el-form-item> <el-form-item> <el-button type="primary" @click="loadData">查询</el-button> <el-button @click="handleAdd">新增</el-button> </el-form-item> </el-form> <el-table :data="list" border v-loading="loading"> <el-table-column prop="name" label="姓名" width="100" /> <el-table-column prop="gender" label="性别" width="80"> <template #default="{ row }">{{ row.gender === 1 ? '男' : '女' }}</template> </el-table-column> <el-table-column prop="age" label="年龄" width="80" /> <el-table-column prop="careLevel" label="护理等级" width="100" /> <el-table-column prop="checkInTime" label="入住时间" width="180" /> <el-table-column label="操作" width="160"> <template #default="{ row }"> <el-button link type="primary" @click="handleEdit(row)">编辑</el-button> <el-button link type="danger" @click="handleDelete(row)">删除</el-button> </template> </el-table-column> </el-table> <el-pagination v-model:current-page="query.pageNum" v-model:page-size="query.pageSize" :total="total" layout="total, prev, pager, next" @current-change="loadData" /> </div> </template> <script setup> import { ref, reactive, onMounted } from 'vue' import request from '@/utils/request' const list = ref([]) const total = ref(0) const loading = ref(false) const query = reactive({ pageNum: 1, pageSize: 10, name: '', careLevel: null }) const loadData = async () => { loading.value = true try { const data = await request.get('/elder/page', { params: query }) list.value = data.records total.value = data.total } finally { loading.value = false } } onMounted(loadData) </script>

七、系统运行与部署

1. 创建 MySQL 数据库elder_care，执行建表脚本。
2. 修改application.yml中的数据库连接、Redis 与 JWT 密钥配置。
3. 后端执行mvn spring-boot:run，默认端口 8080。
4. 前端执行npm install与npm run dev，通过 Vite 代理转发/api请求。
5. 生产环境使用npm run build打包，Nginx 托管静态资源并反向代理后端接口。

八、总结与展望

本文围绕敬老院养老院管理系统，完成了需求分析、功能模块划分、数据库设计以及前后端核心代码实现。系统采用 Spring Boot + Vue3 前后端分离架构，具备良好的可扩展性与维护性。

后续可继续完善的方向包括：接入智能手环等物联网设备实现体征数据自动采集、引入人脸识别用于探视登记、增加移动端小程序方便家属查看老人日常，以及基于历史健康数据做异常预警分析。