阿里云

如何使用百度翻译接口实现多语言网站

在网站开发过程中,有的需求可能是要求多语言开发,涉及多个国家的语言,那么怎么实现功能和需求呢?首先我们将网站内容拆分为两类,动态数据和静态描述,什么是动态数据呢?什么是静态描述呢?接下来我说下个人的见解。


百度翻译


一、动态数据


动态数据顾名思义就是依据用户或后台管理人员进行发布、修改、操作的,比如网站的名称、版权、菜单(栏目)及个人的资料等等。这些数据需要由后端进行查询处理,返回或传递给前端,由前端渲染页面或绑定数据。


二、静态描述


静态描述意为程序员在页面代码(模板)中写入的内容,比如个人中心栏目比较常见的修改资料功能,假设个人信息包含以下字段:姓名、年龄、电话、邮箱、住址等等,那么在修改内容的form表单中,我们会将上述几项全部写在页面代码中,而用户的信息将由后端返回。


三、开发模式


我们以thinkphp框架为例,此方式不关乎thinkphp版本,在3.2-5.1版本中均使用,我们将静态描述使用thinkphp内置的语言类“Lang”,关于此类的描述及基本使用不说了,直接看官方手册即可。动态数据由后端进行处理后返回至前端。后端对数据可使用缓存或使用分表模式,均为缓存+翻译+数据模式进行开发。缓存可使用redis翻译使用百度翻译接口;数据库依据项目需求设定即可。


四、百度翻译接口


百度翻译接口申请、认证、创建项目均不讲述,直接奉上代码;


1、控制器代码

/**
 * 百度翻译数据处理
 * @return \think\response\Json
 * @author 申霖
 * @time 2019/7/24 0024 下午 8:57
 */
public function baiDuTranslate()
{
    $from  = input('post.from');
    $to    = input('post.to');
    $query = input('post.content');
    if (!$query) {
        return json(['code' => 100, 'message' => '缺失必要条件', 'data' => '']);
    }
    define("CURL_TIMEOUT", 10);
    define("URL", "http://api.fanyi.baidu.com/api/trans/vip/translate");
    define("APP_ID", "2018022700012****"); //替换为您的APPID
    define("SEC_KEY", "raKiRGJBHSx6rWG****");//替换为您的密钥
    $args         = [
        'q'     => $query,
        'appid' => APP_ID,
        'salt'  => rand(10000, 99999),
        'from'  => $from,
        'to'    => $to,
    ];
    $args['sign'] = buildSign($query, APP_ID, $args['salt'], SEC_KEY);
    $ret          = callWebServer(URL, $args);
    $ret          = json_decode($ret, true);
    if (isset($ret['error_code'])) {
        $errorInfo = error($ret['error_code']);
        return json(['code' => $ret['error_code'], 'message' => $errorInfo, 'data' => '']);
    } else {
        return json(['code' => 200, 'message' => 'success', 'data' => $ret['trans_result'][0]['dst']]);
    }
}


2、公共函数代码

<?php
/**
 * Created by PhpStorm.
 * User: 申霖
 * Date: 2019/7/24 0024
 * Time: 下午 8:39
 */

//加密
function buildSign($query, $appID, $salt, $secKey)
{/*{{{*/
    $str = $appID . $query . $salt . $secKey;
    $ret = md5($str);
    return $ret;
}/*}}}*/

//发起网络请求
function callWebServer($url, $args = null, $method = "post",
 $testflag = 0, $timeout = CURL_TIMEOUT, $headers = array())
{/*{{{*/
    $ret = false;
    $i   = 0;
    while ($ret === false) {
        if ($i > 1)
            break;
        if ($i > 0) {
            sleep(1);
        }
        $ret = callOnce($url, $args, $method, false, $timeout, $headers);
        $i++;
    }
    return $ret;
}/*}}}*/

function callOnce($url, $args = null, $method = "post",
 $withCookie = false, $timeout = CURL_TIMEOUT, $headers = array())
{/*{{{*/
    $ch = curl_init();
    if ($method == "post") {
        $data = convert($args);
        curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
        curl_setopt($ch, CURLOPT_POST, 1);
    } else {
        $data = convert($args);
        if ($data) {
            if (stripos($url, "?") > 0) {
                $url .= "&$data";
            } else {
                $url .= "?$data";
            }
        }
    }
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_TIMEOUT, $timeout);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    if (!empty($headers)) {
        curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
    }
    if ($withCookie) {
        curl_setopt($ch, CURLOPT_COOKIEJAR, $_COOKIE);
    }
    $r = curl_exec($ch);
    curl_close($ch);
    return $r;
}/*}}}*/

function convert(&$args)
{/*{{{*/
    $data = '';
    if (is_array($args)) {
        foreach ($args as $key => $val) {
            if (is_array($val)) {
                foreach ($val as $k => $v) {
                    $data .= $key . '[' . $k . ']=' . rawurlencode($v) . '&';
                }
            } else {
                $data .= "$key=" . rawurlencode($val) . "&";
            }
        }
        return trim($data, "&");
    }
    return $args;
}/*}}}*/

/**
 * 接口错误反馈啊
 * @param mixed|string $code
 * @return mixed|void
 */
