mk-js，一套基于react、nodejs的全栈框架

前言

去年年初接触的react，16年7月份在github开源了一套针对react、redux探索的项目，近期和伙伴们一起重构了这个项目，等待大伙拍砖。。。

框架介绍

mk框架 = monkey king框架 = 齐天大圣框架

基础技术栈：react、redux、immutable、antd、webpack、nodejs、hapi、sequelize、node-zookeeper-dubb等

框架核心思想：js全栈、应用化

介绍网址

介绍网址:https://ziaochina.github.io/mk-docs

介绍网站源码:https://github.com/ziaochina/mk-docs

DEMO网址:https://ziaochina.github.io/mk-demo(用户名:13334445556,密码:1)

DEMO网站源码:https://github.com/ziaochina/mk-demo

特点

将网站分成多个独立app，每个app开发模式完全一致，并且可以克隆npmjs发布模板app

将后台服务分成多个独立service, 每个servie开发模式完全一致， 并且可以克隆npmjs发布的模板service

开发者自己做的app，service可以发布到npmjs开源给其他开发者使用，成为一个生态化的框架

mk框架使用步骤

步骤一、使用mk命令建立网站

$ npm i -g mk-tools 　　　　　　　　　　    //安装mk
$ mk website my-demo && cd my-demo 　　  //创建空网站
$ mk clone mk-app-root apps/ 　　　　　　 //克隆root应用
$ mk clone mk-app-login apps/ 　　　　　　//克隆登录应用
$ mk clone mk-app-portal apps/ 　　　　　 //克隆门户应用
$ mk clone mk-app-person-list apps/ 　　 //克隆列表应用
$ mk clone mk-app-person-card apps/ 　　 //克隆卡片应用
$ mk clone mk-app-complex-table apps/ 　//克隆复杂表格应用
$ mk clone mk-app-editable-table apps/ 　//克隆可编辑表格应用
$ mk clone mk-app-tree-table apps/ 　　　//克隆左树右表应用
$ mk compile website 　　　　　　　　　　　　//编译网站

步骤二、配置

//修改文件：my-demo/config.js
//也可以直接进apps目录根据自己需求修改app内容
...

fetch.config({
mock: true, //脱离后台测试，启用mock，否则这行注释

//fetch支持切面扩展（before,after），对restful api统一做返回值或者异常处理
after: (response, url) => {
if (response.result) {
console.log(url, response)
if(response.token){ //登录后设置accessToken,根据需要调整
fetch.config({token:response.token})
}
return response.value
}
else {
Toast.error(response.error.message)
throw { url, response }
}
}
})

....

_options.apps && _options.apps.config({
//'*': { webapi } //正式网站应该有一个完整webapi对象，提供所有web请求函数
'mk-app-root': {
startAppName: 'mk-app-login'
},
'mk-app-login': {
goAfterLogin: {
appName: 'mk-app-portal'
}
},
'mk-app-portal': {
menu: [{
key: '1',
name: 'about',
appName: 'mk-app-portal-about',
isDefault: true
}, {
key: '2',
name: 'apps',
isExpand: true,
children: [{
key: '201',
name: '列表',
appName: 'mk-app-person-list'
}, {
key: '202',
name: '卡片',
appName: 'mk-app-person-card'
},{
key:'203',
name:'复杂表格',
appName: 'mk-app-complex-table'
},{
key:'204',
name:'可编辑表格',
appName: 'mk-app-editable-table'
},{
key:'205',
name:'树表',
appName: 'mk-app-tree-table'
},{
key: '206',
name: '柱状图',
appName: 'mk-app-bar-graph'
}]
}]
}
})
...

　　

步骤三、按需修改代码，实现自己功能要求

步骤四、运行 npm start

 

DEMO截图

按照上面的步骤可以得到类似如下截图样子的一个网站

可以在线访问我已经做好的一个demo，网址：https://ziaochina.github.io/mk-demo