[Vue] 查询系统(上)-w3HexSchool 鼠年全马铁人挑战

透过六角学院的全马铁人的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上http://img2.58codes.com/2024/emoticon10.gif

有点累了
先来去看 「想见你 」了 http://img2.58codes.com/2024/emoticon42.gifhttp://img2.58codes.com/2024/emoticon42.gif


下集


关于作者: 网站小编

码农网专注IT技术教程资源分享平台,学习资源下载网站,58码农网包含计算机技术、网站程序源码下载、编程技术论坛、互联网资源下载等产品服务,提供原创、优质、完整内容的专业码农交流分享平台。

热门文章