Web 虚拟卡销售平台架构与实现详解

前端环境

管理端和用户端分开构建，便于维护。命令如下：

# 管理端前端
vue create admin-frontend
cd admin-frontend
vue add element-ui
npm install axios vue-router vuex --save

# 用户端前端
vue create user-frontend
cd user-frontend
npm install vant axios vue-router vuex --save

开发环境建议配置 JDK 1.8+、Maven 3.6+、Node.js 14+、MySQL 5.7+ 以及 Redis 5.0+。

数据库设计

核心表结构

数据库设计围绕用户、商品、库存、订单和支付记录展开。以下是关键表的 DDL 定义，注意字段注释和索引的合理性。

用户表

CREATE TABLE `user` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT,
  `username` varchar(50) NOT NULL COMMENT '用户名',
  `password` varchar(100) NOT NULL COMMENT '密码',
  `email` varchar(100) DEFAULT NULL COMMENT '邮箱',
  `phone` varchar(20) DEFAULT NULL COMMENT '手机号',
  `avatar` varchar(255) DEFAULT NULL COMMENT '头像',
  `status` tinyint(1) DEFAULT '1' COMMENT '状态：0-禁用，1-正常',
  `create_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  `update_time` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
  PRIMARY KEY (`id`),
  UNIQUE KEY `idx_username` (`username`),
  KEY `idx_phone` (`phone`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='用户表';

虚拟卡产品表

CREATE TABLE `card_product` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT,
  `name` varchar(100) NOT NULL COMMENT '产品名称',
  `category_id` bigint(20) NOT NULL COMMENT '分类 ID',
  `description` text COMMENT '产品描述',
  `price` decimal(10,2) NOT NULL COMMENT '售价',
  `original_price` decimal(10,2) DEFAULT NULL COMMENT '原价',
  `stock` int(11) NOT NULL DEFAULT '0' COMMENT '库存',
  `image_url` varchar(255) DEFAULT NULL COMMENT '图片 URL',
  `detail_images` text COMMENT '详情图片，JSON 数组',
  `status` tinyint(1) DEFAULT '1' COMMENT '状态：0-下架，1-上架',
  `sort_order` int(11) DEFAULT '0' COMMENT '排序权重',
  `create_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  `update_time` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
  PRIMARY KEY (`id`),
  KEY `idx_category` (`category_id`),
  KEY `idx_status` (`status`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='虚拟卡产品表';

卡密库存表

这是核心表，用于存储具体的卡号和密码，支持锁定机制。

CREATE TABLE `card_secret` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT,
  `product_id` bigint(20) NOT NULL COMMENT '产品 ID',
  `card_no` varchar(100) NOT NULL COMMENT '卡号',
  `card_password` varchar(100) NOT NULL COMMENT '卡密',
  `status` tinyint(1) DEFAULT '0' COMMENT '状态：0-未售出，1-已售出，2-已锁定',
  `order_id` bigint(20) DEFAULT NULL COMMENT '订单 ID',
  `create_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  `update_time` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
  PRIMARY KEY (`id`),
  UNIQUE KEY `idx_card_no` (`card_no`),
  KEY `idx_product_id` (`product_id`),
  KEY `idx_status` (`status`),
  KEY `idx_order_id` (`order_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='卡密库存表';

其他关键表包括订单表 order、订单明细表 order_item、支付记录表 payment、管理员表 admin 以及系统日志表 sys_log，均遵循类似的设计规范。

后端实现

项目结构

Spring Boot 项目采用分层架构，清晰划分职责：

src/main/java/com/virtualcard/
├── config/          # 配置类 (Security, Swagger, Redis)
├── constant/        # 常量定义 (状态码、类型枚举)
├── controller/      # 控制器 (API 接口)
│   ├── api/         # 用户接口
│   └── admin/       # 管理接口
├── dao/             # 数据访问层 (Entity, Mapper)
├── dto/             # 数据传输对象
├── exception/       # 异常处理
├── service/         # 业务逻辑层
├── util/            # 工具类 (JWT, Redis, SnowFlake, WeChatPay)
└── VirtualCardApplication.java

核心功能实现

1. 用户认证与授权

安全性是电商系统的底线。我们使用 Spring Security 配合 JWT 实现无状态认证。

@Configuration
@EnableWebSecurity
@EnableGlobalMethodSecurity(prePostEnabled = true)
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    @Autowired private UserDetailsService userDetailsService;
    @Autowired private JwtAuthenticationFilter jwtAuthenticationFilter;
    @Autowired private JwtAccessDeniedHandler jwtAccessDeniedHandler;
    @Autowired private JwtAuthenticationEntryPoint jwtAuthenticationEntryPoint;

    @Bean public PasswordEncoder passwordEncoder() {
        return new BCryptPasswordEncoder();
    }

    @Override protected void configure(AuthenticationManagerBuilder auth) throws Exception {
        auth.userDetailsService(userDetailsService).passwordEncoder(passwordEncoder());
    }

    @Override protected void configure(HttpSecurity http) throws Exception {
        http.csrf().disable()
            .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS)
            .and().authorizeRequests()
            .antMatchers("/api/auth/**").permitAll()
            .antMatchers("/api/payment/callback/**").permitAll()
            .antMatchers("/swagger-ui/**","/swagger-resources/**","/v2/api-docs").permitAll()
            .antMatchers("/api/**").authenticated()
            .antMatchers("/admin/**").hasRole("ADMIN")
            .anyRequest().authenticated()
            .and().addFilterBefore(jwtAuthenticationFilter, UsernamePasswordAuthenticationFilter.class)
            .exceptionHandling().accessDeniedHandler(jwtAccessDeniedHandler).authenticationEntryPoint(jwtAuthenticationEntryPoint);
    }

    @Bean @Override public AuthenticationManager authenticationManagerBean() throws Exception {
        return super.authenticationManagerBean();
    }
}

