一个基于koa+react+redux中后台系统框架

#1

至今，已经被react蹂躏一月之久，在这一个月之内，我的脑海被填鸭式塞入各种思想、概念。现在终于小有成就，迫不及待与大家分享一下。

先奉上一个基于koa+react+redux中后台系统框架（欢迎fork与交流）：https://github.com/sxlfzhy/react-koa-demo
1、server端：koa+mongodb；客户端：react+react-router+redux+antd+fetch+webpack； 其他：karma
2、功能实现：session管理、接口权限管理、用户登录、前端路由
3、自认为牛逼的地方：全局变量管理、前后端完整封装、终于理解了redux思想（最后这个能算么？:sweat_smile:）

来吧，说说为什么要自己搭建一个完整框架，以及与react相关的难点吧！

公司需要一个活动管理平台，由于是我自己主动提的需求，所以时间并不是很紧迫。于是就在想何不自己完全通过前端的方式来搭建一个后台磨练一下，说干就干。
后端很容易搭建，基本各种后台系统套路都一样。我有java开发经验，并且原本用过express，所以很容易就搭建起来了。
前端技术选型时考虑了 angular｜vue｜react，选择react纯属脑袋一热（后来后悔很久），angular不敢说精通至少已经有几个项目的开发经验了，vue 思想上也更容易接受一些。
react本身并不负责，复杂的是与react相关的各种思想，尤以redux最难（但理解了之后就会发现非常好，将很多后端的经典思想引入到前端，如OOP，面向切面等）。

随着项目的完善，会持续更新的，欢迎各位高手前来踢场！:grin:

4 Likes
#2

楼主，构建成功后 我打开浏览器访问被拒绝，然后提示如下：

#3

