Skip to content

Commit 9ac66e3

Browse files
luventaluventa
committed
implement: Axios demo
1 parent dbb2157 commit 9ac66e3

File tree

6 files changed

+189
-12
lines changed

6 files changed

+189
-12
lines changed

‎client/app.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import Vue from 'vue'
2-
import Resource from 'vue-resource'
2+
import axios from 'axios'
33
import NProgress from 'vue-nprogress'
44
import { sync } from 'vuex-router-sync'
55
import App from './App.vue'
@@ -8,7 +8,8 @@ import store from './store'
88
import * as filters from './filters'
99
import { TOGGLE_SIDEBAR } from 'vuex-store/mutation-types'
1010

11-
Vue.use(Resource)
11+
Vue.prototype.$http = axios
12+
Vue.axios = axios
1213
Vue.use(NProgress)
1314

1415
// Enable devtools

‎client/store/modules/menu/index.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,14 @@ const state = {
1919
},
2020
component: lazyLoading('dashboard', true)
2121
},
22+
{
23+
name: 'Axios',
24+
path: '/axiosDemo',
25+
meta: {
26+
icon: 'fa-rocket'
27+
},
28+
component: lazyLoading('axios', true)
29+
},
2230
charts,
2331
uifeatures,
2432
components,

‎client/views/axios/index.vue‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
<template>
2+
<div>
3+
<div class="tile is-ancestor">
4+
<div class="tile is-parent is-8">
5+
<article class="tile is-child box">
6+
<p class="title control" :class="{'is-loading': isloading}">
7+
Price History of {{params.symbol}}
8+
<span class="subtitle help is-danger is-5">
9+
This demo only works under Development env
10+
</span>
11+
</p>
12+
<chart :type="'line'" :data="stockData" :options="options"></chart>
13+
</article>
14+
</div>
15+
<div class="tile is-parent is-4">
16+
<article class="tile is-child box">
17+
<div class="block">
18+
<p class="title is-5">Request Params</p>
19+
<a href="https://github.com/markitondemand/DataApis" class="link">Markit On Demand - Market Data APIs</a>
20+
</div>
21+
<div class="block">
22+
<div class="control is-horizontal">
23+
<div class="control-label">
24+
<label class="label">Symbol</label>
25+
</div>
26+
<div class="control">
27+
<div class="select is-fullwidth">
28+
<select v-model="params.symbol">
29+
<option v-for="s in symbols" :value="s">{{s}}</option>
30+
</select>
31+
</div>
32+
</div>
33+
</div>
34+
<div class="control is-horizontal">
35+
<div class="control-label">
36+
<label class="label">Days</label>
37+
</div>
38+
<div class="control is-fullwidth">
39+
<input class="input" min="0" max="720" type="number" v-model="params.numberOfDays">
40+
</div>
41+
</div>
42+
<div class="control is-horizontal">
43+
<div class="control-label">
44+
<label class="label">Period</label>
45+
</div>
46+
<div class="control">
47+
<div class="select is-fullwidth">
48+
<select v-model="params.dataPeriod">
49+
<option v-for="p in periods" :value="p">{{p}}</option>
50+
</select>
51+
</div>
52+
</div>
53+
</div>
54+
<div class="control is-horizontal">
55+
<div class="control-label">
56+
<label class="label"></label>
57+
</div>
58+
<div class="control">
59+
<button class="button is-primary" :class="{'is-loading': isloading}" @click="loadData">Refresh</button>
60+
</div>
61+
</div>
62+
</div>
63+
</article>
64+
</div>
65+
</div>
66+
</div>
67+
</template>
68+
69+
<script>
70+
import Chart from 'vue-bulma-chartjs'
71+
72+
const api = '/MODApis/Api/v2/InteractiveChart/json'
73+
74+
export default {
75+
components: {
76+
Chart
77+
},
78+
79+
data () {
80+
return {
81+
params: {
82+
symbol: 'AAPL',
83+
numberOfDays: 450,
84+
dataPeriod: 'Month'
85+
},
86+
symbols: ['AAPL', 'MSFT', 'JNJ', 'GOOG'],
87+
periods: ['Day', 'Week', 'Month', 'Quarter', 'Year'],
88+
data: [],
89+
labels: [],
90+
isloading: false,
91+
options: {
92+
legend: { display: false },
93+
animation: { duration: 0 },
94+
scales: {
95+
xAxes: [{
96+
type: 'time',
97+
time: {
98+
unit: 'month'
99+
}
100+
}]
101+
}
102+
}
103+
}
104+
},
105+
106+
computed: {
107+
stockData () {
108+
return {
109+
labels: this.labels,
110+
datasets: [{
111+
fill: false,
112+
lineTension: 0.25,
113+
data: this.data,
114+
label: 'Close price',
115+
pointBackgroundColor: '#1fc8db',
116+
pointBorderWidth: 1
117+
}]
118+
}
119+
}
120+
},
121+
122+
methods: {
123+
loadData () {
124+
this.isloading = true
125+
this.labels.length = 0
126+
this.data.length = 0
127+
this.$http({
128+
url: api,
129+
transformResponse: [(data) => {
130+
return JSON.parse(data.replace(/T00:00:00/g, ''))
131+
}],
132+
params: {
133+
parameters: {
134+
'Normalized': false,
135+
'NumberOfDays': parseInt(this.params.numberOfDays),
136+
'DataPeriod': this.params.dataPeriod,
137+
'Elements': [{'Symbol': this.params.symbol, 'Type': 'price', 'Params': ['c']}]
138+
}
139+
}
140+
}).then((response) => {
141+
let dates = response.data.Dates
142+
let price = response.data.Elements[0].DataSeries.close.values
143+
this.data.push(...price)
144+
this.labels.push(...dates)
145+
this.isloading = false
146+
}).catch((error) => {
147+
console.log(error)
148+
})
149+
}
150+
}
151+
}
152+
</script>
153+
154+
<style scoped>
155+
</style>