JWT 工具类负责生成和验证 Token，设置合理的过期时间（例如 24 小时）。

2. 虚拟卡库存管理

库存扣减是并发场景下的难点。这里采用了'预锁定'策略，在创建订单时锁定卡密，防止超卖。

@Service
public class CardServiceImpl implements CardService {
    @Autowired private CardProductMapper cardProductMapper;
    @Autowired private CardSecretMapper cardSecretMapper;
    @Autowired private RedisUtil redisUtil;
    private static final String CARD_PRODUCT_CACHE_KEY = "card:product:list";
    private static final long CACHE_EXPIRE = 3600; // 1 小时

    @Override public List<CardProductRes> listAllProducts() {
        // 优先查缓存，减少 DB 压力
        String cache = redisUtil.get(CARD_PRODUCT_CACHE_KEY);
        if (StringUtils.isNotBlank(cache)) {
            return JSON.parseArray(cache, CardProductRes.class);
        }
        QueryWrapper<CardProduct> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("status", 1).orderByAsc("sort_order");
        List<CardProduct> products = cardProductMapper.selectList(queryWrapper);
        List<CardProductRes> result = products.stream().map(this::convertToRes).collect(Collectors.toList());
        redisUtil.set(CARD_PRODUCT_CACHE_KEY, JSON.toJSONString(result), CACHE_EXPIRE);
        return result;
    }

    @Override @Transactional
    public List<CardSecret> lockCardSecrets(Long productId, int quantity, Long orderId) {
        List<CardSecret> availableSecrets = cardSecretMapper.selectAvailableSecrets(productId, quantity);
        if (availableSecrets.size() < quantity) {
            throw new BusinessException("库存不足");
        }
        List<Long> ids = availableSecrets.stream().map(CardSecret::getId).collect(Collectors.toList());
        cardSecretMapper.lockSecrets(ids, orderId); // 更新状态为锁定
        cardProductMapper.decreaseStock(productId, quantity);
        redisUtil.del(CARD_PRODUCT_CACHE_KEY);
        return availableSecrets;
    }

    @Override @Transactional
    public void unlockCardSecrets(List<Long> cardSecretIds) {
        if (CollectionUtils.isEmpty(cardSecretIds)) return;
        List<CardSecret> secrets = cardSecretMapper.selectBatchIds(cardSecretIds);
        if (CollectionUtils.isEmpty(secrets)) return;
        Map<Long, Long> productCountMap = secrets.stream().collect(Collectors.groupingBy(CardSecret::getProductId, Collectors.counting()));
        cardSecretMapper.unlockSecrets(cardSecretIds);
        for (Map.Entry<Long, Long> entry : productCountMap.entrySet()) {
            cardProductMapper.increaseStock(entry.getKey(), entry.getValue().intValue());
        }
        redisUtil.del(CARD_PRODUCT_CACHE_KEY);
    }
}

3. 订单服务

订单流程涉及状态流转和关联操作。创建订单时同步锁定库存，取消订单时自动释放。

