当前位置：首页 > news >正文

Spring Boot + Vue 实现一个在线商城（商品展示、购物车、订单）！从零到一完整项目

news 2025/11/17 10:46:39

上周，实习生小周问我：

“马哥，我想做一个完整的电商项目练手，但网上教程要么太简单（只有后端），要么太复杂（直接上微服务）。有没有一个前后端分离、功能完整的商城 demo，从商品展示到购物车到订单都讲一遍？”

我笑了：“电商项目，核心就三点：商品、购物车、订单。今天我就带你用 Spring Boot + Vue，一步步搭建一个能跑的商城！”

✅ 后端：Spring Boot + MyBatis + MySQL + Redis
✅ 前端：Vue 3 + Element Plus + Axios
✅ 功能：商品列表 → 加入购物车 → 生成订单

🛠️ 一、准备工作（只需 3 分钟）

你需要：

JDK 17
Node.js 18+（用于 Vue）
MySQL 8.0
IDEA + VS Code（或 WebStorm）
Redis（用于购物车缓存）

💻 二、后端项目搭建（Spring Boot 部分）

步骤 1：创建 Spring Boot 项目（pom.xml）

<dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId><version>3.0.2</version></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId></dependency><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><scope>runtime</scope></dependency><dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-databind</artifactId></dependency>
</dependencies>

步骤 2：配置文件（application.yml）

spring:datasource:url: jdbc:mysql://localhost:3306/mall?useSSL=false&serverTimezone=Asia/Shanghai&allowPublicKeyRetrieval=trueusername: rootpassword: 123456driver-class-name: com.mysql.cj.jdbc.Driverredis:host: localhostport: 6379database: 1timeout: 2000mslettuce:pool:max-active: 8max-idle: 8min-idle: 0mybatis:mapper-locations: classpath:mapper/*.xmltype-aliases-package: com.example.mall.entityconfiguration:map-underscore-to-camel-case: truelog-impl: org.apache.ibatis.logging.stdout.StdOutImpl# 跨域配置（开发用）
server:port: 8080

步骤 3：创建数据库表（SQL）

-- 创建数据库
CREATE DATABASE mall CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;USE mall;-- 商品表
CREATE TABLE product (id BIGINT AUTO_INCREMENT PRIMARY KEY,name VARCHAR(100) NOT NULL,price DECIMAL(10,2) NOT NULL,description TEXT,image_url VARCHAR(255),stock INT NOT NULL DEFAULT 0
);-- 订单表
CREATE TABLE `order` (id BIGINT AUTO_INCREMENT PRIMARY KEY,user_id BIGINT NOT NULL,total_amount DECIMAL(10,2) NOT NULL,status VARCHAR(20) NOT NULL DEFAULT 'PENDING',created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);-- 订单项表
CREATE TABLE order_item (id BIGINT AUTO_INCREMENT PRIMARY KEY,order_id BIGINT NOT NULL,product_id BIGINT NOT NULL,quantity INT NOT NULL,price DECIMAL(10,2) NOT NULL
);-- 插入测试数据
INSERT INTO product (name, price, description, image_url, stock) VALUES
('iPhone 15', 5999.00, '最新款苹果手机', 'https://example.com/iphone15.jpg', 100),
('MacBook Pro', 12999.00, '专业笔记本电脑', 'https://example.com/macbook.jpg', 50),
('AirPods Pro', 1999.00, '无线降噪耳机', 'https://example.com/airpods.jpg', 200);

步骤 4：创建实体类（entity/）

