2020it邦铁人赛-30天手把手的Vue.js教学 Day28 - 关心时事! 做个简单的COVID-19追踪app吧!(上)

tags: Vue.js ItIron2020

前言

终於进到最终的三天了，坦白说做为一个教学的系列文，我是很想多示范几个微型专案做为教学，但我自己在篇幅的分配没有做得很好，明年参加时我会再特别注意的! 我们将利用剩下的三天打造一个简单的COVID-19 tracking dashboard。2020对於许多人来说都不是个好年，新冠肺炎打乱了很多计画，至今半年过去也不见好转的迹象，了解它的趋势我想是很重要的一环，那就自己做一个吧!

专案预览

这个非常简单的小专案，用我们之前教过的东西就可以打造的小玩意! 做出来的成品会如同以下的demo图片，会持续追踪最近一个月内美国境内的确诊、康复、使用呼吸器&死亡的人数。你也可以在这个连结玩玩看?

在画面的部分我用了一些套件让成品稍微不要这麽单调，其他的部分只要你之前的内容都有听懂，我想也不是什麽大问题的:D

专案建置

首先一样请你透过vue-cli打造一个专案，preset我们这次仍选择default即可

vue create vue create vue-covid19-tracking-demo

安装完成後，一样进入专案资料夹，但先不要急着启动服务器，我们还有些东西要安装

cd vue-covid19-tracking-demo

加入vuetify前端框架

接着我们要做一件新的事情~为了让之後可以专心在逻辑处理上，画面的部分这次我们要透过vuetify这个CSS框架来做一点协助，就像bootstrap、elementUI或是Bulma等框架一样，没什麽特别的! 请你透过以下的指令安装vuetify框架

vue add vuetify

安装完成後你应该会顺利看到终端机出现新的提示

我们不太需要额外的设定，这次也选择Default即可
它会需要一点时间安装，当结束後请你输入熟悉的启动指令

npm run serve

你会发现你在localhost:8080看到的画面已经不太一样了

透过npm/yarn安装套件

接下来的流程就简单多了，请你输入以下的指令安装这次我们要使用的套件

npm i chart.js vue-chartjs axios dayjs

如果你不想使用axios，想用之前在天气app用过的fetch自然也是没有问题的!

安装完成後我们先做个简单的测试，在这个专案中你看到了一些陌生的东西，像是v-app、v-main等，那些都是vuetify中的语意标签而已~不用太在意! 你目前只要知道所有的城市码都要包含在v-app内，这样就可以了!
我们先把不必要的内容删除，并利用axios看一下是否能正确请求资料。
请你把App.vue档案修改为以下

<template>
  <v-app>
    <v-main>
      <h1>COVID-19 Tracking Dashboard</h1>
    </v-main>
  </v-app>
</template>

<script>
import axios from 'axios'

export default {
  name: 'App',

  components: {},
  data() {
    return {}
  },
  async created() {
    let { data } = await axios.get(
      'https://api.covidtracking.com/v1/us/daily.json'
    )
    console.log(data)
  },
}
</script>

顺利的话你会看到这样的画面，记得打开你的devtool~!

我们确实取到了一大串的Array of Objects! 随便点开一个来看吧!

{
    "date": 20201010,
    "states": 56,
    "positive": 7680854,
    "negative": 101450947,
    "pending": 11223,
    "hospitalizedCurrently": 34611,
    "hospitalizedCumulative": 422059,
    "inIcuCurrently": 6681,
    "inIcuCumulative": 21512,
    "onVentilatorCurrently": 1668,
    "onVentilatorCumulative": 2451,
    "recovered": 3062983,
    "dateChecked": "2020-10-10T00:00:00Z",
    "death": 206133,
    "hospitalized": 422059,
    "totalTestResults": 114480836,
    "lastModified": "2020-10-10T00:00:00Z",
    "total": 0,
    "posNeg": 0,
    "deathIncrease": 663,
    "hospitalizedIncrease": 1472,
    "negativeIncrease": 953869,
    "positiveIncrease": 57206,
    "totalTestResultsIncrease": 1133178,
    "hash": "799adb52f30ce10e2966d55b40cfcd345135234d"
}

灵琅满目的资料，但我们之後要用到的只有以下几个

• date
• positive
• hospitalizedCurrently
• inIcuCurrently
• onVentilatorCurrently
• recovered
• death

最终我们会用这些资料做出六个折线图表!

快速打造一个简单的demo图表!

请你在src/components内新增一个LineChart.vue档案，并写入以下的内容

<script>
import { Line } from 'vue-chartjs'

export default {
  extends: Line,
  mounted() {
    const dates = [
      '2020/07/05',
      '2020/07/06',
      '2020/07/07',
      '2020/07/08',
      '2020/07/09',
      '2020/07/10',
    ]
    const totals = [50, 40, 71, 51, 25, 49]

    this.renderChart({
      labels: dates,
      datasets: [
        {
          label: 'demo',
          data: totals,
        },
      ],
    },
    {
      responsive: true,
      maintainAspectRatio: false,
    })
  },
}
</script>

接着再回到App.vue的部分引入该组件，并加在我们标题的下方

<template>
  <v-app>
    <v-main>
      <h1>COVID-19 Tracking Dashboard</h1>
      <LineChart /> //加在这里
    </v-main>
  </v-app>
</template>

<script>
import axios from 'axios'
import LineChart from './components/LineChart'

export default {
  name: 'App',
  components: {
    LineChart,
  },
  data() {
    return {}
  },
  async created() {
    let { data } = await axios.get(
      'https://api.covidtracking.com/v1/us/daily.json'
    )
    console.log(data)
  },
}
</script>

完成後储存你的变更，你应该会看到以下的画面!

一点也不好看，不过至少我们成功弄出个图表了!
在上方的LineChart示范中，有几个点需要特别注意

• 我们从vue-chartjs中继承Line的一些属性与方法，其中最重要的就是renderChart
• renderChart接受两个参数，其中一个是图表资料，另一个则是options选项
• 在图表资料的部分，我们需要两个阵列(日期&资料)去呈现一个图表，其中日期dates表示x轴，资料data表示y轴

以上的部分都可以在官方文件中找到，包含你可以传入的options、复数叠合的图表等，有兴趣的可以查看一下!
现在你知道要利用chart.js做出线图需要的资料型态，明天开始我们就会加入一些资料传递，让图表能真正呈现我们透过API取得的资料!

结语

我们今天完成了专案的基本建置，同时介绍了如何利用vue-cli安装前端框架、以及如何利用chart.js制作最最最基本的图表，剩下两天的时间我们会一口气完成这个简单的应用程序，希望过程中能让你有所收获! 那我们就明天见!

此文章同步发布於个人部落格，有兴趣的大大也可以来参观一下:D