垃圾分类管理系统 Spring Boot Vue 3 微服务全栈开发实操指南

# 创建Maven多模块项目
mvn archetype:generate -DgroupId=com.example -DartifactId=garbage-classification -DarchetypeArtifactId=maven-archetype-quickstart -DinteractiveMode=false

# 添加核心依赖（pom.xml）
<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>com.baomidou</groupId>
        <artifactId>mybatis-plus-boot-starter</artifactId>
        <version>3.5.3.1</version>
    </dependency>
    <dependency>
        <groupId>com.alibaba.cloud</groupId>
        <artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId>
    </dependency>
    <!-- 其他依赖... -->
</dependencies>

# 创建Vue 3项目
npm init vite@latest garbage-classification-frontend -- --template vue-ts

# 安装依赖
cd garbage-classification-frontend
npm install element-plus @element-plus/icons-vue leaflet pinia axios

CREATE TABLE `garbage_category` (
  `id` bigint NOT NULL AUTO_INCREMENT COMMENT '分类ID',
  `name` varchar(50) NOT NULL COMMENT '分类名称(可回收物/有害垃圾/厨余垃圾/其他垃圾)',
  `description` varchar(255) DEFAULT NULL COMMENT '分类描述',
  `icon` varchar(255) DEFAULT NULL COMMENT '分类图标URL',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='垃圾分类基础表';

CREATE TABLE `garbage_detail` (
  `id` bigint NOT NULL AUTO_INCREMENT COMMENT '垃圾ID',
  `name` varchar(100) NOT NULL COMMENT '垃圾名称',
  `category_id` bigint NOT NULL COMMENT '所属分类ID',
  `alias` varchar(255) DEFAULT NULL COMMENT '别名(逗号分隔)',
  `description` text COMMENT '详细描述',
  `image_url` varchar(255) DEFAULT NULL COMMENT '图片URL',
  `create_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  PRIMARY KEY (`id`),
  KEY `idx_category_id` (`category_id`),
  FULLTEXT KEY `idx_name_alias` (`name`,`alias`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='垃圾明细信息表';

CREATE TABLE `user` (
  `id` bigint NOT NULL AUTO_INCREMENT COMMENT '用户ID',
  `username` varchar(50) NOT NULL COMMENT '用户名',
  `password` varchar(100) NOT NULL COMMENT '加密密码',
  `phone` varchar(20) DEFAULT NULL COMMENT '手机号',
  `role` tinyint NOT NULL DEFAULT '1' COMMENT '角色(1-普通用户,2-管理员)',
  `points` int DEFAULT '0' COMMENT '积分',
  `create_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '注册时间',
  PRIMARY KEY (`id`),
  UNIQUE KEY `idx_username` (`username`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='用户信息表';

// 后端Service层实现
@Service
public class GarbageService {

    @Autowired
    private GarbageDetailMapper garbageDetailMapper;
    
    @Autowired
    private RestTemplate restTemplate; // 调用AI分类服务
    
    // 基于名称查询垃圾分类
    public List<GarbageDetail> searchGarbage(String keyword) {
        // 先查缓存
        List<GarbageDetail> result = redisTemplate.opsForList()
            .range("garbage:search:" + keyword, 0, -1);
            
        if (CollectionUtils.isEmpty(result)) {
            // 缓存未命中，查数据库
            QueryWrapper<GarbageDetail> wrapper = new QueryWrapper<>();
            wrapper.like("name", keyword).or().like("alias", keyword);
            result = garbageDetailMapper.selectList(wrapper);
            
            // 放入缓存(有效期1小时)
            if (!CollectionUtils.isEmpty(result)) {
                redisTemplate.opsForList().rightPushAll(
                    "garbage:search:" + keyword, result);
                redisTemplate.expire("garbage:search:" + keyword, 1, TimeUnit.HOURS);
            }
        }
        return result;
    }
    
    // 调用AI识别服务(部署在另一个微服务)
    public String classifyByImage(MultipartFile image) {
        String aiServiceUrl = "http://ai-service/classify";
        HttpHeaders headers = new HttpHeaders();
        headers.setContentType(MediaType.MULTIPART_FORM_DATA);
        
        MultiValueMap<String, Object> body = new LinkedMultiValueMap<>();
        body.add("image", new FileSystemResource(convertToFile(image)));
        
        HttpEntity<MultiValueMap<String, Object>> requestEntity = 
            new HttpEntity<>(body, headers);
            
        ResponseEntity<String> response = restTemplate.postForEntity(
            aiServiceUrl, requestEntity, String.class);
            
        return response.getBody();
    }
}

<!-- src/components/GarbageSearch.vue -->
<template>
  <div class="search-container">
    <el-input 
      v-model="keyword" 
      placeholder="输入垃圾名称查询分类" 
      suffix-icon="Search"
      @keyup.enter="handleSearch">
      <template #append>
        <el-button @click="handleSearch">搜索</el-button>
      </template>
    </el-input>
    
    <!-- 搜索结果 -->
    <div v-if="searchResults.length > 0" class="result-list">
      <el-card 
        v-for="item in searchResults" 
        :key="item.id" 
        :class="getCategoryClass(item.categoryId)">
        <template #header>
          <div class="card-header">
            <span>{{ item.name }}</span>
            <el-tag :type="getCategoryType(item.categoryId)">{{ getCategoryName(item.categoryId) }}</el-tag>
          </div>
        </template>
        <div>{{ item.description || '暂无详细描述' }}</div>
        <img v-if="item.imageUrl" :src="item.imageUrl" alt="垃圾图片" class="result-image">
      </el-card>
    </div>
    
    <!-- 未找到结果 -->
    <el-empty v-else description="未找到相关垃圾信息"></el-empty>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { useGarbageStore } from '@/stores/garbage';

const keyword = ref('');
const searchResults = ref([]);
const garbageStore = useGarbageStore();

const handleSearch = async () => {
  if (!keyword.value.trim()) {
    ElMessage.warning('请输入垃圾名称');
    return;
  }
  
  try {
    // 调用API搜索
    searchResults.value = await garbageStore.searchGarbage(keyword.value);
    
    if (searchResults.value.length === 0) {
      // 提示用户可提交新垃圾
      ElMessage.info('未找到该垃圾信息，您可以提交分类建议');
    }
  } catch (error) {
    ElMessage.error('搜索失败，请稍后再试');
    console.error(error);
  }
};
</script>

# 使用TensorFlow Serving部署垃圾分类模型
docker run -t --rm -p 8501:8501 \
  -v "$PWD/garbage_model:/models/garbage_model" \
  -e MODEL_NAME=garbage_model \
  tensorflow/serving

# 模型API调用示例
curl -d '{"instances": [{"image_bytes": {"b64": "<BASE64_IMAGE>"}}]}' \
  -X POST http://localhost:8501/v1/models/garbage_model:predict

// AI服务接口
@FeignClient(name = "ai-service", url = "${ai.service.url}")
public interface AIServiceClient {
    @PostMapping(value = "/classify", consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
    String classify(@RequestPart("image") MultipartFile image);
}

// pages/scan/scan.js
Page({
  data: {
    result: '',
    loading: false
  },
  
  chooseImage() {
    wx.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success: (res) => {
        this.setData({ loading: true });
        this.uploadImage(res.tempFilePaths[0]);
      }
    });
  },
  
  uploadImage(filePath) {
    wx.uploadFile({
      url: 'https://api.example.com/ai/classify',
      filePath: filePath,
      name: 'image',
      success: (res) => {
        const result = JSON.parse(res.data);
        this.setData({ result: result.category, loading: false });
      },
      fail: () => {
        this.setData({ loading: false });
        wx.showToast({ title: '识别失败', icon: 'none' });
      }
    });
  }
});

# 基础镜像
FROM openjdk:17-jdk-slim

# 设置工作目录
WORKDIR /app

# 复制依赖和打包文件
COPY target/garbage-classification-service.jar /app/

# 暴露端口
EXPOSE 8080

# 启动应用
CMD ["java", "-jar", "garbage-classification-service.jar"]

# deployment.yaml
apiVersion: apps/v1
kind: Deployment
metadata:
  name: garbage-backend
spec:
  replicas: 3
  selector:
    matchLabels:
      app: garbage-backend
  template:
    metadata:
      labels:
        app: garbage-backend
    spec:
      containers:
      - name: backend
        image: registry.example.com/garbage-backend:v1.0.0
        ports:
        - containerPort: 8080
        env:
        - name: SPRING_DATASOURCE_URL
          valueFrom:
            secretKeyRef:
              name: db-secret
              key: url