thinkphp5 第12课：项目案例-登录页面的模板设计

最新推荐文章于 2024-03-21 21:41:08 发布

李书明

最新推荐文章于 2024-03-21 21:41:08 发布

阅读量804

点赞数

分类专栏： thinkphp5.0

本文链接：https://blog.csdn.net/lsmxx/article/details/100985212

版权

thinkphp5.0 专栏收录该内容

43 篇文章 13 订阅

订阅专栏

登录页面的效果图

主要涉及的知识点：

使用bootstrap框架搭建页面（不再讲解）
使用bootstrap表单验证（不再讲解）
使用font awesome矢量图标库
使用tp5模板中的包含文件指令include
使用tp5中的验证码

参考代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录</title>
    <{include file="head"}>
    <style type="text/css">

        #login_form {
            display: block;
        }

        .fa {
            display: inline-block;
            top: 27px;
            left: 6px;
            position: relative;
            color: #ccc;
        }

        input[type="text"], input[type="password"] {
            padding-left: 26px;
        }

        .form-control-feedback {
            top: 20px;
        }

    </style>
</head>
<body>
<div class="container">
    <div class="form row">
        <form class="form-horizontal col-md-offset-3 col-md-6" id="login_form" action="{:url('dologin')}" method="post">
            <h3 class="form-title">帐户登录</h3>

            <div class="form-group">
                <i class="fa fa-user fa-lg"></i>
                <input class="form-control" type="text" placeholder="请输入帐户" name="username"
                       autofocus="autofocus" maxlength="20"/>
            </div>
            <div class="form-group">
                <i class="fa fa-lock fa-lg"></i>
                <input class="form-control" type="password" placeholder="请输入密码" name="password"
                       maxlength="8"/>
            </div>
            <div class="form-group">
                <div class="row">
                    <div class="col-md-6">
                        <i class="fa fa-info fa-lg"></i>
                        <input class="form-control" type="text" placeholder="请输入验证码" name="vcode">
                    </div>
                    <div class="col-md-6"><img src="{:captcha_src()}" alt="点击刷新"
                                               onclick="this.src='{:captcha_src()}?'+Math.random();"/></div>
                </div>
            </div>

            <div class="form-group">
                <input type="submit" class="btn btn-success btn-block" value="登录"/>
            </div>
        </form>
    </div>
</div>
</body>
</html>
<script>
    $(function () {
        $('form').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                username: {
                    validators: {
                        notEmpty: {
                            message: '帐户不能为空'
                        }
                    }
                },
                password: {
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        }
                    }
                },
                vcode: {
                    validators: {
                        notEmpty: {
                            message: '验证码不能为空'
                        }
                    }
                }

            }
        });
    });
</script>

在head区，有一行指令：<{include file="head"}>

这是tp5中，在模板中可以包含另一个模板文件

在这里，该模板中包含了head.html模板文件，相当于把head.html所有代码复制了本模板

详见：tp5完全开发手册“模板-包含文件”

head.html文件代码如下

<link rel="stylesheet" href="__STATIC__/bootstrap-3.3.7-dist/css/bootstrap.css">
<link rel="stylesheet" href="__STATIC__/bootstrapvalidator/css/bootstrapValidator.css">
<link rel="stylesheet" href="__STATIC__/font-awesome-4.7.0/css/font-awesome.css">
<script src="__STATIC__/jquery-1.11.3.min.js"></script>
<script src="__STATIC__/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script src="__STATIC__/bootstrapvalidator/js/bootstrapValidator.js"></script>
<script src="__STATIC__/bootstrapvalidator/js/language/zh_CN.js"></script>

上面代码中，有关　__STATIC__ 已经在“thinkphp5 第7课：引入bootstrap” 讲过来，可以参见：

https://blog.csdn.net/lsmxx/article/details/100830619

在上面的代码中出现了以下这些代码：



我们使用了 font awesome矢量图标

打开网站：http://www.fontawesome.com.cn/

需要下载矢量库的插件，放在tp5项目的public目录的static目录下

最后在head区引入该插件，如head.html文件中的下面这条代码就是引入font awesome矢量图标插件
<link rel="stylesheet" href="__STATIC__/font-awesome-4.7.0/css/font-awesome.css">
有关矢量图标的详细使用参见：

http://www.fontawesome.com.cn/examples/

在登录页面，我们还使用验证码

<img src="{:captcha_src()}" alt="点击刷新"                         οnclick="this.src='{:captcha_src()}?'+Math.random();"/>

{:captcha_src()} 是tp5 自带的一个助手函数，可以实现显示验证码

详见：tp5完全开发手册“杂项-验证码”

搭建好登录页面，除了会熟练使用html元素和css3样式外，还要借助一些框架，如:bootstrap，font awesome等

李书明

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
thinkphp5 第12课：项目案例-登录页面的模板设计

登录页面的效果图主要涉及的知识点：使用bootstrap框架搭建页面（不再讲解）使用bootstrap表单验证（不再讲解）使用font awesome矢量图标库使用tp5模板中的包含文件指令include 使用tp5中的验证码参考代码<!doctype html><html lang="en"><head> <...
复制链接

扫一扫