【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.