使用一行命令製做掘金面試文章榜單

月: 據說你此次分享 jq
我: 恩，是了
月：這有啥好分享的，如今你們都用 react/vue 了
我: ......
我: 給你官網連接 github.com/stedolan/jq
月: 原來是命令行下的 json 美化工具，好像也沒啥可分享的
我: ......
我: 能夠用它分析 nginx 的日誌，好比用 json 表示 nginx 的日誌
月: 線上的ELK它很差用嗎？仍是分佈式的，又有索引，還快，就連查詢語句都有自動補全
我: 好像有點道理...
我: 我還能夠用它作爬蟲！！！

謹以此篇文章講述 jq 的實際使用案例，若是能提升你使用命令行的樂趣那更再好不過了。關於 jq 的用法能夠參考我之前的文章: jq命令詳解及示例

• 原文地址: 使用 jq 與 sed 製做掘金面試文章榜單
• 系列文章: 我的服務器運維指南

預覽

使用如下命令，能夠直接獲取前端面試榜單

$ curl -s 'https://web-api.juejin.im/query' -H 'Content-Type: application/json' -H 'X-Agent: Juejin/Web' --data-binary '{"operationName":"","query":"","variables":{"tags":["55979fe6e4b08a686ce562fe"],"category":"5562b415e4b00c57d9b94ac8","first":100,"after":"","order":"HOTTEST"},"extensions":{"query":{"id":"653b587c5c7c8a00ddf67fc66f989d42"}}}' --compressed | \
 jq -c '.data.articleFeed.items.edges | .[].node | { likeCount, title, originalUrl } | select(.likeCount > 600) ' | jq -cs '. | sort_by(-.likeCount) | .[] | "+ 【👍 \(.likeCount)】[\(.title)](\(.originalUrl))"' | sed s/\"//g + 【👍 5059】[一個合格(優秀)的前端都應該閱讀這些文章](https://juejin.im/post/5d387f696fb9a07eeb13ea60) + 【👍 4695】[2018前端面試總結，看完弄懂，工資少說加3K | 掘金技術徵文](https://juejin.im/post/5b94d8965188255c5a0cdc02) + 【👍 4425】[中高級前端大廠面試祕籍，爲你保駕護航金三銀四，直通大廠(上)](https://juejin.im/post/5c64d15d6fb9a049d37f9c20) + 【👍 3013】[2018春招前端面試: 闖關記(精排精校) | 掘金技術徵文](https://juejin.im/post/5a998991f265da237f1dbdf9) + 【👍 2493】[前端面試考點多？看這些文章就夠了（2019年6月更新版）](https://juejin.im/post/5aae076d6fb9a028cc6100a9) 複製代碼

獲取掘金列表接口

先來看看 http 的 url: https://web-api.juejin.im/query，用的 POST

再看看 body:

{
  "operationName": "",
  "query": "",
  "variables": {
    "first": 20,
    "after": "1.0168277174789",
    "order": "POPULAR"
  },
  "extensions": {
    "query": {
      "id": "21207e9ddb1de777adeaca7a2fb38030"
    }
  }
}
複製代碼

最後再看看 http 的 response:

眼前一亮，多麼熟悉的數據結構！！!

這不是 graphql 嗎，我上個月(2019/10)還寫了一系列文章介紹它: 使用 graphql 構建 web 應用，一年前(2018)還用 graphql 寫了一套詩詞的先後端: shfshanyue/shici 與 shfshanyue/shici-server

怎麼看出來是 graphql 的呢？

• /query 這是統一的入口
• extensions.query.id 這是 APQ，爲了緩存 gql，減小傳輸體積，減短網絡時延，有利於緩存，固然也減小了安全性問題
• variables 這是 graphql variables
• data.items[].edges 這是 graphql 典型的分頁 (雖然我不太喜歡，嵌套數據太多...)

恩，好像跑偏了

總之，拿到了數據--關於前端面試的數據

$  curl -s 'https://web-api.juejin.im/query' -H 'Content-Type: application/json' -H 'X-Agent: Juejin/Web' --data-binary '{"operationName":"","query":"","variables":{"tags":["55979fe6e4b08a686ce562fe"],"category":"5562b415e4b00c57d9b94ac8","first":100,"after":"","order":"HOTTEST"},"extensions":{"query":{"id":"653b587c5c7c8a00ddf67fc66f989d42"}}}' --compressed
複製代碼

ETL

仍是 etl 這個詞高大上啊

先用 jq 取幾個數吧: 標題與點贊數。更多用法能夠參考我之前的文章: jq命令詳解及示例

爲了更容易看到 jq 的用法，把 jq 另起一行，其中

• -c: 一整行顯示
• .[]: json-array to jsonl
• {}: 相似於 lodash.pick

咱們此時根據命令獲取到全部高贊文章，但它此時是無序的

$ curl -s 'https://web-api.juejin.im/query' -H 'Content-Type: application/json' -H 'X-Agent: Juejin/Web' --data-binary '{"operationName":"","query":"","variables":{"tags":["55979fe6e4b08a686ce562fe"],"category":"5562b415e4b00c57d9b94ac8","first":100,"after":"","order":"HOTTEST"},"extensions":{"query":{"id":"653b587c5c7c8a00ddf67fc66f989d42"}}}' --compressed | \
  jq -c '.data.articleFeed.items.edges | .[].node | {title, likeCount}'

