Laravel框架导航菜单选中状态

先看图:
后台菜单截图

思路:在模板里进行判断,如果请求的路径和当前路径相同,则有自定义的class样式,代码如下:

<ul class="list-unstyled">
     <li class="{{ Request::getPathinfo() == '/users'?'active':'' }}"><a href="{{ url('/users') }}">用户列表</a></li>
     <li class="{{ Request::getPathinfo() == '/users/create'?'active':'' }}"><a href="{{ url('/users/create') }}">添加用户</a></li>
</ul>

Laravel框架中Session储存机制

0x01 起因

一次操作在Controller中删除了Session,然后立马来了一个dd(session(key));很惊讶的发现,Session是空的,但是因为中间键那里是进行了登陆判断的。虽然dd出来的Session是空的,然而访问其它页面居然毫无影响。我第一时间是以为中间键没弄好。经过仔细检查后,发现。。。。

0x02 经过

部分Session操作

//session的永久保存(在不过期范围内)  
Session::put('key', 'value');  
 
//等同于PHP的原生session  
$_SESSION['key'] = 'value';  
 
//get操作  
$value = Session::get('key', 'default');  
 
//去除操作并删除,类似pop概念  
$value = Session::pull('key', 'default');  
 
//检测是否存在key  
Session::has('users');  
 
//删除key  
Session::forget('key');  

虽然我删除了Session,但是Session好像并没有立即生效。

谷歌后,发现有个方法Session::save(),在销毁了Session后执行下这个,再dd,立马生效了。

在bootstrap/compiled.php中

class Middleware implements HttpKernelInterface  
{  
    ...  
    public function handle(Request $request, $type = HttpKernelInterface::MASTER_REQUEST, $catch = true)  
    {  
        $this->checkRequestForArraySessions($request);  
        if ($this->sessionConfigured()) {  
            $session = $this->startSession($request); // 启动session  
            $request->setSession($session);  
        }  
        $response = $this->app->handle($request, $type, $catch); // 调用controller的method  
        if ($this->sessionConfigured()) {  
            $this->closeSession($session);         //关闭session  
            $this->addCookieToResponse($response, $session);  
        }  
        return $response;  
    }  
    ...  
 
    protected function closeSession(SessionInterface $session)  
    {  
        $session->save();    // 保存session  
        $this->collectGarbage($session);  
    }  
}  

可以看见,在调用完controller之后,调用了session->save()的方法,来主动的保存session。这样session才能落地保存起来,如果在controller或者view里面写了exit或者dd等;,那么session是不会被生效的,除非主动的写Session::save()才能手工的保存起来。因此在debug调试的时候千万要注意啊。

Laravel框架添加成功跳转提示页

0x01 背景

在写后台增删改查的时候,出于用户体验,每个操作都需要添加相应的提示,虽然Laravel有一定的提示。但是我个人感觉还是太繁琐不人性化,不便于后期维护。

Laravel自带的提示是在操作完成后添加一个一次性Session,然后再页面输出

return redirect('/')->with('message', 'Message sent!');

view输出的时候。

@if(Session::has('message'))
 <div class="alert alert-info"> {{Session::get('message')}} 
 </div> 
 @endif

这样写呢,我个人感觉,每一次操作都需要在每个页面写,如果我们后期进行更改的时候,需要每个页面的改,相对来说不便于维护。我由此方法进行了一下改造。

0x02 准备提示页面

新建一条路由,一个控制器,一个对应的view页面。

路由:

  Route::resource('/prompt','PromptController');

控制器:

<?php

namespace App\Http\Controllers\Admin;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;

class PromptController extends Controller
{
    public function index()
    {
        //验证参数
    if(!empty(session('message')) && !empty(session('url')) && !empty(session('jumpTime'))){
        $data = [
            'message' => session('message'),
            'url' => session('url'),
            'jumpTime' => session('jumpTime'),
            'status' => session('status')
        ];
    } else {
        $data = [
            'message' => '请勿非法访问!',
            'url' => '/',
            'jumpTime' => 3,
            'status' => false
        ];
    }
        return view('admin.prompt',['data' => $data]);
    }
}

view页面:

<body>

        <div class="wrapper-page">
            <div class="panel panel-color {{ $data['status']?'panel-inverse':'panel-danger' }}">

                <div class="panel-heading">
                   <h3 class="text-center m-t-10">{{ $data['message'] }}</h3>
                </div>

                <div class="panel-body">
                    <div class="text-center">
                        <div class="alert {{ $data['status']?'alert-info':'alert-danger' }} alert-dismissable">
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                            浏览器页面将在<b id="loginTime">{{ $data['jumpTime'] }}</b>秒后跳转......
                        </div>
                        <div class="form-group m-b-0">
                            <div class="input-group">
                                {{--<input type="password" class="form-control" placeholder="Enter Email">--}}
                                <span class="input-group-btn"> <button type="submit" class="btn {{ $data['status']?'btn-success':'btn-danger' }}">点击立即跳转</button> </span>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <script src="/js/jquery.js"></script>
        <script type="text/javascript">
            $(function(){
                //循环倒计时,并跳转
                var url = "{{ $data['url'] }}";
                var loginTime = parseInt($('#loginTime').text());
                console.log(loginTime);
                var time = setInterval(function(){
                    loginTime = loginTime-1;
                    $('#loginTime').text(loginTime);
                    if(loginTime==0){
                        clearInterval(time);
                        window.location.href=url;
                    }
                },1000);
            })
