文档章节

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

ziaochina
 ziaochina
发布于 2017/08/29 15:45
字数 661
阅读 80
收藏 0
点赞 0
评论 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
作品 0
javascript统一世界?

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

卢勇福
2015/03/28
0
0
前端每周清单第 47 期:NPM 年度报告与 2018 展望,Airbnb React Router 实践

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

王下邀月熊
01/15
0
0
前端每周清单第 48 期:Slack Webpack 构建优化,CSS 命名规范与用户追踪,Vue.js 单元测试

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

王下邀月熊
01/22
0
0
2017 年 9 月:15 个有趣的 JS 和 CSS 库

迎来了金秋 9 月,在这收获的季节,Tutorialzine 又为我们带来了哪些新鲜、有趣的前端资源呢?前端开发者们,一起来看看有木有你需要的前端库。 1.DisplayJS DisplayJS 是一个帮助你渲染 DO...

IT程序狮
2017/09/20
0
0
前端每周清单第 46 期: 2017 Node.js / GraphQL / Vue.js 盘点,前端性能优化与可用性保障

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

王下邀月熊
01/08
0
0
2017 年崛起的 JS 项目

共 4741 字,读完需 8 分钟,速读 2 分钟。我有幸参与了该项目的部分中文版翻译、校对工作,感谢 Sacha Grief,Micheal Ramberu 的统计整理,以及 Frank Xu 的翻译工作,完整版本请猛击阅读原...

王仕军
01/22
0
0
PayPal从Java切换到JavaScript

已经决定使用JavaScript开发Web应用程序,从浏览器一直到后端服务器,并放弃了使用JSP/Java编写的遗留代码。 PayPal技术总监Jeff Harrell在两篇博文中(解放我的UI第一部分:Dust JavaScript...

greki
2014/05/04
0
0
NodeJS对于Java开发者而言是什么?

我们都知道Node.js现在得到了所有的关注。每个人都对学习Node.js感兴趣,并希望可以工作于Node.js。在开始工作之前了解技术背后的概念总是不会错的。但对初学者来说,可能会因为不同的人使用...

城固如春
2017/10/21
0
0
JavaScript(React Native、Node.js等)移动、服务端通吃的全栈语言

作者:李宁老师 东北大学计算机专业硕士。曾任沈阳东软股份项目经理。51CTO学院签约讲师。从事软件研究和开发超过20年。长久以来一直从事Java、Android、iOS、C++、Swift、Objective-C以及跨...

androidguy
06/29
0
0
react-webpack-antd--环境篇

Tips [React Error]: Target container is not a DOM element 原因: 在 index.html中将绑定的js文件写在了header中,在渲染组件时需要找到页面上的根节点去渲染 ,绑定在header中还没有根节点...

jdkwky
04/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

【RocketMQ】Message存储笔记

概述 消息中间件存储分为三种,一是保存在内存中,速度快但会因为系统宕机等因素造成消息丢失;二是保存在内存中,同时定时将消息写入DB中,好处是持久化消息,如何读写DB是MQ的瓶颈;三是内...

SaintTinyBoy
8分钟前
0
0
Android应用Context详解及源码解析

Android应用Context详解及源码解析 本文定位:优质文章收集 本文转载 1 背景 今天突然想起之前在上家公司(做TV与BOX盒子)时有好几个人问过我关于Android的Context到底是啥的问题,所以就马...

lichuangnk
39分钟前
0
0
PostgreSQL的昨天今天和明天

PostgreSQL 是一种非常复杂的对象-关系型数据库管理系统(ORDBMS), 也是目前功能最强大,特性最丰富和最复杂的自由软件数据库系统。有些特性甚至连商业数据库都不具备。 这个起源于伯克利(...

闻术苑
44分钟前
0
0
Mysql对自增主键ID进行重新排序

1,删除原有主键: ALTER TABLE `table_name` DROP `id`; 2,添加新主键字段: ALTER TABLE `table_name` ADD `id` MEDIUMINT( 8 ) NOT NULL FIRST; 3,设置新主键: ALTER TABLE `table_nam......

niithub
49分钟前
0
0
福利篇:免费csdn vip账号分享

分享一个发布免费csdn vip账号的网站:啰嗦vip www.lostvip.com , 各种软件开发类的视频教程:慕课网、动脑学院、黑马各大培训机构VIP视频教程,非常不错!

在水一方发盐人
56分钟前
0
0
Nginx+Tomcat搭建高性能负载均衡集群

一、 工具   nginx-1.8.0   apache-tomcat-6.0.33 二、 目标   实现高性能负载均衡的Tomcat集群:    三、 步骤   1、首先下载Nginx,要下载稳定版:      2、然后解压两个Tom...

码代码的小司机
57分钟前
0
0
Centos7编译安装ntp-4.2.8p11

Centos7编译安装ntp-4.2.8p11 背景 因公司做等保评级,在进行安全漏洞检测时发现ntp需要升级到ntp-4.2.7p25以上版本,经过一番搜索,没有该版本及新版本ntp的yum安装包,所以只能编译安装了,...

阿dai
今天
0
0
antd pro 新增模块的步骤

index.js是整个项目的入口文件。 // 1. Initializeconst app = dva({ history: createHistory(),});// 2. Pluginsapp.use(createLoading());// 3. Register global modelapp.model......

灯下草虫鸣_
今天
0
0
Cisco VPN在win10下报Error 56的解决办法

问题描述 Cisco VPN在win10下报Error 56: The Cisco Systems, Inc. VPN Service has not been started 解决方案 方案一:在计算机管理-》服务 查看Cisco Systems, Inc. VPN Service服务是否存...

chenfj_fer
今天
0
0
Weblogic问题解决记录

问题:点击登录,页面刷新但是不进去管理界面。解决:删除cookies再登录。

wffger
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部