如何实现餐品表单输入自动翻译填充至多语言对应表单？

一、前期准备 #

• 注册DeepL账号，获取API密钥（免费版每月限50万字翻译，适合小型项目；付费版按需计费）
• 确认DeepL语言代码：立陶宛语LT、英语EN、俄语RU

二、后端代理接口（Laravel示例） #

直接在前端调用API会暴露密钥，必须通过后端中转。以下是Laravel环境下的实现：

1. 依赖准备 #

Laravel默认包含Guzzle HTTP客户端，若未安装可执行：

composer require guzzlehttp/guzzle

2. 创建翻译控制器 #

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use GuzzleHttp\Client;

class TranslationController extends Controller
{
    public function translate(Request $request)
    {
        $text = $request->input('text');
        $targetLangs = $request->input('target_langs');

        if (!$text || empty($targetLangs)) {
            return response()->json(['error' => '参数不全'], 400);
        }

        $client = new Client();
        $apiKey = env('DEEPL_API_KEY');
        // 免费版使用api-free.deepl.com，付费版替换为api.deepl.com
        $apiUrl = 'https://api-free.deepl.com/v2/translate';

        $translations = [];
        foreach ($targetLangs as $lang) {
            $response = $client->post($apiUrl, [
                'form_params' => [
                    'auth_key' => $apiKey,
                    'text' => $text,
                    'target_lang' => $lang,
                    'source_lang' => 'LT' // 明确指定源语言，避免自动检测偏差
                ]
            ]);

            $result = json_decode($response->getBody(), true);
            $translations[$lang] = $result['translations'][0]['text'];
        }

        return response()->json($translations);
    }
}

3. 添加路由 #

在routes/api.php中注册接口路由：

Route::post('/translate', [TranslationController::class, 'translate'])->name('translate');

4. 配置环境变量 #

在.env文件中添加DeepL API密钥：

DEEPL_API_KEY=你的API密钥

三、前端实现（jQuery示例） #

监听立陶宛语输入框的输入事件，调用后端接口填充翻译结果：

1. HTML结构示例 #

<!-- 立陶宛语标签页 -->
<div class="tab-pane active" id="lt-tab">
    <input type="text" id="name_lt" name="name_lt" placeholder="立陶宛语名称">
</div>

<!-- 英语标签页 -->
<div class="tab-pane" id="en-tab">
    <input type="text" id="name_en" name="name_en" placeholder="英语名称">
</div>

<!-- 俄语标签页 -->
<div class="tab-pane" id="ru-tab">
    <input type="text" id="name_ru" name="name_ru" placeholder="俄语名称">
</div>

2. JavaScript逻辑 #

$(document).ready(function() {
    let debounceTimer;
    // 加入防抖逻辑，减少不必要的API调用
    $('#name_lt').on('keyup', function() {
        clearTimeout(debounceTimer);
        const inputText = $(this).val().trim();

        debounceTimer = setTimeout(function() {
            if (inputText.length < 2) return; // 输入过短不触发翻译

            $.ajax({
                url: '{{ route("translate") }}',
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    text: inputText,
                    target_langs: ['EN', 'RU']
                },
                beforeSend: function() {
                    // 可添加加载状态提示，比如显示加载图标
                    $('#name_lt').addClass('loading');
                },
                success: function(res) {
                    $('#name_en').val(res.EN);
                    $('#name_ru').val(res.RU);
                },
                complete: function() {
                    $('#name_lt').removeClass('loading');
                },
                error: function(xhr) {
                    console.error('翻译失败:', xhr.responseText);
                }
            });
        }, 800); // 输入停止800ms后触发翻译
    });
});

四、注意事项 #

• 密钥安全：绝对不要在前端代码中直接写入DeepL API密钥，必须通过后端代理
• API调用限制：免费版每月50万字，超出后需切换付费版，可在代码中添加调用次数统计或告警
• 用户体验：加入防抖、加载状态，同时允许用户手动修改翻译结果（自动翻译可能存在误差）
• 错误处理：添加API调用失败的提示，避免用户无感知

内容的提问来源于stack exchange，提问作者Laimonas Rupeika