Node.js建站笔记-使用react和react-router取代Backbone

npm install

node scripts/build.js

paths: {
        "jquery": 'jquery/jquery.min',
        "requirejs": 'requirejs/require',
        "react": 'react/react',
        'react-dom': 'react/react-dom',
        "react-router": "react-router/umd/ReactRouter.min",
        "jqSlidejs": 'jquery-slide/jqSlide.min',
        'jqValidate': 'jquery-validation/dist/jquery.validate.min'
    }

import React from 'react'
import { render } from 'react-dom'

<div class="hc_pwd_box"></div>

let container = $('.hc_pwd_box')[0];

<Nav mode={'login'} />

// form容器组件
const FormBox = React.createClass({
 render(){
   let mode = this.props.mode;
   let current = 'box_form_container box_form_container_'+mode;
   return (
     <div className={current}>
       <iframe style={{display:'none'}} name='target_ifr'></iframe>
       {this.props.children}
     </div>
   );
 }
});

// 登录form组件
const Login = React.createClass({
 getInitialState(){
   return {
     verify_img: ""
   };
 },
 componentDidMount(){
   $.ajax({
     url: '/getverifycode',
     type: 'get',
     dataType: 'json'
   }).done(function(res) {
     if(this.isMounted()){
       this.setState({
         verify_img: res.img
       });
     }
   }.bind(this));
 },
 render(){
   return(
     <div>
     <Nav mode={'login'} />
     <FormBox mode={'login'}>
       <form action="/login" method="post" className="login_form" target='target_ifr'>
           <div className="form_item form_item_input">
             <input type="text" name='signname' className="form_input hc_input hc_input_grey hc_input_borderdash" placeholder="用户名或邮箱" />
             <span className="form_input_placeholder"></span>
             <div className="form_error"></div>
           </div>
           <div className="form_item form_item_input">
             <input type="password" name='password' className="form_input hc_input hc_input_grey hc_input_borderdash" placeholder="密码" />
             <span className="form_input_placeholder"></span>
             <div className="form_error"></div>
           </div>
           <div className="form_item form_item_input">
             <input type="text" name='verifycode' className="form_input form_input_verifycode hc_input hc_input_grey hc_input_borderdash" placeholder="验证码"/>
             <span className="form_input_placeholder"></span>
             <img src={this.state.verify_img} alt="验证码" className="form_img_verifycode"/>
             <div className="form_error"></div>
           </div>
           <div className="form_item form_item_submit">
             <button type="submit" className="hc_btn hc_btn_orange form_btn_submit">登录嗨猫</button>
           </div>
       </form>
     </FormBox>
     <Thirdparty />
     </div>
   );
 }
});

const routeConf = [{
 path: '/',
 component: Pwd,
 indexRoute: {component: Signup},
 childRoutes: [{
   path: 'login',
   component: Login
  },{
   path: 'signup',
   component: Signup
  }]
}];

render((<Router routes={routeConf}/>),container);

bower install formsy-react --save

'formsy-react': 'formsy-react/release/formsy-react',

import React from 'react';
import Formsy from 'formsy-react';

/**
* react-input组件
*/
export const HCInput = React.createClass({
  mixins: [Formsy.Mixin],
  changeValue(event) {
    this.setValue(event.currentTarget[this.props.type === 'checkbox' ? 'checked' : 'value']);
  },
  render(){
    const className = 'form_item form_item_input' + (this.props.className || ' ') + (this.showRequired() ? 'required' : this.showError() ? 'error' : null);
    const errorMessage = this.getErrorMessage();
    return(
      <div className={className}>
        <input type={this.props.type || 'text'} name={this.props.name} className={this.props.inputClass} placeholder={this.props.placeholder} onChange={this.changeValue} value={this.getValue()} checked={this.props.type === 'checkbox' && this.getValue() ? 'checked' : null}/>
        <span className="form_input_placeholder" style={{display:'none'}}></span>
        {this.props.children}
        <div className="form_error">{errorMessage}</div>
      </div>
    )
  }
});

// 自定义组件
'UIComponents': './../js/prod/UIComponents'

render(){
        return(
          <div>
          <Nav mode={'login'} />
          <FormBox mode={'login'} >
            <Formsy.Form  action='/login' method="post" className="login_form" target='target_ifr' onSubmit={this.submit} mapping={this.mapInputs} onValid={this.enableSubimit} onInvalid={this.disableSubimit}>
              <HCInput
                type="text"
                name='signname'
                placeholder="用户名或邮箱"
                inputClass='form_input hc_input hc_input_grey hc_input_borderdash'
                validations='isSignname,isNotEmpty'
                validationErrors={{
                  isSignname: '请输入正确的用户名或邮箱',
                  isNotEmpty: !!this.state.emptyError ? '请输入用户名或邮箱': ''
                }}
              />
              <HCInput
                type="password"
                name='password'
                placeholder="密码"
                inputClass='form_input hc_input hc_input_grey hc_input_borderdash'
                validations='isNotEmpty'
                validationErrors={{
                  isNotEmpty: !!this.state.emptyError ? '请输入密码': ''
                }}
              />
              <HCInput
                type="text"
                name='verifycode'
                placeholder="验证码"
                inputClass='form_input form_input_verifycode hc_input hc_input_grey hc_input_borderdash'
                validations='isNotEmpty'
                validationErrors={{
                  isNotEmpty: !!this.state.emptyError ? '请输入验证码': '',
                  isLength: '验证码不正确'
                }}>
                <img src={this.state.verify_img} alt="验证码" className="form_img_verifycode"/>
              </HCInput>
              <div className="form_item form_item_submit">
                <button type="submit" className="hc_btn hc_btn_orange form_btn_submit">登录嗨猫</button>
              </div>
            </Formsy.Form>
          </FormBox>
          <Thirdparty />
          </div>
        );
      }

getInitialState(){
    return {
        verify_img: "",
        canSubmit: false
    };
}

enableSubimit(){
    this.setState({
        canSubmit: true
    });
},
disableSubimit(){
    this.setState({
        canSubmit: false
    });
}

submit(data){
     //开关off时不提交
   if(!this.state.canSubmit){
     return;
   }
   // ajax提交表单
 }

/**
* @desc 登录名判断 - 纯文字或邮箱
*/
Formsy.addValidationRule('isSignname',function(values,value){
  let reg_isemail = /[@]/,
    reg_email =
    /^[a-z]([a-z0-9]*[-_]?[a-z0-9]+)*@([a-z0-9]*[-_]?[a-z0-9]+)+[\.][a-z]{2,3}([\.][a-z]{2})?$/i;
  return !reg_isemail.test(value) || (reg_isemail.test(value) &&
    reg_email.test(value));
});

<HCInput
 type="text"
 name='signname'
 placeholder="用户名或邮箱"
 inputClass='form_input hc_input hc_input_grey hc_input_borderdash'
 validations='isSignname,isNotEmpty'
 validationErrors={{
   isSignname: '请输入正确的用户名或邮箱',
   isNotEmpty: !!this.state.emptyError ? '请输入用户名或邮箱': ''
 }}
/>

Formsy.addValidationRule('isNotEmpty',function(values,value){
  let isNotEmpty = !!value;
  return isNotEmpty;
});

<div className="form_error">{this.isPristine() ? '':errorMessage}</div>