Vue例項demo——線上翻譯
一、專案簡介
學習Vue也有一段時間了，這幾天使用Vue的相關知識完成了一個線上翻譯的專案。專案整體上很簡單，但是裡面包含的一些知識還是很多的。如果你是一名Vue小白，建議你閱讀這篇文章。通過參考這個專案，你可以瞭解從零開始搭建Vue專案，到最終的打包上線的完整過程。
真個專案中使用的技術棧如下：
- 使用Vue腳手架快速搭建專案
- 在Vue元件中引入外部的js指令碼
- 在Vue專案中引入jQuery庫
- 呼叫外部API，這裡使用的是百度的翻譯API
- 元件之間的資料傳遞
最後展示一下這個專案。這是一個線上翻譯的專案，可以通過選擇，將中文翻譯成英文，日文，俄文等其他語言。
二、專案的具體介紹
1.搭建專案，安裝vue-resource，配置jQuery庫
首先我們要做的是使用Vue腳手架搭建一個專案，因為我的這個專案中使用到了vue-resource元件和jQuery第三方庫，所以建議你在完成專案搭建之後就安裝vue-resource元件和配置jQuery，如果你不會配置jQuery，可以參考文章：Vue筆記——Vue元件中引入jQuery。
2.申請並掌握百度翻譯API介面
專案中使用到的百度提供的免費翻譯API，如果之前沒有使用過這個API，可以到百度翻譯開放平臺進行了解。
對百度提供的API不熟悉的同學，一定要沉下心來看一看他的技術文件。這個文件是很詳細的，會跟你講解如果使用API。大致的思路如下：
- 首先你要註冊一個百度翻譯開放平臺的賬號，然後申請開發者許可權，獲取一個APP ID和祕鑰。
- 然後下載它的例項DEMO，百度翻譯的API是需要給資料MD5加密的，所以在它的DEMO裡面會有一個md5.js指令碼檔案，我們需要在元件中引入它對資料進行加密。如果你不知道如何在Vue元件中引入外部js指令碼檔案，可以參考文章：Vue筆記——在Vue專案中引入外部js檔案。
3.開始編寫專案程式碼
上述準備工作做好之後，我們就可以進行編寫我們的專案程式碼。
我這裡使用到了兩個子元件，其中一個子元件 translateForm 是用來接收使用者輸入的待翻譯文字，以及使用者選擇的翻譯模式。使用者填寫好這些資訊之後，點選【翻譯】，相關的資料就會傳遞到這個 translateForm
translateForm 元件的主要程式碼：
<template>
<div id="translateForm">
<!-- 使用者選擇的翻譯模式 -->
<div class="option-box">
<span class="option-result" v-on:click="showList">{{ option_result }}</span>
<div class="option-list">
<p v-for="(option,index) in option_list" v-on:click="selectOption(index)">{{ option }}</p>
</div>
<input type="button" value="翻譯" v-on:click="my_translate()">
</div>
<!-- 使用者輸入的要翻譯的文字 -->
<form class="my-form">
<textarea class="my-textarea" v-model="translating_text" placeholder="請輸入要翻譯的文字"
v-on:keydown.enter="my_translate"></textarea>
</form>
</div>
</template>
<script>
import $ from 'jquery'
export default {
name: 'translateForm',
data() {
return {
translating_text: "",
language: "en",
option_result: "中文 > 英文",
option_list: ["中文 > 英文", "中文 > 日文", "中文 > 韓文", "中文 > 法文", "中文 > 泰文", "中文 > 德文", "中文 > 阿拉伯文", "中文 > 俄文", "中文 > 義大利文", "中文 > 丹麥文"],
language_list: ["en", "jp", "kor", "fra", "th", "de", "ara", "ru", "it", "dan"]
}
},
methods: {
// 使用者點選【翻譯】，觸發自定義事件，將資料傳遞給父元件
my_translate: function () {
this.$emit("my_submit", this.translating_text, this.language)
event.preventDefault();
},
// 下使用jQuery庫來個翻譯選項加一些下拉的動畫
showList: function () {
if ($('.option-list').css('display') != 'none') {
$('.option-list').slideUp();
}
else {
$('.option-list').slideDown();
}
},
// 通過使用者選擇的翻譯模式，設定相應的資料
selectOption: function (index) {
$('.option-list').slideUp();
this.language = this.language_list[index];
this.option_result = this.option_list[index];
}
}
}
</script>
在 App.vue 元件接收到子元件傳遞過來的資料之後，開始請求百度翻譯API，進行翻譯。這裡因為是跨域請求資料，所以要使用jsonp，如果你不瞭解如何跨域請求資料，可以參考文章：Vue筆記——解決Vue請求No ‘Access-Control-Allow-Origin’ 錯誤
App.vue 元件主要的程式碼如下：
getText: function (text, lan) {
this.translateing_text = text;
this.language = lan;
// 初始化要傳遞給API的資料
var appid = '這裡填寫是你申請的APP ID';
var key = '這裡填寫是你申請的祕鑰';
var salt = (new Date).getTime();
var query = this.translateing_text;
var from = 'zh';
var to = this.language;
var str1 = appid + query + salt + key;
var sign = MD5(str1);
this.$http.jsonp("http://api.fanyi.baidu.com/api/trans/vip/translate?q=" + query + "&from=" + from + "&to=" + to + "&appid=" + appid + "&salt=" + salt + "&sign=" + sign, {}, {
headers: {},
emulateJSON: true
})
.then(function (response) {
this.translated_text = response.body.trans_result[0].dst;
console.log(this.translated_text);
})
}
通過請求翻譯API，可以獲得翻譯後的結果，接收到這個結果之後，將資料傳遞給另外一個子元件 translateResult 進行渲染輸出。
4.完成專案，打包上線
不熟悉Vue的同學心裡面可能會有這樣一個疑問，我使用Vue腳手架搭建的專案都是特別大的，而且每次執行都是使用npm run dev來開啟服務才能收使用。如果我完成一個專案，想把它傳到伺服器上面，要怎麼做呢？還要不要每次執行的時候都要使用npm run dev來開啟服務。
我們使用Vue腳手架搭建的專案是依賴於node.js的。所以我們在開發的時候開啟服務之後才能看得到我們的專案，但是如果我們完成了一個專案，就可以使用打包工具把我們的專案給打包成一個靜態檔案，放到我們的伺服器上，不用開啟任何服務，就可以直接訪問。
關於如何打包Vue專案使之上線，可以參考文章:vue.js專案打包上線
三、總結
以上只是對這個專案的這個專案的簡要概括，列出了主要的程式碼，如果大家對這個專案感興趣的話，可以直接檢視原始碼。，GitHub地址：https://github.com/Fengzhen8023/translate-online
原始碼在使用的時候，一定要提前申請你的百度翻譯API，將申請到的APP ID和祕鑰填寫到對應的位置，即可使用。