Vue implement a simple currency converter optimization article | August more challenges
preface
In the previous article, Vue implements simple exchange rate converter to realize the operation of data query, calculation and display under the condition of given Map data. A few improvements have been made to this little thing today. Data is obtained through the access interface, the page displays the time of obtaining the data, and a button that allows the coins of the two boxes to be interchanged when selected.
A axios.
Axios is a Promise-based HTTP library that can be used in browsers and node.js. Features:
-
Create XMLHttpRequests from the browser
-
Create an HTTP request from Node.js
-
Supporting Promise API
-
Interceptor intercepts requests and responses
-
Transform request data and response data
-
Cancel the request
-
Automatically convert JSON data
-
The client supports XSRF defense
Ii. Data source
2.1 URL and data style
2.2 Exchange rate converter required
time_last_updated
rates[]
3.
3.1 Installation and Introduction
npm install --save axios
// Install
import axios from 'axios'
// After installation, import it in the page component to be used.
Copy the code3.2 Code Logic
The first step is to get the current input data to be converted in the input box of the page. Then you need to use Axios.get (URL) to get the exchange rate and the current time for the currency to be converted. The next step is to receive the data and display it on the page.
3.3 Actual Code
The query button is bound to an @click=”get” method that requests data when the button is clicked. See the official documentation for the definition and usage of Axios, but this is just one of the methods needed for this little job.
get(){
axios
.get("https://api.exchangerate-api.com/v4/latest/"+ this.select1)
.then((response) = >{
var code=response.status;
if (code == 200) {// If the request succeeds, action can be taken according to the return value of the status code
this.r=response.data.rates[this.select2];// Get the exchange rate
this.result=this.v*this.r;// Calculate the result
this.t=Date(response.data.time_last_updated);/ / time
}
})
.catch((error) = >{
console.log(error); })}},Copy the code4. Optimize
4.1 select
The idea in the last part was to use the ID to get the value of an object in the countryList array of objects, and then use that value to get the corresponding value in the 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>
Copy the codeAs in the above code, binding the select value directly to the key of the object array countryList also yields the individual property values of the corresponding object.
count() {
this.sn1 = this.countryList[this.select1].name.substring(6);// Take the name attribute value of the corresponding object in the countryList array
this.sn2 = this.countryList[this.select2].name.substring(6);/ / to take Chinese characters
console.log(this.sn1,this.sn2)
},
Copy the codeThis eliminates the need to use another variable to do the connection conversion! Here also get an experience, write code before thinking, can also communicate, will walk a lot of detours!
Effect of five.
5.1 Initial Page
5.2 Query Results
5.3 Currency exchange
5.4 Query Results
6. Code
The reasonable way is to write the page to the component, in the parent component injection, I am still a vegetable chicken, later have time to try to improve it!
<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">Exchange rate query converter</div>
<div id="fd-1">Currency held:<! --{{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">Currency swaps</button>
<! -- </div> -->
<div id="fd-2">Target currency:<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">Exchange amount:<input id="fd-3-i" type="text" v-model="v" />
<input id="fd-3-b" type="button" @click="get()" value="Query calculation" />
</div>
<hr id="fd-x" />
<div id="fd-4">
<div id="fd-4-w">{{sn1}} for {{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>Current time: {{t}}</p>
<p>Current exchange rate: {{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'./ / the key countryList
select2: 'EUR'.sn1: '人民币'./ / the name of countryList
sn2: 'the'.v: ' '.// The number of inputs
result: ' '.// The result of the calculation
r: ' '.// Current exchange rate
key: ' '.t:' '.// The current time
countryList: [{id: '1'.key: 'CNY'.name: 'CNY - RMB ' },
{ id: '2'.key: 'USD'.name: 'USD - USD ' },
{ id: '3'.key: 'EUR'.name: 'EUR - euro ' },
{ id: '4'.key: 'GBP'.name: 'GBP - Pound sterling ' },
{ id: '5'.key: 'JPY'.name: 'JPY - yen ' },
{ id: '6'.key: 'HKD'.name: 'HKD - Hong Kong dollars' },
{ id: '7'.key: 'AUD'.name: 'AUD - AUD ' },
{ id: '8'.key: 'CAD'.name: 'CAD - Canadian dollars'},]}},methods: {
// Currency swap binding method
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;
},
// Obtain the binding method of Chinese character string
count() {
this.sn1 = this.countryList[this.select1].name.substring(6);
this.sn2 = this.countryList[this.select2].name.substring(6);/ / to take Chinese characters
console.log(this.sn1,this.sn2);
},
// The method used to obtain and process data
get(){
axios
.get("https://api.exchangerate-api.com/v4/latest/"+ this.select1)
.then((response) = >{
var code=response.status;
if (code == 200) {// If the request succeeds, action can be taken according to the return value of the status code
this.r=response.data.rates[this.select2];// Get the exchange rate
this.result=this.v*this.r;// Calculate the result
this.t=Date(response.data.time_last_updated);/ / time
}
})
.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>
Copy the code