Vue.js 用computed 跟filter 做一個簡易搜尋功能 | vue search filter json
這個是2年前寫的一個Demo,最近在整理GitHub上的專案時翻了出來。忘記那時是看哪一個教學後寫成的,裡面有用到蠻實用的Vue功能,因此決定花點時間優化一下,並寫成這篇筆記文。Demo說明本筆記最後會完成的頁面如下:https://letswritetw.github.io/letswrite-vue-search/[1]Demo頁的功能很簡單,分成2部份:抓紐約時報中文網的RSS,並製作成列表在搜尋框的input輸入關鍵字時,列表會濾出關鍵字裡有的新聞標題頁面樣式的部份直接用Bulma[2]。JavaScriptframework用Vue.js[3]。抓RSS的XML,並轉成JSON抓RSS的XML比較簡單,就是AJAX的URL...
這個是 2 年前寫的一個 Demo,最近在整理 GitHub上 的專案時翻了出來。
忘記那時是看哪一個教學後寫成的,裡面有用到蠻實用的 Vue 功能,因此決定花點時間優化一下,並寫成這篇筆記文。
Demo 說明本筆記最後會完成的頁面如下:
https://letswritetw.github.io/letswrite-vue-search/[1]
Demo 頁的功能很簡單,分成 2 部份:
抓紐約時報中文網的 RSS,並製作成列表在搜尋框的 input 輸入關鍵字時,列表會濾出關鍵字裡有的新聞標題頁面樣式的部份直接用 Bulma[2]。
JavaScript framework 用 Vue.js[3]。
抓 RSS 的 XML,並轉成 JSON抓 RSS 的 XML 比較簡單,就是 AJAX 的 URL 用成 RSS 的網址就好,比方紐約時報中文網,正體 RSS 的網址如下:
https://cn.nytimes.com/rss/zh-hant/[4]
那在 POST 時就直接 POST 這個網址就行。
比較麻煩的,是回傳的資料是 XML 格式,要把它轉成 JSON 來使用。
August 這邊筆記 2 種方式,一種是簡單,一種是有點麻煩的。
RSS to JSON 線上工具直接用別人開發好的線上工具是最簡單的,但線上工具通常都要收費。
有一個蠻好用的線上工具「rss to json online converter[5]」,它可以直接幫你把 RSS 的網址,變成它們 API 轉譯成 JSON 後的網址,AJAX 後就可以直接得到 JSON。
這套線上工具有 Free / Basic / Pro 等三種版本,免費版的限一天一萬次以下的請求,一次請求最多可以拿到 25 個 Feeds(Sorry,不知道怎麼翻譯 Feeds 比較好懂)。
這邊筆記一下使用方式,首先,進到他們的官網後會看到以下介面:
rss to json online converter 官網在圖片中標紅框的部份,輸入 RSS 的網址,比方我們要把紐約時報中文網的...