企业官网建设流程全解析

做毕设选什么题目，比怎么做更重要。我今年定的题目是“ssm+vue流浪动物领养助养系统”，后端用Spring、SpringMVC、MyBatis这套SSM框架，前端用Vue，再加上毕业论文和一套能跑起来的完整程序。整套做下来，从数据库设计到领养状态流转，从后端权限拦截到前端路由守卫，基本把JavaWeb阶段该练的技术点都过了一遍，而且选题本身贴近公益场景，答辩时也容易讲出故事来。这篇文章就围绕这个系统，把整体的设计思路、关键技术点、实操步骤和踩过的坑整理一遍，适合正在选毕设题目、或者选了类似前后端分离项目但还没想清楚怎么落地的同学。

1. 项目整体设计与核心功能拆解

1.1 这类系统要解决的业务问题是什么

写代码之前先把业务捋清楚，不然你后面表结构都建不明白。流浪动物领养助养系统，核心就三个参与方：普通用户、管理员（也就是救助站或协会工作人员）、还有被救助的动物本身。用户侧要做的动作很简单——浏览待领养的动物、看到合眼缘的提交领养申请、没条件养但想帮忙的可以选择助养；管理员侧要做的则是审核发布、管理动物信息、审核领养和助养申请、处理回访记录。

这里最容易犯的错，就是拿着键盘就开始建表，做着做着发现领养申请没有状态管理，或者一只动物可以同时被好几个人领养成功。所以我在设计初期把领养流程定成一个状态机：用户提交申请、管理员审核通过或驳回、通过后安排线下接走、接走后进入回访期。这一步想清楚，后面的接口设计、状态字段、前端按钮显示就都顺了。包括“助养”和“普通捐赠”的区别，也是我画业务流程图的时候才猛然意识到要分开做：捐赠是一次性动作，助养是周期性承诺，两者混在一张表里后期会很别扭。

1.2 角色权限与业务闭环设计

我把权限划分成三级：游客只能看动物列表和详情；注册用户能提交领养申请、查看申请进度、收藏动物；管理员拥有全部后台功能，包括动物录入、图片上传、申请审核、用户禁用、助养记录导出。实现层面是后端拦截器加前端路由守卫，双层控制。只靠前端隐藏按钮是防不住接口遍历的，这句话我在答辩的时候也讲给老师听，算是这个小项目里少有的“安全设计”亮点。

再往后，围绕救助站实际运营场景，我加了一个回访功能。领养不是把动物送出去就完事了，正规流程需要在一个月左右回访确认动物生活状态是否正常。这个功能做出来，无论在论文创新点还是答辩亮点上都很有价值，而且实现成本不高，就是一张回访记录表加上增删改查。加了回访模块之后，整个系统在业务闭环上就比单纯“发布-申请”完整很多，论文里也多了一小块可以详细展开的内容。

1.3 助养模块与普通捐赠的差别

我一开始把“助养”和“捐赠”放在同一个表里，后来发现不合适。捐赠是一次性动作，助养是有周期性的承诺，比如按月或者按季度。所以我后来拆成了两张表，助养产生一条持续状态记录，到了下次到期时间系统会自动提醒管理员。这个小细节可能在答辩时被问到“助养和捐赠有什么区别”，你要是能讲清楚为什么要分开设计，绝对比背一堆概念管用得多。

需求分析阶段我不建议直接用Word画流程图，先用ProcessOn或者draw.io把用例图和数据流图拉出来，改起来非常快。这个阶段花的时间越长，后面写代码越省事。

2. 技术方案选型：为什么是SSM加Vue

2.1 SSM框架的分工逻辑

说SSM，其实现在很多毕业设计已经用Spring Boot起步了，但学校大纲里还常写SSM。我这里用的方案是Spring Boot做基础容器，底层仍然是Spring + SpringMVC + MyBatis这套组合。换句话说，你答辩的时候能说清楚Spring管Bean生命周期和依赖注入、SpringMVC管请求分发和参数绑定、MyBatis管持久层SQL映射，那SSM的核心就讲明白了。

