企业官网建设流程全解析

简介：一份基于JavaWeb的社区养老服务管理系统毕业设计论文文档，面向计算机相关专业毕业生以及需要完成养老、智慧社区类课题的开发者。内容针对人口老龄化背景下传统养老管理方式受时空限制、效率不高的问题，提出了基于B/S架构的完整解决方案：前端采用Vue.js构建交互界面，后端基于SpringBoot搭建轻量级服务，并搭配Java运行环境、Tomcat服务器和MySQL数据库实现数据持久化。论文结构完整，包含中文摘要、英文Abstract、目录以及绪论、相关技术概论、系统设计实现等章节，可清晰看到从课题背景、研究意义、核心技术选型到系统落地的全过程，也能为论文排版和行文提供参考。资源为1个docx文件，压缩包大小7.55MB，适合直接阅读、局部复用或按章节学习。目前已有38人学习，对于准备社区养老服务管理系统、SpringBoot框架或Vue前端项目的同学具有一定借鉴价值。 又到了毕业设计选题的季节，“社区养老管理系统”这套题年年都有不少人碰。原因其实很直白：业务贴合实际场景、前端用Vue后端用Spring Boot正好踩在主流技术栈上、数据模型复杂度适中不会写两个月还交不了差。这套基于Vue和Spring Boot搭建的JavaWeb前后端分离项目，核心要解决的无非三件事：老人档案电子化、服务预约与工单流转、健康记录集中管理。如果你正准备复现或者二次开发一个同类系统，这篇文章按实际开发顺序，把这个项目从选型到部署的关键环节全部过一遍，尤其是那些文档里从来不会写、但实操一定会踩的坑。

1. 项目定位与整体技术选型

1.1 这到底是什么业务系统

社区养老服务管理系统，本质上是给社区养老服务站做的一套业务流转工具。业务线一般是这样的：老人或者老人的子女在平台上发起服务预约（助餐、助洁、助医、陪聊、康复训练等），社区管理员看到预约后分配护工，护工上门完成服务后记录结果，家属可以对服务进行评价，同时系统里还维护着每个老人的基础档案和健康数据。

这套业务看起来不复杂，但实际落地时要处理的角色和状态却很考究。系统里至少要区分三种角色：系统管理员、社区工作人员、护工。有的项目还要挂一个家属端，也就是老人子女用的账号。论文里如果能把角色权限和状态流转讲清楚，答辩的时候会顺畅很多。也正是因为角色多、流程有先后，后端用Spring Boot来做接口权限控制和业务逻辑，前端用Vue来做页面交互和状态展示，就是一个非常合理的搭配。

1.2 为什么不是JSP而是Vue + Spring Boot

很多老教材还在用JSP+Servlet那一套做JavaWeb项目，毕业设计选这个方向当然不是不行，但要是想兼顾“能落地”和“答辩有亮点”，前后端分离几乎是目前更优的选择。原因有三：

第一，职责清晰。前端只管渲染和交互，后端只写接口返回JSON，联调的时候开个Swagger或者postman就能单测接口，不用再被JSP页面里的Java代码和HTML混在一起折磨。

第二，用人需求倒逼。现在招Java开发，要求里几乎必写Vue或者React，Spring Boot是标配。跟面试官说你会JSP，跟说你会Vue+Spring Boot，完全是两种印象分。

第三，部署灵活。前端打包成dist静态文件，可以丢到Nginx里，后端打成jar包独立运行，前端挂了一个不影响后端接口，维护起来省心。

有人可能会纠结Vue2还是Vue3。如果论文模板对技术版本没有限制，建议直接用Vue3 + Element Plus + Vite这套新栈；如果导师比较保守，或者学校提供的答辩环境只支持Node14以下，那就老老实实Vue2 + Element UI + Vue CLI。代码上80%的内容是互通的，无非是main.js挂载方式、路由创建方式、响应式API写法有差异，后面如果遇到问题，查Vue3官方文档基本都能解决。

1.3 后端选型与数据表设计思路

后端我建议用Spring Boot 2.7.x而不是3.x，因为这个版本对JDK8的兼容性最好，网上搜报错方案也最容易命中。持久层用MyBatis-Plus，它自带分页插件、条件构造器和逻辑删除，写CRUD能省掉大量重复的XML映射。如果你非要用原生MyBatis，那你的Entity、Mapper、Service、Controller一套写下来，代码量至少要翻一倍。

