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

特色

• 將網站分紅多個獨立app，每一個app開發模式徹底一致，而且能夠克隆npmjs發佈模板app
• 將後臺服務分紅多個獨立service, 每一個servie開發模式徹底一致， 而且能夠克隆npmjs發佈的模板service
• 開發者本身作的app，service能夠發佈到npmjs開源給其餘開發者使用，成爲一個生態化的框架

使用

• 步驟1、使用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 　　　　　　　　　　　　　　//編譯網站

• 步驟2、配置

//修改文件：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'
				}]
			}]
		}
	})
...

　　

• 步驟3、按需修改代碼，實現本身功能要求
• 步驟4、運行 npm start

 

DEMO截圖

　　按照上面的步驟能夠獲得以下截圖樣子的一個網站

　　能夠在線訪問我已經作好的一個demo，網址：https://ziaochina.github.io/mk-demo