Vue实现简单汇率转换器优化篇 | 8月更文挑战

前言

在上篇文章Vue实现简单汇率转换器中实现了在给定Map数据的条件下进行数据的查询，计算，展示等的操作。今天对这个小东西做了一些改进，数据通过访问接口获得，页面上增加了获取时间的显示，以及两个选择框的币种选中之后可进行互换的按钮。

一.axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 特点：

• 从浏览器中创建 XMLHttpRequests

• 从 node.js 创建 http请求

• 支持 Promise API

• 拦截请求和响应 （就是有interceptor）

• 转换请求数据和响应数据

• 取消请求

• 自动转换 JSON 数据

• 客户端支持防御 XSRF

二.数据源

2.1 URL及数据样式

2.2 汇率转换器所需

time_last_updated
rates[]

三.使用

3.1 安装及引入

npm install --save axios
//进行安装
 import axios from 'axios'    
//安装之后在要使用的页面组件中进行引入。   

3.2 代码逻辑

首先要在页面的输入框里获取当前输入的待转换数据；
然后需要通过axios.get(url)获取待转换的币种对应的汇率及当前时间；
之后就是接收这些数据并在页面上显示。

3.3 实际代码

在查询的按钮上绑定了一个@click="get"方法，在点击按钮的时候就发请求获取数据。
axios的定义及用法可以去看官方文档，这里只是这个小作业需要的一个方法。

get(){
        axios
            .get("https://api.exchangerate-api.com/v4/latest/"+ this.select1)
            .then((response)=>{
                var code=response.status;
                if (code == 200){//请求成功，可以根据不同的状态码返回值做出相应的动作
                this.r=response.data.rates[this.select2];//获取汇率
                this.result=this.v*this.r;//计算结果
                this.t=Date(response.data.time_last_updated);//时间
              }
            })
            .catch((error)=>{
              console.log(error);
            })
           }  
        },

四.优化

4.1 select

上篇中的想法是用id获取对象数组countryList里的对象的值，再通过这个值去获取Map里的相应值，今天就发现这么想复杂了。

<select id="fd-1-s" v-model="select1" @change="count">
    <option v-for="c in countryList" :key="c.id" :value="c.key">
        {{c.name}}
    </option>
</select>

像上述代码中一样，直接把select的值绑定到对象数组countryList的key也可以得到相应对象的各个属性值。

 count() {
     this.sn1 = this.countryList[this.select1].name.substring(6);//取对象数组countryList的相应对象的name属性值
     this.sn2 = this.countryList[this.select2].name.substring(6);//取汉字
     console.log(this.sn1,this.sn2)       
          },

这样就省去了再用一个变量进行连接转换的过程！
这里也得到一个经验，写代码之前先思考，也可以交流，会少走很多弯路的！

五.效果

5.1 初始页面

5.2 查询结果

5.3 币种互换

5.4 查询结果

六.代码

合理的方式应该是把页面写到组件里，在父组件里注入，本人还是个菜鸡，后续有时间再试着改进一下吧！

