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

這個稍微麻煩一點,而且老實說 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。Computed + filter 執行搜尋功能。原始碼、Demo。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

Vue

Vue Transitions 製作簡單的 Carousel / Slider / 輪播功能

Vue

Vue.js 3 Composition API 基本學習筆記-1:Ref、Props、watch、生命週期

Firebase Google

Firebase Cloud Functions 基本使用筆記

Front-End

製作 RWD email 工具:MJML,如何使用及注意事項

Front-End

用 Microsoft Clarity 網站分析工具,觀察使用者行為

Vue

用 VuePress 製作說明文件頁面 – 2:config.js 基本設定

Google Maps

Google Maps API 學習筆記 – 2:在地圖上畫個日本結界

Front-End

postMessage:主頁、iframe 頁可互相傳值

Google Others

Google Material Design 表單標籤效果

Front-End

拿 Trello 當資料庫 建一個店家清單 – 上篇:Trello 基本使用

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 Augustus 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 Augustus 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。

訂閱
通知
guest
1 Comment
最舊
最新
Inline Feedbacks
看所有留言
abrrr
abrrr
3 月 之前

感恩讚嘆