// Product.java
package com.example.mall.entity;public class Product {private Long id;private String name;private Double price;private String description;private String imageUrl;private Integer stock;// getter/setter...public Long getId() { return id; }public void setId(Long id) { this.id = id; }public String getName() { return name; }public void setName(String name) { this.name = name; }public Double getPrice() { return price; }public void setPrice(Double price) { this.price = price; }public String getDescription() { return description; }public void setDescription(String description) { this.description = description; }public String getImageUrl() { return imageUrl; }public void setImageUrl(String imageUrl) { this.imageUrl = imageUrl; }public Integer getStock() { return stock; }public void setStock(Integer stock) { this.stock = stock; }
}// Order.java
package com.example.mall.entity;import java.util.Date;
import java.util.List;public class Order {private Long id;private Long userId;private Double totalAmount;private String status;private Date createdAt;private List<OrderItem> items; // 关联订单项// getter/setter...public Long getId() { return id; }public void setId(Long id) { this.id = id; }public Long getUserId() { return userId; }public void setUserId(Long userId) { this.userId = userId; }public Double getTotalAmount() { return totalAmount; }public void setTotalAmount(Double totalAmount) { this.totalAmount = totalAmount; }public String getStatus() { return status; }public void setStatus(String status) { this.status = status; }public Date getCreatedAt() { return createdAt; }public void setCreatedAt(Date createdAt) { this.createdAt = createdAt; }public List<OrderItem> getItems() { return items; }public void setItems(List<OrderItem> items) { this.items = items; }
}// OrderItem.java
package com.example.mall.entity;public class OrderItem {private Long id;private Long orderId;private Long productId;private Integer quantity;private Double price;// getter/setter...public Long getId() { return id; }public void setId(Long id) { this.id = id; }public Long getOrderId() { return orderId; }public void setOrderId(Long orderId) { this.orderId = orderId; }public Long getProductId() { return productId; }public void setProductId(Long productId) { this.productId = productId; }public Integer getQuantity() { return quantity; }public void setQuantity(Integer quantity) { this.quantity = quantity; }public Double getPrice() { return price; }public void setPrice(Double price) { this.price = price; }
}

步骤 5：创建 Mapper 接口和 XML

// ProductMapper.java
package com.example.mall.mapper;import com.example.mall.entity.Product;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;import java.util.List;@Mapper
public interface ProductMapper {List<Product> findAll();Product findById(@Param("id") Long id);void updateStock(@Param("id") Long id, @Param("quantity") Integer quantity);
}

<!-- resources/mapper/ProductMapper.xml -->
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"><mapper namespace="com.example.mall.mapper.ProductMapper"><resultMap id="ProductResultMap" type="Product"><id property="id" column="id"/><result property="name" column="name"/><result property="price" column="price"/><result property="description" column="description"/><result property="imageUrl" column="image_url"/><result property="stock" column="stock"/></resultMap><select id="findAll" resultMap="ProductResultMap">SELECT id, name, price, description, image_url, stock FROM product</select><select id="findById" parameterType="java.lang.Long" resultMap="ProductResultMap">SELECT id, name, price, description, image_url, stock FROM product WHERE id = #{id}</select><update id="updateStock" parameterType="map">UPDATE product SET stock = stock - #{quantity} WHERE id = #{id} AND stock >= #{quantity}</update>
</mapper>

步骤 6：创建购物车服务（Redis 缓存）

