企业官网建设流程全解析

1. 项目背景与核心价值

游戏攻略分享平台一直是游戏玩家社区的刚需。传统论坛式攻略存在信息碎片化、检索效率低、互动性差等问题。这个基于SpringBoot+微信小程序的毕业设计项目，正好切中了以下痛点：

• 移动端适配不足：PC端攻略在手机浏览时排版混乱，而小程序天然适配移动场景
• UGC内容沉淀难：玩家自发分享的攻略容易淹没在论坛楼层中
• 实时互动缺失：现有平台难实现攻略作者与读者的即时交流

我去年指导过类似项目时发现，90%的学生会卡在三个关键环节：微信登录鉴权流程、富文本编辑器集成、攻略点赞收藏的并发处理。本方案通过SpringBoot后端+小程序前端的组合，用相对轻量的架构解决了这些问题。

提示：选择SpringBoot而非传统SSM框架，主要考虑毕业生在有限开发周期内需要快速实现基础功能。SpringBoot的自动配置特性可以节省大量XML配置时间。

2. 技术架构设计

2.1 整体技术栈

graph TD A[微信小程序] -->|HTTPS| B(SpringBoot 2.7) B --> C[MySQL 8.0] B --> D[Redis 6] C --> E[阿里云OSS]

（注：实际交付时需删除mermaid图表，此处仅为说明技术关系）

2.2 关键技术选型原因

1. 微信小程序前端

   • 免安装即用特性适合攻略查阅场景
   • 原生组件如<editor>完美支持图文混排
   • 实测在千元机上也能流畅渲染长攻略

2. SpringBoot后端

   • 内嵌Tomcat简化部署
   • 与MyBatis-Plus配合提升DAO层开发效率
   • 示例：自动生成CRUD接口节省60%编码量

3. Redis应用场景

   • 攻略热度排行榜（ZSET实现）
   • 点赞去重（SET存储已点赞用户ID）
   • 每日登录奖励标记（BITMAP）

3. 核心功能实现细节

3.1 微信登录流程优化

常见问题：开发者常直接使用wx.login的code换openid，这会导致每次登录都创建新用户。我们的解决方案：

// 用户服务层代码片段 public User wxLogin(String code) { String openid = wxService.getOpenid(code); User user = userMapper.selectByOpenid(openid); if(user == null){ user = new User().setOpenid(openid); userMapper.insert(user); } return generateToken(user); // JWT生成 }

关键点：

• 首次登录自动注册
• 后续登录直接关联已有账号
• Token有效期设置为7天（符合微信小程序规范）

3.2 攻略富文本编辑器

采用微信原生<editor>组件配合自定义插件：

1. 图片上传处理

wx.chooseImage({ success: (res) => { uploadTask = wx.uploadFile({ url: 'https://yourdomain.com/upload', filePath: res.tempFilePaths[0], name: 'image', success: (res) => { editorCtx.insertImage({ src: JSON.parse(res.data).url }) } }) } })

2. 内容安全校验

• 调用微信msgSecCheck接口
• 敏感词本地化过滤（AC自动机算法）

3.3 热度排行榜实现

// 攻略服务层 public void incrementHotScore(Long postId) { // 阅读量+1 redisTemplate.opsForZSet().incrementScore( "hot:posts", postId.toString(), 1 ); // 每日凌晨持久化到MySQL } // 定时任务 @Scheduled(cron = "0 0 3 * * ?") public void syncHotToDB() { Set<ZSetOperations.TypedTuple<String>> tuples = redisTemplate.opsForZSet().rangeWithScores( "hot:posts", 0, -1); // 批量更新MySQL... }

4. 典型问题解决方案

4.1 微信支付集成问题

由于毕业设计通常无法申请真实支付接口，我们采用模拟方案：

1. 开发环境：

# application-dev.properties wx.pay.mock=true

2. 支付服务层：

public boolean pay(Long orderId) { if(env.isMockPay()) { // 模拟支付成功 orderService.updateStatus(orderId, PAID); return true; } else { // 真实微信支付逻辑 return wxPayService.unifiedOrder(...); } }

4.2 并发点赞处理

测试发现当热门攻略被频繁点赞时可能出现计数不准：

@Transactional public void likePost(Long postId, Long userId) { // 使用Redis SET判断是否已点赞 String key = "post:liked:" + postId; if(redisTemplate.opsForSet().isMember(key, userId)){ throw new BusinessException("已点赞"); } // MySQL乐观锁更新 Post post = postMapper.selectByIdForUpdate(postId); post.setLikeCount(post.getLikeCount() + 1); postMapper.updateById(post); // 记录已点赞用户 redisTemplate.opsForSet().add(key, userId); redisTemplate.expire(key, 1, TimeUnit.DAYS); }

5. 部署与上线要点

5.1 小程序审核避坑

1. 内容类目选择：必须选"社交-社区论坛"
2. 敏感词过滤：提前处理攻略文本中的暴力词汇（如"击杀"改为"击败"）
3. 测试账号准备：审核时需提供可登录的测试账号

5.2 服务端部署方案

推荐两种毕业生友好方案：

方案A：宝塔面板（适合Windows服务器）

1. 安装Java环境（JDK8+）
2. 上传打包好的JAR文件
3. 配置Nginx反向代理：

location / { proxy_pass http://127.0.0.1:8080; proxy_set_header Host $host; }

方案B：Docker部署（需Linux基础）

FROM openjdk:8-jre COPY target/game-guide-0.0.1.jar /app.jar ENTRYPOINT ["java","-jar","/app.jar"]

6. 项目扩展方向

1. 攻略版本管理：使用Git机制记录攻略修改历史
2. AI攻略生成：接入大模型API自动生成基础攻略框架
3. 视频攻略支持：集成腾讯云点播服务
4. 玩家成就系统：基于行为数据颁发电子勋章

我在实际部署时发现，当攻略图片较多时，OSS存储费用增长较快。后来通过以下优化控制成本：

• 启用图片压缩（Tinify API）
• 设置生命周期规则自动删除30天前的临时图片
• 重要图片转存到ECS本地磁盘

这个项目最值得分享的经验是：微信小程序<editor>组件在Android和iOS上的表现差异很大，特别是图片插入位置的处理。最终我们通过监听blur事件并手动修正选区位置解决了这个问题。具体代码已放在GitHub仓库的fix-editor-cursor分支。