Skip to content

Fengzhen8023/translate-online

Repository files navigation

一、项目简介

学习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。大致的思路如下:

  1. 首先你要注册一个百度翻译开放平台的账号,然后申请开发者权限,获取一个APP ID和秘钥。

  1. 然后下载它的实例DEMO,百度翻译的API是需要给数据MD5加密的,所以在它的DEMO里面会有一个md5.js脚本文件,我们需要在组件中引入它对数据进行加密。如果你不知道如何在Vue组件中引入外部js脚本文件,可以参考文章:Vue笔记——在Vue项目中引入外部js文件
3.开始编写项目代码

上述准备工作做好之后,我们就可以进行编写我们的项目代码。

我这里使用到了两个子组件,其中一个子组件 translateForm 是用来接收用户输入的待翻译文字,以及用户选择的翻译模式。用户填写好这些信息之后,点击【翻译】,相关的数据就会传递到这个 translateForm 组件的父组件,也就是 App.vue 组件中。

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和秘钥填写到对应的位置,即可使用。

About

translate-online

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published