文档章节

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

ziaochina
 ziaochina
发布于 2017/08/29 15:45
字数 661
阅读 91
收藏 0

前言

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

框架介绍

  • mk框架 = monkey king框架 = 齐天大圣框架
  • 基础技术栈:react、redux、immutable、antd、webpack、nodejs、hapi、sequelize、node-zookeeper-dubb等
  • 框架核心思想:js全栈、应用化

介绍网址

特点

  • 将网站分成多个独立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截图

login.png

register.png

forgot.png

home.png

mysetting1.png

list.png

card.png

chart.png

voucher.png

complextable.png

editabletable.png

treetable.png

© 著作权归作者所有

共有 人打赏支持
ziaochina
粉丝 0
博文 1
码字总数 661
作品 1
私信 提问
javascript统一世界?

[到微信关注我][1]今天facebook将react native框架的源码开源,瞬间火得一塌糊涂,目前github上的star已经快7000了。javascript作为这个框架的开发使用语言又一次出现在人们面前。这几年jav...

卢勇福
2015/03/28
0
0
全栈 JavaScript 程序员的崛起

原文地址:http://thefullstack.xyz/full-stack-javascript-developer/ JavaScript 无处不在 在以前,JavaScript程序员就是前端开发者的同义词,永远与浏览器绑在一起。 但那已是昨日往事。N...

oschina
2016/06/08
7.7K
43
2015年需要了解的前端框架和语言

语言/平台 Node.js 第一,PHP 第二,JavaScript 第三。因为Node.js的社区很多,所以这个结果你也不用太意外。如果你知道JavaScript,你已经一只脚踏进了用Node.js来构建Web APP的可能。 框架 ...

oschina
2015/07/14
83.3K
43
前端每周清单第 48 期:Slack Webpack 构建优化,CSS 命名规范与用户追踪,Vue.js 单元测试

前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公...

王下邀月熊
2018/01/22
0
0
《React Native 精解与实战》书籍连载「Node.js 简介与 React Native 开发环境配置」

此文是我的出版书籍《React Native 精解与实战》连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理、React Native 组件布局、组件与 API 的介绍与代码实战,以及 ...

Parry
2018/08/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

tac 与cat

tac从后往前看文件,结合grep使用

writeademo
31分钟前
2
0
表单中readonly和dsabled的区别

这两种写法都会使显示出来的文本框不能输入文字, 但disabled会使文本框变灰,而且通过通过表单提交时,获取不到文本框中的value值(如果有的话), 而readonly只是使文本框不能输入,外观没...

少年已不再年少
52分钟前
2
0
SpringBoot上传图片操作

首先有个上传文件的工具类 /** * 文件上传 * @param file * @param filePath * @param fileName * @throws Exception */public static void uploadFile(byte[] file, String ...

_liucui_
今天
6
0
DrawerLayout

public class MainActivity extends BaseActivity implements NavigationView.OnNavigationItemSelectedListener,OnFragmentInteractionListener{ public NavigationView navView; ......

安卓工程师王恒
今天
1
0
python精简笔记

python精简笔记-字符串基本用法 字符串常见用法: * encode() # 编码成bytes类型 * find() # 查找子串 * index() # 获取下标 * replace() # 替换子串 * len(string) # 返回字符串长度,...

平头哥-Enjoystudy
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部