‎config/index.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,12 @@ module.exports = {
2424
autoOpenBrowser: true,
2525
assetsSubDirectory: 'assets',
2626
assetsPublicPath: '/',
27-
proxyTable: {},
27+
proxyTable: {
28+
'/MODApis': {
29+
target: 'http://dev.markitondemand.com',
30+
changeOrigin: true
31+
}
32+
},
2833
// CSS Sourcemaps off by default because relative paths are "buggy"
2934
// with this option, according to the CSS-Loader README
3035
// (https://github.com/webpack/css-loader#sourcemaps)

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@
3535
"dependencies": {
3636
"animate.css": "3.5.2",
3737
"animejs": "1.1.3",
38+
"axios": "^0.15.3",
3839
"bulma": "0.3.1",
3940
"font-awesome": "4.7.0",
4041
"mdi": "1.7.22",
@@ -64,9 +65,8 @@
6465
"vue-cleave": "1.1.1",
6566
"vue-handsontable": "github:vue-bulma/handsontable",
6667
"vue-lory": "0.0.4",
67-
"vue-nprogress": "0.1.4",
68+
"vue-nprogress": "0.1.5",
6869
"vue-peity": "0.5.0",
69-
"vue-resource": "1.0.3",
7070
"vue-router": "2.1.1",
7171
"vuex": "2.1.1",
7272
"vuex-router-sync": "4.0.2",

‎yarn.lock‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -294,6 +294,12 @@ aws4@^1.2.1:
294294
version "1.6.0"
295295
resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e"
296296

297+
axios@^0.15.3:
298+
version "0.15.3"
299+
resolved "https://registry.yarnpkg.com/axios/-/axios-0.15.3.tgz#2c9d638b2e191a08ea1d6cc988eadd6ba5bdc053"
300+
dependencies:
301+
follow-redirects "1.0.0"
302+
297303
babel-code-frame@^6.11.0, babel-code-frame@^6.16.0, babel-code-frame@^6.22.0:
298304
version "6.22.0"
299305
resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.22.0.tgz#027620bee567a88c32561574e7fd0801d33118e4"
@@ -2575,6 +2581,12 @@ flatten@^1.0.2:
25752581
version "1.0.2"
25762582
resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
25772583

2584+
follow-redirects@1.0.0:
2585+
version "1.0.0"
2586+
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.0.0.tgz#8e34298cbd2e176f254effec75a1c78cc849fd37"
2587+
dependencies:
2588+
debug "^2.2.0"
2589+
25782590
font-awesome@4.7.0:
25792591
version "4.7.0"
25802592
resolved "https://registry.yarnpkg.com/font-awesome/-/font-awesome-4.7.0.tgz#8fa8cf0411a1a31afd07b06d2902bb9fc815a133"
@@ -6953,20 +6965,16 @@ vue-lory@0.0.4:
69536965
dependencies:
69546966
lory.js "^2.2.1"
69556967

6956-
vue-nprogress@0.1.4:
6957-
version "0.1.4"
6958-
resolved "https://registry.yarnpkg.com/vue-nprogress/-/vue-nprogress-0.1.4.tgz#5f839ec9ad99cbc41b632999301e126c96a22e2c"
6968+
vue-nprogress@0.1.5:
6969+
version "0.1.5"
6970+
resolved "https://registry.yarnpkg.com/vue-nprogress/-/vue-nprogress-0.1.5.tgz#574b412f1034012daaf46299d5505d5812f406e6"
69596971
dependencies:
69606972
nprogress "0.2.0"
69616973

69626974
vue-peity@0.5.0:
69636975
version "0.5.0"
69646976
resolved "https://registry.yarnpkg.com/vue-peity/-/vue-peity-0.5.0.tgz#0729d04c6850c218cba4d6d7219bf1cfe5a3bfcb"
69656977

6966-
vue-resource@1.0.3:
6967-
version "1.0.3"
6968-
resolved "https://registry.yarnpkg.com/vue-resource/-/vue-resource-1.0.3.tgz#8d52d0d8a9ed5f2ae704c68d530c84ceaf97be14"
6969-
69706978
vue-router@2.1.1:
69716979
version "2.1.1"
69726980
resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-2.1.1.tgz#10c31bbdcb6da92bd3e0223fa12345e73018625a"

0 commit comments

Comments
 (0)