要做视频网站的决心是在一次无意中的观看优酷视频得来的,因为当时学过nodejs的爬虫,所以对于优酷开放外链的行为感到高兴,因为这样子就代表我能够将优酷里面的大多数视频都爬下来,然后就可以做一个视频的网站了。就是这股劲,让我当时在半天的时间就做好了网站的雏形了。但是那时候是没有数据的,只有3条。是我自己从优酷里面选的,电影,电视剧,动画各一条。
当时因为要忙着考试,所以就放下来了。就在前几个星期又重新开始写,因为基本的框架已有,所以就只缺数据而已了。所以在前几天刚好写完了我的php爬虫,现在一直等到现在才有时间继续写,今天终于可以上线测试了。
视频网站:传送门
废话不多说,马上讲解一下这个博客的基本功能。
(1)ajax数据添加
在这三个标签里面的页面有个“加载数据”的标签栏,点击一下就可以动态获取数据。
全部加载完成后,就会出现“数据全部加载完成”的标签栏,而且也不能再点击了。
这里的实现其实就是使用ajax进行请求数据,然后后台在数据库查询当前的数据,之后就返回json数据给html网页,html网页再使用js来对其进行数据动态添加,之后就出来了动态的数据了。
js代码:
$('.click_ajax').click(function(){
var num = $(this).data('id');
$.ajax({
'url':"__MODULE__/Index/{$ajax_type}",
'data':{
id:num
},
'dataType':'json',
'error': function(XMLHttpRequest, textStatus, errorThrown) {//失败
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
},
'success': function (res) {//成功
var obj = eval(res);//解析json数据
//alert(obj);
if(obj!=-1){//还有视频数据可以请求,所以添加进去
//alert(obj[0].id);
for(var i=0;i<obj.length;++i){
$('.insert_li').append('<li class="col-md-3" style="margin:1em auto;padding: 1em auto; height:15em;"> <a href=/vedio/index.php/Home/Index/lis/id/'+obj[i].id+'.html> <img style="height:12em;" class="img-responsive" src='+obj[i].img_url+'> </a> <p>'+obj[i].title+'</p> </li>');
}
$('.click_ajax').data("id",num+16);
}
if(num+16>=$('.click_ajax').data('cnt')){//判断是否已经没有视频数据动态添加了
$('.click_ajax').remove();//删除当前的添加栏
$('.main-body').append('<p class="col-md-12" style="text-align: center;width: 100%;height:3em;background-color: #5bc0de;line-height: 3em;">全部数据加载完成 </p>');
}
}
});
});
(2)搜索栏
一开始的话,以为挺好做的,但是之后就发现在使用输入法的时候,很明显的会出现直接就在我打字的时候就搜索数据了,这样的体验让我感觉糟糕透了。所以在网上找到了一种方法可以避免这种情况的出现,使用以下的代码就可以了。
var myLock = false;
$('#head_serach').on('compositionstart',function(){
myLock = true;
});
$('#head_serach').on('compositionend',function(){
myLock = false;
});
因为在写输入法的时候会 触发compositionstart这个事件,所以我只要使用变量来控制我的搜索代码,那样子就可以让我输入完成后才可以搜索。这样子的体验才是符合我们的要求的。
html:
<!--搜索栏-->
<form class="col-md-4 inline-block" action="__MODULE__/Index/serach_page">
<div class="input-group" style="margin-top: 5em;">
<input type="text" class="form-control from-input" οnblur="blu()" οnkeyup="keyu()" id="head_serach" placeholder="Search for..." name="serData" autocomplete="off">
<span class="input-group-btn" >
<button type="submit" class="btn btn-default from-input" style="background-color: #d58512;" type="button">
<span class="glyphicon glyphicon-search"></span>
搜索
</button>
</span>
</div><!-- /input-group -->
<ul class="col-md-12 serach-content dropdown-menu"></ul>
</form>
js:
<script>
var myLock = false;
$('#head_serach').on('compositionstart',function(){
myLock = true;
});
$('#head_serach').on('compositionend',function(){
myLock = false;
});
function keyu(){
$(function(){
if(myLock)return false;
var ser = $('#head_serach').val();
if(ser==null||ser==''){
return false;
}
$.ajax({
'url':"__MODULE__/Index/serach",
'data':{
serach:ser
},
'error': function(XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
},
'success':function(res){
//alert(eval(res));
var obj = eval(res);
$('.serach-content').html(null);
for(var i=0;i<obj.length;++i){
$('.serach-content').append('<li><a href="#">'+obj[i].title+'</a></li>');
}
}
});
});
if($('#head_serach').val()!=""){
$('.serach-content').show();
}
}
function blu(){
$('.serach-content').html(null);
$('.serach-content').hide();
}
</script>
具体的搜索数据如下图:
就这样子一个比较简单的视频网站就做出来了,这个网站的难点其实并不在于网站的编写,因为这个可以使用tp3.2和bootstrap就能几小时之内就完成了。这里的网站的难点是在于数据的获取上,在获取电视剧的时候,那个数据量真的是大,足足爬了有2G的html页面。
终于是将视频网站初步完成了,玩无限乱斗去了。
PS:因为是上线网站,为了安全考虑,就不发源代码了。