Noamwa1. 项目背景与核心需求
这个毕业设计选题瞄准了当下社会日益增长的环保意识与资源循环利用需求。随着"双碳"目标的提出和ESG理念的普及，旧物捐赠作为绿色生活方式的重要组成部分，正在获得越来越多年轻人的青睐。但传统线下捐赠渠道存在信息不对称、流程繁琐、信任度低等痛点，这正是我们开发这款App要解决的核心问题。
从技术选型来看，采用SSM(Spring+SpringMVC+MyBatis)后端框架搭配Vue.js前端框架的组合，是当前企业级应用开发的黄金搭配。SSM框架提供了完善的MVC分层架构和ORM支持，而Vue的响应式特性和组件化开发模式，能够很好地满足旧物捐赠这类需要频繁数据交互的应用场景。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 系统架构设计
2.1 技术栈选型分析
后端选择SSM框架而非Spring Boot主要基于以下考虑：
- 毕业设计需要展示对基础框架的理解和配置能力
- MyBatis相比JPA更适合复杂SQL操作
- 便于演示传统XML配置与注解配置的混合使用
前端采用Vue 2.x版本而非3.x，主要因为：
- 生态更成熟，遇到问题更容易找到解决方案
- 对IE等老旧浏览器兼容性更好
- 学习曲线更平缓，适合毕业设计时间有限的场景
2.2 系统模块划分
整个应用分为六大核心模块：
- 用户中心：实现注册登录、个人信息管理
- 物品管理：捐赠物品的上架、编辑、下架
- 交易系统：预约、确认、评价流程
- 消息通知：站内信、系统通知
- 数据统计：捐赠量、用户活跃度等可视化
- 后台管理：内容审核、用户管理
3. 数据库设计与实现
3.1 核心表结构
用户表(user)设计要点：
sql复制CREATE TABLE `user` (
`id` bigint(20) NOT NULL AUTO_INCREMENT,
`username` varchar(50) NOT NULL COMMENT '登录账号',
`password` varchar(100) NOT NULL COMMENT '加密后的密码',
`salt` varchar(20) NOT NULL COMMENT '加密盐值',
`phone` varchar(20) DEFAULT NULL COMMENT '手机号',
`avatar` varchar(255) DEFAULT NULL COMMENT '头像URL',
`score` int(11) DEFAULT '0' COMMENT '信用积分',
`status` tinyint(4) DEFAULT '1' COMMENT '状态：0-禁用，1-正常',
`create_time` datetime DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`id`),
UNIQUE KEY `idx_username` (`username`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='用户表';
物品表(item)关键字段：
sql复制CREATE TABLE `item` (
`id` bigint(20) NOT NULL AUTO_INCREMENT,
`user_id` bigint(20) NOT NULL COMMENT '发布用户ID',
`category_id` int(11) NOT NULL COMMENT '分类ID',
`title` varchar(100) NOT NULL COMMENT '物品标题',
`description` text COMMENT '详细描述',
`images` varchar(1000) DEFAULT NULL COMMENT '图片URL，多个用逗号分隔',
`status` tinyint(4) DEFAULT '0' COMMENT '状态：0-待审核，1-已上架，2-已预约，3-已完成，4-已下架',
`location` varchar(255) DEFAULT NULL COMMENT '物品所在地',
`create_time` datetime DEFAULT CURRENT_TIMESTAMP,
`update_time` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
PRIMARY KEY (`id`),
KEY `idx_user_id` (`user_id`),
KEY `idx_category` (`category_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='捐赠物品表';
3.2 索引优化实践
针对高频查询场景，我们特别优化了以下索引：
- 物品表的复合索引(category_id, status, create_time)加速分类浏览
- 用户表的username唯一索引确保账号唯一性
- 交易表的(user_id, status)索引加快用户订单查询
4. 后端核心功能实现
4.1 Spring Security整合
实现安全的认证授权体系：
java复制@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
@Autowired
private UserDetailsServiceImpl userDetailsService;
@Override
protected void configure(HttpSecurity http) throws Exception {
http.authorizeRequests()
.antMatchers("/api/auth/**").permitAll()
.antMatchers("/api/item/list").permitAll()
.antMatchers("/api/**").authenticated()
.and()
.addFilter(new JwtAuthenticationFilter(authenticationManager()))
.addFilter(new JwtAuthorizationFilter(authenticationManager()))
.sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS)
.and()
.csrf().disable();
}
@Bean
public PasswordEncoder passwordEncoder() {
return new BCryptPasswordEncoder();
}
}
4.2 文件上传服务
处理多图上传的Controller实现：
java复制@RestController
@RequestMapping("/api/upload")
public class UploadController {
@Value("${file.upload-dir}")
private String uploadDir;
@PostMapping
public Result upload(@RequestParam("file") MultipartFile file) {
if (file.isEmpty()) {
return Result.fail("请选择要上传的文件");
}
try {
String originalFilename = file.getOriginalFilename();
String fileExt = originalFilename.substring(originalFilename.lastIndexOf("."));
String newFilename = UUID.randomUUID().toString() + fileExt;
Path uploadPath = Paths.get(uploadDir);
if (!Files.exists(uploadPath)) {
Files.createDirectories(uploadPath);
}
Files.copy(file.getInputStream(), uploadPath.resolve(newFilename),
StandardCopyOption.REPLACE_EXISTING);
return Result.success("/uploads/" + newFilename);
} catch (IOException e) {
log.error("文件上传失败", e);
return Result.fail("上传失败");
}
}
}
5. 前端Vue实现要点
5.1 组件化开发实践
物品卡片组件(ItemCard.vue)示例：
vue复制<template>
<div class="item-card" @click="handleClick">
<div class="image-container">
<img :src="coverImage" :alt="item.title" />
<div class="status-badge" :class="statusClass">{{ statusText }}</div>
</div>
<div class="content">
<h3 class="title">{{ item.title }}</h3>
<div class="meta">
<span class="location">
<i class="el-icon-location"></i>
{{ item.location }}
</span>
<span class="time">
<i class="el-icon-time"></i>
{{ formatTime(item.createTime) }}
</span>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
item: {
type: Object,
required: true
}
},
computed: {
coverImage() {
return this.item.images.split(',')[0] || require('@/assets/default-item.png')
},
statusText() {
const statusMap = {
0: '审核中',
1: '可捐赠',
2: '已预约',
3: '已完成',
4: '已下架'
}
return statusMap[this.item.status]
},
statusClass() {
return `status-${this.item.status}`
}
},
methods: {
handleClick() {
this.$router.push(`/item/${this.item.id}`)
},
formatTime(time) {
return dayjs(time).fromNow()
}
}
}
</script>
5.2 Vuex状态管理
设计捐赠流程的状态管理：
javascript复制// store/modules/donation.js
const state = {
currentStep: 1,
donationInfo: {
itemId: null,
donorId: null,
receiverId: null,
appointmentTime: null,
location: null,
message: ''
}
}
const mutations = {
SET_STEP(state, step) {
state.currentStep = step
},
UPDATE_DONATION_INFO(state, payload) {
state.donationInfo = {
...state.donationInfo,
...payload
}
},
RESET_DONATION(state) {
state.currentStep = 1
state.donationInfo = {
itemId: null,
donorId: null,
receiverId: null,
appointmentTime: null,
location: null,
message: ''
}
}
}
const actions = {
async submitDonation({ commit, state }) {
try {
const response = await api.submitDonation(state.donationInfo)
commit('RESET_DONATION')
return response
} catch (error) {
throw error
}
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
6. 毕业设计论文撰写要点
6.1 论文结构建议
-
绪论章节应重点阐述：
- 选题背景与社会意义
- 国内外同类应用现状分析
- 本项目的创新点与特色
-
系统分析章节需包含：
- 详细的用户需求调研结果
- 业务流程泳道图
- 数据流分析(DFD)
-
系统设计章节要点：
- 架构设计决策依据
- 数据库ER图与表结构说明
- 关键算法设计(如推荐算法)
-
系统实现章节建议：
- 核心功能界面截图与说明
- 关键技术难点解决方案
- 代码结构说明
6.2 答辩准备技巧
-
演示重点准备：
- 完整的捐赠流程演示
- 后台管理功能展示
- 移动端适配效果
-
常见问题预演：
- 为什么选择SSM而不是Spring Boot？
- 如何保证交易双方的信誉？
- 系统的扩展性设计体现在哪里？
-
PPT制作建议：
- 技术架构图使用分层图示
- 关键代码截图要标注重点
- 数据统计使用可视化图表
7. 开发过程中的经验总结
7.1 跨域问题解决方案
在SSM后端配置CORS：
java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
.allowedHeaders("*")
.allowCredentials(true)
.maxAge(3600);
}
}
7.2 图片上传优化实践
- 使用WebP格式转换减少图片体积
- 实现客户端图片压缩后再上传
- 采用CDN加速图片访问
7.3 性能优化措施
- 接口响应时间监控与优化
- MyBatis二级缓存配置
- 高频数据Redis缓存策略
8. 项目扩展方向建议
-
社交功能扩展：
- 捐赠故事分享
- 用户互动社区
- 公益组织入驻
-
技术升级路径：
- 迁移到Spring Boot简化配置
- 引入微服务架构
- 增加大数据分析模块
-
商业模式探索：
- 公益积分商城
- 环保企业赞助
- 二手商品估值服务