昨天写的不是特别好，今天vue来写一遍，加了错误处理

vue－cli框架下，需要增加代理 

<template>
    <div class="transform">
        <h2>翻译页面</h2>
        <div class="clear">
            <el-button @click="clear" style="float: left" type="primary">清除</el-button>
        </div>


        <el-input type="textarea" v-model="transformOrigin"></el-input>
        <div style="width: 200px;display: inline-block;">
            <el-button @click="transformToEn" type="success">中文翻译英文</el-button>
            <el-button @click="transformToHK" type="success">中文翻译繁体字</el-button>
        </div>
        <el-input type="textarea" v-model="transformResult"></el-input>

    </div>

</template>


<script>

    import MD5 from '../../../static/js/md5'
    export default {
        name: "translate",
        data(){
            return{
                transformOrigin:'',
                transformResult:''
            }
        },
        methods:{
            clear(){
                this.transformOrigin = '';
            },
            isJson(){
                if(!this.transformOrigin) return false;
                var jsonObj = JSON.parse(this.transformOrigin);



                if(!(typeof jsonObj == 'object' && jsonObj )){

                    this.$message({
                        message: '请输入Json格式的内容',
                        type: 'warning'
                    });
                    return false;
                }
                return true;

            },
            transformToEn(){

                if(!this.isJson()){
                    return;
                }

                var jsonObj = JSON.parse(this.transformOrigin);



                var q='';
                var old = []; // 指的是原来结构中的key，都存到一个数组
                for(var attr in jsonObj) {
                    old.push(attr)
                    q=q+jsonObj[attr]+"\n" //把value拼成一个q
                }
               

                var appid = '';

－－自己申请哈

var key = '';

－－自己申请哈

var salt = (new Date).getTime(); var query =q.substr(0,q.length-1); var str1 = appid + query + salt +key; var sign = MD5(str1); var param={ q: query, appid: appid, salt: salt, from: 'zh', to: 'en', sign: sign } this.$http.get('/trans/vip/translate',param).then(res=>{ var transResult = res.trans_result; var result="{"; for(var item =0;item < old.length;item++){ var kk =" "+'"'+old[item]+'"'+":"+'"'+transResult[item].dst+'"'; if(item != (old.length -1)){ kk = kk+"," } result = result+"\n"+kk; } result = result+"\n"+"}"; this.transformResult = result; }) }, transformToHK(){ if(!this.isJson()){ return; } var jsonObj = JSON.parse(this.transformOrigin); var q=''; var old = []; // 指的是原来结构中的key，都存到一个数组 for(var attr in jsonObj) { old.push(attr) q=q+jsonObj[attr]+"\\" //把value拼成一个q } var appid = '';－－自己申请哈 var key = '';

－－自己申请哈

var salt = (new Date).getTime(); var query =q.substr(0,q.length-1); var str1 = appid + query + salt +key; var sign = MD5(str1); var param={ q: query, appid: appid, salt: salt, from: 'zh', to: 'cht', sign: sign } this.$http.get('/trans/vip/translate',param).then(res=>{ var transResult = res.trans_result[0].dst; transResult = transResult.replace(/\s+/g,""); transResult = transResult.split("\\"); var result="{"; for(var item =0;item < old.length;item++){ var kk =" "+'"'+old[item]+'"'+":"+'"'+transResult[item]+'"'; if(item != (old.length -1)){ kk = kk+"," } result = result+"\n"+kk; } result = result+"\n"+"}"; this.transformResult = result; }) } } }</script><style lang="less"> .transform{ padding: 40px; .el-textarea { height: 400px; display: inline-block; width: 40%; vertical-align: middle; font-size: 14px; } textarea{ height: 400px; } .el-button+.el-button { margin-top: 10px; margin-left: 0px; } .clear{ padding-left: 30px; overflow: hidden; padding-bottom: 10px; } }</style>