用Spring Boot而不是老式XML配置，主要是为了减少工作量。如果完全按几年前的老写法，光spring-mvc.xml、mybatis-config.xml、web.xml这些配置文件就能把新手绕晕，而且网上资料又杂又乱。现在用Spring Boot，一个application.yml就能搞定大部分配置，代码结构清爽，但核心框架还是那几个。你论文里写“基于SSM框架”，一点问题都没有。

2.2 前端用Vue的取舍

Vue适合这个项目的理由很实际：毕设页面数量不少，一个完整的后台管理界面加用户前台，如果用JSP或原生JS写，维护成本很高，而且页面效果比较陈旧。Vue的组件化可以把动物卡片、申请表单、图片轮播拆成独立组件，代码量减少，页面也干净。

从找工作的角度来说，Vue也是目前前端岗位问卷率最高的框架之一。毕设里用上Vue Router和Pinia或者Vuex状态管理，简历上就可以写“熟悉前后端分离开发模式，了解Vue生态”。虽然毕业设计不等于真实项目，但至少你亲手写过路由、组件、状态，面试问到的时候能说个一二三四，比只会跟着教程敲要强不少。

2.3 前后端分离与请求交互方案

前后端交互我用的是Axios，开发环境配一个Vite或者vue.config.js代理来解决跨域。生产环境把前端打包后丢进Spring Boot的static目录，一个jar包就能同时提供页面和接口，对最后交程序和部署都非常方便。这个“vue打包放进springboot”的操作看起来土，但确实适合毕设这种交付场景，评委老师拿到项目只要一个命令启动，不用再单独装Nginx。

开发时前后端分开跑，前端Vite默认端口5173，后端Tomcat端口8080，浏览器直接请求接口必然跨域。我的处理方式是在前端配置代理，把/api开头的请求转发到localhost:8080。这样写代码的时候不用写全路径，以后打包部署改起来也方便。具体配置后面实操章节会贴代码。

2.4 为什么没有选更复杂的前后端分离方案

有人会说，都已经前后端分离了，为什么不用uni-app做个APP，或者再加个微服务网关？我觉得毕设的定位是“完整但不过度设计”。如果说你做的是一个流浪动物领养助养系统，业务规模就是一个小型救助站的日常运营，强行上微服务、上Redis缓存，反而会给自己挖坑，论文里也不好自圆其说。技术方案的选型应该匹配业务复杂度，这也是我一个做软件工程的朋友反复跟我强调的。

3. 数据库设计与核心模块落地

3.1 数据表规划

表设计是整个项目最核心的工作，我按角色和业务拆成下面这些核心表。

每张表我都加了create_time和update_time两个字段，这个是基本操作。动物状态我定义成四种：待领养、已申请、已领养、休息中。其中“休息中”这个状态容易被忽略——有些动物刚打完疫苗或者刚做完手术，不适合马上进入领养流程，要在列表里隐藏但数据库记录还在。在后端用一个int字段存状态码，前端映射成文字和标签颜色。

3.2 领养申请的状态机设计

领养申请的状态我用int存储：0待审核、1已通过、2已驳回、3已取消、4已完成。前端根据状态值渲染不同的标签样式和操作按钮。这里重点在于“已取消”状态，用户可以在管理员审核前自行撤回申请，这个逻辑不复杂，但是很体现业务完整度。

后端Service层里有一个审批通过的方法，里面要同时做两件事：把申请状态改为已通过，把对应动物的状态改为已领养。我在这里踩过一个坑——一开始只改了申请表状态，动物状态没跟着变，结果用户再看动物列表，这只动物还是“待领养”，又被人提交了重复申请。后来把两步写在同一个方法里，加上@Transactional注解，这个问题就彻底解决了。这个坑我建议你写进论文的“遇到的问题与解决”章节，非常真实。

3.3 助养、捐赠和公告模块