@Service
public class OrderServiceImpl implements OrderService {
    @Autowired private OrderMapper orderMapper;
    @Autowired private OrderItemMapper orderItemMapper;
    @Autowired private CardService cardService;
    @Autowired private PaymentService paymentService;
    @Autowired private SnowFlakeUtil snowFlakeUtil;

    @Override @Transactional
    public OrderRes createOrder(OrderCreateReq req, Long userId) {
        String orderNo = generateOrderNo();
        // 先锁定库存
        List<CardSecret> cardSecrets = cardService.lockCardSecrets(req.getProductId(), req.getQuantity(), null);
        CardProduct product = cardService.getProductById(req.getProductId());
        BigDecimal totalAmount = product.getPrice().multiply(new BigDecimal(req.getQuantity()));

        Order order = new Order();
        order.setOrderNo(orderNo);
        order.setUserId(userId);
        order.setTotalAmount(totalAmount);
        order.setPaymentAmount(totalAmount);
        order.setStatus(OrderStatus.UNPAID.getCode());
        orderMapper.insert(order);

        List<OrderItem> orderItems = new ArrayList<>();
        for (CardSecret secret : cardSecrets) {
            OrderItem item = new OrderItem();
            item.setOrderId(order.getId());
            item.setOrderNo(orderNo);
            item.setProductId(req.getProductId());
            item.setProductName(product.getName());
            item.setProductImage(product.getImageUrl());
            item.setQuantity(1);
            item.setPrice(product.getPrice());
            item.setTotalPrice(product.getPrice());
            item.setCardSecretId(secret.getId());
            orderItems.add(item);
        }
        orderItemMapper.batchInsert(orderItems);
        cardService.updateCardSecretsOrderId(cardSecrets.stream().map(CardSecret::getId).collect(Collectors.toList()), order.getId());

        OrderRes res = new OrderRes();
        BeanUtils.copyProperties(order, res);
        res.setItems(orderItems.stream().map(this::convertToItemRes).collect(Collectors.toList()));
        return res;
    }

    @Override @Transactional
    public void cancelOrder(Long orderId, Long userId) {
        Order order = orderMapper.selectById(orderId);
        if (order == null || !order.getUserId().equals(userId) || order.getStatus() != OrderStatus.UNPAID.getCode()) {
            throw new BusinessException("无法取消订单");
        }
        order.setStatus(OrderStatus.CANCELLED.getCode());
        orderMapper.updateById(order);

        List<OrderItem> items = orderItemMapper.selectByOrderId(orderId);
        List<Long> cardSecretIds = items.stream().map(OrderItem::getCardSecretId).filter(Objects::nonNull).collect(Collectors.toList());
        if (!cardSecretIds.isEmpty()) {
            cardService.unlockCardSecrets(cardSecretIds);
        }
    }

    @Override @Transactional
    public void payOrderSuccess(String orderNo, String paymentNo, BigDecimal paymentAmount, Date paymentTime) {
        Order order = orderMapper.selectByOrderNo(orderNo);
        if (order == null || order.getStatus() != OrderStatus.UNPAID.getCode()) {
            throw new BusinessException("订单状态异常");
        }
        order.setStatus(OrderStatus.PAID.getCode());
        order.setPaymentTime(paymentTime);
        orderMapper.updateById(order);

        List<OrderItem> items = orderItemMapper.selectByOrderId(order.getId());
        List<Long> cardSecretIds = items.stream().map(OrderItem::getCardSecretId).filter(Objects::nonNull).collect(Collectors.toList());
        if (!cardSecretIds.isEmpty()) {
            cardService.sellCardSecrets(cardSecretIds);
        }

        Payment payment = new Payment();
        payment.setOrderId(order.getId());
        payment.setOrderNo(orderNo);
        payment.setPaymentNo(paymentNo);
        payment.setPaymentType(PaymentType.WECHAT.getCode());
        payment.setPaymentAmount(paymentAmount);
        payment.setPaymentStatus(1);
        payment.setPaymentTime(paymentTime);
        payment.setCallbackTime(new Date());
        paymentService.createPayment(payment);
    }

    private String generateOrderNo() { return "ORD" + snowFlakeUtil.nextId(); }
}

4. 微信支付集成

微信支付的回调验证至关重要，必须校验签名以防止伪造请求。

@Component
public class WeChatPayUtil {
    @Value("${wechat.pay.appid}") private String appId;
    @Value("${wechat.pay.mchid}") private String mchId;
    @Value("${wechat.pay.apikey}") private String apiKey;
    @Value("${wechat.pay.serialNo}") private String serialNo;
    @Value("${wechat.pay.privateKey}") private String privateKey;
    @Value("${wechat.pay.notifyUrl}") private String notifyUrl;
    private CloseableHttpClient httpClient;