数据库表设计是从一开始就要想清楚的，不然做到服务预约模块就乱套了。一个最小可用的表结构大概包括：用户表（注意角色字段的冗余设计）、老人信息表、服务项目表、预约订单表、工单表、健康档案表、评价表。老人信息和用户之间用老人ID关联；预约订单和工单之间也要对应上，一个预约单在派单后生成一个工单；健康档案一人可以有多条，按记录时间倒序取最新。至于前端页面有多少个功能，后端就至少要有多少套接口，顺序上我建议先把老人类、用户类的整套CRUD写完，再做预约工单这条主线，否则很容易被事务问题绕进去。

2. 开发环境准备与工程初始化

2.1 后端工程搭建和关键配置

后端我用的是IDEA + JDK8 + Maven 3.6的组合。创建项目直接用Spring Initializr，依赖上别一年选一堆，够用就好。

<dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-boot-starter</artifactId> <version>3.5.3.1</version> </dependency> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <scope>runtime</scope> </dependency> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> </dependency> <dependency> <groupId>io.jsonwebtoken</groupId> <artifactId>jjwt</artifactId> <version>0.9.1</version> </dependency> </dependencies>

依赖装好之后，最容易被忽略的是application.yml里的配置。除了常规的数据源地址，一定要把时区和编码问题一次性配好，不然跑起来中文乱码、时间差8小时会来回折腾你半天。

server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/community_care?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai username: root password: 123456 driver-class-name: com.mysql.cj.jdbc.Driver mybatis-plus: configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl map-underscore-to-camel-case: true global-config: db-config: logic-delete-field: deleted logic-delete-value: 1 logic-not-delete-value: 0

注意MyBatis-Plus版本别选太新，部分高版本和Spring Boot 2.7搭配会出现奇怪的扫描问题。我当时就是因为自动建表的需求又去配了dynamic-datasource，结果类冲突调到崩溃，后来发现根本用不上动态数据源，纯属自己给自己加戏。

2.2 前端工程初始化与代理配置

前端用Vite创建Vue3项目，比Vue CLI快很多，步骤也简单：

npm create vite@latest admin-web -- --template vue cd admin-web npm install npm install element-plus axios vue-router pinia

安装依赖这一步，新手最容易栽在“npm install执行到一半报错”和“下载速度慢”上。解决方案很土但有效：先把npm镜像切成淘宝源，再装依赖：

npm config set registry https://registry.npmmirror.com

开发阶段的跨域问题，后端项目里用@CrossOrigin注解解决不了所有场景，尤其是前端加了token请求头之后，预检请求OPTIONS经常会被拦截器挡住。更稳妥的方案是配Vite的代理，让前端请求路径以/api开头，转发到后端8080端口：

// vite.config.js export default { server: { port: 3000, proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } } } }

这样前端里axios的baseURL只需要写/api，就不会再遇到一堆奇怪的跨域报错。这里建议所有请求路径统一加前缀，等上线部署的时候同样可以用反向代理把/api转发到jar包的端口，一套思路通吃开发和生产，省很多事。

2.3 数据库导入和初始账号

数据库脚本这一步不能省，我习惯先建库再建表，同时把初始账号写死在SQL里而不是手工在Navicat里点：

