昨天写的不是特别好，今天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: 40 px; . el-textarea { height: 400 px; display: inline-block; width: 40%; vertical-align: middle; font-size: 14 px; } textarea{ height: 400 px; } . el-button+. el-button { margin-top: 10 px; margin-left: 0 px; } . clear{ padding-left: 30 px; overflow: hidden; padding-bottom: 10 px; } } </ style >