{"title":"中高級前端大廠面試祕籍，爲你保駕護航金三銀四，直通大廠(上)","likeCount":4423}
{"title":"2018前端面試總結，看完弄懂，工資少說加3K | 掘金技術徵文","likeCount":4690}
{"title":"一個合格(優秀)的前端都應該閱讀這些文章","likeCount":5052}
{"title":"前端面試考點多？看這些文章就夠了（2019年6月更新版）","likeCount":2492}
{"title":"2018春招前端面試: 闖關記(精排精校) | 掘金技術徵文","likeCount":3013}
複製代碼

數據篩選與排序

再來篩選下點贊數大於 600 的

select(.likeCount > 600)
複製代碼

再來倒排個序

jq  -s '. | sort_by(-.likeCount) | .[]'
複製代碼

搞定，此時榜單上全是點贊數大於600且排好序的

$ curl -s 'https://web-api.juejin.im/query' -H 'Content-Type: application/json' -H 'X-Agent: Juejin/Web' --data-binary '{"operationName":"","query":"","variables":{"tags":["55979fe6e4b08a686ce562fe"],"category":"5562b415e4b00c57d9b94ac8","first":100,"after":"","order":"HOTTEST"},"extensions":{"query":{"id":"653b587c5c7c8a00ddf67fc66f989d42"}}}' --compressed | \
 jq -c '.data.articleFeed.items.edges | .[].node | {title, likeCount, originalUrl } | select(.likeCount > 600) ' | jq -s '. | sort_by(-.likeCount) | .[]'

{
  "title": "一個合格(優秀)的前端都應該閱讀這些文章",
  "likeCount": 5052,
  "originalUrl": "https://juejin.im/post/5d387f696fb9a07eeb13ea60"
}
{
  "title": "2018前端面試總結，看完弄懂，工資少說加3K | 掘金技術徵文",
  "likeCount": 4690,
  "originalUrl": "https://juejin.im/post/5b94d8965188255c5a0cdc02"
}
{
  "title": "中高級前端大廠面試祕籍，爲你保駕護航金三銀四，直通大廠(上)",
  "likeCount": 4423,
  "originalUrl": "https://juejin.im/post/5c64d15d6fb9a049d37f9c20"
}
複製代碼

使用 sed 處理生成 markdown

咱們此時已經生成告終構化的數據，若是咱們使用 react 渲染數據的話，json 天然不錯。但咱們如今須要生成 markdown，因此再處理處理

先使用 jq 生成連接樣式

"+ 【👍 \(.likeCount)】[\(.title)](\(.originalUrl))"
複製代碼

在使用 sed 刪除所有雙引號，關於 sed，能夠參考個人文章: sed 命令詳解及示例

sed s/\"//g 複製代碼

此時，成功生成了 markdown 數據

$ curl -s 'https://web-api.juejin.im/query' -H 'Content-Type: application/json' -H 'X-Agent: Juejin/Web' --data-binary '{"operationName":"","query":"","variables":{"tags":["55979fe6e4b08a686ce562fe"],"category":"5562b415e4b00c57d9b94ac8","first":100,"after":"","order":"HOTTEST"},"extensions":{"query":{"id":"653b587c5c7c8a00ddf67fc66f989d42"}}}' --compressed | \
 jq -c '.data.articleFeed.items.edges | .[].node | { likeCount, title, originalUrl } | select(.likeCount > 600) ' | jq -cs '. | sort_by(-.likeCount) | .[] | "+ 【👍 \(.likeCount)】[\(.title)](\(.originalUrl))"' | sed s/\"//g + 【👍 5059】[一個合格(優秀)的前端都應該閱讀這些文章](https://juejin.im/post/5d387f696fb9a07eeb13ea60) + 【👍 4695】[2018前端面試總結，看完弄懂，工資少說加3K | 掘金技術徵文](https://juejin.im/post/5b94d8965188255c5a0cdc02) + 【👍 4425】[中高級前端大廠面試祕籍，爲你保駕護航金三銀四，直通大廠(上)](https://juejin.im/post/5c64d15d6fb9a049d37f9c20) + 【👍 3013】[2018春招前端面試: 闖關記(精排精校) | 掘金技術徵文](https://juejin.im/post/5a998991f265da237f1dbdf9) + 【👍 2493】[前端面試考點多？看這些文章就夠了（2019年6月更新版）](https://juejin.im/post/5aae076d6fb9a028cc6100a9) + 【👍 2359】[「中高級前端面試」JavaScript手寫代碼無敵祕籍](https://juejin.im/post/5c9c3989e51d454e3a3902b6) 複製代碼

---

我是山月，一個喜歡跑步與登山的程序員，我會按期分享全棧文章在我的公衆號中。若是你對全棧面試，前端工程化，graphql，devops，我的服務器運維以及微服務感興趣的話，能夠關注我