# TranslationTool

**Repository Path**: Mr-Nan05/TranslationTool

## Basic Information

- **Project Name**: TranslationTool
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2021-05-14
- **Last Updated**: 2021-06-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



# README

项目名称： TranslationTool

作者：Mr.Nan

邮箱：mr.nan0505@qq.com

仓库地址：https://gitee.com/Mr-Nan05/TranslationTool

#### 项目简介

- 简单的web翻译系统，输入待翻译的文本（可自动检测语言），输出需要的语言，默认中文，同时支持英文、日语、韩语、法语、俄语、德语等多种语言
- 采用前后端分离的B/S架构，前端使用react框架，后端是使用spring-boot框架
- 技术栈：html + css + javascript + react + java + spring-boot + linux + h2数据库

#### 环境依赖

- node v10.0+

- java v1.8+
- maven

#### 部署步骤

- 启动后端：

  ```shell
  cd translation-backend
  
  mvn spring-boot:run
  ```

  

- 启动前端：

  ```shell
  cd translation-frontend
  
  yarn
  
  yarn start
  ```

  

#### 配置说明

- 后端说明：
  1. 采用h2内存数据库存放用户数据，更方便部署
  2. host及port等皆为默认配置
- 前端说明：
  1. 采用约定式路由，通过文件控制路由信息
  2. host及port等皆为默认配置

#### 目录结构

```
├── translation-backend 	//后端部分
│   ├── pom.xml					 		//pom文件
│   └── src
│       ├── main								//基本功能代码以及配置文件
│       └── test									//测试文件
└── translation-frontend	//前端部分
    ├── package.json
    └── src
        ├── app.ts
        ├── layouts								//上边栏，功能导航
        ├── models
        └── pages									//主要功能页面
```



#### 功能说明

- 文本翻译介绍

  1. 前端使用react框架及antd中部分组件，获取用户输入的待翻译文本传入后端
  2. 后端调用百度文本翻译接口，将文本作为参数传入，获取翻译结果返回前端

- 语种识别介绍

  1. 基本与文本翻译相同，使用百度翻译接口
     1. 支持语种：中文、英语、日语、韩语、泰语、俄语、越南语

- 登录功能介绍
  1. 前端维护一个登录状态，登录之后会显示头像与修改密码、退出登录等
  2. 后端有相应的数据库存放用户信息，用于验证登录是否正确等

- 双重权限控制
  1. 前端维护一个登录状态，未登录时不能访问Translate、Language、修改密码等页面，但是可以访问主页、登录、注册等页面
  
  2. 每个用户登录之后由后端生成一个token返回到前端，之后前端每个请求都需要携带token，对于Translate、Language页面，会自动过滤未携带正确token的请求，以达到权限控制的功能

  3. 本项目采用更为安全且可以跨域的token方式控制权限，同时避免服务端耗费大量资源去维护session，流程如下
  
     ![img](images/4630295-7df0d10fcffe831b.png)

#### 使用说明

- 开始使用：打开网站主页点击“开始使用”按钮或者登录/注册按钮进行登录，由于本项目设有前后双重登录权限控制，未登录情况下不能使用核心功能，即翻译功能与语种识别功能，如下图

  ![image-20210517233044552](images/image-20210517233044552.png)

- 登录/注册：预设用户test，密码为111111，也可先注册再登录使用，界面如下图

  ![image-20210517233443088](images/image-20210517233443088.png)![image-20210517233509305](images/image-20210517233509305.png)

- 登录成功：登录、注册成功或失败均有提示信息，登录成功后会显示头像，头像有退出登录、修改密码等操作，界面如下图

  ![image-20210517234042173](images/image-20210517234042173.png)

  ![image-20210517233714507](images/image-20210517233714507.png)

- 翻译功能：登录完成后点击导航栏Translate按钮进入翻译模块，右边选择翻译目标语言，在左边输入待翻译文本，输入**Ctrl Enter**可进行翻译，如下图

  ![image-20210517234346832](images/image-20210517234346832.png)

- 语种识别：在左边输入待识别语言文本，输入**Ctrl Enter**可进行语种识别，如下图

  ![image-20210517234512371](images/image-20210517234512371.png)

- 权限控制：未登录情况下点击Translate或Language功能模块会出现无权限提示信息，如下图

  ![image-20210517233301125](images/image-20210517233301125.png)

- 错误提示：后端服务器无响应时会出现500、404等提示信息，如下图

  ![image-20210517234724256](images/image-20210517234724256.png)