ThinkPHP5.1后台搭建项目2---后台登录（验证码）

最新推荐文章于 2021-03-10 03:27:32 发布

VIP文章陆洋山芋

最新推荐文章于 2021-03-10 03:27:32 发布

阅读量2k

点赞数

分类专栏：后端开发文章标签： ThinkPHP5.1

本文链接：https://blog.csdn.net/qq_40709702/article/details/103145479

版权

文章目录

1、数据库字段

CREATE TABLE `cms_admin` (
  `admin_id` mediumint(6) unsigned NOT NULL AUTO_INCREMENT,
  `username` varchar(20) NOT NULL DEFAULT '',
  `password` varchar(32) NOT NULL DEFAULT '',
  `lastloginip` varchar(15) DEFAULT '0',
  `lastlogintime` int(10) unsigned DEFAULT '0',
  `email` varchar(40) DEFAULT '',
  `realname` varchar(50) NOT NULL DEFAULT '',
  `status` tinyint(1) NOT NULL DEFAULT '1',
  PRIMARY KEY (`admin_id`),
  KEY `username` (`username`)
) ENGINE=MyISAM AUTO_INCREMENT=9 DEFAULT CHARSET=utf8;

2、layui框架

利用现成的layui框架可以简单的搭建后台的页面。
去layui的官网下载layui代码，放在public下，直接在html的<head>部分导入：

<link rel="stylesheet" href="/layui/css/layui.css">

3、dialog弹窗

自定义封装四类弹窗，写入/public/dialog.js中，也可以在实际使用中直接使用layer。

var dialog = {
   
    // 错误弹出层
    error: function(message) {
   
        layer.open({
   
            content:message,
            icon:2,
            title : '错误提示',
        });
    },

    //成功弹出层
    success : function(message,url) {
   
        layer.open({
   
            content : message,
            icon : 1,
            yes : function(){
   
                location.href=url;
            },
        });
    },

    // 确认弹出层
    confirm : function(message, url) {
   
        layer.open({
   
            content : message,
            icon:3,
            btn : ['是','否'],
            yes : function(){
   
                location.href=url;
            },
        });
    },

    //无需跳转到指定页面的确认弹出层
    toconfirm : function(message) {
   
        layer.open({
   
            content : message,
            icon:3,
            btn : ['确定'],
        });
    },
}

4、登录界面的前端实现

（1）界面渲染

在这里插入图片描述
在application/admin/view/login/index.html中的<body>中添加：

<div class="beg-login-box">
    <header>
        <h1>后台登录</h1>
    </header>
    <div class="beg-login-main">
        <form action="" class="layui-form">
            <div class="layui-form-item">
                <label class="beg-login-icon">
                    <i class="layui-icon">&#xe612;</i>
                </label>
                <input type="text" name="username" lay-verify="username" autocomplete="off" placeholder="这里输入登录名" class="layui-input username">
            </div>
            <div class="layui-form-item">
                <label class="beg-login-icon">
                    <i class="layui-icon">&#xe642;</i>
                </label>
                <input type="password" name="password" lay-verify="password" autocomplete="off" placeholder="这里输入密码" class="layui-input">
            </div></

最低0.47元/天解锁文章

陆洋山芋

关注

0
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
ThinkPHP5.1后台搭建项目2---后台登录（验证码）

文章目录1、数据库字段2、layui框架3、dialog弹窗4、登录界面的前端实现（1）界面渲染（2）验证判断（3）、数据与后端的交互（4）、验证码部分5、登录界面的后端实现（0）公共函数（1）controller部分（2）、model部分（3）说明1、数据库字段CREATE TABLE `cms_admin` ( `admin_id` mediumint(6) unsigned NOT ...
复制链接

扫一扫