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内容
...  
  _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
mk-js,一套基于react、nodejs的全栈框架_第1张图片
login.png
mk-js,一套基于react、nodejs的全栈框架_第2张图片
register.png
mk-js,一套基于react、nodejs的全栈框架_第3张图片
forgot.png
mk-js,一套基于react、nodejs的全栈框架_第4张图片
home.png
mk-js,一套基于react、nodejs的全栈框架_第5张图片
mysetting1.png
mk-js,一套基于react、nodejs的全栈框架_第6张图片
list.png
mk-js,一套基于react、nodejs的全栈框架_第7张图片
card.png
mk-js,一套基于react、nodejs的全栈框架_第8张图片
chart.png
mk-js,一套基于react、nodejs的全栈框架_第9张图片
voucher.png
mk-js,一套基于react、nodejs的全栈框架_第10张图片
complextable.png
mk-js,一套基于react、nodejs的全栈框架_第11张图片
editabletable.png
mk-js,一套基于react、nodejs的全栈框架_第12张图片
treetable.png

你可能感兴趣的:(mk-js,一套基于react、nodejs的全栈框架)