一网打尽多语言！H5、JS、Ajax与百度翻译API开发网页翻译功能

前端

2023-04-25 04:07:57

使用 H5、JS、AJAX 和百度翻译 API 创建一个功能强大的网页翻译器

简介

在当今全球化的互联网时代，跨越语言障碍已成为沟通顺畅的必要条件。作为开发者，满足多语言翻译的需求至关重要。本文将深入探讨如何使用 H5、JS、AJAX 和百度翻译 API 构建一个功能齐全的网页翻译器，让您轻松打破语言壁垒，提升用户体验。

环境准备

为了开始构建翻译器，您需要准备以下工具：

文本编辑器（如 Sublime Text 或 Visual Studio Code）
Node.js（版本 >= 12）
NPM（Node.js 包管理工具）
Git（版本控制工具）
百度翻译 API 的 AK 和 SK（可免费申请）

环境搭建

安装 Node.js 和 NPM

访问官方网站并按照说明安装 Node.js 和 NPM。
安装 Git

同样访问官方网站并安装 Git。
创建项目目录

使用命令行创建项目目录并切换到该目录：
```
mkdir my-translation-app
cd my-translation-app
```
初始化 Git 仓库

初始化一个 Git 仓库：
```
git init
```
安装项目依赖

安装必要的 npm 包：
```
npm install express body-parser axios
```

代码实现

接下来，我们将构建翻译器的前端和后端代码。

后端（Node.js）

创建服务器端文件

创建一个名为 server.js 的文件，并添加以下代码：

// 引入必要的库
const express = require('express');
const bodyParser = require('body-parser');
const axios = require('axios');

// 创建 Express 应用
const app = express();

// 使用 body-parser 解析 JSON 请求体
app.use(bodyParser.json());

// 定义翻译路由
app.post('/translate', async (req, res) => {
  // 获取请求体中的文本、源语言和目标语言
  const { text, from, to } = req.body;

  // 构造百度翻译 API 请求参数
  const params = new URLSearchParams();
  params.append('appid', 'YOUR_BAIDU_API_KEY');
  params.append('salt', Date.now());
  params.append('from', from);
  params.append('to', to);
  params.append('q', text);

  // 计算签名
  const signature = md5(`${params.toString()}YOUR_BAIDU_API_SECRET`);
  params.append('sign', signature);

  // 发送翻译请求
  const response = await axios.post('https://fanyi-api.baidu.com/api/trans/vip/translate', params);

  // 返回翻译结果
  res.json(response.data);
});

// 启动服务器
app.listen(3000);

前端（HTML、JS）

创建前端文件

创建一个名为 index.html 的 HTML 文件，并添加以下代码：

<!DOCTYPE html>
<html>
  <head>
    <script src="script.js"></script>
  </head>
  <body>
    <form id="form">
      <label for="text">要翻译的文本：</label>
      <textarea id="text"></textarea>

      <label for="from">源语言：</label>
      <select id="from">
        <option value="auto">自动检测</option>
        <option value="zh">中文</option>
        <option value="en">英语</option>
        <option value="jp">日语</option>
        <option value="kr">韩语</option>
      </select>

      <label for="to">目标语言：</label>
      <select id="to">
        <option value="zh">中文</option>
        <option value="en">英语</option>
        <option value="jp">日语</option>
        <option value="kr">韩语</option>
      </select>

      <input type="submit" value="翻译">
    </form>

    <div id="result"></div>
  </body>
</html>

创建一个名为 script.js 的 JS 文件，并添加以下代码：

// 获取 DOM 元素
const form = document.getElementById('form');

// 监听表单提交事件
form.addEventListener('submit', async (e) => {
  // 阻止默认表单提交行为
  e.preventDefault();

  // 获取文本、源语言和目标语言
  const text = document.getElementById('text').value;
  const from = document.getElementById('from').value;
  const to = document.getElementById('to').value;

  // 构建数据对象
  const data = {
    text,
    from,
    to,
  };

  // 发送翻译请求
  const response = await fetch('http://localhost:3000/translate', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
  });

  // 获取翻译结果
  const result = await response.json();

  // 显示翻译结果
  document.getElementById('result').innerHTML = result.trans_result[0].dst;
});