Microsoft Word - Thinkphp5实现用户登录及注册功能.docx

Size: px

Start display at page:

Download "Microsoft Word - Thinkphp5实现用户登录及注册功能.docx"

崔寿
5 years ago
Views:

1 Thinkphp5 实现用户登录功能移动平台应用软件开发课程建设小组北京大学软件与微电子学院 2018 年 11 月 15 日星期四本文参考整理 1 实验环境操作系统 :CentOS7.2(64 位 ) 操作系统腾讯云主机 :1 核 2G 内存 1M 带宽宝塔 Linux 面板管理 :5.9 稳定版 2 安装配置 ThinkPHP5 运行环境 2.1 安装宝塔 Linux 面板在 Linux 命令行窗口执行以下命令 yum install -y wget && wget -O install.sh && sh install.sh

2 输入 :y 开始安装安装成功后, 提示宝塔登录地址以及用户名密码请保存之后也可以在宝塔中修改用户名和密码

在浏览器中输入宝塔的访问地址, 并输入用户名和密码登录示例 : Bt-Panel: http://154.8.229.

3 在浏览器中输入宝塔的访问地址, 并输入用户名和密码登录示例 : Bt-Panel: username: k7msqz1a password: b58c77e9 2.2 安装 LAMP(Apache+PHP+MySQL) 套件

4 点击一键安装后, 开始安装, 大概需要等待 10 分钟左右

5 2.3 创建基于 ThinkPHP5.0 框架的 Web 站点在宝塔面板首页, 点击宝塔一键部署源码工具

6 在框架栏目中找到 ThinkPHP5.0, 点击一键部署在域名处填写主机的 IP 地址 ( 如果有自己的域名, 可以填写域名, 前提是需要将域名解析到这个 IP)

7 成功部署后, 可以看到数据库的用户名和密码登信息之后也可以通过宝塔面板中的数据库菜单查看

8 在文件系统中创建了相应的工作目录可以通过以下方式打开页面方式一 : 或域名 ) 方式二 : 或域名 )/index.php/index/index/index 为了实现伪静态 ( 即通过或域名 )/index/index/index) 访问, 需要对站点进行相应的配置

9 站点默认伪静态配置如下将站点的伪静态配置改为 thinkphp

10 这样可以通过或域名 )/index/index/index 访问站点了

11 同时也可以通过方式一和方式二访问开发阶段为了便于查看错误信息, 将调试模式打开

12 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)

13 创建 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');

$application\index\controller 下新建$

14 修改数据库配置文件 4 开发用户登录功能在 application\index\controller 下新建 Login.php

15 在 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=" 请输入密码 "

16 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> 访问

17 在 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(' 用户名密码错误 ');

18 // 记录用户登录信息 cookie('user_id', $has['id'], 3600); // 一个小时有效期 cookie('user_name', $has['user_name'], 3600); } $this->redirect(url('index/index')); 打开登录页面, 输入用户名和密码

19 如果用户名或密码错误, 提示信息如下如果输入正确的用户名密码,admin admin 跳转到十年磨一剑页面

20 登录成功之后跳转到 index.php 的 index 方法, 接下来将 index 方法修改一下 <?php namespace app\index\controller; class Index { public function index() { echo " 您好 : ". cookie('user_name'). ', <a href="'. url('login/loginout'). '"> 退出 </a>'; } } 这样, 登录成功后, 提示登陆成功

21 5 开发退出功能 Login.php 中添加 loginout 方法 : // 退出登录 public function loginout() { cookie('user_id', null); cookie('user_name', null); } $this->redirect(url('login/index'));

22 点击退出后, 跳转到登录页面 6 美化前端界面使用前端框架 Bootstrap v3.3.7, 下载地址如下 dist.zip 下载完成之后, 放到 public\static 下改名为 bootstrap

$必须在 Bootstrap 之前引入下载 jquery, 并放到 public\static\js$

23 Bootstrap 的所有 JavaScript 插件都依赖 jquery, 因此 jquery 必须在 Bootstrap 之前引入下载 jquery, 并放到 public\static\js 目录下

24 可以看到, 前面的代码也是通过这个路径访问样式文件及 js 美化后的效果如下 : 最终的目录结构如下 :

5-1 nav css 5-2

5 HTML CSS HTML CSS Ê Ê Ê Ê 5-1 nav css 5-2 5-1 5 5-1-1 5-01 css images 01 index.html 02 5-3 style.css css 03 CH5/5-01/images 04 images index.html style.css 05