基于Spring Boot + Vue 3的乡村振兴综合服务平台架构设计与实现

引言

随着乡村振兴战略的深入推进，数字化技术正成为推动农村发展的重要引擎。本文将详细介绍基于Spring Boot + Vue 3的乡村振兴综合服务平台的架构设计与实现方案，重点分析前后端分离架构、微服务设计模式以及关键模块的代码实现。

一、平台架构设计

1.1 整体架构

该平台采用前后端分离的B/S架构，具体包括：

前端：Vue 3 + TypeScript + Element Plus
后端：Spring Boot 2.7 + Spring Cloud Alibaba
数据库：MySQL 8.0 + Redis 6.2
部署：Docker + Kubernetes

1.2 微服务划分

平台核心服务包括：

用户认证服务（auth-service）
农产品管理服务（product-service）
乡村文旅服务（tourism-service）
政策信息服务（policy-service）
数据分析服务（analytics-service）

二、核心代码分析

2.1 用户认证服务实现

复制代码

@RestController
@RequestMapping("/api/auth")
public class AuthController {
    
    @Autowired
    private AuthService authService;
    
    @PostMapping("/login")
    public ResponseEntity<LoginResponse> login(@RequestBody LoginRequest request) {
        // 1. 参数校验
        if (StringUtils.isEmpty(request.getUsername()) || 
            StringUtils.isEmpty(request.getPassword())) {
            throw new BusinessException("用户名或密码不能为空");
        }
        
        // 2. 调用认证服务
        LoginResponse response = authService.authenticate(
            request.getUsername(), 
            request.getPassword()
        );
        
        // 3. 返回JWT令牌
        return ResponseEntity.ok(response);
    }
}
@Service
public class AuthServiceImpl implements AuthService {
    
    @Autowired
    private UserMapper userMapper;
    
    @Autowired
    private JwtTokenUtil jwtTokenUtil;
    
    @Override
    public LoginResponse authenticate(String username, String password) {
        // 1. 查询用户
        User user = userMapper.findByUsername(username);
        if (user == null) {
            throw new BusinessException("用户不存在");
        }
        
        // 2. 密码校验
        if (!passwordEncoder.matches(password, user.getPassword())) {
            throw new BusinessException("密码错误");
        }
        
        // 3. 生成JWT令牌
        String token = jwtTokenUtil.generateToken(user);
        
        // 4. 构建响应
        return LoginResponse.builder()
            .token(token)
            .userId(user.getId())
            .username(user.getUsername())
            .roles(user.getRoles())
            .build();
    }
}

代码分析：

分层设计：Controller层负责请求处理，Service层实现业务逻辑，Mapper层负责数据访问
安全机制：采用JWT令牌认证，实现无状态认证
异常处理：统一异常处理机制，返回标准错误响应
密码安全：使用BCrypt加密存储密码

2.2 Vue 3前端组件实现

复制代码

<template>
  <div class="product-list">
    <el-table :data="products" style="width: 100%">
      <el-table-column prop="name" label="产品名称" />
      <el-table-column prop="category" label="分类" />
      <el-table-column prop="price" label="价格" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button 
            size="small" 
            @click="handleEdit(scope.row)"
          >
            编辑
          </el-button>
          <el-button 
            size="small" 
            type="danger" 
            @click="handleDelete(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :total="total"
      @current-change="handlePageChange"
    />
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getProductList, deleteProduct } from '@/api/product'
interface Product {
  id: number
  name: string
  category: string
  price: number
}
const products = ref<Product[]>([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const fetchProducts = async () => {
  try {
    const response = await getProductList({
      page: currentPage.value,
      size: pageSize.value
    })
    products.value = response.data.list
    total.value = response.data.total
  } catch (error) {
    ElMessage.error('获取产品列表失败')
  }
}
const handleEdit = (row: Product) => {
  // 编辑逻辑
}
const handleDelete = async (row: Product) => {
  try {
    await deleteProduct(row.id)
    ElMessage.success('删除成功')
    fetchProducts()
  } catch (error) {
    ElMessage.error('删除失败')
  }
}
onMounted(() => {
  fetchProducts()
})
</script>

代码分析：

组合式API：使用Vue 3的setup语法糖，代码更简洁
TypeScript支持：定义Product接口，提供类型安全
响应式数据：使用ref创建响应式变量
生命周期钩子：onMounted中初始化数据
错误处理：统一的错误提示机制

三、应用场景

农产品电商：帮助农民在线销售农产品
乡村旅游推广：展示乡村特色旅游资源
政策信息发布：及时传达惠农政策
农业数据分析：提供生产数据可视化

四、未来发展趋势

智能化升级：集成AI技术实现智能推荐
物联网融合：接入农业物联网设备数据
区块链应用：农产品溯源体系建设
5G应用：远程农业技术指导