登录页面
1. 创建登录路由
路由文件地址 routes\web.php
Route::get('/login', function () {
return view('login');
});
2. 模块规划
- 基础布局模板：
resources\views\layout.blade.php - 模板组件目录：
resources\component
基础布局模板：resources\views\layout.blade.php
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"/>
<title>@yield('title')</title>
<link rel="stylesheet" href="css/weui.css"/>
<link rel="stylesheet" href="css/style.css"/>
<script src="js/zepto.min.js"></script>
</head>
<body>
<div id="popout">@yield('popout')</div>
<div id="mask">@yield('mask')</div>
<div id="navigation">@yield('navigation')</div>
<div id="content">@yield('content')</div>
</body>
@yield('myjs')
</html>
登录模板 resources\views\login.blade.php
@extends('layout')
@section('title','登录')
@section('content')
<div class="weui-cells__title"></div>
<div class="weui-cells weui-cells_form">
<div class="weui-cell">
<div class="weui-cell__hd"><label class="weui-label">账户</label></div>
<div class="weui-cell__bd weui-cell_primary"><input type="tel" class="weui-input" placeholder="手机号码"/></div>
</div>
<div class="weui-cell">
<div class="weui-cell__hd"><label class="weui-label">密码</label></div>
<div class="weui-cell__bd weui-cell_primary"><input type="password" class="weui-input" placeholder="不少于6位"/></div>
</div>
<div class="weui-cell weui-cell_vcode">
<div class="weui-cell__hd"><label class="weui-label">验证码</label></div>
<div class="weui-cell__bd weui-cell_primary"><input type="number" class="weui-input"></div>
<div class="weui-cell__ft"></div>
</div>
</div>
<div class="weui-cells__tips"></div>
<div class="weui-btn-area">
<a href="" class="weui-btn weui-btn_primary">登录</a>
</div>
<a href="/register" class="important-tips">没账户，去注册</a>
<script>
$(function(){
//点击更换验证码
$('.weui-vcode-img').on('click',function(){
var src = '';
if($(this).attr('src').indexOf('random')==-1){
src = $(this).attr('src');
}else{
src = $(this).attr('src').split('?')[0];
}
$(this).attr('src',src+'?random='+Math.random());
});
});
</script>
@endsection
3. 图片验证码
控制器规划
- 接口类控制器存放目录：
app\Http\Controllers\Service - 系统类控制器存放目录：
app\Http\Controllers\View - 自定义工具类存放目录：
app\Tool
验证码路由 routes\web.php
Route::any('service/validate_code/create','Service\ValidateCodeController@create');
验证码控制器 app\Http\Controllers\Service\ValidateCodeController.php
namespace App\Http\Controllers\Service;
use App\Http\Controllers\Controller;
use App\Tool\ValidateCode;
class ValidateCodeController extends Controller{
/**
* 创建验证码
* @return string
*/
public function create()
{
$vcode = new ValidateCode;
return $vcode->build();
}
}
自定义添加图片验证码类 app\Tool\ValidateCode.php
/**
* Created by PhpStorm.
* User: admin
* Date: 2017/2/28
* Time: 17:36
*/
namespace App\Tool;
/*图片验证码*/
class ValidateCode
{
//随机因子
private $charset = 'abcdefghkmnprstuvwxyzABCDEFGHKMNPRSTUVWXYZ23456789';
//验证码
private $code;
private $size = 4;
private $width = 130;
private $height = 50;
private $imgres;//图像资源句柄
private $font;
private $fontsize = 20;
private $fontcolor;
/**
* 构造方法初始化
*/
public function __construct($size=4,$width=130,$height=50,$fontsize=20)
{
$this->size = $size ? $size : $this->size;
$this->width = $width ? $width : $this->width;
$this->height = $height ? $height : $this->height;
$this->fontsize = $fontsize ? $fontsize : $this->fontsize;
$this->font = dirname(__FILE__) . '/Elephant.ttf';
}
/*
* 生成随机验证码
* */
private function createCode()
{
$len = strlen($this->charset) - 1;
for ($i = 0; $i < $this->size; $i++) {
$this->code .= $this->charset[mt_rand(0, $len)];
}
}
/*
* 创建图片背景
* */
private function createBg()
{
$this->imgres = imagecreatetruecolor($this->width, $this->height);
//$color = imagecolorallocate($this->imgres, mt_rand(157, 255), mt_rand(157, 255), mt_rand(157, 255));
$color = imagecolorallocate($this->imgres, mt_rand(245, 255), mt_rand(245, 255), mt_rand(245, 255));
imagefilledrectangle($this->imgres, 0, $this->height, $this->width, 0, $color);
}
/*
* 创建图片文字
* */
private function createFont()
{
$x = $this->width / $this->size;
for ($i = 0; $i < $this->size; $i++) {
$this->fontcolor = imagecolorallocate($this->imgres, mt_rand(0, 156), mt_rand(0, 156), mt_rand(0, 156));
imagettftext($this->imgres, $this->fontsize, mt_rand(-30, 30), $x * $i + mt_rand(1, 5), $this->height / 1.4, $this->fontcolor, $this->font, $this->code[$i]);
}
}
/*
* 创建图片干扰线和点
* */
private function createLine()
{
for ($i = 0; $i < 6; $i++) {
$color = imagecolorallocate($this->imgres, mt_rand(0, 156), mt_rand(0, 156), mt_rand(0, 156));
imageline($this->imgres, mt_rand(0, $this->width), mt_rand(0, $this->height), mt_rand(0, $this->width), mt_rand(0, $this->height), $color);
}
for ($i = 0; $i < 100; $i++) {
$color = imagecolorallocate($this->imgres, mt_rand(200, 255), mt_rand(200, 255), mt_rand(200, 255));
imagestring($this->imgres, mt_rand(1, 5), mt_rand(0, $this->width), mt_rand(0, $this->height), '.', $color);
}
}
/*
* 页面输出头信息
* */
private function output()
{
header('Content-type:image/png');
imagepng($this->imgres);
imagedestroy($this->imgres);
}
/*
* 对外生成图片验证码
* */
public function build()
{
$this->createBg();
$this->createCode();
$this->createLine();
$this->createFont();
$this->output();
}
/*
* 对外获取验证码，用于数据持久化，保存至session等。
* */
public function getCode()
{
return strtolower($this->code);
}
}
//$vcode = new ValidateCode();
//$vcode->build();