//点击跳转
            $('.btn-success').click(function () {
                var url = "{{ $data['url'] }}";
                window.location.href=url;
            })
        </script>

    </body>

创建好以后,以后使用的时候,只需要在操作完成后来一句。

return redirect('/prompt')->with(['message'=>'添加会员失败!','url' =>'/users/create', 'jumpTime'=>3,'status'=>false]);

就可以像ThinkPHP一样的,跳转到提示页,再跳转到指定的URL了。

解释:
message:需要在提示页提示的内容。
url:需要最后跳转的url。
jumpTime:在提示页等待的时间,秒为单位。
status:状态,因为提示有正确提示与错误提示,不同的提示提示页面可以设置不同的CSS,从而达到区分。

0x03 结束

到这里就全部完成了,如果您有更好的方法,欢迎与我沟通。上方关于我有QQ。谢谢

Laravel框架使用阿里云的OSS储存文件

0x01 准备工作

1、提交表单,注意enctype="multipart/form-data"

2、注意路由。

0x02 开始

1、使用composer安装相关的组件包。

composer require johnlui/aliyun-oss:~2.0

如果速度慢,可以切换到国内composer镜像,享受飞一般的速度,执行命令即可

composer config -g repo.packagist composer https://packagist.phpcomposer.com

2、根据相关文档创建Services

https://packagist.org/packages/johnlui/aliyun-oss

现在阿里云头部没有获取key的链接,所以获取AccessKeyId的链接是:https://ak-console.aliyun.com

3、修改好后,开始写;

<?php
namespace App\Services;

use App\Store\UsersStroe;
use App\Tools\Common;
use Illuminate\Support\Facades\Session;
use App\Services\OSS;

class UsersService
{
    private static $usersStore;
    public function __construct(UsersStroe $usersStroe)
    {
        self::$usersStore = $usersStroe;
    }

    //添加用户
    public function create($data)
    {
        //密码加密及生成UUID
        $password = Common::cryptString($data['password']);
        $guid = Common::getUuid();

        //调用文件上传,处理上传的文件
        $fileName = $this->uploadFile($data['pic']);
        if(empty($fileName)){
            return back();
        }

        //拼装SQL语句
        $param = [
            'guid' => $guid,
            'username' => $data['username'],
            'password' => $password,
            'tel' => $data['tel'],
            'pic' => $fileName,
            'status' => '1',
            'addtime' => time()
        ];
        return self::$usersStore->create($param);
    }

    /**
     * 文件上传
     * @param  string 文件名
     * @return 文件名
     */
    public function uploadFile($file)
    {
        //获取缓存文件夹下的绝对路径
        $realPath = $file->getRealPath();

        //获取上传文件的后缀名
        $ext = $file->getClientOriginalExtension();

        //使用uuid随机生成文件名
        $fileName = Common::getUuid().'.'.$ext;

        $result = OSS::publicUpload('k2shop',$fileName,$realPath);

        //判断是否上传成功
        if(empty($result)){
            return false;
        }

        return $fileName;
    }
}

由于我是采用的mvcs的设计模式,所以控制器的接收并验证表单并没有贴出。

使用jQuery实现canvas中的getContext("2d")方法

使用canvas中,用原生的JS代码没有任何问题,但是在用jQuery来实现的时候,会遇到没有getContext()方法。

原生代码如下:

<canvas id="myCanvas"></canvas>

    <script type="text/javascript">

    //获取图形容器
    var canvas=document.getElementById('myCanvas');

    //渲染
    var ctx=canvas.getContext('2d');

    //设置颜色
    ctx.fillStyle='#FF0000';

    //输出一个位于坐标(0,0)位置的,宽为80,高为100的矩形
    ctx.fillRect(0,0,80,100);

    </script>

可是使用jQuery的时候就出现问题了,当使用$('#myCanvas')来获取的时候,

var ctx=canvas.getContext('2d');

这句会提示一个不存在的函数getContext();

原因是因为getContext是DOM对象方法,也就是js原生方法,不能用jquery对象直接调用;

解决办法如下,将

var ctx=canvas.getContext('2d');

改为

var ctx=canvas[0].getContext('2d');

就可以正常使用了。