助养模块的关键点在于周期处理。我建了sponsor_plan表，记录计划金额、周期类型、下次扣款时间。模拟支付用的是状态字段打标记，没有接真实第三方支付，因为毕设阶段不必要也不会接真实支付。真要做支付，还要考虑支付回调、对账、退款，复杂度和安全要求会高出不少。当然，我论文里写了“后续可扩展接入实际支付接口”这样的展望，这也是毕设论文的常规操作。

公告模块倒是简单，管理员发布后前台展示。需要提醒的是，公告内容我用了简单富文本编辑器，存储的是HTML字符串，前端用v-html渲染。有同学可能不知道，用v-html渲染用户提交的HTML存在XSS风险，如果攻击者在内容里插入一段脚本，别人打开页面就会被执行。我这里做了输入过滤，把script标签直接剥掉，这也算一个安全设计点，答辩的时候可以提。

3.4 权限控制的实现方案

后端我用SpringMVC的拦截器拦截URL，并校验Session。简单方案就是登录成功后在Session里存user对象，拦截器里判断是否登录，再判断角色是不是管理员。一旦发现未登录或角色不符，就返回JSON提示或者重定向到登录页。前端的路由守卫只负责体验层，真正做安全保障的一定是后端。前端守卫我这里用的是Vue Router的beforeEach，通过meta.role判断当前路由是否允许访问，这属于锦上添花，不能单独依赖它。

具体到表设计，用户表里加了一个role字段，我用1代表管理员，2代表普通用户。初始管理员账号在启动数据脚本里就插入好，或者在首次启动时自动创建，省得去数据库手动改。

4. 实操过程与关键代码实现

4.1 环境准备与工程初始化

需要的环境：JDK 8以上、Maven 3.6以上、Node.js 14以上、MySQL 5.7或8.0，编辑器用IDEA和VS Code。

后端工程我直接用Spring Boot的骨架来创建，pom.xml里引了spring-boot-starter-web、mybatis-spring-boot-starter、mysql-connector-java、lombok，另外加了Druid连接池，开发时看SQL监控很方便。配置文件里主要改数据源、端口、文件上传大小上限。前端用Vite工程，安装vue-router和axios。以下是两个关键配置文件，一个后端，一个前端。

# application.yml server: port: 8080 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/animal?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai username: root password: root type: com.alibaba.druid.pool.DruidDataSource servlet: multipart: max-file-size: 10MB max-request-size: 20MB mybatis: mapper-locations: classpath:mapper/*.xml configuration: map-underscore-to-camel-case: true

前端vue.config.js里配代理：

// vue.config.js module.exports = { devServer: { port: 5173, proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true, pathRewrite: { '^/api': '' } } } } };

前端请求路径写成“/api/adoption/apply”，代理转发后后端实际接到的就是“/adoption/apply”，这个路径规划在前端写代码时保持统一就好。

4.2 后端SSM常用注解和核心代码

这个项目里最常用的注解整理成了一张表，写论文或者复习的时候对着看很方便。

领养申请的后端Controller大致长这样：

@RestController @RequestMapping("/api/adoption") public class AdoptionController { @Autowired private AdoptionService adoptionService; @PostMapping("/apply") public Result apply(@RequestBody AdoptionApply apply, HttpSession session) { Integer userId = (Integer) session.getAttribute("userId"); if (userId == null) { return Result.error("请先登录"); } apply.setUserId(userId); adoptionService.apply(apply); return Result.success("申请提交成功"); } }

Service里的审批方法加上事务，核心逻辑是同步修改两张表：

