【log】snsTest,繼續完善測試項目功能

表情功能smohan

剛作完表情功能，用了smohan JQuery插件 | link

debug時善用瀏覽器，首先就是路徑問題，"/images/"和"imgages/"差距應該就是前者會在根目錄下尋找然後者直接在當前目錄下尋找子文件夾。

而後JQuery升級，原來smohan.js文件裏的live（）方法和die（）方法都不能用了，所有換成on（）和對應的off（）.

這點官方doc裏有詳細說明（JQuery.com）

而後顯示界面用替換字符來顯示圖片，並不能用Laravel的語法，由於輸出的時候會顯示出替換前的，因此老實：

<?php
    $strcon = htmlspecialchars($mes->content);
    $strcon = str_replace(htmlspecialchars("<emt>"),"<img src='/images/face/",$strcon);
    $strcon = str_replace(htmlspecialchars("</emt>"),".gif'>",$strcon);
    echo $strcon;
?>

改變時間格式：eg.3小時前發佈

link

新建一個timeFormat方法，傳入時間，而後轉換爲秒數，

$t=time()-strtotime($time);

而後就計算判斷時分秒了：

switch ($t){  
            case $t<60:return $t.'秒前';break;  
            case $t>=60 && $t<3600:return floor($t/60).'分鐘前';break;  
            case $t>=3600 && $t<86400:return floor($t/3600).'小時前';break;  
            case $t>=86400 && $t<604800:return floor($t/86400).'天前';break;  
            case $t>=604800 && $t<2419200:return floor($t/604800).'周前';break;  
            case $t>=2419200 && $t<29030400:return floor($t/2419200).'月前';break;  
            case $t>=29030400:return floor($t/29030400).'year ago';break;  
            default:return '剛剛';  
        }

感受仍是滿精妙的。

CSS水平居中垂直居中

永恆的煩惱，終於找到一篇寫的很好的文章：link

第二種方法是用transform解決的，是css3的屬性應該，挺感興趣。

其實也只有這種方法成功了，wrap了太多，不知道哪兒width、position、float這些都有可能引發margin：auto失敗吧。

.element {
    width: 600px; height: 400px;
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);    /* 50%爲自身尺寸的一半 */}

還有關於table的tips：想要固定某<td>（列寬）的寬度，能夠把其餘<tr>的寬度設定就好，注意是百分比。

css背景圖片自適應

挺管用，就是不知道兼容性怎麼樣。

background-size:100% 100%;

AJAX頭像上傳

make:migration create_userinfo_table

make:model  UserInfo

默認的規則是：類名的複數形式用來當作數據表的表名,因此這時添加一個屬性：

 protected $table = 'userinfo';

沒有用過ajax的小白，因此一直停留在http  500 (Internal Server Error) 

哎，我覺得是什麼問題……總之是服務端問題，ajax看報錯得從network裏面看preview，差很少被這個問題困了一天……

    avatar.blade.php

@extends('app')
@section('content')

<script type="text/javascript" src="/js/jquery.form.js"></script>
 <script type="text/javascript">

$(document).ready(function() {
             var options = {
              
                beforeSubmit:  showRequest,
                success:       showResponse,
                 dataType: 'json',

            };
   			$('#avatar').on('change', function(){
                $('#upload-avatar').html('正在上傳...');
                $('#form-avatar').ajaxForm(options).submit();
        });
   	});
   		function showRequest() {
        $("#validation-errors").hide().empty();
        $("#output").css('display','none');
        return true;
    }
   		function showResponse(response)  {
        if(response.success == false)
        {
            var responseErrors = response.errors;
            $.each(responseErrors, function(index, value)
            {
                if (value.length != 0)
                {
                	 $('#upload-avatar').html('上傳失敗');
                    $("#validation-errors").append('<div class="alert-error"><strong>注意：'+ value +'</strong><div>');
                }
            });
            $("#validation-errors").show();
        } else {
          $('#upload-avatar').html('上傳成功');
          $('#user-avatar').attr('src',response.avatar);

        }
    }
  
    </script>
<div class="avatar-upload" id="avatar-upload">
<div id="validation-errors"></div>
<div id="output" style="display:none"></div>
<img id="user-avatar" src="" class="img-circle">

	<form method="POST" id="form-avatar" enctype="multipart/form-data" action="/avatar/upload">
	{!! csrf_field() !!}
		<a href="#" id="" class="glyphicon glyphicon-user"></a> 
	
		<span id="upload-avatar">更換新頭像</span>
		 <input type="file" name="avatar" id="avatar"/>
	
	</form>
</div>

@stop

Model，在user模型中加入：

public function UserInfo() 
{
      return $this->hasOne('App\UserInfo','user_id');
}

UserInfo模型中加入：

  public function UserInfo() 
{
	return $this->belongsTo('App\User');
}

這時能夠直接用$user->userinfo->avatar來查詢頭像數據。

migration文件：

 public function up()
    {
       Schema::create('userinfo', function (Blueprint $table) {
            $table->increments('id');
            $table->integer('user_id')->index();
            $table->string('avatar');  //string=varchar
            $table->text('intro'); 
            $table->integer('like');
            
        });
    }

UserController添加avatarUPload方法：

   public function avatarUpload(Request $request)
    {
        
        // $this->wrongTokenAjax();
        $avatar = $request['avatar'];    
         $input = array('avatar' => $avatar); 
       //表單驗證
        $rules = array(
            'avatar' => 'image'
        );
        $validator = Validator::make($input, $rules);
      
          if ( $validator->fails() ){
            return Response::json([
                'success' => false,
                'errors' => $validator->getMessageBag()->toArray()
            ]);

        }
        $usernow=session('name');  //獲取當前用戶姓名

        $destinationPath = "uploads/$usernow/avatar/";
        $filename = $avatar->getClientOriginalName();       
        $insertid=session('id');

        //清除以前上傳文件 
        array_map('unlink', glob("uploads/$usernow/avatar/*"));
          $res=DB::table('userinfo')->where('user_id', $insertid)->update(
                    ['avatar' => "/".$destinationPath.$filename]
            );

         if(!$res){
         DB::table('userinfo')->insert(
                    ['avatar' => "/".$destinationPath.$filename,'user_id' => $insertid]
                  
            );
         }
         $avatar->move($destinationPath, $filename);
               return Response::json(
                    [
                        'success' => true,
                        'avatar' => asset($destinationPath.$filename),
                    ]
                );
           
    }

由於在上傳頭像以前想把放頭像的文件夾裏以前的文件刪除，有必要提一下glob函數，以前用其餘方法各類denied permission：

   array_map('unlink', glob("uploads/$usernow/avatar/*"));

The glob() function searches for all the pathnames matching pattern according to the rules used by the libc glob() function, which is similar to the rules used by common shells.