{"id":13671849,"url":"https://github.com/whevether/react-blog","last_synced_at":"2025-04-27T18:31:51.930Z","repository":{"id":165788392,"uuid":"88120849","full_name":"whevether/react-blog","owner":"whevether","description":"我用react 写的一个react 博客。真正意义的全家桶. 前后台分离。  后台能管理前台数据","archived":false,"fork":false,"pushed_at":"2017-04-13T03:37:29.000Z","size":6452,"stargazers_count":72,"open_issues_count":2,"forks_count":14,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-11-11T09:44:13.947Z","etag":null,"topics":["react","react-server-render"],"latest_commit_sha":null,"homepage":null,"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/whevether.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-04-13T03:23:42.000Z","updated_at":"2023-07-14T08:57:03.000Z","dependencies_parsed_at":"2024-01-14T17:05:08.705Z","dependency_job_id":"f6d90bcd-6349-4485-9fbe-bd5d402b6ff9","html_url":"https://github.com/whevether/react-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/whevether%2Freact-blog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whevether%2Freact-blog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whevether%2Freact-blog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whevether%2Freact-blog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/whevether","download_url":"https://codeload.github.com/whevether/react-blog/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251187335,"owners_count":21549620,"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":["react","react-server-render"],"created_at":"2024-08-02T09:01:20.247Z","updated_at":"2025-04-27T18:31:51.137Z","avatar_url":"https://github.com/whevether.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# react-blog\n这是一个使用react+redux完成的全家桶bolg 项目,服务端渲染; 后台框架使用node.js 的express 框架,数据库使用的是mongodb,大量使用es6 语法。\n和async await 语法;\n性能之类的我没去优化;\n另外由于我数据库是短板希望大家轻拍;\n有许多bug .由于这个项目后期不会再进行维护了。所以这些bug 我也不会去修复。有些地方样式我也没仔细去搞。组件复用和组件优化也没做; 本人现在在做个旅游项目，这个项目就给各位参考下吧。希望能对大家有点帮助。  \n其中有许多我踩过的坑. \n### 这个项目完全是基于react+react-router+redux做的。没有一点jq 代码。 因为本人实在不喜欢jq\n几个已知的bug\n1. 后台 只有首页能刷新。  其余页面刷新会报404错误; \n2. 图片上传会偶尔中断node.js   http 服务.但是数据和图片还是保存了和上传成功了。\n3. 有些插件内不能引入css 否为会报css 无法加载。  目前解决方案是在客户端入口 定位 #app 渲染那个文件import 就不会报错; \n## 安装\nnpm install 或yarn\n## 运行\nnpm start -s\n## 检查node 版本\nnpm run preinstall\n## 编译生产版本\nnpm run build\n## 测试 与监听测试\nnpm run test:watch  || npm run test\n## 检测代码规范 或监听检测代码规范\nnpm run lint || npm run lint:watch\n## 清理编译后的文件夹 和 删除编译的文件\nnpm run clean-dist || npm run remove-dist\n## 使用的技术栈 和依赖组件作用\n1. node.js 版本 6.X以上\n2. mongoose(mongodb 连接操作工具)\n3. express(Node.js 框架)\n4. react (版本15.4)\n5. redux(状态管理)\n6. webpack (打包工具 2.X 版本)\n7. draft-js (react 富文本依赖)\n7.1 immutable (数据不可变库),\n7.2 js-base (富文本组件依赖的解析图片)\n8. passport (node.js 密码验证)\n9. passport-local (密码验证策略)\n9.1 passport-jwt (令牌验证)\n9.2 jwt-simple (服务端发送令牌给客户端)\n10. webpack-dev-middleware(开发环境编译中间件)\n11. webpack-hot-middleware(热加载中间件)\n12. antd (一个阿里react ui库)\n13. axios (ajax 客户端请求库,作用类似jquer 的ajax)\n14. body-parser (body 解析中间件)\n15. lodash (工具函数包)\n16. classnames (一个管理“类”组件)\n17. pugjs (html 模板引擎)\n18. multer (上传文件中间件)\n19. react-dom (react 虚拟dom节点渲染)\n20. react-image (react 一个点击预览组件)\n21. react-photo-gallery (响应式图片管理组件)\n22. react-redux (连接react 和redux)\n23. react-router (react 路由)\n24. react-router-redux (redux 异步路由系统)\n25. redux-form (redux 表单组件。提供了验证。等等强大功能)\n26. redux-thunk (redux 异步组件)\n27. object-assign (es6 对象分配)\n28. synthetic-dom (富文本组件依赖)\n##  编译组件\n27. autoprefixer (识别css 头 如-webkit-)\n28. babel-cli (babel 命令行)\n29. babel-core (babel 核心)\n30. babel-eslint (babel 代码规范检测)\n31. babel-loader (babel 装载)\n32. babel-plugin-import (babel import 引入)\n33. babel-plugin-react-display-name (添加显示名字给react.cerateClass)\n34. babel-plugin-transform-react-constant-elements (添加转换 jsx 节点支持)\n35. babel-plugin-transform-react-remove-prop-types (添加转换 jsx 属性支持)\n36. babel-preset-es2015 (es6 转码支持)\n37. babel-preset-latest (预置 babelrc 里面支持最新的es5 es6 es7)\n38. babel-preset-react (预置 babelrc 里面支持 react)\n39. babel-preset-stage-1 (es7 语法候选版1)\n40. babel-register (对node.js 的require 勾子)\n41. chai (测试库)\n42. chalk (命令行颜色显示组件)\n43. compression (文件压缩工具)\n44. cross-env (跨平台命令行工具,  可以运行一些unix 命令)\n45. css-loader (css 装载器)\n46. enzyme (react 测试工具 可以模拟jqery dom 循环遍历)\n47. eslint (代码规范验证)\n48. eslint-plugin-import (代码引入规范验证)\n49. eslint-plugin-jsx-ally (代码 jsx 语法规范验证)\n50. eslint-plugin-react (react 规范验证)\n51. eslint-watch (验证监听)\n52. extract-text-webpack-plugin (将文本从包中提取到文件中。)\n53. file-loader (文件加载器)\n54. json-loader (json 加载器)\n55. mocha (测试工具)\n56. node-sass (支持编译sass)\n57. npm-run-all (运行所有npm 脚本)\n58. open (运行后代开浏览器)\n59. postcss-loader (支持scss 加载器)\n60. react-addons-test-utils (react 原生测试工具)\n61. react-hot-loader (react热加载工具)\n62. redux-immutable-state-invariant (检测突变的redux 状态。仅仅用于开发环境)\n63. rimraf (unix 命令行)\n64. sass-loader(sass 加载器)\n65. sinon (独立的测试框架)\n66. sinon-chai (测试工具)\n67. style-loader (样式加载器)\n68. url-loader (图片，字体加载器)\n######这个例子使用的是传统的mvc 结构   借鉴了很多别人的经验\n## 截图\n![Alt text](./screen/1.gif)\n![Alt text](./screen/2.gif)\n![Alt text](./screen/3.gif)\n![Alt text](./screen/4.gif)\n![Alt text](./screen/5.gif)\n![Alt text](./screen/6.gif)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwhevether%2Freact-blog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwhevether%2Freact-blog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwhevether%2Freact-blog/lists"}