    @PostConstruct public void init() {
        PrivateKey merchantPrivateKey = PemUtil.loadPrivateKey(new ByteArrayInputStream(privateKey.getBytes()));
        httpClient = WechatPayHttpClientBuilder.create()
            .withMerchant(mchId, serialNo, merchantPrivateKey)
            .withValidator(new WechatPay2Validator(apiKey.getBytes()))
            .build();
    }

    public Map<String, String> createH5Payment(String orderNo, BigDecimal amount, String description, String clientIp) throws Exception {
        Map<String, Object> params = new HashMap<>();
        params.put("appid", appId);
        params.put("mchid", mchId);
        params.put("description", description);
        params.put("out_trade_no", orderNo);
        params.put("notify_url", notifyUrl);
        params.put("amount", new HashMap<String, Object>() {{ put("total", amount.multiply(new BigDecimal(100)).intValue()); put("currency", "CNY"); }});
        params.put("scene_info", new HashMap<String, Object>() {{ put("payer_client_ip", clientIp); put("h5_info", new HashMap<String, Object>() {{ put("type", "Wap"); }}); }});

        HttpPost httpPost = new HttpPost("https://api.mch.weixin.qq.com/v3/pay/transactions/h5");
        httpPost.addHeader("Accept", "application/json");
        httpPost.addHeader("Content-type", "application/json");
        httpPost.setEntity(new StringEntity(JSON.toJSONString(params), "UTF-8"));
        CloseableHttpResponse response = httpClient.execute(httpPost);
        try {
            String responseBody = EntityUtils.toString(response.getEntity());
            if (response.getStatusLine().getStatusCode() == 200) {
                JSONObject json = JSON.parseObject(responseBody);
                Map<String, String> result = new HashMap<>();
                result.put("h5_url", json.getString("h5_url"));
                result.put("prepay_id", json.getString("prepay_id"));
                return result;
            } else {
                throw new BusinessException("微信支付创建失败：" + responseBody);
            }
        } finally { response.close(); }
    }

    public boolean verifyNotify(Map<String, String> params, String signature, String serial, String nonce, String timestamp, String body) {
        try {
            String message = timestamp + "\n" + nonce + "\n" + body + "\n";
            boolean verifyResult = verifySignature(message.getBytes("utf-8"), serial, signature.getBytes("utf-8"));
            if (!verifyResult) return false;
            JSONObject json = JSON.parseObject(body);
            String tradeState = json.getJSONObject("resource").getString("trade_state");
            return "SUCCESS".equals(tradeState);
        } catch (Exception e) { return false; }
    }
}

Controller 层处理回调时，需提取请求头中的签名信息并调用上述工具类验证。

前端实现

用户端 (Vant)

移动端页面强调交互体验，使用 Vant 组件库快速构建。

虚拟卡列表页：支持搜索、分类切换、下拉刷新和分页加载。

<template>
  <div>
    <header-component title="虚拟卡商城" :show-back="false" />
    <van-search v-model="searchKeyword" placeholder="搜索虚拟卡" shape="round" @search="onSearch" />
    <van-tabs v-model="activeCategory" @click="onCategoryChange">
      <van-tab v-for="category in categories" :key="category.id" :title="category.name" />
    </van-tabs>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <card-item v-for="card in cardList" :key="card.id" :card="card" @click="goToDetail(card.id)" />
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
import { Search, Tab, Tabs, List, PullRefresh } from 'vant';
import HeaderComponent from '@/components/Header.vue';
import CardItem from '@/components/CardItem.vue';
import { getCardProducts, getCardCategories } from '@/api/card';
export default {
  components: { [Search.name]: Search, [Tab.name]: Tab, [Tabs.name]: Tabs, [List.name]: List, [PullRefresh.name]: PullRefresh, HeaderComponent, CardItem },
  data() {
    return {
      searchKeyword: '', activeCategory: 0, categories: [], cardList: [], loading: false, finished: false, refreshing: false, page: 1, pageSize: 10
    };
  },
  created() { this.loadCategories(); },
  methods: {
    async loadCategories() {
      try { const res = await getCardCategories(); this.categories = [{ id: 0, name: '全部' }, ...res.data]; } catch (error) { console.error('加载分类失败', error); }
    },
    async onLoad() {
      if (this.refreshing) { this.cardList = []; this.refreshing = false; }
      try {
        const params = { page: this.page, pageSize: this.pageSize, categoryId: this.activeCategory === 0 ? null : this.activeCategory, keyword: this.searchKeyword };
        const res = await getCardProducts(params);
        this.cardList = [...this.cardList, ...res.data.list];
        this.loading = false;
        if (res.data.list.length < this.pageSize) { this.finished = true; } else { this.page++; }
      } catch (error) { this.loading = false; this.finished = true; console.error('加载卡片列表失败', error); }
    },
    onRefresh() { this.page = 1; this.finished = false; this.loading = true; this.onLoad(); },
    onSearch() { this.page = 1; this.cardList = []; this.finished = false; this.loading = true; this.onLoad(); },
    onCategoryChange() { this.page = 1; this.cardList = []; this.finished = false; this.loading = true; this.onLoad(); },
    goToDetail(id) { this.$router.push(`/card/detail/${id}`); }
  }
};
</script>

