gfs-react-dm
Version:
简化react和redux的繁杂流程，更简单的数据操作管理
221 lines (179 loc) • 7.73 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, minimal-ui" />
<title>gfs-react-dm</title>
<link rel="stylesheet" href="./assets/vendor/prettify/prettify-min.css">
<link rel="stylesheet" href="./assets/vendor/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="./assets/css/main.css" id="site_styles">
<link rel="shortcut icon" type="image/png" href="./assets/favicon.png">
</head>
<body class="yui3-smart" _assetsPath="./assets">
<nav class="navbar navbar-inverse navbar-fixed-top custom-navbar" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand mainlogo" href="">
<img alt="gfs-react-dm" src="./assets/css/logo.png" title="gfs-react-dm">
gfs-react-dm
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="index.html">主页</a>
</li>
</ul>
<div class="navbar-form navbar-right filterAPi" autocomplete="off">
<input type="text" id='txtSearchAPI' class="form-control search-query" placeholder="Search for API" />
<ul id="filterList" class="filterItems dropdown-menu" role="menu"></ul>
</div>
</div>
</div>
</nav>
<div id="sidebar">
<h3>模块/类</h3>
<div id="api-tabview-filter">
<input id='txtSearch' type="search" class="form-control" placeholder="Type to filter Modules/Classes">
</div>
<dl id="sidebar_list">
<dt>
<span class="glyphicon glyphicon-minus"></span>
<a href="./modules/gfs-react-mvc.html">gfs-react-mvc</a>
</dt>
<dd>
<ul>
<li>
<a href="./classes/Control.html">Control</a>
<ul>
</ul>
</li>
<li>
<a href="./classes/Page.html">Page</a>
<ul>
</ul>
</li>
<li>
<a href="./classes/Model.html">Model</a>
<ul>
</ul>
</li>
<li>
<a href="./classes/View.html">View</a>
<ul>
</ul>
</li>
</ul>
</dd>
</dl>
<div class="icon-sidebar-btn icon-sidebar-btn-open"><span class="glyphicon glyphicon-chevron-left"></span>收起</div>
</div>
<div class="stdoc-content">
<div class="apidocs">
<div id="docs-main">
<div class="content">
<div class="apidocs apidocs-index">
<div id="docs-main" class="content">
<p style="color:red">文档持续完善中...</p>
<p>
将react、redux整合一起使用的繁琐步骤进行封装，对外提供<code>@View</code>、<code>@Control</code>、<code>@Model</code>分别对应react component、redux action、redux store调用
</p>
<ul>
<li style="margin-bottom:8px"><strong>@View</strong> 利用react-redux中提供的connect包装器将store、control（action）与Component建立联系，使Component具有操作store和调用control的能力，Component中可直接使用<code>this.props[update/del/insert/save]</code>对store数据进行更新</li>
<li style="margin-bottom:8px"><strong>@Control</strong> 拥有与服务端数据通信功能，获取数据后可决定是否更新store或直接什么都不做，提供<code>@Sync</code>装饰器；被装饰的类会返回一个对象列表，提供给Component调用，此外还提供默认的数据修改方法：update、save、del、insert</li>
<li><strong>@Model</strong> 字段映射关系和数据操作，包括对数据的增删改查；默认提供<code>del</code>、<code>update</code>、<code>save</code>等store方法</li>
</ul>
<p><a href="https://github.com/future-team/generator-future-static" target="_blank">generator-future-static</a>提供对应脚手架项目<code>webpack-react</code></p>
<p>
最后<code>page</code>方法将决定具体哪个Component在页面的哪个节点中渲染。
</p>
<h3>安装</h3>
<pre class="code prettyprint">
npm install gfs-react-dm --save
</pre>
<h3>表单元素数据更新方式</h3>
<pre class="code prettyprint">
后续完善...
</pre>
<h3>使用(一个改变年龄的简单例子,适用于2.0以上版本)</h3>
* View
<pre class="code prettyprint">
import React, { Component /*,PropTypes*/} from 'react'
import {Model,Control,Sync,View,page} from 'gfs-react-dm'
@View(TestControl)
class TestComponent extends Component {
constructor(props) {
super(props)
}
componentDidMount(){
setTimeout(()=>{
//调用control中的方法改变age
this.props.changeAge(this)
},1000)
}
static defaultProps={}
render() {
console.log('age:',this.props.testmodel.get('age') )
return (
<div>
{this.props.testmodel.get('age')}
</div>
)
}
}
//渲染到页面
page(TestComponent)
</pre>
* Control
<pre class="code prettyprint">
import {Control,fetch,action} from 'gfs-react-dm'
import TestModel from '../model/TestModel'
@Control(TestModel)
class TestControl {
constructor(){
}
@action
changeAge(){
//方法之间可以相互调用
book = this.getBook()
fetch('/test.json',/*params*/).then((data)=>{
//control中默认提供update、del、insert、save四种操作数据方法
this.update('age','ajax改变的age：'+data.age)
})
}
//pojo
getBook(){
return {}
}
}
</pre>
* Model
<pre class="code prettyprint">
import {Model} from 'gfs-react-dm'
@Model
class TestModel {
//必须赋予__name值，否则无法正确查找到store
static __name = 'test'
static age = 20
}
</pre>
</div>
</div>
</div>
</div>
</div>
</div>
<a id="gotoTop" class='well well-small' href='#'>
</a>
<script src="./assets/vendor/jquery/jquery-1.8.2.js"></script>
<script src="./assets/vendor/bootstrap/js/bootstrap.js"></script>
<script src="./assets/vendor/prettify/prettify-min.js"></script>
<script src="./assets/js/config.js"></script>
<script src="./assets/js/doc.js"></script>
</body>
</html>