美文网首页
使用react-redux做项目的时候遇到的一些问题

使用react-redux做项目的时候遇到的一些问题

作者: 阿力阿狸123 | 来源:发表于2017-07-22 10:55 被阅读0次

1、在前端请求ajax的时候会遇到跨域的问题,不能够请求到数据,需要搭建一下中间层,使用express来请求ajax数据然后前端再去请求后台返回的数据,这样就不会遇到跨域问题,express代码如下:

var   express=require('express');

var   router=express.Router();

var   http=require('http');//引入http模块

//后台解决跨域问题

router.all('*',function(req,res,next) {

res.header("Access-Control-Allow-Origin","*");

res.header('Access-Control-Allow-Methods','PUT, GET, POST, DELETE, OPTIONS');

res.header("Access-Control-Allow-Headers","X-Requested-With");

res.header('Access-Control-Allow-Headers','Content-Type');

next();

});

// 轮播的接口

// localhost:3000/lunbo

router.get('/lunbo',function(req,res) {

varpage=req.query.page;

varcount=req.query.count;

// 要去请求  卖座网的接口

// http://m.maizuo.com/v4/api/billboard/home?__t=1500253189212

vartime=newDate().getTime();

http.get('http://m.maizuo.com/v4/api/billboard/home?__t='+time,function(response) {

vardata='';

response.on('data',function(chunk) {

data+=chunk;

})

response.on('end',function() {

res.send(data);

})

})

})

2、上拉刷新的请求的ajax不能够每次自动加1的操作,后来做了监听滚动事件的函数,在生命周期里面进行加1操作后在滚动的时候再次请求ajax,当滚动的高度和当前页面高度进行对比时候在去请求。代码如下:

componentDidMount() {

window.addEventListener('scroll',this.handleScroll);

// var page = this.props.page

varthat=this;

$.get('http://localhost:8080/come_play?page='+page+'&count=7',function(res) {

if(res) {

vardata=JSON.parse(res).data.films;

that.props.getComeplay(data);

page++;

}

})

}

//获取滚动数据

handleScroll=()=>{

console.log(flag)

varlist=this.props.come_play;//获取state的数据

varfilmes=[];//用来接收新的数据

varthat=this;//改变一下this指向

vartop=(document.documentElement.scrollTop||document.body.scrollTop)+50;//页面的滚动

console.log(top)

varheight=document.documentElement.clientHeight;

varnowheight=200+height*(page-3);

console.log(nowheight)

// console.log(height)

if(top>nowheight&&flag) {

flag=false;

$.get('http://localhost:8080/come_play?page='+page+'&count=7',function(res) {

if(res) {

vardata=JSON.parse(res).data.films;

varfilme=list.concat(data);

varset=newSet(filme);

filmes=newArray(...set);//数组去重

that.props.getComeplay(filmes);

flag=true;

}else{

flag=false;

}

})

page++;//页数+1

}else{

flag=true;

}

}

//销毁时

componentWillUnmount() {

window.removeEventListener('scroll',this.handleScroll);

}

相关文章

网友评论

      本文标题:使用react-redux做项目的时候遇到的一些问题

      本文链接:https://www.haomeiwen.com/subject/xxzykxtx.html