订单创建页：展示商品信息、数量选择、地址确认及提交按钮。

支付页：根据浏览器环境判断是调起 JSAPI 还是跳转 H5 链接，并轮询检查支付结果。

管理端 (Element UI)

后台管理系统侧重数据录入与统计，使用 Element UI 提供丰富的表格和表单组件。

虚拟卡产品管理：支持批量操作、状态切换、图片上传及详情编辑。表格支持分页和筛选，对话框用于新增或修改产品信息。

微信 H5 支付集成

配置要点

1. 商户号申请：登录微信支付商户平台完成资质认证。
2. 域名配置：备案域名，配置授权目录和回调域名。
3. 密钥证书：设置 APIv2 密钥，申请 APIv3 证书。
4. 应用信息：配置 H5 支付场景参数。

流程实现

前端通过 isWeixinBrowser 判断是否在微信内。如果是，调用 WeixinJSBridge.invoke；否则直接跳转返回的 h5_url。后端监听回调接口，验证签名后更新订单状态，确保资金流与业务流一致。

// src/utils/wechat.js
import axios from 'axios';
export function isWeixinBrowser() {
  return /micromessenger/i.test(navigator.userAgent);
}
export async function wechatPay(paymentData) {
  return new Promise((resolve, reject) => {
    if (typeof WeixinJSBridge === 'undefined') {
      if (document.addEventListener) { document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false); }
      else if (document.attachEvent) { document.attachEvent('WeixinJSBridgeReady', onBridgeReady); document.attachEvent('onWeixinJSBridgeReady', onBridgeReady); }
      reject(new Error('请在微信中打开页面'));
    } else {
      onBridgeReady();
    }
    function onBridgeReady() {
      WeixinJSBridge.invoke('getBrandWCPayRequest', {
        appId: paymentData.appId, timeStamp: paymentData.timeStamp, nonceStr: paymentData.nonceStr,
        package: paymentData.package, signType: paymentData.signType, paySign: paymentData.paySign
      }, function(res) {
        if (res.err_msg === 'get_brand_wcpay_request:ok') { resolve(); }
        else { reject(new Error(res.err_msg || '支付失败')); }
      });
    }
  });
}

后端回调处理示例：

@PostMapping("/callback/wechat")
public String wechatPayCallback(HttpServletRequest request) {
  try {
    String signature = request.getHeader("Wechatpay-Signature");
    String serial = request.getHeader("Wechatpay-Serial");
    String nonce = request.getHeader("Wechatpay-Nonce");
    String timestamp = request.getHeader("Wechatpay-Timestamp");
    String body = StreamUtils.copyToString(request.getInputStream(), StandardCharsets.UTF_8);
    if (!weChatPayUtil.verifyNotify(null, signature, serial, nonce, timestamp, body)) {
      log.error("微信支付回调验证失败");
      return "FAIL";
    }
    JSONObject json = JSON.parseObject(body);
    JSONObject resource = json.getJSONObject("resource");
    String orderNo = resource.getString("out_trade_no");
    BigDecimal amount = resource.getJSONObject("amount").getBigDecimal("total").divide(new BigDecimal(100));
    Date paymentTime = new Date(resource.getLong("success_time") * 1000);
    orderService.payOrderSuccess(orderNo, transactionId, amount, paymentTime);
    log.info("微信支付回调处理成功，orderNo: {}", orderNo);
    return "SUCCESS";
  } catch (Exception e) {
    log.error("微信支付回调处理失败", e);
    return "FAIL";
  }
}

整个流程闭环后，用户获得卡密，商家收到款项，系统记录完整日志，确保交易可追溯。