function error($code)
{
    $data = [
        '52000' => ['meaning' => '成功', 'solve' => ''],
        '52001' => ['meaning' => '请求超时', 'solve' => '重试'],
        '52002' => ['meaning' => '系统错误', 'solve' => '重试'],
        '52003' => ['meaning' => '未授权用户', 'solve' => '检查您的
         appid 是否正确,或者服务是否开通'],
        '54000' => ['meaning' => '必填参数为空', 'solve' => '检查是否少
        传参数'],
        '54001' => ['meaning' => '签名错误', 'solve' => '请检查您的签名
        生成方法'],
        '54003' => ['meaning' => '访问频率受限', 'solve' => '请降低您的
        调用频率'],
        '54004' => ['meaning' => '账户余额不足', 'solve' => '请前往管理
        控制台为账户充值'],
        '54005' => ['meaning' => '长query请求频繁', 'solve' => '请降低长
        query的发送频率,3s后再试'],
        '58000' => ['meaning' => '客户端IP非法', 'solve' => '检查个人资料
        里填写的 IP地址 是否正确可前往管理控制平台修改IP限制,IP可留空'],
        '58001' => ['meaning' => '译文语言方向不支持', 'solve' => '检查译
        文语言是否在语言列表里'],
        '58002' => ['meaning' => '服务当前已关闭', 'solve' => '请前往管理
        控制台开启服务'],
        '90107' => ['meaning' => '认证未通过或未生效', 'solve' => '请前往
        我的认证查看认证进度'],
    ];
    return $data[$code];
}


3、视图代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度翻译接口</title>
    <meta name="keywords" content="百度,翻译,接口">
    <meta name="description"
 content="在网站开发过程中,有的需求可能是要求多语言开发,涉及多个国家的语言,那么怎么实现功能和需求呢?首先我们将网站内容拆分为两类,动态数据和静态描述,什么是动态数据呢  ">
    <link rel="icon" href="https://www.shenlin.ink/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="/blog/css/layui.css">
    <style>
 .layui-form {
            padding-top: 30px;
 }

        .layui-input-block {
            margin-left: 0;
 }

        .layui-form-item .layui-input-inline {
            float: right;
 }

        .layui-textarea {
            height: 300px;
 }
    </style>
</head>
<body>
<div class="layui-container">
    <form class="layui-form">
        <div class="layui-form-item layui-form-text">
            <div class="layui-input-block">
                <textarea placeholder="请输入内容" name="content" required lay-verify="required"
 class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <select name="from" required lay-verify="required">
                        <option value="auto">请选择语言,默认为自动识别</option>
                        <option value="zh">中文</option>
                        <option value="en">英语</option>
                        <option value="yue">粤语</option>
                        <option value="wyw">文言文</option>
                        <option value="jp">日语</option>
                        <option value="kor">韩语</option>
                        <option value="fra">法语</option>
                        <option value="spa">西班牙语</option>
                        <option value="th">泰语</option>
                        <option value="ara">阿拉伯语</option>
                        <option value="ru">俄语</option>
                        <option value="pt">葡萄牙语</option>
                        <option value="de">德语</option>
                        <option value="it">意大利语</option>
                        <option value="el">希腊语</option>
                        <option value="nl">荷兰语</option>
                        <option value="pl">波兰语</option>
                        <option value="bul">保加利亚语</option>
                        <option value="est">爱沙尼亚语</option>
                        <option value="dan">丹麦语</option>
                        <option value="fin">芬兰语</option>
                        <option value="cs">捷克语</option>
                        <option value="rom">罗马尼亚语</option>
                        <option value="slo">斯洛文尼亚语</option>
                        <option value="swe">瑞典语</option>
                        <option value="hu">匈牙利语</option>
                        <option value="cht">繁体中文</option>
                        <option value="vie">越南语</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <select name="to" required lay-verify="required">
                        <option value="en">请选择语言,默认为英语</option>
                        <option value="zh">中文</option>
                        <option value="en">英语</option>
                        <option value="yue">粤语</option>
                        <option value="wyw">文言文</option>
                        <option value="jp">日语</option>
                        <option value="kor">韩语</option>
                        <option value="fra">法语</option>
                        <option value="spa">西班牙语</option>
                        <option value="th">泰语</option>
                        <option value="ara">阿拉伯语</option>
                        <option value="ru">俄语</option>
                        <option value="pt">葡萄牙语</option>
                        <option value="de">德语</option>
                        <option value="it">意大利语</option>
                        <option value="el">希腊语</option>
                        <option value="nl">荷兰语</option>
                        <option value="pl">波兰语</option>
                        <option value="bul">保加利亚语</option>
                        <option value="est">爱沙尼亚语</option>
                        <option value="dan">丹麦语</option>
                        <option value="fin">芬兰语</option>
                        <option value="cs">捷克语</option>
                        <option value="rom">罗马尼亚语</option>
                        <option value="slo">斯洛文尼亚语</option>
                        <option value="swe">瑞典语</option>
                        <option value="hu">匈牙利语</option>
                        <option value="cht">繁体中文</option>
                        <option value="vie">越南语</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<script src="/blog/jquery-2.1.4.min.js"></script>
<script src="/blog/layui.js"></script>
<script>
 layui.use(['layer', 'form'], function () {
        var form = layui.form, layer = layui.layer;
 form.on('submit(*)', function (data) {
            $.ajax({
                type: 'post',
 url: '/open/ai/baiDuTranslate.html',
 data: data.field,
 async: false,
 dataType: "json",
 success: function (res) {
                    if (res.code === 200) {
                        layer.msg(res.message, {icon: 1, time: 1000}, function () {
                            layer.open({
                                'title': '翻译结果',
 'content': "<textarea class='layui-textarea res-area'>" + res.data + "</textarea>"
 })
                        });
 } else {
                        layer.msg(res.data);
 }
                },
 error: function () {
                    layer.msg("接口错误");
 }
            });
 return false;
 });
 });
</script>
</body>
</html>


喜欢就点个赞吧