Vue.JS(2)Monitor Water Console - ChartJS and Axios

Vue.JS(2)Monitor Water Console - ChartJS and Axios
I just learned Vue.JS 10 minutes ago, haha, try to use this to build my Water Monitor Console with my Backend Service.
Check the Version for charts
>npm info vue-chartjs version
3.1.1

>npm info chart.js version
2.7.1

Add those to the package.json
"dependencies": {
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "vue-chartjs": "^3.1.1",
    "chart.js": "^2.7.1"
    },

>npm install

Find another very good example Project, we can take some references from there.
https://github.com/tithi021/CRUD-VueJs

Enable the IDE in Sublime Text 3 with this https://github.com/vuejs/vue-syntax-highlight

So finally, I set up 2 things. Demo the Charts Js with axios Restful Client.
Put a very simple CRUD without axios which makes me like vue.js. I heard from some friends in China. Actually, they use vue.js more and has more documents and samples on that.

Project is in here. monitor-water
all dependency here
"dependencies": {
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "vue-chartjs": "^3.1.1",
    "chart.js": "^2.7.1",
    "bootstrap-vue": "^2.0.0-rc.1",
    "jquery": "^3.3.1",
    "axios": "0.17.1"
},

main.js is the entree
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})

Here is the main App.vue
<template>
<div id="app">
    <router-view></router-view>
</div>
</template>

<script>
export default {
name: 'App'
}
</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;
}
</style>

You can add different router here in router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import 'bootstrap/dist/css/bootstrap.css'

import HelloWorld from '@/components/HelloWorld'
import ProductAdd from '@/components/ProductAdd'
import ProductList from '@/components/ProductList'
import NavBar from '@/components/NavBar'
import WaterRelease from '@/components/WaterRelease'

Vue.use(Router)
Vue.use(BootstrapVue)
Vue.component('NavBar', NavBar)

const EventBus = new Vue()
Object.defineProperties(Vue.prototype, {
$bus: {
    get: function () {
      return EventBus
    }
}
})

export default new Router({
routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/product_list',
      name: 'ProductList',
      component: ProductList
    },
    {
      path: '/product_add',
      name: 'ProductAdd',
      component: ProductAdd
    },
    {
      path: '/water_release',
      name: 'WaterRelease',
      component: WaterRelease
    }
]
})

Follow my friend in China’s guideline, I put all javascript in services and utils directories, but all template related in components.
WaterRelease.vue

<template>
<div class="container">
    <b-container fluid>
      
      <NavBar/>
      <LineChart :chart-data="datacollection"/>
      <button @click="fillData()">Fetch Data</button>
    </b-container>
</div>
</template>

<script>
import LineChart from '../utils/LineChart'
import {RESTfulClient} from '../utils/RESTFulClient'

export default {
components: {
    LineChart
},
data () {
    return {
      datacollection: { labels: [], datasets: [] },
      posts: [],
      errors: []
    }
},
mounted () {
    // this.fillData()
},
methods: {
    fillData () {
      let result = {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [
          {
            label: 'Data One',
            backgroundColor: '#FC2525',
            data: [40, 39, 10, 40, 39, 80, 40]
          }, {
            label: 'Data Two',
            backgroundColor: '#05CBE1',
            data: [60, 55, 32, 10, 2, 12, 53]
          }
        ]
      }
      RESTfulClient.get(`posts`)
        .then(response => {
          this.posts = response.data
          console.log(this.posts)
        })
        .catch(e => {
          this.errors.push(e)
        })

      this.datacollection = result
    }
}
}
</script>


<style scoped>
.container {
width: 80%;
}
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

Sample to handle all RESTful call in utils/RESTfulClient.js
import axios from 'axios'

export const RESTfulClient = axios.create({
baseURL: `http://jsonplaceholder.typicode.com/`,
headers: {
    Authorization: 'Bearer {token}'
}
})

All the ChartJS thing handled in utils/LineChart.js
import {Bar, mixins} from 'vue-chartjs'

const { reactiveProp } = mixins

export default {
extends: Bar,
mixins: [reactiveProp],
mounted () {
    this.renderChart(this.chartData, {responsive: true, maintainAspectRatio: false})
}
}

You can Find more ChartJS option here
http://www.chartjs.org/docs/latest/

You can find more Vue.js document here
https://cn.vuejs.org/

References:
https://github.com/apertureless/vue-chartjs
https://github.com/keepfool/vue-tutorials
http://sillycat.iteye.com/blog/2410515
https://hackernoon.com/creating-stunning-charts-with-vue-js-and-chart-js-28af584adc0a
https://github.com/tithi021/CRUD-VueJs

backend call
https://alligator.io/vuejs/rest-api-axios/
https://github.com/axios/axios

vue
http://www.cnblogs.com/stealth7/p/7112216.html
https://cn.vuejs.org/

Vue.JS(2)Monitor Water Console - ChartJS and Axios

猜你喜欢