PHP实战-仿爱奇艺电影网站-学习-Day01

环境

1） thinkphp5.0.*
2） layui-v2.4.5 MIT

后台

登录

1. 控制器

2. 页面

2.1 验证码

1. 使用Thinkphp5.0提供的验证码，配置文件：Config.php 。

注意事项：Config.php中的配置项在顶层app的Config.php中配置没有问题，但是在模块应用中进行配置则无效。不知道为什么？so，要是配置config.php的话，还是在顶层的app->Config.php配置吧。

 // 验证码配置
    'captcha' => [
        // 验证码的字符集
        'codeSet' => '23456789abcdefhijkmnpqrstuvwxyzABCDEFHJKMNPQRSTUVWXYZ',
        'fontSize' => 18,             // 设置验证码字体大小
        'useCurve' => false,          // 添加混淆曲线
        'imageW' => 150,              // 设置图片的高度、宽度
        'imageH' => 35,
        'length' =>4,                 // 验证码位数
        'reset' =>true                // 验证成功后重置
        ],

在页面部分增加如下代码，注意增加了：验证码的宽度和高度：

<img style="width: 150px; height: 35px; cursor: pointer;" src="{:captcha_src()}" 
 title="看不清楚，再换一张" id="img" onclick="reloadImg()" />

layui集成了jQuery直接可以引用即可：

layui.use(['layer'],function(){
        $ = layui.jquery;    // 引用jQuery
        layer = layui.layer;

        // 用户名控件获取焦点
        $('#username').focus();
        // 回车登录
        $('input').keydown(function(e){
            if(e.keyCode == 13){
                dologin();
            }
        });
    });

    // 重新生成验证码  <--- 注意这一段才是重新生成验证码的脚本
    function reloadImg(){
        $('#img').attr('src','{:captcha_src()}?rand='+Math.random());
    }

前台

使用了Layui2.4.5后台样式；加载Layui之后还需要创建一个自己的样色；如：admin.css; 用来更改后台页面的“字体，缩进等”。

创建新的css来改造layui样式

1. 后台“左边菜单”的样式缩进
   admin.css

   //  以下是 菜单的样式，子菜单缩进。
   .layui-nav i {padding-right: 4px;}  /* 一级菜单图标：右偏移 */
   .layui-nav span {font-size:14px;}   /* 一级菜单文字：大小 */
   .layui-nav-child dd { padding-left: 20px;}  /* 二级菜单：左移 */
   .layui-nav-child *{font-size:12px;}         /* 二级菜单文字：大小 */
   .layui-nav-child span {padding-left: 4px;}
   

   效果如下：