CREATE DATABASE IF NOT EXISTS community_care DEFAULT CHARACTER SET utf8mb4; USE community_care; CREATE TABLE `sys_user` ( `id` bigint(20) NOT NULL AUTO_INCREMENT, `username` varchar(50) NOT NULL, `password` varchar(100) NOT NULL, `real_name` varchar(50) DEFAULT NULL, `role` varchar(20) DEFAULT 'staff', `phone` varchar(20) DEFAULT NULL, `deleted` tinyint(1) DEFAULT 0, PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4; INSERT INTO `sys_user` (`username`, `password`, `real_name`, `role`) VALUES ('admin', 'e10adc3949ba59abbe56e057f20f883e', '系统管理员', 'admin'), ('zhang', 'e10adc3949ba59abbe56e057f20f883e', '张三', 'staff');

密码这里默认用MD5（e10adc3949ba59abbe56e057f20f883e就是123456），演示阶段够用，但真要上线建议换成BCrypt加密。实体类、Mapper、Service、Controller这一套代码，只要表结构定了，用MyBatis-Plus的代码生成器秒出，不需要手写，否则这项目做下来你大部分时间都在复制粘贴，毫无价值。

3. 核心功能模块实现解析

3.1 登录认证与JWT拦截链路

社区养老系统的登录流程和普通后台没有本质区别：前端用账号密码调登录接口，后端校验通过后签发一个带过期时间的JWT，前端把它存在localStorage里，每次请求通过axios请求拦截器带上，后端用拦截器统一校验。

后端的登录接口大概长这样：

@RestController @RequestMapping("/api/auth") public class AuthController { @Resource private SysUserService userService; @PostMapping("/login") public Result login(@RequestBody LoginDTO dto) { String md5Pwd = DigestUtils.md5DigestAsHex(dto.getPassword().getBytes()); SysUser user = userService.lambdaQuery() .eq(SysUser::getUsername, dto.getUsername()) .eq(SysUser::getPassword, md5Pwd) .one(); if (user == null) { return Result.error("用户名或密码错误"); } String token = JwtUtil.generateToken(user.getId(), user.getUsername(), user.getRole()); return Result.success(new LoginVO(token, user.getRealName(), user.getRole())); } }

拦截器是整套登录逻辑里最容易被改崩的地方。核心套路是：放行登录接口和静态资源，其余接口都要先从请求头的Authorization字段里取token，校验不通过就直接返回401。

public class JwtInterceptor implements HandlerInterceptor { @Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { if ("OPTIONS".equalsIgnoreCase(request.getMethod())) { return true; } String token = request.getHeader("Authorization"); if (token != null && token.startsWith("Bearer ")) { token = token.substring(7); } try { Claims claims = JwtUtil.parseToken(token); request.setAttribute("userId", claims.get("userId")); return true; } catch (Exception e) { response.setStatus(401); response.setContentType("application/json;charset=UTF-8"); response.getWriter().write("{\"code\":401,\"msg\":\"未登录或登录已过期\"}"); return false; } } }

然后注册拦截器的时候指定拦截路径/api/**，排除/api/auth/login。我在第一次做这个项目时，最典型的错误就是忘了用registry.addInterceptor(jwtInterceptor).addPathPatterns("/api/**").excludePathPatterns("/api/auth/login")，导致登录接口本身也被拦住，前端永远收到401。排查方法很简单：看后端控制台有没有打印拦截器日志，再看是否走的是排除列表。

前端axios封装这一步，也直接决定你能不能一步到位调通登录。请求拦截器里从localStorage拿token塞进header，响应拦截器里判断code为401时清掉本地数据并跳到登录页：

service.interceptors.request.use(config => { const token = localStorage.getItem('token') if (token) { config.headers['Authorization'] = 'Bearer ' + token } return config }) service.interceptors.response.use( res => { if (res.data.code === 401) { localStorage.clear() router.push('/login') } return res.data }, err => { return Promise.reject(err) } )

这里有个细节容易踩坑：用了代理之后，前端请求的URL应该是/api/auth/login，而后端接口本身的RequestMapper路径里也是/api/auth/login，两者重了。所以我一般建议用rewrite把/api前缀剥掉，前端请求/api/auth/login，实际转发到后端就是/auth/login，这样后端接口不用额外补一个空节点。

3.2 老人档案管理模块的CRUD细节

老人档案管理是一个典型的管理后台子模块，界面无非是搜索栏+表格+新增/编辑弹窗+删除按钮，但这里面的几个细节值得注意：

第一个是分页查询。Spring Boot + MyBatis-Plus的分页要手动配置分页插件，这个是老生常谈，但每年都有一批人忘记配，然后发现page.getRecords()返回全表数据或者直接报错。配置代码我建议直接放在启动类或者一个单独Config类里：

@Configuration public class MybatisPlusConfig { @Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor(); interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL)); return interceptor; } }

第二个是模糊搜索。Element Plus的输入框绑定一个searchKey变量，传给后端之后，后端用LambdaQueryWrapper做LIKE查询：

Page<Elder> page = elderService.page(new Page<>(current, size), new LambdaQueryWrapper<Elder>() .like(StringUtils.hasText(keyword), Elder::getName, keyword) .orderByDesc(Elder::getCreateTime));

注意如果用了逻辑删除字段，MyBatis-Plus会自动在SQL里加上deleted=0，但前提是实体类里有@TableLogic注解或者全局配置了逻辑删除字段。别小看这个，血泪教训：我在做导出功能时想统计所有老人包括已删除的，结果怎么查都少几条，排查了半天才发现是逻辑删除自动加条件了。

第三个是新增强校验。老人手机号、身份证号这类字段不能只靠前端校验，后端也要做一层兜底。用JSR-303的@NotBlank、@Pattern注解能省很多if，但我在实体类里直接用正则校验的更多，因为毕业论文里解释起来更直白：

@Pattern(regexp = "^1[3-9]\\d{9}$", message = "手机号格式不正确") private String phone;

前端组件这边，弹窗表单加上rules，打开弹窗时用nextTick重置表单，否则上次的校验提示会残留到下次打开。表格里老人年龄不要存年龄字段，存出生日期，页面上计算显示年龄，这样数据不会随时间失真，答辩时也能体现一点业务思考。

3.3 预约、工单与健康档案的流程闭环

养老服务的主线业务，我建议做成预约单和工单两个实体。老人或者子女提交预约单，社区工作人员审核后派单，生成工单，工单关联护工，护工执行后回填服务结果。为了不让逻辑太复杂，可以在预约单上加一个status字段：0待审核、1已派单、2服务中、3已完成、4已取消、5已评价。

这个流程看起来绕，其实代码上反而是最简单的，因为每个步骤就是一个update操作而已。真正复杂的是“列表页要显示关联信息”，比如预约单列表里要显示老人姓名、服务项目名称、护工姓名，而不是一串id。做法有两种：

第一种是写SQL join查出来，这种最直接：

SELECT so.id, e.name AS elder_name, sp.name AS service_name, u.real_name AS worker_name FROM service_order so LEFT JOIN elder e ON so.elder_id = e.id LEFT JOIN service_project sp ON so.service_id = sp.id LEFT JOIN sys_user u ON so.worker_id = u.id WHERE so.deleted = 0

第二种是不join，查询出预约单列表后拿到所有关联id，然后批量查老人、项目、用户，在Java内存里组装成VO。对于小项目来说两种都行，我更推荐第二种，因为分页插件对自定义join的支持不如对单表操作舒服，组装VO还能顺便处理空值。

健康档案模块相对独立，一张表存老人ID、检查日期、血压、血糖、心率、备注，页面里用时间线展示，或者做一个简化的折线图，就能撑起一个功能点。echarts的折线图代码网上大把，核心是拿后端返回的[{date, bloodPressure}, ...]数组喂给series。这里我唯一要提醒的是：前端图表不要直接拿时间戳当x轴显示，要格式化成YYYY-MM-DD，不然图上一排13位数字非常难看。

4. 项目部署上线与实战避坑指南

4.1 打包部署

开发完成后，前端执行：

npm run build

默认会生成一个dist目录，里面是打包后的静态文件。后端执行：

mvn clean package -DskipTests

生成可运行的jar包，命令行直接java -jar就能启动。

部署方案我推荐用Nginx托管前端静态文件，同时把/api路径反向代理到后端端口：

server { listen 80; server_name your-domain.com; root /opt/community-care/dist; index index.html; location /api/ { proxy_pass http://127.0.0.1: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; } location / { try_files $uri $uri/ /index.html; } }

try_files $uri $uri/ /index.html这行一定要写，否则刷新页面，Vue路由走history模式时，Nginx返回404。这是前后端分离部署里最经典的一个坑，比CORS高频多了。

4.2 高频问题排查速查表

4.3 提升答辩亮点的几个小功能

基础功能做完之后，强烈建议加两个不费力又能让系统上一个档次的功能。第一个是数据统计看板，用echarts展示每个社区的老人数量、当月服务订单量、服务完成率。后端只需写两三个统计接口，比如按月份分组统计订单量：

@GetMapping("/stats/order") public Result orderStats() { List<Map<String, Object>> list = orderMapper.selectMaps( new QueryWrapper<ServiceOrder>() .select("DATE_FORMAT(create_time, '%Y-%m') as month", "count(*) as total") .groupBy("month") ); return Result.success(list); }

第二个是Excel导出。用EasyExcel工具类，一个实体类注解加一行write代码就能导出一张表。论文里写“实现了社区老人名单的批量导出，便于线下走访和台账留档”，这句话在答辩评语里能成为亮点。

第三个是权限控制。除了JWT校验登录外，再给请求接口加一个简单的角色判断，比如只有管理员才能调用/api/user/add，通过自定义注解+AOP去实现。这一块如果代码量控制得好，既不会太复杂，又能展示你对权限模型的理解。

我把这个项目的实战经验写下来，核心就是想在最后跟大家说一句：做毕设项目，最怕的不是代码不会写，而是把时间耗在环境部署和玄学报错上。先用Postman把后端接口全部调通，再动前端页面，顺序反过来，一旦有问题你根本分不清是接口的问题还是页面代码的问题。这套社区养老管理系统，难度不高但覆盖面足够广，从登录认证到分页查询再到数据统计，几乎把JavaWeb开发的主流知识点都包含了。如果你时间还算充裕，可以再把小程序端接上去，复用后端接口，毕业设计的完成度会非常可观。

本文还有配套的精品资源，点击获取