vue前端调用有道API进行翻译

进入有道API  ，注册用户信息并拿到有道翻译的应用ID和应用密钥

将ID与秘钥放入代码中

vue代码

<template>
  <div>
    <div style="height: 300px; width: 100%;">
      <div style="background: white;">
        <p
          style="    font-family: 'Hiragino Sans GB';font-size: 20pt;background: white;margin-top: -0.5%;margin-bottom: 0;"
        >英译汉</p>
        <div class="text-area">
          <textarea
            class="textarea"
            placeholder="英文"
            v-model="q"
            style="background:rgb(238, 235, 235);box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)"
          ></textarea>
          <el-button type="primary" round @click="test()">翻译</el-button>
          <textarea
            class="textarea"
            placeholder="汉语翻译"
            v-model="translation[0]"
            style="background:rgb(238, 235, 235);box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)"
          ></textarea>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      // 翻译的使用
      q: "my name is xiaobin", //需要翻译的文本
      from: "en", //源语言
      to: "zh", //目标语言
      appKey: "288e5d024940ssd3ba", //应用 ID
      salt: 2, //随机数（自己随便写个数）
      secret_key: "UjGMEp5J1UnUWjH5ssIrkwtessIyHMEddY", //密钥
      Translation_information: [], //有道返回的翻译结果
      translation: []
    };
  },

  methods: {
    testHtml() {},
    //翻译
    test() {
      this.q = this.q;
      //  alert('请求成功！'+this.q)
      this.$axios
        .get(
          "/test/api?q=" +
            this.q +
            "&appKey=" +
            this.appKey +
            "&salt=" +
            this.salt +
            "&from=" +
            this.from +
            "&to=" +
            this.to +
            "&sign=" +
            this.md5(this.appKey + this.q + this.salt + this.secret_key)
        )
        .then(
          // 成功回调
          success => {
            console.log("请求成功！");
            this.translation = success.data.translation;
            // 请求成功后的数据
            console.log(success.data.translation[0]);
          },
          // 失败回调
          error => {
            console.log("请求失败！");
            // 请求失败原因
            console.log(error.message);
          }
        );
    },

    findAll() {}
  }
};
</script>

<style scoped>
/*文本域*/
.text-area {
  width: 100%;
  border-top: 0px solid rgb(19, 17, 17);
  border-bottom: 1px solid gainsboro;
}
.text-area textarea {
  width: 100%;
  margin: 0.75rem 0;
  border: 1px solid rgb(19, 17, 17);
  outline: 1px solid rgb(19, 17, 17);
  padding-left: 1.125rem;
  height: 6.5rem;
}

.text-area textarea::-webkit-input-placeholder {
  color: #9e9e9e;
}
.textarea {
  border: none;
  text-align: center;
  width: 200px;
  overflow: auto;
  word-break: break-all;
  font-size: 18pt;
  width: 100%;
}
</style>

　　由于跨域请求这个加入congig/index.js中

        '/test': {
          target: 'https://openapi.youdao.com',//接口的前缀
          ws:true,//代理websocked
          changeOrigin:true,//虚拟的站点需要更管origin
          pathRewrite:{
            '/test':''//重写路径
          }
        },

效果图