視頻網站上線測試了

要做視頻網站的決心是在一次無意中的觀看優酷視頻得來的，因爲當時學過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：因爲是上線網站，爲了安全考慮，就不發源代碼了。