// CartService.java
package com.example.mall.service;import com.example.mall.entity.Product;
import com.example.mall.mapper.ProductMapper;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.data.redis.core.ValueOperations;
import org.springframework.stereotype.Service;import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.concurrent.TimeUnit;@Service
public class CartService {@Autowiredprivate RedisTemplate<String, Object> redisTemplate;@Autowiredprivate ProductMapper productMapper;@Autowiredprivate ObjectMapper objectMapper;/*** 添加商品到购物车*/public void addToCart(Long userId, Long productId, Integer quantity) {String key = "cart:" + userId;// 获取当前购物车ValueOperations<String, Object> ops = redisTemplate.opsForValue();Object cartObj = ops.get(key);Map<Long, Integer> cart = new HashMap<>();if (cartObj != null) {cart = (Map<Long, Integer>) cartObj;}// 添加或更新商品数量cart.put(productId, cart.getOrDefault(productId, 0) + quantity);// 保存到 Redis，30分钟过期ops.set(key, cart, 30, TimeUnit.MINUTES);}/*** 获取购物车商品列表*/public List<Map<String, Object>> getCartItems(Long userId) {String key = "cart:" + userId;ValueOperations<String, Object> ops = redisTemplate.opsForValue();Object cartObj = ops.get(key);if (cartObj == null) {return new ArrayList<>();}@SuppressWarnings("unchecked")Map<Long, Integer> cart = (Map<Long, Integer>) cartObj;List<Map<String, Object>> items = new ArrayList<>();for (Map.Entry<Long, Integer> entry : cart.entrySet()) {Long productId = entry.getKey();Integer quantity = entry.getValue();Product product = productMapper.findById(productId);if (product != null) {Map<String, Object> item = new HashMap<>();item.put("product", product);item.put("quantity", quantity);item.put("totalPrice", product.getPrice() * quantity);items.add(item);}}return items;}/*** 清空购物车*/public void clearCart(Long userId) {String key = "cart:" + userId;redisTemplate.delete(key);}
}

步骤 7：创建订单服务

// OrderService.java
package com.example.mall.service;import com.example.mall.entity.*;
import com.example.mall.mapper.ProductMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;import java.util.Date;
import java.util.List;
import java.util.Map;@Service
public class OrderService {@Autowiredprivate CartService cartService;@Autowiredprivate ProductMapper productMapper;@Autowiredprivate OrderMapper orderMapper;@Transactionalpublic Long createOrder(Long userId) {// 获取购物车商品List<Map<String, Object>> cartItems = cartService.getCartItems(userId);if (cartItems.isEmpty()) {throw new RuntimeException("购物车为空");}// 计算总金额Double totalAmount = 0.0;for (Map<String, Object> item : cartItems) {totalAmount += (Double) item.get("totalPrice");}// 创建订单Order order = new Order();order.setUserId(userId);order.setTotalAmount(totalAmount);order.setStatus("PENDING");order.setCreatedAt(new Date());orderMapper.insert(order);// 创建订单项并扣减库存for (Map<String, Object> item : cartItems) {Product product = (Product) item.get("product");Integer quantity = (Integer) item.get("quantity");OrderItem orderItem = new OrderItem();orderItem.setOrderId(order.getId());orderItem.setProductId(product.getId());orderItem.setQuantity(quantity);orderItem.setPrice(product.getPrice());orderMapper.insertOrderItem(orderItem);// 扣减库存productMapper.updateStock(product.getId(), quantity);}// 清空购物车cartService.clearCart(userId);return order.getId();}
}

步骤 8：创建控制器

// ProductController.java
package com.example.mall.controller;import com.example.mall.entity.Product;
import com.example.mall.mapper.ProductMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;import java.util.List;@RestController
@RequestMapping("/api/products")
@CrossOrigin(origins = "*") // 开发用
public class ProductController {@Autowiredprivate ProductMapper productMapper;@GetMappingpublic List<Product> getProducts() {return productMapper.findAll();}@GetMapping("/{id}")public Product getProduct(@PathVariable Long id) {return productMapper.findById(id);}
}// CartController.java
package com.example.mall.controller;import com.example.mall.service.CartService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;import java.util.List;
import java.util.Map;@RestController
@RequestMapping("/api/cart")
@CrossOrigin(origins = "*")
public class CartController {@Autowiredprivate CartService cartService;@PostMapping("/add")public String addToCart(@RequestParam Long userId, @RequestParam Long productId, @RequestParam Integer quantity) {cartService.addToCart(userId, productId, quantity);return "OK";}@GetMapping("/{userId}")public List<Map<String, Object>> getCart(@PathVariable Long userId) {return cartService.getCartItems(userId);}@DeleteMapping("/clear/{userId}")public String clearCart(@PathVariable Long userId) {cartService.clearCart(userId);return "OK";}
}// OrderController.java
package com.example.mall.controller;import com.example.mall.service.OrderService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;@RestController
@RequestMapping("/api/orders")
@CrossOrigin(origins = "*")
public class OrderController {@Autowiredprivate OrderService orderService;@PostMapping("/create")public String createOrder(@RequestParam Long userId) {Long orderId = orderService.createOrder(userId);return "订单创建成功，ID: " + orderId;}
}

🌐 三、前端项目搭建（Vue 3 部分）

步骤 1：创建 Vue 项目

npm create vue@latest mall-frontend
cd mall-frontend
npm install
npm install axios element-plus

步骤 2：创建前端页面（App.vue）

<template><div id="app"><el-container><el-header><h1>在线商城</h1><div class="cart-info"><el-button type="primary" @click="showCart = true">购物车 ({{ cartItems.length }})</el-button></div></el-header><el-main><!-- 商品列表 --><el-row :gutter="20"><el-col :span="6" v-for="product in products" :key="product.id"><el-card class="product-card"><img :src="product.imageUrl" class="product-image" /><div class="product-info"><h3>{{ product.name }}</h3><p class="price">¥{{ product.price }}</p><p class="stock">库存: {{ product.stock }}</p><el-button type="primary" @click="addToCart(product.id, 1)":disabled="product.stock <= 0">加入购物车</el-button></div></el-card></el-col></el-row></el-main></el-container><!-- 购物车弹窗 --><el-drawer v-model="showCart" title="购物车" size="40%"><div v-if="cartItems.length === 0"><p>购物车是空的</p></div><div v-else><div v-for="item in cartItems" :key="item.product.id" class="cart-item"><img :src="item.product.imageUrl" class="cart-image" /><div class="cart-details"><h4>{{ item.product.name }}</h4><p>数量: {{ item.quantity }}</p><p>小计: ¥{{ item.totalPrice }}</p></div></div><div class="cart-total"><h3>总计: ¥{{ cartTotal }}</h3><el-button type="success" @click="createOrder" :disabled="cartItems.length === 0">生成订单</el-button></div></div></el-drawer></div>
</template><script>
import axios from 'axios'export default {name: 'App',data() {return {products: [],cartItems: [],showCart: false,userId: 1 // 模拟用户ID}},computed: {cartTotal() {return this.cartItems.reduce((total, item) => total + item.totalPrice, 0).toFixed(2)}},mounted() {this.loadProducts()this.loadCart()},methods: {async loadProducts() {try {const response = await axios.get('http://localhost:8080/api/products')this.products = response.data} catch (error) {console.error('加载商品失败:', error)}},async loadCart() {try {const response = await axios.get(`http://localhost:8080/api/cart/${this.userId}`)this.cartItems = response.data} catch (error) {console.error('加载购物车失败:', error)}},async addToCart(productId, quantity) {try {await axios.post('http://localhost:8080/api/cart/add', null, {params: { userId: this.userId, productId, quantity }})this.$message.success('已加入购物车')this.loadCart() // 刷新购物车} catch (error) {console.error('添加购物车失败:', error)this.$message.error('添加失败')}},async createOrder() {try {const response = await axios.post('http://localhost:8080/api/orders/create', null, {params: { userId: this.userId }})this.$message.success(response.data)this.showCart = falsethis.loadCart() // 清空购物车} catch (error) {console.error('创建订单失败:', error)this.$message.error('创建订单失败')}}}
}
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}.el-header {background-color: #409EFF;color: white;display: flex;justify-content: space-between;align-items: center;
}.product-card {margin-bottom: 20px;
}.product-image {width: 100%;height: 200px;object-fit: cover;
}.product-info {padding: 10px 0;
}.price {color: #e74c3c;font-size: 18px;font-weight: bold;
}.stock {color: #999;
}.cart-image {width: 60px;height: 60px;object-fit: cover;margin-right: 10px;
}.cart-item {display: flex;align-items: center;padding: 10px 0;border-bottom: 1px solid #eee;
}.cart-total {position: fixed;bottom: 0;left: 0;right: 0;padding: 20px;background: white;border-top: 1px solid #eee;text-align: right;
}
</style>