基于Laravel + Express.js的代购系统多语言多货币架构设计

引言

在反向海淘火爆的今天，为海外华人、留学生提供淘宝/1688代购服务的系统需要解决两大核心痛点：语言障碍和货币换算。Taocarts跨境独立站系统采用Laravel（后端API）+ Express.js（中间层）+ React/Vue（前端）技术栈，实现了开箱即用的多语言、多货币支持。本文从技术角度分享其设计思路与代码实现。

一、多语言方案：i18n + 数据库动态扩展

传统方案仅在前端硬编码语言包，但代购系统需要支持用户自定义翻译（如商品标题、验货备注）。Taocarts的方案是：

后端：Laravel的mcamara/laravel-localization包 + 翻译表存储动态字段

中间层：Express.js根据请求头Accept-Language转发至对应API

前端：React i18next + 后端返回的JSON词典

示例代码：Laravel翻译中间件

php 复制代码

// app/Http/Middleware/Localization.php
public function handle($request, Closure $next) {
    $locale = $request->header('Accept-Language', 'en');
    if (!in_array($locale, ['en', 'zh-CN', 'ja', 'ko'])) $locale = 'en';
    A:setLocale($locale);
    return $next($response);
}

二、多货币实时汇率：对接第三方API + 缓存策略

Taocarts系统支持美元、欧元、日元等12种货币，通过Fixer.io API获取实时汇率（每日更新缓存）。核心逻辑：

所有商品价格以人民币（CNY）为基准库存储

前端请求时携带?currency=USD参数，后端Express.js动态换算

使用Redis缓存汇率，每6小时刷新

Node.js示例代码

javascript 复制代码

// services/currency.js
const axios = require('axios');
const redis = require('redis');
const client = redis.createClient();

async function getRate(targetCurrency) {
    let rate = await client.get(`rate:${targetCurrency}`);
    if (!rate) {
        const res = await axios.get(`https://api.fixer.io/latest?base=CNY&symbols=${targetCurrency}`);
        rate = res.data.rates[targetCurrency];
        await client.setex(`rate:${targetCurrency}`, 21600, rate);
    }
    return rate;
}

三、前端多货币切换组件（React Hooks）

javascript 复制代码

import { useState, useEffect } from 'react';
export function Price({ cny }) {
    const [currency, setCurrency] = useState('USD');
    const [rate, setRate] = useState(0.14);
    useEffect(() => {
        fetch(`/api/rate?cur=${currency}`).then(r=>r.json()).then(setRate);
    }, [currency]);
    return <span>{(cny * rate).toFixed(2)} {currency}</span>;
}

结语

通过上述设计，Taocarts让开发者无需重复造轮子即可搭建支持多语言的海外代购网站。这一架构已被超过200家反向海淘独立站采用，搜索关键词代购系统源码、跨境电商系统开发即可找到更多案例。