元宿six1. 项目背景与核心需求
羊毛毡手工艺品作为一种新兴的手工创作形式，近年来在国内逐渐流行起来。这种使用羊毛纤维通过针刺或湿毡工艺制作各种造型的技艺，因其材料环保、创作自由度高而受到手工爱好者的青睐。然而，目前国内专门针对羊毛毡手工艺的线上交流平台仍属空白，爱好者们大多分散在各类综合手工论坛或社交平台，难以形成有效的技术交流和作品展示环境。
这个Java SSM框架实现的羊毛毡手工艺品交流系统，正是为了解决以下核心痛点：
- 作品展示碎片化：创作者的作品分散在微信朋友圈、微博、小红书等不同平台，缺乏专业展示空间
- 技术交流低效：现有的综合手工论坛中，羊毛毡相关内容被淹没在海量帖子中
- 材料工具信息不对称：新手难以快速获取可靠的羊毛、工具购买渠道和使用建议
- 教学活动缺乏组织：线下工作坊信息传播范围有限，线上教学资源分散
系统采用SSM（Spring+SpringMVC+MyBatis）框架组合开发，这是目前Java Web开发中成熟度较高、学习曲线相对平缓的技术选型。选择IntelliJ IDEA作为开发环境，主要考虑其在Java项目开发中的智能提示、代码重构和调试支持方面的优势，特别是对SSM框架的良好支持。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 系统架构设计与技术选型
2.1 整体技术架构
系统采用典型的三层架构设计：
code复制表示层(Web Layer) - SpringMVC处理HTTP请求/响应，JSP/JSTL视图渲染
业务逻辑层(Service) - Spring管理的业务组件，事务控制
数据访问层(DAO) - MyBatis实现ORM，SQL映射
这种分层设计使得各层职责明确，便于团队协作和后期维护。Spring的IoC容器统一管理各层组件，通过依赖注入实现松耦合。
2.2 数据库设计要点
针对羊毛毡交流社区的特点，数据库设计着重考虑了以下方面：
- 作品表(artwork)：包含多图存储（JSON数组格式）、材料清单、制作时长等特色字段
- 教程表(tutorial)：支持步骤图文混排（Markdown格式存储）
- 标签系统：实现多对多关系，方便作品分类检索
- 用户社交关系：关注/粉丝关系采用邻接表设计
一个典型的作品表DDL示例：
sql复制CREATE TABLE `artwork` (
`id` bigint(20) NOT NULL AUTO_INCREMENT,
`user_id` bigint(20) NOT NULL,
`title` varchar(100) NOT NULL,
`description` text,
`images` json DEFAULT NULL COMMENT '作品图片URL数组',
`materials` json DEFAULT NULL COMMENT '使用材料清单',
`difficulty` tinyint(4) DEFAULT '1' COMMENT '难度等级1-5',
`create_time` datetime NOT NULL,
`update_time` datetime NOT NULL,
PRIMARY KEY (`id`),
KEY `idx_user` (`user_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
2.3 文件存储方案
考虑到羊毛毡作品需要展示多角度高清图片，系统采用以下优化策略：
-
图片处理：使用Thumbnailator库实现上传时自动生成三种尺寸
- 原图（保留原始文件）
- 展示图（宽度1200px，质量压缩）
- 缩略图（宽度300px）
-
存储分离：作品图片等静态资源使用阿里云OSS存储，与Web服务器分离，减轻服务器负载。在application.properties中的关键配置：
properties复制# 阿里云OSS配置
aliyun.oss.endpoint=oss-cn-hangzhou.aliyuncs.com
aliyun.oss.accessKeyId=your-access-key
aliyun.oss.accessKeySecret=your-secret-key
aliyun.oss.bucketName=wool-felt-bucket
3. 核心功能模块实现
3.1 作品发布流程
作品发布是系统的核心功能，前端采用jQuery File Upload实现多图上传，后端处理流程包含以下关键步骤：
- 图片上传预处理：
java复制public Result uploadImages(MultipartFile[] files, HttpServletRequest request) {
// 1. 检查文件类型和大小
for (MultipartFile file : files) {
if (!file.getContentType().startsWith("image/")) {
return Result.error("仅支持图片文件");
}
if (file.getSize() > 5 * 1024 * 1024) { // 5MB限制
return Result.error("单张图片不能超过5MB");
}
}
// 2. 生成OSS存储路径：userID/yyyyMMdd/uuid.jpg
String userId = getCurrentUserId(request);
String datePath = new SimpleDateFormat("yyyyMMdd").format(new Date());
List<String> urls = new ArrayList<>();
// 3. 处理每张图片
for (MultipartFile file : files) {
String originalFilename = file.getOriginalFilename();
String fileExt = originalFilename.substring(originalFilename.lastIndexOf("."));
String ossKey = "artwork/" + userId + "/" + datePath + "/" + UUID.randomUUID() + fileExt;
// 上传原图到OSS
ossClient.putObject(bucketName, ossKey, file.getInputStream());
// 生成缩略图并上传
BufferedImage thumbnail = Thumbnails.of(file.getInputStream())
.width(300)
.asBufferedImage();
String thumbKey = "artwork/thumb/" + ossKey;
ossClient.putObject(bucketName, thumbKey, thumbnailToInputStream(thumbnail));
urls.add(ossClient.generatePresignedUrl(bucketName, ossKey, expirationDate).toString());
}
return Result.success(urls);
}
- 作品信息保存：采用AJAX提交表单，后端使用Spring Validation进行参数校验：
java复制@PostMapping("/publish")
@ResponseBody
public Result publishArtwork(@Valid ArtworkForm form, BindingResult result) {
if (result.hasErrors()) {
return Result.error(result.getFieldError().getDefaultMessage());
}
Artwork artwork = new Artwork();
BeanUtils.copyProperties(form, artwork);
artwork.setUserId(getCurrentUserId());
artwork.setCreateTime(new Date());
artwork.setUpdateTime(new Date());
// 处理标签
if (StringUtils.isNotBlank(form.getTags())) {
List<String> tags = Arrays.asList(form.getTags().split(","));
artworkService.saveWithTags(artwork, tags);
} else {
artworkService.save(artwork);
}
return Result.success(artwork.getId());
}
3.2 教程模块实现
教程模块支持图文混排的步骤说明，前端使用Editor.md Markdown编辑器，后端处理要点：
- Markdown内容存储：原始Markdown和渲染后的HTML同时存储，减轻实时渲染压力
java复制public class Tutorial {
private Long id;
private String title;
private String markdownContent; // 原始Markdown
private String htmlContent; // 渲染后的HTML
// 其他字段...
}
- 图片粘贴处理：重写Editor.md的图片上传处理器，与作品图片共用OSS存储
javascript复制$(function() {
editormd("editor", {
imageUpload : true,
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp"],
imageUploadURL : "/tutorial/upload",
// 其他配置...
});
});
3.3 社交互动功能
系统实现了关注、点赞、评论等社交功能，其中特别需要注意：
- 点赞的高并发处理：使用Redis缓存点赞记录，定期持久化到数据库
java复制public void likeArtwork(Long userId, Long artworkId) {
String key = "like:artwork:" + artworkId;
if (redisTemplate.opsForSet().isMember(key, userId)) {
redisTemplate.opsForSet().remove(key, userId);
} else {
redisTemplate.opsForSet().add(key, userId);
}
// 异步任务定期将Redis数据同步到MySQL
}
- 评论的分页加载：采用"游标分页"而非传统页码分页，提升用户体验
sql复制SELECT * FROM comment
WHERE artwork_id = #{artworkId}
AND id < #{lastId}
ORDER BY id DESC
LIMIT #{pageSize}
4. 开发环境配置与项目实战
4.1 IDEA项目初始化
-
创建Maven项目：
- 选择org.apache.maven.archetype:maven-archetype-webapp
- 配置GroupId: com.woolfelt, ArtifactId: community
-
关键依赖配置（pom.xml节选）：
xml复制<!-- Spring核心依赖 -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>5.3.18</version>
</dependency>
<!-- MyBatis整合Spring -->
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis-spring</artifactId>
<version>2.0.7</version>
</dependency>
<!-- 阿里云OSS SDK -->
<dependency>
<groupId>com.aliyun.oss</groupId>
<artifactId>aliyun-sdk-oss</artifactId>
<version>3.13.0</version>
</dependency>
<!-- 图片处理 -->
<dependency>
<groupId>net.coobird</groupId>
<artifactId>thumbnailator</artifactId>
<version>0.4.14</version>
</dependency>
4.2 典型问题解决方案
-
Lombok在IDEA中的配置问题：
- 安装Lombok插件
- 开启注解处理：Settings → Build → Compiler → Annotation Processors
- 如果出现"you aren't using a compiler supported by lombok"警告，需确保：
- 使用JDK8+
- 在pom.xml中添加lombok依赖
- IDEA中启用Enable annotation processing
-
SSM整合常见坑点：
- Spring与MyBatis整合时需要配置SqlSessionFactoryBean：
xml复制<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean"> <property name="dataSource" ref="dataSource"/> <property name="mapperLocations" value="classpath:mapper/*.xml"/> <property name="typeAliasesPackage" value="com.woolfelt.entity"/> </bean>- 事务管理需在Spring配置中启用注解驱动：
xml复制<tx:annotation-driven transaction-manager="transactionManager"/>
4.3 部署注意事项
-
多环境配置：使用Spring Profile管理开发、测试、生产环境配置
- application-dev.properties：开发环境
- application-prod.properties：生产环境
- 通过JVM参数激活：-Dspring.profiles.active=prod
-
性能优化建议：
- 开启Gzip压缩（Nginx配置示例）：
nginx复制gzip on; gzip_types text/plain application/xml text/css application/javascript; gzip_min_length 1024;- 静态资源缓存策略：
nginx复制location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ { expires 365d; add_header Cache-Control "public, no-transform"; }
5. 项目扩展与进阶方向
5.1 移动端适配方案
现有系统可通过以下方式增强移动端体验：
-
响应式前端改造：
- 引入Bootstrap 5或Flexbox布局
- 图片懒加载：使用lazysizes.js
html复制<img data-src="image.jpg" class="lazyload" alt=""> -
API接口开发：
为移动App准备RESTful API，使用Spring的@RestController：java复制@RestController @RequestMapping("/api/artwork") public class ArtworkApiController { @GetMapping("/{id}") public Result getArtwork(@PathVariable Long id) { Artwork artwork = artworkService.getById(id); return Result.success(artwork); } // 其他API方法... }
5.2 进阶功能建议
-
作品相似度推荐：
- 基于标签的协同过滤算法
- 使用Mahout或Spark MLlib实现
-
在线工作坊功能：
- 集成腾讯云实时音视频TRTC
- 实现预约、付费、直播互动全流程
-
材料商城对接：
- 与淘宝/1688开放API对接
- 实现一键购买作品同款材料
这个羊毛毡手工艺品交流系统的实现，展示了如何将传统的SSM框架应用于垂直领域社区平台的开发。项目中遇到的许多技术挑战和解决方案，如高并发点赞处理、Markdown内容存储、多图上传优化等，都可以复用到其他类型的社区系统开发中。