Thinkphp5 实现用户登录功能 移动平台应用软件开发课程建设小组北京大学软件与微电子学院 2018 年 11 月 15 日星期四 本文参考 https://www.kancloud.cn/phper123/tools/289763 整理 1 实验环境 操作系统 :CentOS7.2(64 位 ) 操作系统 腾讯云主机 :1 核 2G 内存 1M 带宽 宝塔 Linux 面板管理 :5.9 稳定版 2 安装配置 ThinkPHP5 运行环境 2.1 安装宝塔 Linux 面板 在 Linux 命令行窗口执行以下命令 yum install -y wget && wget -O install.sh http://download.bt.cn/install/install.sh && sh install.sh
输入 :y 开始安装 安装成功后, 提示宝塔登录地址以及用户名密码 请保存 之后也可以在宝 塔中修改用户名和密码
在浏览器中输入宝塔的访问地址, 并输入用户名和密码登录 示例 : Bt-Panel: http://154.8.229.242:8888 username: k7msqz1a password: b58c77e9 2.2 安装 LAMP(Apache+PHP+MySQL) 套件
点击一键安装后, 开始安装, 大概需要等待 10 分钟左右
2.3 创建基于 ThinkPHP5.0 框架的 Web 站点 在宝塔面板首页, 点击 宝塔一键部署源码 工具
在框架栏目中找到 ThinkPHP5.0, 点击 一键部署 在域名处填写主机的 IP 地址 ( 如果有自己的域名, 可以填写域名, 前提是需 要将域名解析到这个 IP)
成功部署后, 可以看到数据库的用户名和密码登信息 之后也可以通过宝塔 面板中的数据库菜单查看
在文件系统中创建了相应的工作目录 可以通过以下方式打开页面 方式一 :http://ip( 或域名 ) 方式二 :http://ip( 或域名 )/index.php/index/index/index 为了实现伪静态 ( 即通过 http://ip( 或域名 )/index/index/index) 访问, 需要对 站点进行相应的配置
站点默认伪静态配置如下 将站点的伪静态配置改为 thinkphp
这样可以通过 http://ip( 或域名 )/index/index/index 访问站点了
同时也可以通过方式一和方式二访问 开发阶段为了便于查看错误信息, 将调试模式打开
3 创建数据库及表 前面的步骤已经创建了数据库 可以通过 phpmyadmin 来管理数据库
创建 User 表 DROP TABLE IF EXISTS `users`; CREATE TABLE `users` ( `id` int(11) NOT NULL AUTO_INCREMENT COMMENT ' 用户 id', `user_name` varchar(155) NOT NULL COMMENT ' 用户名 ', `user_pwd` varchar(50) NOT NULL COMMENT ' 用户密码 ', PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8; 向 User 表插入一条记录 insert into users(`user_name`,`user_pwd`) value( 'admin', '21232f297a57a5a743894a0e4a801fc3');
修改数据库配置文件 4 开发用户登录功能 在 application\index\controller 下新建 Login.php
在 application\index\view 新建 login 文件夹, 并新建 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> 登录系统 </title> <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet"> </head> <body class="gray-bg"> <div class="container"> <div class="row"> <div class="col-sm-7"> <div class="ibox float-e-margins"> <div class="ibox-content"> <div class="row"> <div class="col-sm-6 b-r"> <h3 class="m-t-none m-b"> 登录 </h3> <p> 欢迎登录本站 ( o )</p> <form role="form" action="{:url('login/dologin')}" method="post"> <div class="form-group"> <label> 用户名 </label> <input type="text" placeholder=" 请输入用户名 " class="formcontrol"> </div> <div class="form-group"> <label> 密码 </label> <input type="password" placeholder=" 请输入密码 "
class="form-control"> </div> <div> <button class="btn btn-sm btn-primary pull-right m-t-n-xs" type="submit"><strong> 登录 </strong> </button> </div> </form> </div> </div> </div> </div> </div> </div> </div> <script src="/static/js/jquery.min.js?v=2.1.4"></script> <script src="/static/bootstrap/js/bootstrap.min.js"></script> </body> </html> 访问 http://ip/index/login/index
在 Login.php 中新建 dologin 方法 // 处理登录逻辑 public function dologin() { $param = input('post.'); if(empty($param['user_name'])){ } $this->error(' 用户名不能为空 '); if(empty($param['user_pwd'])){ } $this->error(' 密码不能为空 '); // 验证用户名 $has = db('users')->where('user_name', $param['user_name'])->find(); if(empty($has)){ } $this->error(' 用户名密码错误 '); // 验证密码 if($has['user_pwd']!= md5($param['user_pwd'])){ } $this->error(' 用户名密码错误 ');
// 记录用户登录信息 cookie('user_id', $has['id'], 3600); // 一个小时有效期 cookie('user_name', $has['user_name'], 3600); } $this->redirect(url('index/index')); 打开登录页面, 输入用户名和密码
如果用户名或密码错误, 提示信息如下 如果输入正确的用户名密码,admin admin 跳转到十年磨一剑页面
登录成功之后跳转到 index.php 的 index 方法, 接下来将 index 方法修改一下 <?php namespace app\index\controller; class Index { public function index() { echo " 您好 : ". cookie('user_name'). ', <a href="'. url('login/loginout'). '"> 退出 </a>'; } } 这样, 登录成功后, 提示登陆成功
5 开发退出功能 Login.php 中添加 loginout 方法 : // 退出登录 public function loginout() { cookie('user_id', null); cookie('user_name', null); } $this->redirect(url('login/index'));
点击退出后, 跳转到登录页面 6 美化前端界面 使用前端框架 Bootstrap v3.3.7, 下载地址如下 https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7- dist.zip 下载完成之后, 放到 public\static 下改名为 bootstrap
Bootstrap 的所有 JavaScript 插件都依赖 jquery, 因此 jquery 必须在 Bootstrap 之 前引入 下载 jquery, 并放到 public\static\js 目录下
可以看到, 前面的代码也是通过这个路径访问样式文件及 js 美化后的效果如下 : 最终的目录结构如下 :