無后端完成在線翻譯功能

RaoMeng 發布于2019-08-22 16:48 / 1681人閱讀

摘要：在線翻譯純前端百度翻譯本地存儲完成提取文本中的生詞，并返回單詞的翻譯結果項目內容之前背單詞的時候發現，直接背單詞的話太枯燥，直接閱讀英文書籍報紙又有太多的單詞不認識，就想能夠做個，直接檢查出一個英文文本中的生詞，并翻譯出來。

在線翻譯

純前端 + 百度翻譯API + localStorage本地存儲
完成提取文本中的生詞，并返回單詞的翻譯結果

項目內容

之前背單詞的時候發現，直接背單詞的話太枯燥，直接閱讀英文書籍、報紙又有太多的單詞不認識，
就想能夠做個demo，直接檢查出一個英文文本中的生詞，并翻譯出來。

本demo有下列內容

前端界面

用localStorage存儲用戶已近掌握的單詞

利用百度翻譯API翻譯單詞

項目演示

所以項目本身不需要服務器，編寫玩靜態資源后可以直接托管在GitHub Page上（GitHub真是偉大的網站）

在線地址

操作演示：

（無法加載GIF可以自行打開該鏈接）

代碼邏輯

代碼倉庫
目前項目正處于初級階段，所以簡陋，還有許多未添加的功能

目錄結構

.
├── README.md
├── css
│?? └── style.css
├── index.html
└── js
    ├── getTrans.js
    ├── getVocabulariesFromText.js
    └── static
        ├── jQuery.min.js
        └── md5.js

其中js/static目錄下一個提供jQuery，另一個用于百度翻譯要求的MD5加密

localStorage

從項目網站所在的便簽也打開控制臺，觀察localStorage

我把把所有單詞分為已知know，正在學習learn和未知。并把已知的單詞存儲在localStorage。
這樣做的好處是不需要服務器，壞處是用戶換個瀏覽器之前的內容就沒了

前端頁面

分為三個部分：

輸入框，用來等待用戶輸入文本

提交按鈕，點擊后開始翻譯文本框中的內容

用來顯示翻譯結果的表格

js代碼流程

為提交按鈕綁定onClick時間

當用戶點擊提交按鈕后

獲得輸入框中的文本

用正則表達式提取其中的英語單詞

對提取到的單詞做兩個處理

去除重復的單詞

去除已經學會的單詞

利用百度翻譯API翻譯單詞

將返回的結果渲染到頁面

倉庫的代碼都有注釋，就不多說廢話了

結語

項目還很簡陋，有時間再完善下。

GPU云服務器云服務器監控云服務器完成在線注冊 asp無后門大馬 linux無后門ddos集群 linux無后門集群ddos

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94671.html

無后端完成在線翻譯功能

摘要：在線翻譯純前端百度翻譯本地存儲完成提取文本中的生詞，并返回單詞的翻譯結果項目內容之前背單詞的時候發現，直接背單詞的話太枯燥，直接閱讀英文書籍報紙又有太多的單詞不認識，就想能夠做個，直接檢查出一個英文文本中的生詞，并翻譯出來。在線翻譯純前端 + 百度翻譯API + localStorage本地存儲完成提取文本中的生詞，并返回單詞的翻譯結果項目內容之前背單詞的時候發現，直接背單詞的...

Jason 2019-08-02 10:17 評論0 收藏0
基于vue2 + muse-ui構建的移動端、PC端輕社區項目 F-Rent 友租

摘要：如果有什么可以幫到你的無論是不是此項目中的問題都可以在提出我會盡我所能幫你解決歡迎大佬們提出好的問題和點子，我會第一時間去修正。前言本項目(友租)是基于Vue2、Vuex、Muse-UI、es6、webpack構建的一個移動端、PC端輕社區項目項目地址GitHub 項目更新歷史開發環境 Macos + Vs code + Chrome 項目的靈感最初來源：由于我是一個宅男在...

linkFly 2019-08-21 16:54 評論0 收藏0
基于vue2 + muse-ui構建的移動端、PC端輕社區項目 F-Rent 友租

摘要：如果有什么可以幫到你的無論是不是此項目中的問題都可以在提出我會盡我所能幫你解決歡迎大佬們提出好的問題和點子，我會第一時間去修正。前言本項目(友租)是基于Vue2、Vuex、Muse-UI、es6、webpack構建的一個移動端、PC端輕社區項目項目地址GitHub 項目更新歷史開發環境 Macos + Vs code + Chrome 項目的靈感最初來源：由于我是一個宅男在...

X_AirDu 2019-08-30 15:53 評論0 收藏0
4月份前端資源分享

摘要：更多資源請文章轉自月份前端資源分享關于的思考一款有趣的動畫效果跨站資源共享之二最流行的編程語言能做什么到底什么是閉包的第三個參數跨域資源共享詳解阮一峰前端要給力之語句在中的值周愛民中國第二屆視頻花絮編碼規范前端工程師手冊奇舞周刊被忽視的更多資源請Star：https://github.com/maidishike... 文章轉自：https://github.com/jsfron...

jsdt 2019-08-20 15:54 評論0 收藏0