yq-blog

React and Koa are used to implement a blog system that relies on the interface provided by Language Finch.

Demo address: guozing.cn /

Project address: github.com/zaleGZL/yq-…

Language Sparrow developer documentation: yuque.com/yuque/devel…

Installation method

1. Create a knowledge base in the language and set permissions to public

2. Download the project locally

   #Download the project locally
   git clone https://github.com/zaleGZL/yq-blog
   
   cd yq-blog
   
   #Installing dependency packages
   yarn
   Copy the code

3. Open the constants.js file under the SRC directory and modify the corresponding values

   // Modify the following information
   
   export default {
     TITLE: "ZALE'S BLOGS".// The title of the page displayed
     SUB_TITLE: 'Front end & Node.js'.// The subtitle of the page display
     YUQUE_USER_NAME: 'guozeling'.// The user name on the cursor
     YUQUE_KNOWLEDGE_LIB: 'blog'.// The name of the knowledge base used on the blog
     GITHUB: 'https://github.com/zaleGZL' // His github address
   }
   Copy the code

4. Modify the index.html in the public directory. You can change the page title, change the icon, and so on

5. Build the production version of the code

   yarn run build
   Copy the code

6. Open the blogApiRouter file in the server directory and modify the corresponding values and set the token

   // Finches related Settings
   // Modify the configuration here
   const YUQUE_USER_NAME = 'guozeling' // The user name on the cursor
   const YUQUE_KNOWLEDGE_LIB = 'blog' // The name of the knowledge base used on the blog
   const TOKEN = ' ' // Check the Settings token in the Settings profile to increase the maximum number of interface calls per hour to 5000
   Copy the code

7. Run locally

   node server/app.js
   Copy the code

8. Open http://127.0.0.1:4000/

9. You can then deploy the project to your server

How do I use AXIOS to proxy the API on Koa and cache the data

// Cache is used because the number of interface calls is limited
const blogListCache = {
  time: +new Date(),
  isValid: false.data: []}// Cache time in milliseconds
const CACHE_TIME = 30000

// The agent gets the list of blogs
blogApiRouter.get('/bloglist'.async ctx => {
  const now = +new Date(a)// You can use cached resources
  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= > {
      // Set the cache information
      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'}})})Copy the code