现代化 Java Web 在线商城项目技术方案与实战开发指南

现代化Java Web在线商城项目技术方案与实战

一、技术选型与架构设计

1.1 最新技术栈

后端：Spring Boot 3.0 + Spring Security 6.0 + Spring Data JPA + Hibernate
前端：Vue.js 3 + TypeScript + Vite + Element Plus
数据库：MySQL 8.0 + Redis 7.0
容器化：Docker + Kubernetes
微服务：Spring Cloud Gateway + Spring Cloud Netflix Eureka
CI/CD：Jenkins + GitHub Actions

1.2 架构设计

采用前后端分离的微服务架构：

API网关：统一入口，处理路由、认证、限流
服务注册与发现：使用Eureka实现微服务的自动注册与发现
配置中心：集中管理应用配置
服务间通信：使用RESTful API或Spring Cloud Stream
前端：SPA应用，通过API与后端交互

二、核心功能实现

2.1 用户认证与授权

使用Spring Security + JWT实现安全认证：

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {@Autowiredprivate JwtAuthenticationEntryPoint jwtAuthenticationEntryPoint;@Autowiredprivate JwtRequestFilter jwtRequestFilter;@Overrideprotected void configure(HttpSecurity http) throws Exception {http.csrf().disable().authorizeRequests().antMatchers("/api/auth/**").permitAll().anyRequest().authenticated().and().exceptionHandling().authenticationEntryPoint(jwtAuthenticationEntryPoint).and().sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS);http.addFilterBefore(jwtRequestFilter, UsernamePasswordAuthenticationFilter.class);}
}

2.2 商品服务实现

使用Spring Data JPA实现商品CRUD：

public interface ProductRepository extends JpaRepository<Product, Long> {List<Product> findByCategory(String category);List<Product> findByNameContaining(String keyword);
}@Service
@Transactional
public class ProductServiceImpl implements ProductService {private final ProductRepository productRepository;@Overridepublic List<Product> getAllProducts() {return productRepository.findAll();}@Overridepublic Product getProductById(Long id) {return productRepository.findById(id).orElseThrow(() -> new EntityNotFoundException("Product not found"));}@Overridepublic Product saveProduct(Product product) {return productRepository.save(product);}
}

2.3 购物车服务实现

使用Redis实现分布式购物车：

@Service
public class CartService {private static final String CART_KEY_PREFIX = "cart:";@Autowiredprivate RedisTemplate<String, Object> redisTemplate;public void addToCart(String userId, CartItem item) {String key = CART_KEY_PREFIX + userId;HashOperations<String, String, CartItem> hashOps = redisTemplate.opsForHash();if (hashOps.hasKey(key, item.getProductId().toString())) {CartItem existingItem = hashOps.get(key, item.getProductId().toString());existingItem.setQuantity(existingItem.getQuantity() + item.getQuantity());hashOps.put(key, item.getProductId().toString(), existingItem);} else {hashOps.put(key, item.getProductId().toString(), item);}}public List<CartItem> getCartItems(String userId) {String key = CART_KEY_PREFIX + userId;HashOperations<String, String, CartItem> hashOps = redisTemplate.opsForHash();return new ArrayList<>(hashOps.values(key));}
}

三、前端实现示例

3.1 使用Vue 3 + TypeScript构建商品列表组件

<template><div class="product-list"><el-card v-for="product in products" :key="product.id" class="product-card"><template #header><div class="card-header">{{ product.name }}</div></template><img :src="product.imageUrl" alt="Product Image" class="product-image"><div class="product-info"><p>Price: ¥{{ product.price }}</p><p>Stock: {{ product.stock }}</p><el-button @click="addToCart(product.id)">Add to Cart</el-button></div></el-card></div>
</template><script lang="ts" setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';interface Product {id: number;name: string;price: number;stock: number;imageUrl: string;
}const products = ref<Product[]>([]);const fetchProducts = async () => {try {const response = await axios.get('/api/products');products.value = response.data;} catch (error) {console.error('Failed to fetch products:', error);}
};const addToCart = (productId: number) => {axios.post('/api/cart/add', { productId, quantity: 1 }).then(() => {ElMessage.success('Added to cart successfully');}).catch(error => {ElMessage.error('Failed to add to cart');console.error(error);});
};onMounted(fetchProducts);
</script>

3.2 状态管理集成Pinia

import { defineStore } from 'pinia';
import axios from 'axios';export const useCartStore = defineStore({id: 'cart',state: () => ({cartItems: [] as CartItem[],loading: false,error: null as string | null}),getters: {totalItems: (state) => state.cartItems.reduce((total, item) => total + item.quantity, 0),totalPrice: (state) => state.cartItems.reduce((total, item) => total + (item.price * item.quantity), 0)},actions: {async fetchCartItems() {this.loading = true;try {const response = await axios.get('/api/cart');this.cartItems = response.data;} catch (error) {this.error = error.message;} finally {this.loading = false;}},async addToCart(productId: number, quantity: number = 1) {try {await axios.post('/api/cart/add', { productId, quantity });await this.fetchCartItems();} catch (error) {this.error = error.message;}}}
});

四、微服务部署与容器化

4.1 Docker化应用

创建Dockerfile：

# 使用官方OpenJDK基础镜像
FROM openjdk:17-jdk-slim# 设置工作目录
WORKDIR /app# 复制Maven构建产物
COPY target/online-store.jar /app/online-store.jar# 暴露应用端口
EXPOSE 8080# 启动应用
CMD ["java", "-jar", "online-store.jar"]

4.2 Kubernetes部署配置

创建Deployment和Service配置：

apiVersion: apps/v1
kind: Deployment
metadata:name: product-servicelabels:app: product-service
spec:replicas: 3selector:matchLabels:app: product-servicetemplate:metadata:labels:app: product-servicespec:containers:- name: product-serviceimage: your-registry/product-service:1.0.0ports:- containerPort: 8080env:- name: SPRING_DATASOURCE_URLvalue: jdbc:mysql://mysql-service:3306/online_store- name: SPRING_DATASOURCE_USERNAMEvalueFrom:secretKeyRef:name: db-secretkey: username- name: SPRING_DATASOURCE_PASSWORDvalueFrom:secretKeyRef:name: db-secretkey: password---
apiVersion: v1
kind: Service
metadata:name: product-service
spec:selector:app: product-serviceports:- protocol: TCPport: 80targetPort: 8080type: LoadBalancer

五、CI/CD流水线配置

5.1 GitHub Actions配置

创建工作流配置文件：

name: Build and Deployon:push:branches: [ main ]jobs:build:runs-on: ubuntu-lateststeps:- uses: actions/checkout@v3- name: Set up JDK 17uses: actions/setup-java@v3with:java-version: '17'distribution: 'temurin'cache: maven- name: Build with Mavenrun: mvn clean package -DskipTests- name: Build and push Docker imageuses: docker/build-push-action@v4with:context: .push: truetags: your-registry/online-store:${{ github.sha }}deploy:needs: buildruns-on: ubuntu-lateststeps:- name: Deploy to Kubernetesuses: steebchen/kubectl@v2.0.0with:config: ${{ secrets.KUBE_CONFIG }}command: |kubectl set image deployment/online-store online-store=your-registry/online-store:${{ github.sha }}