<template>
  <div id="app">
    <!-- <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" /> -->
    <div id="fd-f">
      <div id="app">
        <div id="fd-h">汇率查询转换器</div>
        <div id="fd-1">
          持有货币：
          <!--{{select}} -->
          <select id="fd-1-s" v-model="select1" @change="count">
            <option v-for="c in countryList" :key="c.id" :value="c.key">
              {{c.name}}
            </option>
          </select>
        </div>
        <!-- <div id="fd-1-2"> -->
          <button id="fd-1-2-b" @click="changeMoney">币种互换</button>
        <!-- </div> -->
        <div id="fd-2">
          目标货币：
          <select id="fd-2-s" v-model="select2" @change="count">
            <option v-for="c in countryList" :key="c.id" :value="c.key">
              {{c.name}}
            </option>
          </select>
        </div>
        <div id="fd-3">
          兑换金额：
          <input id="fd-3-i" type="text" v-model="v" />
          <input id="fd-3-b" type="button" @click="get()" value="查询计算" />
        </div>
        <hr id="fd-x" />
        <div id="fd-4">
          <div id="fd-4-w">{{sn1}}兑换{{sn2}}:</div>
          <div id="fd-4-m">
            <p id="fd-4-1">{{v}} {{select1}} = {{result}}{{select2}}</p>
            <hr id="fd-4-r" />
            <div id="fd-4-d" >
              <p>当前时间：{{t}} </p>
              <p>当前汇率：{{r}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import HelloWorld from "./components/HelloWorld.vue";
import axios from 'axios'

export default {
  name: "App",
  data(){
    return{
          select1: 'CNY', //countryList中的key
          select2: 'EUR',
          sn1: '人民币', //countryList中的name
          sn2: '欧元',
          v: '',//输入的数
          result: '',//计算的结果
          r: '',//当前汇率
          key: '',
          t:'',//当前时间
          countryList: [
            { id: '1', key: 'CNY', name: 'CNY - 人民币' },
            { id: '2', key: 'USD', name: 'USD - 美元' },
            { id: '3', key: 'EUR', name: 'EUR - 欧元' },
            { id: '4', key: 'GBP', name: 'GBP - 英镑' },
            { id: '5', key: 'JPY', name: 'JPY - 日元' },
            { id: '6', key: 'HKD', name: 'HKD - 港币' },
            { id: '7', key: 'AUD', name: 'AUD - 澳元' },
            { id: '8', key: 'CAD', name: 'CAD - 加元' },
          ],
        }
      },
        methods: {
        //币种互换绑定的方法
          changeMoney(){
            var s=this.select1;
            var sn=this.sn1;
  
            this.select1=this.select2;
            this.sn1=this.sn2;
          
            this.select2=s;
            this.sn2=sn;
            
            this.result=null;
            this.r=null;
            
          },
          //获取汉字字符串绑定的方法
          count() {
            this.sn1 = this.countryList[this.select1].name.substring(6);
            this.sn2 = this.countryList[this.select2].name.substring(6);//取汉字
            console.log(this.sn1,this.sn2);
            
          },
          //获取数据及处理数据所用方法
          get(){
            axios
            .get("https://api.exchangerate-api.com/v4/latest/"+ this.select1)
            .then((response)=>{
              var code=response.status;
              if (code == 200){//请求成功，可以根据不同的状态码返回值做出相应的动作
                        this.r=response.data.rates[this.select2];//获取汇率
                        this.result=this.v*this.r;//计算结果
                        this.t=Date(response.data.time_last_updated);//时间
              }
            })
            .catch((error)=>{
              console.log(error);
            })
           }
          
        },
};
</script>

<style>
      #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
        width: 600px;
        height: 500px;
        margin: auto;
        border: cornflowerblue 2px solid;
        border-radius: 8px;
      }
      #fd-h {
        width: 600px;
        height: 50px;
        font-size: 32px;
        background-color: cornflowerblue;
      }
      #fd-1 {
        width: 500px;
        height: 50px;
        margin: 10px auto;
        font-size: 20px;
      }
      #fd-1-s {
        height: 35px;
        width: 380px;
        border-radius: 8px;
      }
      /* #fd-1-2{
        width: 600px;
        height: 40px;
      } */
      #fd-1-2-b{
        background-color: cornflowerblue;
        /* width: 80px;
        height: 40px; */
        margin-left: 60px;
        margin-bottom: 15px;
        font-size: 16px;
        border-radius: 8px;
        border: none;
        float: left;
      }
      #fd-2 {
        clear: both;
        width: 500px;
        height: 50px;
        margin: 10px auto;
        font-size: 20px;
      }
      #fd-2-s {
        height: 35px;
        width: 380px;
        border-radius: 8px;
      }
      #fd-3 {
        width: 600px;
        height: 50px;
        margin: 10px auto;
        font-size: 20px;
      }
      #fd-3-i {
        height: 30px;
        width: 280px;
        border-radius: 8px;
        border: 1px solid;
      }
      #fd-3-b {
        width: 90px;
        height: 35px;
        background-color: cornflowerblue;
        font-size: 18px;
        border: none;
        border-radius: 8px;
      }
      #fd-x {
        border: none;
        border-top: 1px dashed blue;
        width: 480px;
      }
      #fd-4 {
        width: 600px;
        height: 80px;
      }
      #fd-4-w {
        color: cornflowerblue;
        font-size: 20px;
        font-weight: 400;
        line-height: 35px;
      }
      #fd-4-m {
        height: 140px;
        width: 590px;
        border: cornflowerblue 1px solid;
        border-radius: 10px;
        margin: 10px auto;
        text-align: center;
        font-size: 20px;
      }
      #fd-4-1 {
        line-height: 20px;
        text-align: center;
        font-size: 20px;
      }
      #fd-4-d {
        line-height: 10px;
        text-align: center;
        font-size: 18px;
        color: gray;
      }
</style>