WeUI登录页面
登录页面
1. 创建登录路由
路由文件地址 routes\web.php
Route::get('/login', function () {
return view('login');
});
2. 模块规划
- 基础布局模板：
resources\views\layout.blade.php - 模板组件目录：
resources\component
基础布局模板：resources\views\layout.blade.php
@yield('title')
@yield('popout')
@yield('mask')
@yield('content')
@yield('myjs')
登录模板 resources\views\login.blade.php
@extends('layout')
@section('title','登录')
@section('content')
没账户，去注册
@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();