{"id":13671731,"url":"https://github.com/wtfjun/chenxj-blog","last_synced_at":"2025-04-27T18:31:38.252Z","repository":{"id":143930446,"uuid":"96505698","full_name":"wtfjun/chenxj-blog","owner":"wtfjun","description":"一个使用react+redux+koa实现的开源的个人博客，欢迎star\u0026fork","archived":false,"fork":false,"pushed_at":"2017-07-24T03:51:02.000Z","size":39263,"stargazers_count":138,"open_issues_count":28,"forks_count":37,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-11-11T09:44:04.514Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wtfjun.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-07-07T06:18:47.000Z","updated_at":"2022-04-12T06:42:28.000Z","dependencies_parsed_at":null,"dependency_job_id":"4fa837e8-ec3f-4ef8-b600-0a7d389e689a","html_url":"https://github.com/wtfjun/chenxj-blog","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wtfjun%2Fchenxj-blog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wtfjun%2Fchenxj-blog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wtfjun%2Fchenxj-blog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wtfjun%2Fchenxj-blog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wtfjun","download_url":"https://codeload.github.com/wtfjun/chenxj-blog/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251187257,"owners_count":21549610,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-02T09:01:17.313Z","updated_at":"2025-04-27T18:31:37.357Z","avatar_url":"https://github.com/wtfjun.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"基于 ``koa`` 和 ``react`` 搭建的个人博客，风格仿照 [【ECMAScript 6 入门】](http://es6.ruanyifeng.com/)\n\n基于前后端分离的思想，后端提供接口，前端调用\n\n在线地址请点击这里： [在线地址](http://47.52.5.137:4011)\n\n\n开源代码请点击这里： [github地址](https://github.com/wtfjun/chenxj-blog) \n\n```bash\n$ node -v\nv8.0.13\n\n$ npm -v\n4.5.0\n```\n\n## 命令使用\n\n### 安装 \u0026\u0026 运行\n\n``` bash\n$ cd chenxj-blog\n$ npm install // src包安装\n\n$ cd server\n$ npm install // 后台包安装\n\n$ node run // 启动后台\n$ cd ../\n$ npm run dev // 启动前端\n```\n\n\n\n#### 命令\n\n``` bash\n// 开发\n$ npm run dev\n\n// 打包\n$ npm run build\n```\n\n## 技术栈\n\n前端：\n- react@15.3.1\n- react-router@3.0.5\n- redux@3.6.0\n- webpack@1.13.2\n- es6\n\n后台：\n- koa@2.0.0-alpha.8\n- mongoose@4.11.1\n- asyn/await\n\n\n## 浏览器兼容\n\n- Chrome\n- Firefox\n- Safari\n- IE10+\n\n## 简单介绍\n\n异步fetch结合action的使用：\n```\n\n// 获取所有文章id、title\nexport const getArticles = () =\u003e {\n  return dispatch =\u003e {\n    const url = `${CONFIG.server}/api/getArts`\n    return fetch(url, {\n      method: 'POST',\n      // 设置这个header，才能正确parse\n      headers: { 'Content-Type': 'application/json' },\n      mode: 'cors'\n    })\n      .then(response =\u003e response.json())\n      .then(data =\u003e {\n        console.log(data)\n        dispatch({\n          type: GET_ARTICLES,\n          articles: data.articles\n        })\n      })\n  }\n}\n```\n\n```\n// 获取所有文章action对应的reducer\ncase GET_ARTICLES:\n    return Object.assign({}, defaultIssuesState, {\n      isFetching: false,\n      articles: action.articles\n    })\n```\n\n异步dispatch（action）的处理\n```\ncomponentDidMount() {\n    const { dispatch } = this.props\n    NProgress.start()\n    dispatch(getArticles())\n      .then(() =\u003e {\n        const { _id } = this.props.articles[0]\n        dispatch(getArticleById(_id))\n          .then(() =\u003e {\n            NProgress.done()\n            this.setState({\n              article: this.props.article\n            })\n          })\n      })\n  }\n```\n\njsonwebtoken在koa的实现\n```\n// token 验证\n  router.post(\n    '/valid',\n    async(ctx, next) =\u003e {\n      const { token } = ctx.request.body\n      try {\n        const decoded = jwt.verify(token, 'secret')\n        // 过期\n        if (decoded.exp \u003c= Date.now()/1000 ) {\n          ctx.body = {\n            status: 0,\n            msg: '登录状态已过期，请重新登录'\n          }\n          return\n        }\n        if (decoded) {\n          // token is ok\n          ctx.body = {\n            status: 1,\n            msg: '登陆验证成功'\n          };\n          return;\n        }\n      } catch(e) {\n        if(e) {\n          ctx.body = {\n            status: 0,\n            msg: e.message\n          } \n        }\n      }  \n    }\n  )\n\n```\n\n让nodejs支持es6，注意：nodejs主持async／await的话要8.0以上\n```\nrequire('babel-core/register')\nrequire('babel-polyfill')\nrequire('./app')\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwtfjun%2Fchenxj-blog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwtfjun%2Fchenxj-blog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwtfjun%2Fchenxj-blog/lists"}