透過六角學院的全馬鐵人的api，就做了一個簡單的查詢系統

點我看Demo

抱歉無法一直把heroku保持開啟，畢竟只有550小時的限制

只要超過30分鐘沒人進網站，heroku就會自動休眠，進網站後請靜待個20-30秒

功能介紹

• 關鍵字查詢(不分姓名、文章)
• 名字、文章、時間皆可排序
• 右上方Records可以選擇顯示筆數
• 支援手機板

前言

因為公司的關係
我一直以來都是用nuxt在開發專案
這次我想試著用vue cli看看
雖然兩者都有vue的基本特性
但在開發環境上(設定檔)還是不太一樣的的～
所以剛開始在撰寫這個查詢系統的時候
感覺又重頭學習vue cli一次了XD

回歸正題

這次的全馬鐵人賽，六角官方有釋出每位筆者的資訊，並且會半小時更新一次資訊。
我就利用了這個官方api，製作了查詢系統，方便大家可以隨時查詢自己資料是否有更新
或者
也可以查詢其他想要看的類型文章

直接進入Coding

Vue的建設環境我就不多作介紹了
我們直接從重點切入吧！

使用套件：

vue-tables-2
這是一款製作table的套件，並且結合了查詢及排序等強大的功能

bootstrap-vue
這是我們用來製作css的好工具，相信大家都不陌生吧！

axios
因為要串接api，這是必不可缺的套件呢！～

在你的終端機下以下這兩行指令
npm insatll vue-tables-2
npm install bootstrap-vue
npm install axios

之後在你的main.js檔中寫

main.js 程式入口檔案，是初始化vue例項並使用需要的外掛,載入各種公共元件

//全局引入套件
import Vue from 'vue'
import App from './App'
import router from './router' //全局引入router
import {ClientTable, Event} from 'vue-tables-2'; //全局引入vue-tables-2套件
import BootstrapVue  from 'bootstrap-vue'  //全局引入bootstrap-vue套件
import axios from 'axios'; //全局引入axios套件

//全局註冊該套件
Vue.use(ClientTable);  //註冊ClientTable
Vue.use(BootstrapVue) //註冊BootstrapVue
Vue.prototype.$http = axios //註冊axios

//全局引入bootstrap.css、bootstrap-vue.css
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

//el: #app意思就是會inject到html裡的<div id="app">
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

製作這個系統出乎我意料的久
寫code部分倒還好
搞最久的是架設環境跟最後佈署在heroku上

有點累了
先來去看 「想見你 」了

下集