{"id":13908214,"url":"https://github.com/sessionboy/sinn","last_synced_at":"2025-10-27T20:31:11.169Z","repository":{"id":218439645,"uuid":"85485257","full_name":"sessionboy/sinn","owner":"sessionboy","description":"a blog based on of react,webpack3,dva,redux,material-ui,fetch,generator,markdown,nodejs,koa2,mongoose,docker,shell,and async/await  基于react+koa2技术栈的个人开源博客系统 ","archived":false,"fork":false,"pushed_at":"2018-12-09T14:46:26.000Z","size":19500,"stargazers_count":171,"open_issues_count":3,"forks_count":27,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-02-01T08:02:57.507Z","etag":null,"topics":["async-await","babel","blog","docker","dva","es6","fetch","generator","koa2","linux","markdown","material-ui","mongoose","nginx","nodejs","react","redux","shell","webpack3"],"latest_commit_sha":null,"homepage":"http://sinn.boyagirl.com","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/sessionboy.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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-03-19T15:06:44.000Z","updated_at":"2024-06-23T12:19:45.000Z","dependencies_parsed_at":null,"dependency_job_id":"9df2c8ea-36df-43c0-8352-2b2b36864fc2","html_url":"https://github.com/sessionboy/sinn","commit_stats":{"total_commits":35,"total_committers":3,"mean_commits":"11.666666666666666","dds":"0.37142857142857144","last_synced_commit":"230f273f63fa483c5d64eefe44a85cf89557e969"},"previous_names":["sessionboy/sinn"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sessionboy%2Fsinn","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sessionboy%2Fsinn/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sessionboy%2Fsinn/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sessionboy%2Fsinn/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sessionboy","download_url":"https://codeload.github.com/sessionboy/sinn/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238553046,"owners_count":19491367,"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":["async-await","babel","blog","docker","dva","es6","fetch","generator","koa2","linux","markdown","material-ui","mongoose","nginx","nodejs","react","redux","shell","webpack3"],"created_at":"2024-08-06T23:02:33.169Z","updated_at":"2025-10-27T20:31:05.743Z","avatar_url":"https://github.com/sessionboy.png","language":"JavaScript","funding_links":[],"categories":["HarmonyOS"],"sub_categories":["Windows Manager"],"readme":"## 简介\n   sinn是一个基于react+koa2+docker技术栈开发的，从零开始构建的个人开源项目。    \n   目标是打造一个小型社区，目前是一个雏形。\n   \n  测试demo: http://test.boyagirl.com   \n\n  测试体验账号—用户: sinn  密码：123456\n\n  已上线地址：http://sinn.boyagirl.com    \n\n ( 开源重点在于技术分享和交流，如果觉得可以，右上角点颗星星喔~ ) \n \n 也欢迎来我的社区蹦迪：[探知社区](https://www.tanzhi.club/)\n  \n## 技术选型\n* 前端:   \n```\nwebpack3, react ,react-router,  dva , material-ui, generator, markdown, fetch, es6, babel\n``` \n* 后端:\n```\nnodejs, koa2, mongoose, es6/7,  async/await,  Resful API\n```\n*  部署/服务器\n```\ndocker, nginx, linux, 阿里云ecs\n```\n* 云存储\n```\n 阿里云oss,  七牛云存储\n```       \n### 技术栈亮点  \n*  react前沿技术栈，组件化、高性能的工程化开发模式     \n\n*  koa2+mongodb，可快速构建 node 后端服务    \n\n*  使用 async/await 终极异步处理方案   \n\n*  前沿的docker容器化部署方案   \n\n*  dllPlugin和commonsChunkPlugin双重拆分，更快的构建速度和更小的体积   \n\n## 未来规划    \n\n*  在现有基础上，陆续推出更多的功能    \n\n*  尝试按功能模块拆分打包，做更精细的优化 \n\n*  开发react+node实现同构的 ssr 版本\n\n*  使用react+GraphQL+node技术栈，开发GraphQL版本     \n   \n*  如果时间充裕，推出React Native移动端版本(安卓+ios)   \n\n### 效果图如下:\n\u003cimg src=\"http://sinn.oss-cn-shenzhen.aliyuncs.com/images/58d7777bc1a5bd0001672cdashow2.jpg\" /\u003e\n\u003cimg src=\"http://sinn.oss-cn-shenzhen.aliyuncs.com/images/58d7777bc1a5bd0001672cdashow3.jpg\" /\u003e\n\u003cimg src=\"http://sinn.oss-cn-shenzhen.aliyuncs.com/images/58d7777bc1a5bd0001672cdashow1.jpg\" /\u003e\n## HOW TO USE?\n\n#### 一，后端, 需要首先安装和启动sinn-server\n\n* sinn-server地址：https://github.com/sessionboy/sinn-server\n\n* 后端跑起来后，需要登录管理后台，然后在分类管理中添加一级分类，二级分类\n\n* 可参考我的测试demo: http://servertest.boyagirl.com    \n  测试账户: sinn  密码：admin\n\n####  二，前端\n可以使用git，当然也可以直接download\n ```\ngit clone git@github.com:sessionboy/sinn.git\n```\n安装依赖\n```\n npm install 或者 yarn\n```\n或使用淘宝镜像（推荐）\n```\nnpm install --registry=https://registry.npm.taobao.org\n```\n#### 三，设置webpack代理 ，处理跨域问题（使用默认配置可忽略本项）\n- 本地开发\n 1, 通过设置proxy代理，可来避免跨域问题\n  2, webpack配置地址：/build/webpack.dev.js   ，如下:\n```\nproxy: {\n       '/api' : {\n       //  target: 'http://sinn.boyagirl.com:8080',\n         target: 'http://localhost:8080',\n         secure: false\n       },\n      }  \n```   \n* 线上代理\n可根据你的运行环境，使用nginx做接口转发, 配置可参考/nginx文件夹下的nginx配置 (略简单，可自行拓展)。也可以在后端设置cors来避免跨域问题。\n    \n#### 四，项目启动      \n* 开发环境    \n     \n```     \nnpm run dev  或者 yarn dev\n```   \n     \n* 正式环境 (打包构建)    \n     \n```   \nnpm start 或者 yarn start  \n```   \n```    \n\u003c!-- \n注意，由于使用了dllPlugin将react、react-dom等公共包抽离了出来(具体打包在build/dll目录下)，\n如果你的公共模块有升级，请执行yarn dll或npm run dll来构建新的公共包。\n被抽离的公共包有：react、react-dom、material-ui、dva。    \n--\u003e   \n```\n\n#### 五，如何开启redux调试？\n dva封装了redux-logger，可用于调试，默认不开启，当你想要使用时也很简单    \n\n 修改/src/index.js， 把24行的注释去掉即可\n```\nconst app = dva({\n  history:browserHistory,\n  //onAction: createLogger(),  // 去掉注释可开启redux调试\n  onError(e){\n     // dva提供的统一错误处理机制\n     // 由于在/src/utils/request做了统一处理，这里不再做处理\n  }\n});\n```\n\n#### 六，项目部署\n\n* 脚本化一键发布 ，使用rsync ，同步代码到远程服务器 .(mac和linux)      \n   \n```\n# 使用前，请根据你的服务器配置，修改脚本release.sh的配置 \nsh release.sh\n```\n\n* 如果你使用的是window，需安装[cwrsync](https://www.itefix.net/cwrsync)，命令执行同上 .      \n      \n* nginx部署       \n    \n  推荐使用nginx做前端部署，具体配置可参考/nginx文件夹下的相关配置(略简单，可自行拓展) .    \n      \n## 关于 webpack\n\n* 构建脚本:   webpack.config.js、 webpack.dll.config.js、/build/* \n\n* 使用dllPlugin和commonsChunkPlugin做双重拆分，构建速度快，支持热更新。\n\n* 后续考虑加入[tree-shaking](https://webpack.js.org/guides/tree-shaking/#components/sidebar/sidebar.jsx) 和 [prepack](https://prepack.io/)  \n* 后续尝试在现有基础上，按功能模块进行拆分打包，极致优化\n\n## 关于 dva 和 redux  \n#### 一，[dva](https://github.com/dvajs/dva/blob/master/README_zh-CN.md)是什么？为什么不使用[redux](http://cn.redux.js.org/index.html)？ \n     \n 也许很多人不知道dva。  \n[dva](https://github.com/dvajs/dva/blob/master/README_zh-CN.md)是蚂蚁金服开源的，基于 redux、redux-saga 和 react-router@2.x 的轻量级前端框架。另外蚂蚁金服还开源了可以说是目前为止综合性价比最高的react UI库——[ant design](https://github.com/ant-design/ant-design)    \n     \n简单来讲，[dva](https://github.com/dvajs/dva/blob/master/README_zh-CN.md)是对redux方案的集成与拓展，它基于[elm](http://elm-lang.org/)概念形成一套相对完善的，基于react+redux生态的前端架构方案。     \n     \n相比于原生的redux，dva更轻盈，架构更清晰，开发起来也非常简单高效，避免了使用redux和redux-saga时很多繁杂的操作 。\n              \n它并不需要你考虑原本使用redux时需要考虑的，如何更好地处理异步，如何组织reducer和action，如何实现统一请求和错误处理等等，这些原本较为复杂繁杂的工作，[dva](https://github.com/dvajs/dva/blob/master/README_zh-CN.md)已经帮你处理好了一切     \n    \n总的来讲，[dva](https://github.com/dvajs/dva/blob/master/README_zh-CN.md)是蚂蚁金服前端团队对react+redux实践已久的成果，是目前为止react+redux的最佳实践方案\n\n如果你使用redux方案，建议使用react+dva ，当然，你有必要理解redux的原理 。   \n\n## 关于material-ui的实践体验\n     \n* [material-ui](http://www.material-ui.com/)是国外开源的一个基于谷歌[material](https://material.google.com/)设计理念的优秀的react UI库。     \n    \n* 与它类似的还有后起之秀[react-toolbox](http://react-toolbox.com/)     \n     \n这两个都是非常精美的UI库,  对于视觉的把握度非常高，同时提供了很多常用的组件，组件的可用性也非常的合理。\n* 不足之处：    \n    \n  1，组件的性能相比[ant design](https://github.com/ant-design/ant-design) 等库逊色了不少，在移动端尤其糟糕。    \n  2，灵活性较差。   \n  3，主要输出UI层，很多逻辑层需要手动处理， 对于这点，[ant design](https://github.com/ant-design/ant-design)就显得更人性化一些。    \n 4，可用组件不够丰富，类似于form，pagination，upload，message(消息提示)等常用基础组件一概没有，于是不得不寻找其他开源的组件，或手动封装来处理这些问题，这样就造成了UI风格不统一。\n   \n总的来讲[material-ui](http://www.material-ui.com/)是一个优秀的UI库，但在用户体验和功能性上略有不足。\n    \n####  技术交流 \n 开源重点在于技术分享和交流。欢迎点赞与留言。\n \n      \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsessionboy%2Fsinn","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsessionboy%2Fsinn","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsessionboy%2Fsinn/lists"}