SpringBoot+Vue3垃圾分类系统开发实践-育师

1. 垃圾分类回收系统架构解析

最近在开发一个垃圾分类回收系统时，我选择了SpringBoot+Vue3+MyBatis这套技术栈。这个选择并非偶然，而是基于实际项目需求的深思熟虑。前后端分离的架构让我们的开发团队能够并行工作，前端专注于用户体验，后端则保证业务逻辑的稳定可靠。

MySQL作为关系型数据库，在处理这类结构化数据时表现出色。我们设计了三个核心数据表：用户信息表、垃圾分类表和回收订单表。这种设计既满足了基础业务需求，又为后续扩展留出了空间。比如user_status和role_level字段的设计，就为多角色权限控制打下了基础。

2. 数据库设计与优化实践

2.1 用户信息表关键设计

用户表(user_info)采用BIGINT类型的user_id作为主键，这是考虑到系统未来的用户量增长。密码存储没有使用明文，而是存储password_hash，这是基本的安全规范。我建议使用BCrypt等专业哈希算法，而不是简单的MD5。

CREATE TABLE `user_info` ( `user_id` BIGINT NOT NULL AUTO_INCREMENT, `username` VARCHAR(50) NOT NULL, `password_hash` VARCHAR(255) NOT NULL, `email` VARCHAR(100), `phone` VARCHAR(20), `register_time` DATETIME DEFAULT CURRENT_TIMESTAMP, `user_status` TINYINT DEFAULT 1, `role_level` TINYINT DEFAULT 1, PRIMARY KEY (`user_id`), UNIQUE KEY `idx_username` (`username`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

注意：密码字段一定要使用足够长度的VARCHAR，因为现代哈希算法产生的哈希值都比较长。utf8mb4字符集可以确保支持emoji等特殊字符。

2.2 垃圾分类表设计细节

垃圾分类表(garbage_category)的设计有几个亮点：

classify_type使用了预定义的枚举值（可回收、有害、厨余等）
handle_method和recycle_tip使用TEXT类型，因为这些描述文本可能很长
建立了适当的索引提高查询效率

public enum GarbageType { RECYCLABLE("可回收"), HAZARDOUS("有害"), KITCHEN("厨余"), OTHER("其他"); private String name; // 构造方法和getter省略 }

3. SpringBoot后端实现

3.1 分层架构设计

我们采用经典的三层架构：

Controller层：处理HTTP请求和响应
Service层：业务逻辑实现
DAO层：数据库操作

以回收订单服务为例，先定义Service接口：

public interface OrderService { Order createOrder(OrderDTO orderDTO); PageInfo<OrderVO> queryOrders(OrderQuery query, int pageNum, int pageSize); boolean updateOrderStatus(Long orderId, OrderStatus status); }

3.2 MyBatis动态SQL技巧

MyBatis的强大之处在于其动态SQL能力。比如在查询订单时，我们需要根据多种条件组合查询：

<select id="selectOrders" resultType="OrderVO"> SELECT * FROM recycle_order <where> <if test="userId != null"> AND user_id = #{userId} </if> <if test="status != null"> AND order_status = #{status} </if> <if test="startTime != null"> AND recycle_time >= #{startTime} </if> <if test="endTime != null"> AND recycle_time <= #{endTime} </if> </where> ORDER BY recycle_time DESC </select>

4. Vue3前端开发实践

4.1 组件化开发

我们使用Vue3的Composition API开发前端组件。比如垃圾分类查询组件：

<script setup> import { ref, computed } from 'vue' import { searchGarbage } from '@/api/garbage' const keyword = ref('') const results = ref([]) const search = async () => { try { const { data } = await searchGarbage(keyword.value) results.value = data } catch (error) { console.error('搜索失败:', error) } } </script>

4.2 状态管理

对于全局状态，我们使用Pinia代替Vuex：

// stores/order.js import { defineStore } from 'pinia' export const useOrderStore = defineStore('order', { state: () => ({ orders: [], loading: false }), actions: { async fetchOrders(userId) { this.loading = true try { const res = await getOrdersByUser(userId) this.orders = res.data } finally { this.loading = false } } } })

5. 系统安全与性能优化

5.1 安全措施

使用Spring Security实现认证和授权
所有API接口都添加了JWT验证
密码加密存储
XSS和CSRF防护
SQL注入预防（MyBatis已经通过预编译语句解决）

5.2 性能优化点

数据库查询优化：添加适当索引，避免全表扫描
使用Redis缓存热点数据，如垃圾分类信息
前端路由懒加载
启用Gzip压缩
图片等静态资源使用CDN加速

6. 开发中的经验总结

6.1 跨域问题解决方案

在前后端分离开发中，跨域是常见问题。我们的解决方案：

@Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") .allowedMethods("GET", "POST", "PUT", "DELETE") .allowedHeaders("*") .maxAge(3600); } }

提示：生产环境应该替换allowedOrigins("*")为具体的域名，安全性更高。

6.2 接口版本控制实践

随着系统迭代，接口可能需要变更。我们采用URL路径版本控制：

@RestController @RequestMapping("/api/v1/orders") public class OrderController { // v1版本的接口 } @RestController @RequestMapping("/api/v2/orders") public class OrderControllerV2 { // v2版本的接口 }

这种方案简单直观，方便客户端逐步升级。

7. 部署与运维

7.1 后端部署

我们使用Docker部署SpringBoot应用：

FROM openjdk:11-jre ARG JAR_FILE=target/*.jar COPY ${JAR_FILE} app.jar ENTRYPOINT ["java","-jar","/app.jar"]

然后通过docker-compose编排：

version: '3' services: app: build: . ports: - "8080:8080" environment: - SPRING_PROFILES_ACTIVE=prod depends_on: - mysql - redis

7.2 前端部署

Vue3应用构建后是纯静态文件，可以直接用Nginx部署：

server { listen 80; server_name yourdomain.com; location / { root /usr/share/nginx/html; try_files $uri $uri/ /index.html; } location /api { proxy_pass http://backend:8080; proxy_set_header Host $host; } }