透过六角学院的全马铁人的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' //全局引入routerimport {ClientTable, Event} from 'vue-tables-2'; //全局引入vue-tables-2套件import BootstrapVue from 'bootstrap-vue' //全局引入bootstrap-vue套件import axios from 'axios'; //全局引入axios套件//全局注册该套件Vue.use(ClientTable); //注册ClientTableVue.use(BootstrapVue) //注册BootstrapVueVue.prototype.$http = axios //注册axios//全局引入bootstrap.css、bootstrap-vue.cssimport '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上
有点累了
先来去看 「想见你 」了