ant-design · lzw-jm · Dec 9, 2022
diff --git a/scaffolds/duxianwei-react-spa/index.yml b/scaffolds/duxianwei-react-spa/index.yml
@@ -8,4 +8,4 @@ tags:
   - spa
 coverPicture: 'https://ucarecdn.com/00321714-ae38-468c-855a-2f2228457ca0/'
 readme: "# 前言\n\n为什么选择react而不是vue也不是angular？\n\nng1.x老衲用过3个月，觉得整个框架组织结构更像是专门为系统指定的，要什么有什么，这样的话对于在线mobile app性能是个大的考验，还有一个不喜欢的点是他的写法更像是PHP哪种形式的绑定，比较总的后端思维在里面\n\nvue贫道也做过一个微信端的小项目，觉得还是比较容易上手的，1.x感觉跟ng1.x的思想上更加接近，但是对于开发app的话，没有weex也只能依赖于cordova之类的，觉得在性能上可能还是差了那么点意思，再有一个重要的点就是，主要是尤小溪个人的项目，虽然后面也有不少的人加入，但觉得精力还是太有限了。\n\n最后react可能是所有方案里面最合适最这种的一个技术栈了，不加全家桶的话，跟vue一样的轻量，移动端有比较成熟的react native。\n\nso，就是这个了\n\n\n## 技术栈\n\nreact + redux + react-router + webpack + ES6/7 + fetch + less + flex\n\n\n\n## 项目运行\n\n#### 注意：由于涉及大量的 ES6/7 等新属性，nodejs 必须是 6.0 以上版本 ，node 7 是先行版，有可能会出问题，建议使用 node 6 稳定版\n\n```\ngit clone https://github.com/duxianwei520/react.git \_\n\ncd react （进入当前的项目）\n\nnpm install  (安装依赖包)\n\nnpm start (运行本地开发环境)\nnpm run build (打包)\n\nnode mockserver.js (前端本地用node模拟接口进程)\n\n```\n\n\n## 说明\n\n>  喜欢的别忘记了可以star一下的噢！ \n\n>  开发环境 win10  Chrome 58.0.3029.110 \_nodejs 6.2.0\n\n>  如果npm install太慢导致有些npm依赖包下载失败 你可以看控制台的报错信息，再手动npm install 具体的开发包，推荐使用淘宝的注册源，直接运行，\n```\nnpm install -g cnpm --registry=https://registry.npm.taobao.org \n\n```\n如果这个方法还不行的话，可以到我的百度网盘上面去下载我已经压缩好的npm依赖包，地址是\n``` \nhttp://pan.baidu.com/s/1pLdPWgj\n\n```\n把下载到本地的node_modules.rar文件直接解压到跟app同级的当前文件夹，记住是当前文件夹的，然后不用npm install就可以直接npm start跑起来项目了。\n\n>  如有问题请直接在 Issues 中提，或者您发现问题并有非常好的解决方案，欢迎 PR \uD83D\uDC4D\n\n\n\n## 功能一览\n- [√] 项目按路由模块加载\n- [√] 登录，以及登录权限控制\n- [√] 退出\n- [√] 欢迎主页\n- [√] 左侧菜单，正常moni切换\n- [√] redux完整范例\n- [√] nodejs代理数据完全示例\n- [√] 页面高度flex自适应\n\n\n\n\n## 总结\n\n1、这整个技术栈是我们公司前端部门在用的，写熟悉了之后，用来做后台管理系统类的实在是很方便，大家都表示再也不要用jQuery来做这样子的系统了\n\n2、目前来说，不足的地方是在于没有很好的区分dev环境跟pro环境，这个后面弄好了再补充上来；mock数据现在还不是那么的方便，需要自己一个个的添加api的json文件\n\n\n\n\n## 部分截图\n\n\n### 登录页\n\n<img src=\"https://github.com/duxianwei520/react/blob/master/screenshots/login.png\" width=\"704\" height=\"561\"/> \n\n\n### 欢迎页\n\n<img src=\"https://github.com/duxianwei520/react/blob/master/screenshots/welcome.png\" width=\"1010\" height=\"566\"/>\n\n\n\n### 列表页\n\n<img src=\"https://github.com/duxianwei520/react/blob/master/screenshots/list.png\" width=\"1002\" height=\"582\"/>\n\n### 请求接口\n\n<img src=\"https://github.com/duxianwei520/react/blob/master/screenshots/requestData.png\" width=\"885\" height=\"590\"/>\n\n\n### 接口按返回\n\n<img src=\"https://github.com/duxianwei520/react/blob/master/screenshots/receiveData.png\" width=\"997\" height=\"586\"/>\n\n\n\n\n## 项目结构\n\n```\n.\n├─.babelrc                            // babel的配置\n├─.config.json                        // 如果使用了ip代理，那么配置文件在这里\n├─.eslintcache                        // eslint的缓存\n├─.eslintignore\t                      // eslint设置忽略的文件\n├─.eslintrc.json                      // eslint的配置文件\n├─.gitignore                          // git忽略上传的文件\n├─mockserver.js                       // node本地转发json的执行文件\n├─package.json                        // npm命令包\n├─proxy.js                            // 设置代理的js,现在基本不用\n├─readme.md                           // 项目介绍\n├─webpack-test.config.js              // webpack测试的配置文件，目前还没做\n├─webpack.config.js                   // 目前项目webpack的配置文件\n├─_config.yml \n├─_gitattributes\n├─test\n|  └setup-test-env.js\n├─screenshots                         // 项目截图\n|      ├─list.png\n|      ├─login.png\n|      ├─receiveData.png\n|      ├─requestData.png\n|      └welcome.png\n├─mockapi                             // 前端静态json数据存放的文件夹\n|    └data.json\n├─app                                 // 页面主文件\n|  ├─client.js\n|  ├─history.js\n|  ├─index.html                       // 入口html文件，配置静态菜单等全局常见变量\n|  ├─routes.js                        // 路由配置\n|  ├─utils                            // 公用的文件\n|  |   ├─ajax.js                      // 发送异步获取数据的配置\n|  |   ├─config.js                    // 常用的配置\n|  |   └index.js                      // 发送异步数据前的准备工作\n|  ├─style                            // 样式库\n|  |   ├─base.less                    // 全局通用的样式\n|  |   └theme.less                    // 存放变量的less\n|  ├─store                            // redux的store的配置\n|  |   └configureStore.js\n|  ├─reducers                         // reduce的配置\n|  |    ├─common.js\n|  |    ├─house.js\n|  |    ├─index.js\n|  |    └tabList.js\n|  ├─pages                            // 项目绝大部分业务文件\n|  |   ├─welcome.js\n|  |   ├─test\n|  |   |  ├─index.js\n|  |   |  ├─sub.js\n|  |   |  └third.js\n|  |   ├─house\n|  |   |   ├─houseManage.js\n|  |   |   └index.js\n|  ├─middleware                       \n|  |     ├─index.js\n|  |     ├─logger.js\n|  |     └router.js\n|  ├─images                           // 图片文件夹\n|  |   ├─default.png\n|  |   ├─leftBg.jpg\n|  |   └navcontrol.png\n|  ├─iconfont\n|  |    ├─iconfont.eot\n|  |    ├─iconfont.svg\n|  |    ├─iconfont.ttf\n|  |    └iconfont.woff\n|  ├─containers                       // 全局的框架文件 \n|  |     ├─App\n|  |     |  ├─extra.js\n|  |     |  ├─footer.js\n|  |     |  ├─header.js\n|  |     |  ├─index.js\n|  |     |  ├─login.js\n|  |     |  ├─rightAside.js\n|  |     |  ├─tabList.js\n|  |     |  ├─leftNav\n|  |     |  |    └index.js\n|  ├─constants\n|  |     ├─actionTypes.js\n|  |     └index.js\n|  ├─components                        // 公用的组件库 \n|  |     ├─index.less\n|  |     ├─searchTable\n|  |     |      └index.js\n|  |     ├─searchForm\n|  |     |     └index.js\n|  |     ├─searchChosen\n|  |     |      └index.js\n|  |     ├─multiSelect\n|  |     |      └index.js\n|  ├─api                              // 整个项目API的url配置\n|  |  ├─common.js\n|  |  ├─house.js\n|  |  └index.js\n|  ├─actions                          // 整个项目的actions配置\n|  |    ├─common.js\n|  |    ├─house.js\n|  |    └tabList.js\n\n\n```\n\n\n## License\n\n[GPL](https://github.com/duxianwei520/react/blob/master/COPYING)\n"
-deployedAt: 2017-06-22T13:59:06.877Z
+deployedAt: 2022-12-09T09:20:05.290Z