使用 React + Koa 打造一個輕量級的部落格系統，呼叫語雀API介面實現

ZALE發表於2018-05-16
ReactAPI

yq-blog

使用 React 和 Koa 實現了一個部落格系統，該專案依賴於 語雀 提供的介面來實現。

演示地址: guozeling.cn/

專案地址: github.com/zaleGZL/yq-…

語雀開發者文件: yuque.com/yuque/devel…

安裝方法

  1. 在 語雀 建立知識庫，並設定許可權為公開

  2. 將該專案下載到本地

    # 下載專案至本地
git clone https://github.com/zaleGZL/yq-blog

cd yq-blog

# 安裝依賴包
yarn
複製程式碼

  3. 開啟 src 目錄下面的 constants.js 檔案並修改相應的值

    // 修改以下資訊

export default {
  TITLE: "ZALE'S BLOGS", // 頁面顯示的標題
  SUB_TITLE: 'Front end & Node.js', // 頁面顯示的子標題
  YUQUE_USER_NAME: 'guozeling', // 在語雀上的使用者名稱
  YUQUE_KNOWLEDGE_LIB: 'blog', // 在語雀上用來作為部落格的知識庫名稱
  GITHUB: 'https://github.com/zaleGZL' // 自己的 github 地址
}
複製程式碼

  4. 修改 public 目錄下面的 index.html，可以修改頁面的 title， 更換圖示等等

  5. 構建生產環境版本的程式碼

    yarn run build
複製程式碼

  6. 開啟 server 目錄下的 blogApiRouter 檔案並修改相應的值並設定 token

    // 語雀相關設定
// 請修改這裡的配置
const YUQUE_USER_NAME = 'guozeling' // 在語雀上的使用者名稱
const YUQUE_KNOWLEDGE_LIB = 'blog' // 在語雀上用來作為部落格的知識庫名稱
const TOKEN = '' // 在語雀的設定個人資料裡檢視 設定token可以使得每小時呼叫介面次數上限增加到5000
複製程式碼

  7. 本地執行

    node server/app.js
複製程式碼

  8. 開啟 http://127.0.0.1:4000/

  9. 接下來你可以把這個專案部署到你的伺服器上

如何使用 axios 在 Koa 上對 API 進行代理，並且對資料進行快取

// 由於介面呼叫數量有限制，所以使用快取
const blogListCache = {
  time: +new Date(),
  isValid: false,
  data: []
}
// 快取時間(單位為毫秒)
const CACHE_TIME = 30000

// 代理獲取部落格列表資訊
blogApiRouter.get('/bloglist', async ctx => {
  const now = +new Date()

  // 可以使用快取的資源
  if (
    now - blogListCache.time <= CACHE_TIME &&
    blogListCache.isValid === true
  ) {
    return (ctx.body = { data: blogListCache.data })
  }

  await axios
    .get(
      `https://yuque.com/api/v2/repos/${YUQUE_USER_NAME}/${YUQUE_KNOWLEDGE_LIB}/toc`,
      {
        headers: {
          'User-Agent': 'personalBlog',
          'X-Auth-Token': TOKEN
        }
      }
    )
    .then(response => {
      // 設定快取資訊
      blogListCache.time = +new Date()
      blogListCache.isValid = true
      blogListCache.data = response.data.data

      ctx.body = response.data
    })
    .catch(error => {
      console.log(error.message)

      ctx.response.status = 404
      ctx.response.body = {
        status: 'fail'
      }
    })
})
複製程式碼

相關文章