使用 React 和 Koa 实现了一个博客系统, 该项目依赖于 语雀 https://yuque.com/ 提供的接口来实现.
演示地址: http://guozeling.cn/
项目地址: https://github.com/zaleGZL/yq-blog
语雀开发者文档: https://yuque.com/yuque/developer
安装方法
在 语雀 http://yuque.com/ 创建知识库, 并设置权限为公开
将该项目下载到本地
- # 下载项目至本地
- git clone https://github.com/zaleGZL/yq-blog
- cd yq-blog
- # 安装依赖包
- yarn
打开 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 地址
- }
修改 public 目录下面的 index.html, 可以修改页面的 title, 更换图标等等
构建生产环境版本的代码
yarn run build
打开 server 目录下的 blogApiRouter 文件并修改相应的值并设置 token
- // 语雀相关设置
- // 请修改这里的配置
- const YUQUE_USER_NAME = 'guozeling' // 在语雀上的用户名
- const YUQUE_KNOWLEDGE_LIB = 'blog' // 在语雀上用来作为博客的知识库名称
- const TOKEN = '' // 在语雀的设置个人资料里查看 设置 token 可以使得每小时调用接口次数上限增加到 5000
本地运行
node server/app.js
打开 http://127.0.0.1:4000/
接下来你可以把这个项目部署到你的服务器上
如何使用 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'
- }
- })
- })
来源: https://juejin.im/post/5afbdbabf265da0b9a6a23d1