0 info it worked if it ends with ok
1 verbose cli [ ‘C:\OtherSoftware\nodejs\node.exe’,
1 verbose cli ‘C:\Users\CINAC\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js’,
1 verbose cli ‘start’ ]
2 info using npm@3.8.8
3 info using node@v4.4.3
4 verbose run-script [ ‘prestart’, ‘start’, ‘poststart’ ]
5 info lifecycle koa-react@0.1.0~prestart: koa-react@0.1.0
6 silly lifecycle koa-react@0.1.0~prestart: no script for prestart, continuing
7 info lifecycle koa-react@0.1.0~start: koa-react@0.1.0
8 verbose lifecycle koa-react@0.1.0~start: unsafe-perm in lifecycle true
9 verbose lifecycle koa-react@0.1.0~start: PATH: C:\Users\CINAC\AppData\Roaming\npm\node_modules\npm\bin\node-gyp-bin;C:\Users\CINAC\workspace\React\react-koa-demo\node_modules.bin;C:\OtherSoftware\nodejs;C:\ProgramData\Oracle\Java\javapath;C:\Python27\Lib\site-packages\PyQt4;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Program Files (x86)\Intel\iCLS Client;C:\Program Files\Intel\iCLS Client;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0;C:\Program Files\Intel\Intel® Management Engine Components\DAL;C:\Program Files\Intel\Intel® Management Engine Components\IPT;C:\Program Files (x86)\Intel\Intel® Management Engine Components\DAL;C:\Program Files (x86)\Intel\Intel® Management Engine Components\IPT;C:\Python27;C:\Python27\Scripts;C:\OtherSoftware\lua;C:\MinGW\bin;C:\Program Files\Sublime Text 2;C:\Program Files (x86)\Java\jdk1.8.0_91\bin;C:\Program Files (x86)\Java\jdk1.8.0_91\jre\bin;D:\xampp\tomcat\lib;D:\xampp\tomcat\bin;C:\Users\CINAC\mytools;C:\Program Files\Git\bin;C:\Program Files (x86)\GtkSharp\2.12\bin;C:\MinGW\msys\1.0\bin;C:\OtherSoftware\Matlab2012\bin;C:\Microsoft Visual Studio 12.0\VC\bin\x86_amd64;C:\Users\CINAC\AppData\Roaming\npm\node_modules;C:\OtherSoftware\nodejs;C:\OtherSoftware\Lua5.2;C:\OtherSoftware\cocos2dx_3_10;C:\Users\CINAC\AppData\Local\Android\sdk\platform-tools;C:\OtherSoftware\nodejs\node_modules\npm\bin\node-gyp-bin;C:\Program Files (x86)\Windows Kits\8.1\Windows Performance Toolkit;C:\Program Files\Microsoft SQL Server\110\Tools\Binn;C:\OtherSoftware\Matlab2012\bin\win64;C:\Program Files (x86)\Android\android-sdk\platform-tools;C:\Program Files\MongoDB\Server\3.2\bin;C:\OtherSoftware\cocos2dx_3_10\templates;C:\OtherSoftware\cocos2dx_3_10\tools\cocos2d-console\bin;C:\Users\CINAC\AppData\Roaming\npm;C:\Program Files (x86)\Microsoft VS Code\bin
10 verbose lifecycle koa-react@0.1.0~start: CWD: C:\Users\CINAC\workspace\React\react-koa-demo
11 silly lifecycle koa-react@0.1.0~start: Args: [ ‘/d /s /c’,
11 silly lifecycle ‘pm2 start ./bin/www --name koa-react\n tail -f ~/.pm2/logs/koa-react*’ ]
12 silly lifecycle koa-react@0.1.0~start: Returned: code: 1 signal: null
13 info lifecycle koa-react@0.1.0~start: Failed to exec start script
14 verbose stack Error: koa-react@0.1.0 start: pm2 start ./bin/www --name koa-react 14 verbose stack tail -f ~/.pm2/logs/koa-react*
14 verbose stack Exit status 1
14 verbose stack at EventEmitter. (C:\Users\CINAC\AppData\Roaming\npm\node_modules\npm\lib\utils\lifecycle.js:244:16)
14 verbose stack at emitTwo (events.js:87:13)
14 verbose stack at EventEmitter.emit (events.js:172:7)
14 verbose stack at ChildProcess. (C:\Users\CINAC\AppData\Roaming\npm\node_modules\npm\lib\utils\spawn.js:24:14)
14 verbose stack at emitTwo (events.js:87:13)
14 verbose stack at ChildProcess.emit (events.js:172:7)
14 verbose stack at maybeClose (internal/child_process.js:827:16)
14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
15 verbose pkgid koa-react@0.1.0
16 verbose cwd C:\Users\CINAC\workspace\React\react-koa-demo
17 error Windows_NT 10.0.10586
18 error argv “C:\OtherSoftware\nodejs\node.exe” “C:\Users\CINAC\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js” “start”
19 error node v4.4.3
20 error npm v3.8.8
21 error code ELIFECYCLE
22 error koa-react@0.1.0 start: pm2 start ./bin/www --name koa-react 22 error tail -f ~/.pm2/logs/koa-react*
22 error Exit status 1
23 error Failed at the koa-react@0.1.0 start script ‘pm2 start ./bin/www --name koa-react
23 error tail -f ~/.pm2/logs/koa-react*’.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the koa-react package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error pm2 start ./bin/www --name koa-react
23 error tail -f ~/.pm2/logs/koa-react*
23 error You can get information on how to open an issue for this project with:
23 error npm bugs koa-react
23 error Or if that isn’t available, you can get their info via:
23 error npm owner ls koa-react
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

以上是log

#4

已解决。
运行 npm run start 之后
一定要 npm run dev

#5

用户名和密码是多少

#6

楼主 您这个登录user和密码是什么

#7

您好，数据库需要您自己在本地创建，然后修改config中的数据库配置，然后根据application/routes/User.js 中的save方法去创建数据才行

#8

同上边的回复，数据库需要您自己创建，然后修改地址

react怎样搭配redux和React_Router
#9

是的，这个项目前后端完全分离的，仅启动node无法访问

#10

@haoyi2015 @zyp 两位，项目已经更新，你们可以pull一下项目，目前注释了连接数据库的部分，保证你们可以正常进入，默认用户admin/admin，祝两位学习愉快！:+1:

#11

好的 ，谢谢

#12

你好，可以加个QQ吗，有些具体的问题想请教一下

#13

243926925 , 请备注

#14

页面加载和登陆时接口报错，请问可能是什么问题，3Q~

#15

npm start 并不能启动koa 服务器, 我自己是运行node ./bin/www 来启动

#16

npm start 替换成 node ./bin/www

#17

admin/admin貌似进不去