Thinkphp -- 利用MVC模式完成註冊登錄功能
阿新 • • 發佈：2019-05-01
跳轉 link url mar splay 更新時間 aps jquer white
這是一篇記錄向，記錄我後臺的學習過程。
如有不正確的地方，請多多指教。
基礎知識：
MVC即 Model View Controller
- Model（模型）表示應用程序核心（比如數據庫記錄列表）。
- View（視圖）顯示數據（數據庫記錄）。
- Controller（控制器）處理輸入（寫入數據庫記錄）。
（圖源https://www.runoob.com/design-pattern/mvc-pattern.html）
當我們瀏覽一個網頁的時候首先會訪問到View（視圖層）
在我們輸入用戶名密碼之後，會將輸入的數據傳到Controller（控制器）中，再通過Model（模型）將數據寫/讀數據庫記錄列表。
Model（模型）層操作完畢之後，數據更新返回Controller（控制器）。
再次返回View（視圖層）。
數據庫結構：
id：主鍵
username：用戶名
password：密碼
nickname：昵稱
email：註冊郵箱
status：用戶狀態（0表示禁用，1表示可用）
super：是否為超級管理員（0表示否，1表示是）//可無
create_time：創建時間
update_time：更新時間
delete_time：軟刪除時間
Controller層：
//註冊 public function register() {if (request()->isAjax()) {//判斷是否存在ajax請求 $data = [ //傳入View視圖層中用戶輸入的數據 ‘username‘ => input(‘post.username‘), ‘password‘ => input(‘post.password‘), ‘conpass‘ => input(‘post.conpass‘),//確認密碼 ‘nickname‘ => input(‘post.nickname‘), ‘email‘ => input(‘post.email‘) ];$result = model(‘Admin‘)->register($data);//將數據傳到Model中處理 if ($result == 1) { //註冊成功，跳轉至登錄界面 $this->success(‘註冊成功‘, ‘http://quantabei.cn/index.php/index/index/login‘);//如果註冊成功，自動跳轉至登錄界面 } else { $this->error($result); } } return view();//返回View視圖層 }
//登錄 public function login() { if (request()->isAjax()) { $date = [ "username" => input(‘post.username‘), "password" => input(‘post.password‘) ];//傳入數據，需要什麽就接收什麽，達到過濾 //將數據傳入名為Admin的Model下login方法中 $result = model("Admin")->login($date); if ($result == 1) { $this->success(‘登錄成功!‘, ‘http://quantabei.cn/index.php/index/home/index.html‘);//跳轉到首頁 } else { $this->error($result); } } return view(); }
Model層：
//註冊賬戶 public function register($data) { //這裏是一個驗證器 $validate = new\app\common\validate\Admin(); if(!$validate->scene(‘register‘)->check($data)){ return $validate->getError(); } $result = $this ->allowField(true)->save($data);//allowField:只允許插入數據庫中有的字段 if($result){ mailto($data[‘email‘],‘註冊管理員賬戶成功！‘,‘註冊管理員賬戶成功！‘); return 1;//註冊成功 }else{ return "註冊失敗！"; } }註冊
//登陸校驗 public function login($data) { $validate = new\app\common\validate\Admin(); if(!$validate->scene(‘login‘)->check($data)){ return $validate->getError(); } $result =Db::table(‘qt_admin‘)-> where($data)->find(); if($result){ //判斷用戶是否可用 if($result[‘status‘]!=1){ return "此用戶被禁用！"; } //1表示用戶名和密碼正確 $sessionData = [ ‘id‘ =>$result[‘id‘], ‘nickname‘=>$result[‘nickname‘], ‘is_super‘=>$result[‘is_super‘] ]; session(‘admin‘,$sessionData); return 1; }else{ return ‘用戶名或密碼錯誤!‘; } }登錄
class Admin extends Validate { protected $rule = [ ‘username|管理員賬戶‘ => ‘require‘, ‘password|密碼‘ => ‘require‘, ‘conpass|確認密碼‘ => ‘require|confirm:password‘,//conpass要和password相等 ‘nickname|昵稱‘ => ‘require‘, ‘email|郵箱‘ => ‘require|email|unique:admin‘//unique:admin驗證郵箱唯一性，驗證不了？ ]; //登陸驗證場景 public function sceneLogin() { return $this->only([‘username‘,‘password‘]); } //註冊驗證場景 public function sceneRegister() { return $this->only([‘username‘,‘password‘,‘conpass‘,‘nickname‘,‘email‘]) ->append(‘username‘,‘unique:admin‘); } }驗證器
View視圖層（html）：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <link rel="shortcut icon" href="/logo.jpg" type="image/x-icon"> <link href="/static/admin/css/bootstrap.min.css" rel="stylesheet" /> <link href="/static/admin/css/font-awesome.min.css" rel="stylesheet" /> <link href="/static/admin/css/weather-icons.min.css" rel="stylesheet" /> <link id="beyond-link" href="/static/admin/css/beyond.min.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="login-container"> <form> <div class="loginbox bg-white"> <div class="loginbox-title">登錄</div> <div class="loginbox-or"> <div class="or-line"></div> </div> <div class="loginbox-textbox"> <input type="text" class="form-control" name="username" placeholder="用戶名" /> </div> <div class="loginbox-textbox"> <input type="text" class="form-control" name="password" placeholder="密碼" /> </div> <div class="loginbox-forgot"> <a href="http://quantabei.cn/index.php/index/index/forget">忘記密碼?</a> </div> <div class="loginbox-submit"> <input type="submit" class="btn btn-primary btn-block" id=‘login‘ value="登錄"> </div> <div class="loginbox-signup"> <a href="http://quantabei.cn/index.php/index/index/register">註冊賬戶</a> </div> </div> </form> </div> <script src="/static/admin/js/skins.min.js"></script> <!--Basic Scripts--> <script src="/static/admin/js/jquery.min.js"></script> <script src="/static/admin/js/bootstrap.min.js"></script> <script src="/static/admin/js/slimscroll/jquery.slimscroll.min.js"></script> <!--Beyond Scripts--> <script src="/static/admin /js/beyond.js"></script> <script src="/static/lib/layer/layer.js"></script> <script> $(window).bind("load", function () { /*Sets Themed Colors Based on Themes*/ themeprimary = getThemeColorFromCss(‘themeprimary‘); themesecondary = getThemeColorFromCss(‘themesecondary‘); themethirdcolor = getThemeColorFromCss(‘themethirdcolor‘); themefourthcolor = getThemeColorFromCss(‘themefourthcolor‘); themefifthcolor = getThemeColorFromCss(‘themefifthcolor‘); }); $(function(){ $(‘#login‘).click(function () { $.ajax({ url :"{:url(‘index.php/index/index/login‘)}", type : "post", data : $(‘form‘).serialize(), dataType : "json", success : function (data) { if(data.code == 1){ layer.msg(data.msg,{ icon:6,//顯示笑臉圖標 time:2000//2s後自動關閉並且跳轉 },function () { location.href = data.url; }) }else{ layer.open({ title :"登錄失敗", content :data.msg, icon:5, anim:6 }) } } }); return false; }); }); </script> </body> <!-- /Body --> </html>登錄界面
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <link href="/static/admin/css/bootstrap.min.css" rel="stylesheet" /> <link href="/static/admin/css/font-awesome.min.css" rel="stylesheet" /> <link href="/static/admin/css/weather-icons.min.css" rel="stylesheet" /> <link id="beyond-link" href="/static/admin/css/beyond.min.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="login-container"> <form> <div class="loginbox bg-white"> <div class="loginbox-title">註冊</div> <div class="loginbox-or"> <div class="or-line"></div> </div> <div class="loginbox-textbox"> <input type="text" class="form-control" name="username" placeholder="用戶名" /> </div> <div class="loginbox-textbox"> <input type="password" class="form-control" name="password" placeholder="填寫密碼" /> </div> <div class="loginbox-textbox"> <input type="password" class="form-control" name="conpass" placeholder="確認密碼" /> </div> <div class="loginbox-textbox"> <input type="text" class="form-control" name="nickname" placeholder="填寫昵稱" /> </div> <div class="loginbox-textbox"> <input type="text" class="form-control" name="email" placeholder="填寫郵箱" /> </div> <div class="loginbox-submit"> <input type="submit" class="btn btn-primary btn-block" id=‘register‘ value="註冊"> </div> <div class="loginbox-signup"> <a href="http://quantabei.cn/index.php/index/index/login">返回登錄</a> </div> </div> </form> </div> <script src="/static/admin/js/skins.min.js"></script> <!--Basic Scripts--> <script src="/static/admin/js/jquery.min.js"></script> <script src="/static/admin/js/bootstrap.min.js"></script> <script src="/static/admin/js/slimscroll/jquery.slimscroll.min.js"></script> <!--Beyond Scripts--> <script src="/static/admin /js/beyond.js"></script> <script src="/static/lib/layer/layer.js"></script> <script> $(window).bind("load", function () { /*Sets Themed Colors Based on Themes*/ themeprimary = getThemeColorFromCss(‘themeprimary‘); themesecondary = getThemeColorFromCss(‘themesecondary‘); themethirdcolor = getThemeColorFromCss(‘themethirdcolor‘); themefourthcolor = getThemeColorFromCss(‘themefourthcolor‘); themefifthcolor = getThemeColorFromCss(‘themefifthcolor‘); }); $(function(){ $(‘#register‘).click(function () { $.ajax({ url :"{:url(‘index.php/index/index/register‘)}", type : "post", data : $(‘form‘).serialize(), dataType : ‘json‘, success : function (data) { if(data.code == 1){ layer.msg(data.msg,{ icon:6,//顯示笑臉圖標 time:2000//2s後自動關閉並且跳轉 },function () { location.href = data.url; }) }else{ layer.open({ title :"註冊失敗", content :data.msg, icon:5, anim:6 }) } } }); return false; }); }); </script> </body> <!-- /Body --> </html>註冊界面
運行結果：
數據庫：
哈哈哈哈哈哈嗝
Thinkphp -- 利用MVC模式完成註冊登錄功能