百度翻译接入API实现自己的翻译小页面（原生JS+Vue+elementui）

最新推荐文章于 2024-06-25 12:14:21 发布

浅易誓

最新推荐文章于 2024-06-25 12:14:21 发布

阅读量3.1k

点赞数 5

分类专栏：页面布局文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/qq_42114171/article/details/123105866

版权

本文档介绍如何通过Vue.js和ElementUI结合百度翻译API创建一个简单的翻译页面。首先需要注册百度翻译开发者账号获取appid和key。然后，引入Vue和ElementUI的CDN，并按照官方文档配置API调用。主要目的是复习Vue的JavaScript实现和ElementUI的使用。

摘要由CSDN通过智能技术生成

通过这个API实现翻译，主要是重温Vue在js中的写法，结合了elementui2.x版本的写法，（VUE和ElementUI都是cdn引入的，失效去官网下粘贴一份换了就行），就是练练手

前提需要在百度翻译页面注册个开发者账号获取appid和key，链接如下

百度翻译开放平台

官方的接口描述文档在这百度翻译开放接口文档

基础页面

翻译结果页

代码如下（注意替换自己的appid和appkey）

index.html

<!doctype html>

<head>
    <meta charset="utf-8" />
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
    <div id="app">
        <el-input style="color: #000; font-weight: 600; font-size: 20px;" type="textarea" :rows="5" v-model="textarea" placeholder="请输入需要翻译的内容"></el-input>
        <el-button style="margin: 20px 0;" type="primary" @click="goTranslate">翻译</el-button>
        <el-button style="margin: 20px 0;" type="primary" @click="reset">重置</el-button>
        <el-input style="color: #000; font-weight: 600; font-size: 20px;" readonly type="textarea" :rows="5" v-model="result" placeholder="翻译结果"></el-input>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="./md5.js"></script>
    <script type="text/javascript">
        new Vue({
   
            el: '#app',
            data: function () {
   
                return {
   
                    textarea: '',
                    result: ''
                }
            },
            mounted: function () {
   
                // this.translate()
            },
            methods: {
   
                //  百度翻译入口
                translate: function (query) {
   
                    var appid = ''(这里需要填写自己在百度翻译注册API获取的appid)
                    var key = ''(这里需要填写自己在百度翻译注册API获取的key)
                    var salt = (new Date).getTime()
                    var query = query
                    // 多个query可以用\n连接  如 query='apple\norange\nbanana\npear'
                    var from = 'auto'
                    var to = 'zh'
                    var str1 = appid + query + salt + key
                    var sign = MD5(str1)
                    $.ajax({
   
                        url: 'http://api.fanyi.baidu.com/api/trans/vip/translate',
                        type: 'get',
                        dataType: 'jsonp',
                        data: {
   
                            q: query,
                            appid: appid,
                            salt: salt,
                            from: from,
                            to: to,
                            sign: sign
                        },
                        success: (data) => {
   
                            this.result = data.trans_result[0].dst
                            
                        }
                    });
                },
                goTranslate : function() {
   
                    if (this.textarea.length === 0) return
                    this.translate(this.textarea)
                },
                reset: function (){
   
                    this.textarea = '',
                    this.result = ''
                }
            }
        })

    </script>
</body>

md5.js文件代码

var MD5 = function (string) {
   
  
    function RotateLeft(lValue, iShiftBits) {
   
        return (lValue<<iShiftBits) | (lValue>>>(32-iShiftBits));
    }
  
    function AddUnsigned(lX,lY) {
   
        var lX4,lY4,lX8,lY8,lResult;
        lX8 = (lX & 0x80000000);
        lY8 = (lY & 0x80000000);
        lX4 = (lX & 0x40000000);
        lY4 = (lY & 0x40000000);
        lResult = (lX & 0x3FFFFFFF)+(lY & 0x3FFFFFFF);
        if (lX4

最低0.47元/天解锁文章

浅易誓

关注

5
点赞
踩
11

收藏

觉得还不错? 一键收藏
2
评论
百度翻译接入API实现自己的翻译小页面（原生JS+Vue+elementui）

主要是重温Vue在js中的写法，结合了elementui2.x版本的写法，（VUE和ElementUI都是cdn引入的，失效去官网下粘贴一份换了就行），就是练练手
复制链接

扫一扫

专栏目录