登录页面的效果图
主要涉及的知识点:
- 使用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” 讲过来,可以参见:
在上面的代码中出现了以下这些代码:
<i class="fa fa-user fa-lg"></i><i class="fa fa-lock fa-lg"></i><i class="fa fa-info fa-lg"></i>我们使用了 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">有关矢量图标的详细使用参见:
在登录页面,我们还使用验证码
<img src="{:captcha_src()}" alt="点击刷新" οnclick="this.src='{:captcha_src()}?'+Math.random();"/>
{:captcha_src()} 是tp5 自带的一个助手函数,可以实现显示验证码
详见:tp5完全开发手册“杂项-验证码”
搭建好登录页面,除了会熟练使用html元素和css3样式外,还要借助一些框架,如:bootstrap,font awesome等