1、立项背景和目标
背景: 在线翻译需求普遍存在,直接在前端调用有道开放平台 API 会暴露 APP_KEY/APP_SECRET 密钥,且受浏览器跨域限制。本项目(基于 Django 5.0 + 有道翻译开放 API)通过在服务端封装一个轻量代理,安全、稳定地完成翻译请求。
目标:
实现一个开箱即用的网页版"翻译助手",支持多语言互译(自动检测、中、英、日、韩、法、德、俄、西、葡)
服务端代理有道开放 API,隐藏密钥、规避跨域限制
提供友好的交互界面:语言互换、一键复制、清空、Enter 快捷键、加载状态提示
2、软件功能与核心功能模块
技术栈: Python / Django 5.0、SQLite(仅默认 auth 表,无业务模型)、requests、原生 JS + CSS
核心模块:
模块 位置 说明
有道 API 客户端(签名/截断/请求) translator/views.py:15-50 encrypt 做 SHA-256 签名,truncate 实现有道 v3 截断规则(>20 字符取首 10+长度+尾 10),do_request 发送表单请求
翻译接口 translator/views.py:58-81 translate_api 接收 text/from_lang/to_lang,校验 errorCode,返回 JSON
首页渲染 translator/views.py:53-55 translator_home 渲染翻译助手 UI
前端交互 static/translator/js/script.js fetch 调 /api/translate/(带 CSRF 头)、语言互换、复制、toast 提示
界面与样式 templates/translator/index.html + static/translator/css/style.css 渐变紫主题、语言下拉选择、翻译/交换/复制/清空按钮
注意: views.py:11-12 的 APP_KEY/APP_SECRET 为空占位符,需填入有道开放平台密钥后才能实际运行。
3、业务流程与功能路径
请求流程:
用户访问 / → translator_home 渲染 index.html
用户在页面选择源/目标语言、输入文本,点击"开始翻译"(或按 Enter)
script.js 以 FormData POST 到 /api/translate/(携带 X-CSRFToken)
translate_api 校验参数与请求方法 → 调用 translate_text
服务端按有道 v3 规则生成 salt(UUID1)+ curtime + SHA-256 签名,requests 发往 https://openapi.youdao.com/api
解析响应:errorCod
1、整体架构与设计思路
架构风格: 前后端分离的轻量级服务端代理架构(3 层)
浏览器 (index.html + script.js + style.css)
│ fetch POST /api/translate/ (FormData + X-CSRFToken)
▼
Django 后端 (translator/views.py) ← 密钥藏在这层
│ requests POST (form-urlencoded + 签名参数)
▼
有道开放平台 https://openapi.youdao.com/api
设计思路:
服务端代理:核心设计点——把 APP_KEY/APP_SECRET 放在后端,浏览器拿不到密钥,同时规避浏览器跨域限制(有道 API 的 CORS 不支持前端直连)。
无状态设计:不存翻译记录(无 models、无 migrations),翻译结果不落地,符合"工具型"项目的定位。
前后端通过 AJAX 解耦:前端纯静态资源 + 原生 JS,后端只暴露 1 个 RESTful 接口。
各模块技术栈:
模块 技术 说明
后端框架 Django 5.0 路由、视图、CSRF、静态文件、模板渲染
数据库 SQLite 仅默认 auth/admin 表,无业务数据
HTTP 客户端 requests ≥2.28 调用有道 API
签名 Python 标准库 hashlib/uuid/time SHA-256 + UUID1 salt,无第三方依赖
前端 原生 HTML/CSS/JS(无框架) fetch API、CSRF token 处理
样式 纯 CSS 渐变主题 紫渐变(#667eea→#764ba2),响应式容器布局
2、"我"负责模块与结果(量化表述)
以下按"我负责整个项目"来写,可按实际分工删改。
负责模块: 全栈开发——后端代理层(签名 + API 调用 + 接口)、前端交互层(UI + JS 逻辑)、项目工程化(配置、静态资源、依赖)。
量化结果(报告可直接引用):
交付 1 个 Django 应用 + 2 个 URL 路由 + 1 个 RESTful 翻译接口 + 1 套前端页面
实现 11 种语言(自动检测 + 10 种目标语言)互译
后端核心逻辑集中在 81 行 views.py 中,封装 5 个函数(encrypt/truncate/do_request/translate_text/translate_api)
前端 197 行 JS + 259 行 CSS + 82 行模板,实现 6 项交互能力:翻译提交、语言互换(含文本互换)、清空、复制译文、Enter 快捷键、loading 状态
接口返回统一 JSON 结构(success/tra