搭建简单的淘宝优惠劵网站

搭建简单的淘宝优惠劵网站

如何自己搭建一个淘宝优惠劵网站？

导入数据

首先需要的是足够的数据，要想获取淘宝每日的优惠劵数据可以注册一个淘宝客并进行媒体推广申请。这样就可以在淘宝联盟中下载每天的优惠劵商品清单，下载后将数据导入到云数据库中就解决了数据问题。

我将每天的优惠劵数据都导入到了LeanCloudd的云数据库中。

搭建页面

搭建页面非常的简单仿照手机淘宝之类的购物软件的UI就差不多了，搭之前确定好自己想要展示的数据及大致布局。
下面是我搭建好的页面。

数据处理

有了页面后就开始获取数据了，因为数据都在LeanCloudd的云数据库中，所以直接调用官方API进行请求就能获取到想要的数据了。
下面是获取首页数据的代码。

   var datllen;
   var data;
   var scgid=0;
   //从这里开始请求数据	   
   function  liebcx(){
      var query = new AV.Query('taobao');//LeanCloudd的数据CLass
       query.limit(26); //返回26条数据
	   query.descending('xiaonian');//根据销量进行排序
       query.find().then(function (results) {
   		data=results;datllen=results.length; sjuzjia();
     }, function (error) {
     });
   } 
		   
   var cxx=0;
   //循环加载到页面
   function  sjuzjia(){
		for(i=0;i<26;i++){ 
			var date=data[i].attributes;
			var juan=date.yhjuan;
			//处理优惠劵面额的数据
			juan = juan.match(/减(\S*)元/);
			//存在部分无门槛优惠劵需再次处理
			if(juan!=null){juan=juan[1]}else{juan=date.yhjuan;juan =juan.match(/(\S*)元/)[1];};
			//计算优惠后的价格
			var yhjia=(date.yuanjia-juan).toFixed(2);
			//对过万的销量进行转换
			var xiaonian=date.xiaonian;var xw="";
			if(xiaonian>10000){xiaonian=(xiaonian*0.0001).toFixed(2);xw="万";};
			var img=""; 
			//图片路径追加这个可控制图片的大小
			img=date.imgurl+"_200x200_.webp";
			//追加
			$("#ttujc").append('<li class="mui-table-view-cell mui-media">'+
			    '<a href="'+date.gouurl+'">'+
			         '<img class="mui-media-object mui-pull-left" src="'+img+'">'+
			         '<div class="mui-media-body"  style="white-space:normal;">'+
			        	 '<p style="color: #000;font-size: 14px;">'+date.biaotis+'</p>'+
						 '<span style="font-size: 12px;color: #888;margin-top:1px;position: relative;">销量：：<b>'+xiaonian+'</b> '+xw+'</span>'+
			           ' <p class="yhj" style="margin-top:10px;">'+ 
			            	'<span style="border: 1px dashed #ff8000; "><span class="ju">劵</span><span class="jm"><b>'+juan+'</b> 元</span></span>'+
			            	'<span style="float: right;"><s style="margin-right: 6px;font-size: 16px;color: #aaa;">￥ <b>'+date.yuanjia+'</b></s><span class="zkj">￥ <b>'+yhjia+'</b></span></span></p>'+
			        '</div>  '+
			   ' </a> '+
			'</li>');
	    }
   }

这里最坑的一点是淘宝联盟的优惠劵清单放的商品图片链接是高清大图，一张图片就要好几兆，每次访问加载手机都要消耗巨大的流量，而要想将图片压缩就非常的麻烦。后来我专门查看了淘宝网站的商品图片链接发现只要在原链接后拼接图片尺寸大小信息就能访问商品的压缩图片。

于是想压缩图片就只需要进行一下拼接就行了，尺寸可自己多次尝试。

img=date.imgurl+"_200x200_.webp";

搜索处理

下一步是用户进行搜索时的处理，请求是只需加一个模糊搜索并在加载时对数据进行一些判断就行了。

var data;var datllen=0;
//请求数据
function  liebcx(){
   var query = new AV.Query('taobao');
   //关键字模糊查询
   query.contains('biaotis',gjc);
   //直接返回上限1000条数据
   query.limit(1000);
    query.find().then(function (results) {
		data=results;datllen=results.length;
		sjuzjia();
  }, function (error) {
  });
}

var cxx=0;
function  sjuzjia(){
	var xhcs=0;
	//一次加载50条，并进行判断是否还有剩余数据
	if(datllen>50){
	   xhcs=50;$("#jzgd").show();$("#gendwz").text("点 击 加 载 更 多");
	}else{
	   xhcs=datllen;$("#jzgd").show();$("#gendwz").text("已经到底了，换个关键词试试吧");
	}
	//没有数据直接return
	if(cxx==datllen){return;}
	var zzxh=cxx+xhcs;
	//下面是循环追加与前面的一样
	for(i=cxx;i< zzxh;i++){
	
	}
}

懒加载

数据加载出来后还需要实现一个懒加载的功能，即在用户没有下滑页面时，下面的图片不进行显示，但页面往下滚动时再对图片进行加载，这样可以避免用户流量的过度消耗，同时可以提升数据的加载速度。

//获取高度
var gsdd=window.innerHeight;
var xuh=0;var sfdk=0;
//页面滚动事件
window.onscroll = function() {
	if(sfdk==0){$("#ycgm").hide();}
	//获取所有的img标签
	var aImg = document.querySelectorAll('img'); var len = aImg.length;
	for (var i = xuh; i < len; i++) {
	//但标签对于窗口高度小于页面高度时就进行图片加载
		if (aImg[i].getBoundingClientRect().top<gsdd) {				
			if (aImg[i].getAttribute('src') == '') {
				aImg[i].src = aImg[i].getAttribute('zzsrc');
			}
			xuh += 1;
		}
	}
};