`
sillycat
  • 浏览: 2551640 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

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

    博客分类:
  • UI
 
阅读更多
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-1.vue -->
      <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>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<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/
分享到:
评论

相关推荐

    Pro Vue.js 2(pdf英文原版-2018版)

    Explore Vue.js to take advantage of the capabilities of modern browsers and devices using the fastest-growing framework for building dynamic JavaScript applications. You will work with the power of ...

    axios-0.18.0.js

    使用Vue的axios之前需要导入axios-0.18.0.js,使用[removed][removed]语句导如。

    laravel-and-vue.js-spa-Recipe-Box, 带有 Laravel 5.4和 Vue.js 2配方框的单页应用程序.zip

    laravel-and-vue.js-spa-Recipe-Box, 带有 Laravel 5.4和 Vue.js 2配方框的单页应用程序 使用 Laravel 5.4和 Vue.js-2-- 配方框的单页面应用程序插件框架和库:Laravel 5.4Vue.js 2.2Vue路由器Axios插件提供程序:...

    html 引入 vue.js axios element-ui

    在开发Web应用时,我们...首先,Vue.js是一个轻量级的渐进式JavaScript框架,它允许开发者以声明式的方式编写代码,使得DOM操作变得简单易懂。在HTML中引入Vue.js,我们需要在`&lt;head&gt;`标签内添加如下代码: ```html ...

    Vue.js前端开发实战-源代码.zip

    Vue.js 是一款轻量级的前端JavaScript框架,由尤雨溪开发并维护,以其易学易用、高性能、灵活的组件系统以及强大的生态系统而受到广大开发者喜爱。本资源"Vue.js前端开发实战-源代码.zip"是针对Vue.js的学习资料,...

    vue-doughnut-chart-Vue.js的甜甜圈图组件。-Vue.js开发

    :doughnut:Vue.js的Vue甜甜圈图甜甜圈图组件,最初由Vue.js创建格雷格·威尔森(Greg Willson)在codepen演示中https://mazipan.github.io/vue-doughnut-chart导出默认{组件:{DoughnutChart}}道具道具名称类型...

    vue.js跟vue-resource.js

    Vue.js 是一款轻量级的前端JavaScript框架,由尤雨溪开发,旨在简化Web应用程序的构建过程。Vue的核心特性包括数据绑定、组件化、指令系统和虚拟DOM,它通过声明式编程方式使得开发者能更容易地处理视图层的逻辑。...

    vue.js&axios.js

    Vue.js和Axios.js是现代前端开发中的两个关键工具,它们在构建交互式Web应用程序时起着重要作用。Vue.js是一个轻量级的JavaScript框架,它以其简洁的API、高效的虚拟DOM和组件化结构而受到开发者喜爱。Axios则是一个...

    vue-orgchart库来创建组织架构图demo源码,支持导出png或pdf,支持平移拖动和缩放.zip

    vue-orgchart库来创建组织架构图demo源码,支持...2. vue-orgchart.min.js:vue-orgchart库的核心文件,用于生成组织架构图。 3. html2canvas.min.js:一个JavaScript库,用于将HTML转化为canvas,从而可以导出图像。

    Vue.js + Node.js-构建音乐播放器视频案例.zip

    Vue.js是一款轻量级的前端JavaScript框架,以其简洁的API、高效的虚拟DOM和组件化设计而广受开发者喜爱。而Node.js则是一个基于Chrome V8引擎的JavaScript运行环境,它允许我们在服务器端编写JavaScript代码,提供了...

    vue.js项目实战,vue.js项目实战pdf下载,JavaScript

    Vue.js 是一款轻量级的前端JavaScript框架,由尤雨溪开发,因其简单易学、高效灵活的特性,在Web开发领域迅速崛起。本资源聚焦于"Vue.js项目实战",旨在帮助开发者通过实际操作深入理解Vue.js的核心概念和技术,从而...

    axios.js和vue.js和vue-resource.js

    Vue.js 是一款轻量级的前端JavaScript框架,它以其易用性、灵活性和强大的功能而闻名。Vue的核心库专注于视图层,易于学习且与其他库或现有项目集成。它的设计思想使得开发过程变得简单,同时提供了构建单页应用...

    基于Vue+Vue-Router+Vuex+Element-ui+axios,参考小米商城,实现的电商项目。.zip

    Vue.js是一个流行的前端JavaScript框架,以其轻量级、组件化、易学习和高性能的特点深受开发者喜爱。在这个项目中,Vue.js作为核心框架,用于构建用户界面。 首先,Vue-Router是Vue.js官方的路由管理器,它允许我们...

    Vue的js文件vue-resource.js以及Axios.js

    Vue.js 是一个流行的前端JavaScript框架,它简化了Web应用程序的构建,通过声明式的数据绑定和组件化的方法,使开发者能够高效地创建可复用、可维护的用户界面。在提供的压缩包中,我们找到了三个核心文件:vue.js、...

    Chart.js 的 Vue.js 包装器.zip

    快速入门 • 文档 • Stack Overflow快速入门安装该库及其对等依赖项pnpm add vue-chartjs chart.js# oryarn add vue-chartjs chart.js# ornpm i vue-chartjs chart.js然后,导入并使用单个组件&lt;template&gt; ...

    axios.min.v0.17.1

    《Vue.js与Axios.min.v0.17.1在Web开发中的深度应用》 Vue.js,作为一款轻量级的前端JavaScript框架,以其简洁的API、高效的虚拟DOM以及强大的可扩展性,深受开发者喜爱。而axios.min.v0.17.1则是Vue.js生态中的...

    vue.js 2 web development projects (pdf书+代码)

    Vue.js 2 Web Development Projects 是一本专为前端开发者设计的指南,旨在通过实践项目帮助读者深入理解Vue.js 2框架的使用。这本书结合了理论知识和实际操作,以PDF格式提供,同时附带了配套的代码,使得学习过程...

    my-js里面包含axios-0.18.0.js和vue.js

    这个名为"my-js"的压缩包包含两个核心的JavaScript库:axios-0.18.0.js和vue.js,这两个库在现代Web开发中扮演着关键角色。 首先,让我们深入了解一下Vue.js。Vue.js(简称Vue)是由尤雨溪开发的一款轻量级的前端...

    前端项目-vue-chartjs.zip

    Vue.js和Chart.js是两个非常流行的JavaScript库,分别在前端开发和数据可视化领域有广泛的应用。Vue.js是一款轻量级的渐进式框架,而Chart.js则是一个简单易用的图表库,适合创建各种类型的图表,如柱状图、折线图、...

Global site tag (gtag.js) - Google Analytics