react

class Fetch{
constructor(url, params){
this.url = url;
this.params = params;
}
//发送GET请求
getFetch(successFunc,errorFunc){
var that = this;
var str = '';
if(typeof that.params === 'object' && that.params){
str += '?';
Object.keys(that.params).forEach(function(val){
str += val + '=' + encodeURIComponent(that.params[val]) + '&';
})
}
fetch(this.url + str, {
method : 'GET'
}).then((res)=>{
 if(res.ok){ return res.json() }
   }else if(res.status === 401)
   {
      console.log('请求失败');
      errorFunc();
     }
    })
.then(response)=>{successFunc(response)})

.catch(errorFunc())

}
 }
export default Fetch;

 

 

import React, { Component } from 'react';
import {Link} from 'react-router-dom';
import {Row,Col,Icon,Input} from 'antd';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import {getData,getImage} from './reducers.jsx';
import style from './css/familyRules.css';
import gFetch from '../../build/fetch.js'




let jzOPtions={
    l_pic_index:{"left":"50%"},
    r_pic_index:{"right":"50%"},
    l_bg_index:{"width":"5%"},
    r_bg_index:{"width":"5%"}
  }
 
class FamilyRules extends Component {
  constructor(props){
    super(props);
    this.state={
        current: 'index',
        rules:''
    };
  }
 
  componentDidMount = () =>{
    
    console.log(111);
 
  }
  
  
//卷轴
   handlerClickEvent(e) {
    $("#showJZCon").modal(); 
    $(".l_pic_index").animate({'left':'10%'},1500);
    $(".r_pic_index").animate({'right':'10%'},1500);
   $(".l_bg_index").animate({'width':'45%'},1500);
   $(".r_bg_index").animate({'width':'45%'},1500,function(){
        $(".main_index").fadeIn(800);
   }); 
   $("#showJZCon").on('hide.bs.modal', function () 
   {
   for(var oob in jzOPtions){
      $("."+oob).css(jzOPtions[oob]);
   }
   $(".main_index").fadeOut(800);
   })
  }
//翻页pre
handelPrePage(e){
    // let parms={startIndex:document.getElementById("curPage").innerHTML,pageSize:7};
    // // this.setState({surname:surnamess,familyNameState:true});
    // var that = this;   
    // fetch('http://jp.library.sh.cn/jp/webapi/instance/getFamilyRules?'+parms,{
    //   method: "GET"
    // })//请求地址  
    // .then((response) => response.json())//取数据  
    // .then((responseText) => {//处理数据  
    //     //通过setState()方法重新渲染界面
    //     //console.log(responseText[0]);  
    //      that.setState({familyRulesList:responseText[0].data,familyPage:responseText[0].pager});  
    // })  
    // .catch((error) => {  
    //     console.warn(error);  
    // });  
    let g_Fetch=new gFetch("http://jp.library.sh.cn/jp/webapi/instance/getFamilyRules",{startIndex:document.getElementById("curPage").innerHTML,pageSize:7})
    g_Fetch.getFetch(data=>{ 
        that.setState({familyRulesList:responseText[0].data,familyPage:responseText[0].pager});  
        },()=>{
        console.warn(error); 
    });
  }


 
  
  render() {
    const {familyRulesList,familyPage} = this.state;
    return (
      <div className={style.mainbody} onLoad={(e)=>this.handelPrePage(e)}>
      <div className={style.s_search}>
       <div className={style.form_control_box}>
            <form accept="#" target="_blank" method="post"><input type="text" className="s_search_text" id="search_words" placeholder="请输入关键词"/></form>
            <i className="search_icon"></i>
            <div className={style.s_total}>共计17866条数据</div>
        </div>
        </div>
        <div className={style.slidContainer}>
        <ul className={style.clearfix}>
        {
            familyRulesList ? 
            familyRulesList.map((item,key)=>(
            <li className={style.eachSlider} >
            <div className={style.eachS_title}>
                <div className={style.eachS_title_b} >{item.title}</div>
                <div className={style.eachS_title_s} >{item.label}</div>
            </div>
            <div className={style.eachS_more}  onClick={(e)=>this.handlerClickEvent(e)}  >查看详情></div>
            </li>
            )) : null
         }    
        </ul>
        <div id="curPage"></div>
       <div className="page_pre" onClick={(e)=>this.handelPrePage(e)}> pre </div>
       <div className="page_next"> next </div>
        
       </div>
        {/* <div id="showJZCon" className={style.JZMasterCon}>
        <div className={style.JZCon_master}></div>
       
        </div> */}


      
            <div className="modal fade" id="showJZCon" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">  
                <div className="modal-dialog">  
                    <div className="modal-content">  
                        <div className="modal-header">  
                            <button type="button" className="close" data-dismiss="modal" aria-hidden="true">  ×  </button>  
                            <h4 className="modal-title" id="myModalLabel">  </h4>  
                        </div>  
                        <div className="modal-body">  
                        <div className={style.JZCon_mstcontet+'  '+style.clearfix}>
                                   <div className="l_pic_index" ></div>
                                 <div className="r_pic_index" ></div>
                                   <div className="l_bg_index"></div>
                                   <div className="r_bg_index" ></div>
                                   <div className="main_index" >
                                      <p className="intro-text">
                                       传统音乐是在以典河流域为中心的中原音乐和四域音乐以及外国音乐的交流融合之中形成发展起来的。
                                      </p>
                      
                                </div>
                          
                         </div>
                        </div>  
                         
                    </div>  
                </div> 
             </div>
      </div>
    );
  }
}

export default FamilyRules =connect(
    state=>({
        ocrResult:state.shangtu.ocrResult,
    }),
    dispatch=>bindActionCreators({
        getData,getImage
    },dispatch)
)(FamilyRules)