Vue.js 用computed跟filter做一個簡易搜尋功能

Vue.js 用computed跟filter做一個簡易搜尋功能

這個是2年前寫的一個Demo,最近在整理Github上的專案時翻了出來。

忘記那時是看哪一個教學後寫成的,裡面有用到蠻實用的Vue功能,因此決定花點時間優化一下,並寫成這篇筆記文。


Demo說明

本筆記最後會完成的頁面如下:

https://letswritetw.github.io/letswrite-vue-search/

放個廣告賺點養主機的$$,謝謝

Demo頁的功能很簡單,分成2部份:

  1. 抓紐約時報中文網的RSS,並製作成列表
  2. 在搜尋框的input輸入關鍵字時,列表會濾出關鍵字裡有的新聞標題

頁面樣式的部份直接用Bulma

JavaScript framework用Vue.js


抓RSS的XML,並轉成JSON

抓RSS的XML比較簡單,就是AJAX的Url用成RSS的網址就好,比方紐約時報中文網,正體RSS的網址如下:

https://cn.nytimes.com/rss/zh-hant/

那在POST時就直接POST這個網址就行。

比較麻煩的,是回傳的資料是XML格式,要把它轉成JSON來使用。

Augustus這邊筆記2種方式,一種是簡單,一種是有點麻煩的。

RSS to JSON 線上工具

直接用別人開發好的線上工具是最簡單的,但線上工具通常都要收費。

放個廣告賺點養主機的$$,謝謝

有一個蠻好用的線上工具「rss to json online converter」,它可以直接幫你把RSS的網址,變成它們API轉譯成JSON後的網址,AJAX後就可以直接得到JSON。

這套線上工具有Free / Basic / Pro 等三種版本,免費版的限一天一萬次以下的請求,一次請求最多可以拿到25個Feeds(sorry,不知道怎麼翻譯Feeds比較好懂)。

這邊筆記一下使用方式,首先,進到他們的官網後會看到以下介面:

rss to json online converter官網
rss to json online converter官網

在圖片中標紅框的部份,輸入RSS的網址,比方我們要把紐約時報中文網的RSS轉成JSON,那就把RSS的網址輸入進去,然後按下「Convert to JSON」:

輸入RSS網址,獲得API Url
輸入RSS網址,獲得API Url

會看見下面預覽框出現RSS轉成JSON後的樣子,還會有一行API call,那個網址就是AJAX的Url。

如果沒註冊帳號拿到Api key,回傳的feeds最多是10筆,想到免費版的25筆就要註冊,登入後API call的Url就會帶上Api key的參數,輸入網址那個input右下角的Advanced options點開後,就可以更改「Items count」了:

註冊會員,可以拿到Api key跟設定Items count
註冊會員,可以拿到Api key跟設定Items count

Google Apps Script寫一個XML to JSON的function

這個稍微麻煩一點,而且老實說Google Apps Script的文件沒全看完,完整的寫法是Google到別人的後拿來修改,參考的原始碼網址在這:Convert XML to JSON with Apps Script

這一個方法步驟如下:

  1. 在Google Drive新增一個Google Apps Script的檔案
  2. 檔案中輸入程式碼
  3. 發布,取得AJAX的Url

第2步輸入的程式碼如下:

關於GAS的操作可以參考這篇,這邊就不多寫:

Google Apps Script 基本使用:跨網域AJAX、接Firebase

發布完取得Url後,頁面上只要POST並整理取回來的資料即可,範例code如下:

整理完資料,最後就是用一個 v-for 把新聞列表塞進頁面裡就行。


Computed + filter執行搜尋功能

最後這段就是本篇筆記的重點了,首先看一下html上寫 v-for 的部份:

<a v-for="n in filterSearch" :href="n.url">{{ n.title }}</a>

v-for上的 filterSearch 是 vue 的 computed,而不是常用的 data,Augustus記得當時看教學看到這段就覺得「哇~原來可以這樣用啊」。

computed: {
  filterSearch() {
    return this.news.filter(searchResult => searchResult.title.match(this.searchWords));
  }
}

this.news 就是上一段中從RSS取得並整理過的JSON。

this.searchWords 就是搜尋的關鍵字。

這段的意思就是:回傳有出現關鍵字的新聞標題。

配合ES6的寫法,一行就可以搞定了,不得不說Vue跟ES6是偉大的發明。

原始碼、Demo

本篇的原始碼整理過放上Github了:

https://github.com/letswritetw/letswrite-vue-search

最後完成的Demo連結這邊再放一次:

https://letswritetw.github.io/letswrite-vue-search/


Summary
Vue.js 用computed跟filter做一個簡易搜尋功能
Article Name
Vue.js 用computed跟filter做一個簡易搜尋功能
Description
本篇大綱:Demo說明。抓RSS的XML,並轉成JSON。RSS to JSON 線上工具。Google Apps Script寫一個XML to JSON的function。Computed + filter執行搜尋功能。原始碼、Demo。抓RSS的XML比較簡單,比較麻煩的是要把XML轉成JSON來使用。
Augustus
Let's Write
Let's Write
Publisher Logo

留言