面向接口编程
写功能之前，先写接口。
前端和后端之间的接口：RESTful API
后端用express的情况下，这个接口又体现为一个中间件
前端用react的情况下，这个接口应当体现为一组JS API
react使用JS API编程。
react组件与组件之间的接口，直接组件用props，间接组件用pubsub。
举例:
//后端 express:
var login=require('login');
app.use('/login',login);
//前端 API:
var login=axios.get('/login');
//前端REACT 组件调用
<Login logIn={login}/>
部分前端功能代码:
//Login组件定义
import React from 'react';
export default class Login extends React.Component {
static propTypes = {
login: React.PropTypes.func.isRequired,
routeSuccess:React.PropTypes.string//成功后去向的路由，默认为login_after
};
constructor(props) {
super(props);
this.gotoLoginAfter=this.gotoLoginAfter.bind(this);
this.showError=this.showError.bind(this);
}
render() {
return (
<form role="form" onSubmit={this.handleSubmit.bind(this)}>
<h2 className="form-signin-heading">请登录</h2>
<input type="text" className="form-control" placeholder="用户名" required="" ref="username"/>
<input type="password" className="form-control" placeholder="密码" required="" ref="password"/>
<button className="btn btn-lg btn-primary btn-block" type="submit">登录</button>
</form>
);
}
handleSubmit(e) {
e.preventDefault();
const username=this.refs.username.value;
const password=this.refs.password.value;
// console.log(username,password)
const {login}=this.props;
login(username,password).then(this.gotoLoginAfter).catch(this.showError)
}
gotoLoginAfter(){
const routeSuccess=this.props.routeSuccess||'login_after';
PubSub.publish('route',routeSuccess);
}
showError(){
PubSub.publish('msg.error','登陆错误');
}
}
//接受pubsub的部分:
<script src="http://cdn.bootcss.com/pubsub-js/1.5.4/pubsub.min.js"></script>
<link href="http://cdn.bootcss.com/toastr.js/latest/css/toastr.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/toastr.js/latest/toastr.min.js"></script>
<script>
PubSub.subscribe( 'route', (msg,route)=>{
toastr.info("goto:"+route);//方便调试路由跳转，正式代码中不出现
location.href=route;//路由跳转
});
PubSub.subscribe( 'msg.error', (msg,str)=>{toastr.error(str)} ); //toast,全局消息。正式代码中也有
</script>