@Service public class AdoptionServiceImpl implements AdoptionService { @Autowired private AdoptionApplyMapper applyMapper; @Autowired private PetMapper petMapper; @Override @Transactional public void approve(Integer applyId) { AdoptionApply apply = applyMapper.selectById(applyId); if (apply == null) { throw new RuntimeException("申请记录不存在"); } // 申请状态改为已通过 applyMapper.updateStatus(applyId, 1); // 动物状态改为已领养 petMapper.updateStatus(apply.getPetId(), 2); } }

这段代码看起来简单，但它把“状态机”、“事务”、“业务联动”三个点都串起来了，是整篇论文里技术含量比较高的一块。做毕设比的是把简单的逻辑做对、做稳，而不是代码写得花里胡哨。

4.3 前端核心页面与Axios封装

前端这一块，我大致做了这些页面：登录注册页、首页动物列表、动物详情页、提交领养申请页、我的申请页、助养计划页、后台管理页。后端接口统一以/api开头，前端我把请求封装到了一个request.js里，这样所有页面调用时都能自动带上Session或Token，返回非200状态码时统一弹出提示，代码会干净很多。

// request.js import axios from 'axios'; import { ElMessage } from 'element-plus'; const request = axios.create({ baseURL: '/api', timeout: 10000 }); request.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 => { ElMessage.error('网络异常，请稍后重试'); return Promise.reject(error); } ); export default request;

首页动物列表用一个卡片组件，循环渲染。每张卡片显示动物图片、名称、品种、是否已领养。这个卡片被复用到了好几个页面，Vue组件化在这里省了不少事。

4.4 Vue路由守卫与前端权限控制

Vue Router配置里面我做了登录拦截。只要未登录，访问需要权限的页面都会被重定向到登录页，同时记录下来源路径，登录成功后再跳回去，这个用户体验细节很加分。

router.beforeEach((to, from, next) => { const token = localStorage.getItem('token'); if (to.meta.requireAuth && !token) { next({ path: '/login', query: { redirect: to.fullPath } }); } else if (to.path === '/admin' && localStorage.getItem('role') !== '1') { next('/403'); } else { next(); } });

注意，这个判断只是前端显示层面的控制。真正的接口权限仍然靠后端拦截器把关，如果谁来直接调用管理员接口，后端会返回无权限的JSON，这也是我在项目里反复强调的理念。

4.5 打包部署与交付物整理

后端用Maven打包，目标产物是一个可运行的jar包。前端构建后生成dist目录，把dist目录里的文件复制到后端src/main/resources/static下，重新打包后端，这样只需一个jar包就能启动整个系统。启动后访问localhost:8080/index.html就能看到首页。

部署方式其实还可以用Nginx前后端分离部署，前端口80，后端口8080，这种更接近企业真实环境。但毕设交付讲究简单可运行，我最终选择了一个jar包方案。项目里我准备了一份README，写清楚环境要求、启动步骤、初始账号密码，评委老师拿到手能快速跑起来，这方面口碑很重要。

5. 常见问题与排查技巧实录

5.1 跨域请求报错

开发时后端端口和前端端口不同，直接请求必然跨域。我试过三种方案：后端加@CrossOrigin、后端加CorsFilter、前端代理。最终我选了前端代理，配置简单还不改后端代码。CorsFilter也能用，但需要处理预检请求OPTIONS，配置起来略麻烦。生产环境打包到同一个jar包后不存在跨域问题，因为页面和接口是同一个源。

排查跨域问题时，最直接的现象是浏览器Network面板显示请求已发出但被拦截，控制台报CORS或blocked by CORS policy。如果你看到这个，优先检查代理配置是否生效，再看后端是否还需要额外的允许跨域配置。

5.2 文件上传失败与图片回显问题

做动物信息管理时图片上传是个重灾区。我一开始没改Spring Boot上传大小限制，传一张手机拍的照片就报错。解决办法就是在application.yml里设置max-file-size和max-request-size。图片上传到本地磁盘的upload目录，数据库里存相对路径，前端通过接口拼接完整URL。这里要提醒的是，部署到服务器时upload目录需要改成服务器上的绝对路径，否则图片会丢失。

还有一个小坑：Windows本地路径是反斜杠，如果直接用字符串拼到前端URL里可能出问题。我在后端存路径时统一把反斜杠替换成正斜杠，这个细节不写文档真的很容易忘记。

5.3 时间格式和日期序列化问题

后端LocalDateTime默认序列化成一段数组，前端拿到没法直接使用。我在Spring Boot里配置了Jackson的时间格式化，在application.yml中加入日期格式，或者在实体字段上用@JsonFormat注解。前端列表里展示时间用dayjs统一格式化，比分页组件自带的格式化方法好用很多。

5.4 MyBatis映射踩坑记录

MyBatis的XML映射里，最容易踩的坑是返回类型resultType字段不匹配。数据库字段是下划线命名，Java属性是驼峰命名，我在配置里开了map-underscore-to-camel-case，大部分情况能自动映射。但如果是多表关联查询，字段在多个表里出现，就必须在SQL里给每列取别名，否则数据对不上。

还有一个经典问题：明明查询有数据但接口返回null。一般是resultMap没配置关联对象，或者嵌套查询的column写错了。排查这类问题，先打开MyBatis的SQL日志，看执行SQL是否带回了所有字段，再看映射配置，基本都能定位。

5.5 前端功能开发中的几个易错点

表格渲染不出来，先看接口返回的字段名和前端绑定的字段名是否一致，这是刚用Vue的人最常遇到的问题。axios返回的数据被包在Promise里，要等异步结果拿到后再赋值，不要在mounted外面直接操作响应式变量。Vue Router跳转后页面空白，多半是路由路径和views目录下的文件名不一致，vue文件小写和大写混用都可能出问题。

再加一个实用的：Element Plus的分页组件，current-page和total默认是数字类型，如果从后端返回的是字符串，记得用Number()转一下，否则分页高亮和跳页会偶尔出错。

6. 论文与答辩要提前准备什么

6.1 论文结构怎么组织

我论文分成了这几章：绪论、相关技术介绍、需求分析、系统设计、系统实现、系统测试、总结与展望。测试部分我用表格列功能测试用例，写明预期结果和实际结果，能占不少篇幅而且不空洞。相关技术介绍那里，我详细写了SSM三个框架的分工和Vue的响应式原理，面试也常常问到。

关键部分是需求分析和系统设计。甲方需求写清楚后，在系统设计里展示用例图、流程图、ER图、系统架构图，再用文字描述核心表结构。这些图用ProcessOn或draw.io画，别直接用代码截图充数，画图在答辩时远比大段文字好讲。

6.2 答辩演示脚本与常见提问

答辩时要演示系统，提前准备好脚本：用管理员账号登录，展示动物管理的增删改查、领养审核、回访记录查看；再用普通用户账号演示提交领养申请、查看申请进度。两条线串起来，展示业务闭环。演示前务必准备好图片素材，别现场加载不出图，真的会很尴尬。

我在答辩PPT里专门放了几张“技术难点”的幻灯片：事务同步更新两张表、路由守卫加拦截器的双层权限控制、跨域处理方案。这几点每个都能展开讲两分钟，评委问起来有得聊。另外，评委老师大概率会问“你的系统相比普通论坛或信息发布平台有什么不同”，这时候就讲回访流程、助养周期管理、动物状态自动流转，这些是业务上的亮点。

做这个项目最大的体会，是开始写代码之前不要怕在业务设计上花时间。我前后把功能模块和数据库改了三版，第一版全靠想象设计表，第二版加上了领养申请状态机，第三版补上了回访和助养模块。每一版调整在后端实现上其实都不难，反而是需求没想清楚的时候写代码最痛苦。

最后分享一个小建议：论文里的截图一定要在开发过程中顺手截，别等到最后要去排版填报时再临时补环境、补数据去截屏。我一开始偷懒，后来光补截图就花了一个晚上，因为某些页面需要特定状态的数据才能展示，再构造数据特别麻烦。如果后续时间充足，这个项目还能往下扩展小程序端，或者把助养模块接上真实支付回调，这几个方向都可以写进论文里的“后续展望”，也让整个项目显得更有延伸空间。