當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

04 | 后台登录：基于账号密码的登录方式(上)

發(fā)布時間：2023/12/29 编程问答 35 豆豆

生活随笔收集整理的這篇文章主要介紹了 04 | 后台登录：基于账号密码的登录方式(上) 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

你好，我是程序猿零壹。

在上一篇文章如何快速部署一個基于laravel框架開發(fā)的網(wǎng)站中，我們一起使用laravel框架快速部署了一個網(wǎng)站。但是目前網(wǎng)站上只有一個默認(rèn)的頁面，顯得有點孤單寂寞冷，是時候要開始給網(wǎng)站添磚加瓦了。

在php項目開發(fā)中，絕大部分情況下，我們都是在實現(xiàn)能提供某種功能的后端服務(wù)。那么我們要開發(fā)的博客網(wǎng)站應(yīng)該具備哪些功能或者服務(wù)呢？

博客網(wǎng)站，實際上是一個內(nèi)容發(fā)布系統(tǒng)。管理員在網(wǎng)站后臺對博文進(jìn)行創(chuàng)建、編輯之后進(jìn)行發(fā)布，用戶就可以在網(wǎng)站前臺進(jìn)行瀏覽、評價等操作。

因此我們的網(wǎng)站的功能分為兩部分，一是后臺管理，包含的功能有登錄功能、修改密碼、博文管理、后臺賬號管理、重設(shè)密碼、后臺角色管理、后臺權(quán)限管理、系統(tǒng)設(shè)置管理等功能；一是前臺展示，包含的功能有博文分頁、博文詳情、博文分類、博文推薦、博文評價等功能。

那接下來，我們就來看看后臺管理功能中的登錄功能是如何實現(xiàn)的。

登錄功能，用來驗證某個用戶是否具有訪問系統(tǒng)的權(quán)限。如果驗證通過，該用戶就可以訪問系統(tǒng)，從而可以創(chuàng)建、更新、刪除系統(tǒng)的數(shù)據(jù)和資源。

常見的登錄方式，如下：

賬號登錄，是最簡單的認(rèn)證方式。用戶提交用戶名和密碼到服務(wù)器進(jìn)行認(rèn)證，如果匹配則認(rèn)證通過，登錄成功。
短信登錄，后臺賬號需要綁定一個手機(jī)號，登錄的時候提交手機(jī)號，由系統(tǒng)發(fā)出一條帶隨機(jī)碼的短信給用戶，用戶收到短信后再提交給系統(tǒng)認(rèn)證。如果手機(jī)號和隨機(jī)碼認(rèn)證通過，用戶就能訪問系統(tǒng)。
第三方登錄，通過微信、支付寶、qq、github等第三方平臺的賬號授權(quán)來登錄，跟手機(jī)一樣，需要提前綁定賬號。

在博客網(wǎng)站里，我們選擇賬號登錄方式，也就是用戶名+密碼的方式來進(jìn)行登錄認(rèn)證。

登錄流程

用戶在登錄頁面輸入賬號和密碼，點擊提交后通過ajax方式提交到服務(wù)器。服務(wù)器接受到登錄請求，獲取post參數(shù)到數(shù)據(jù)庫里查詢對應(yīng)的記錄，如果有查找到記錄，就將用戶輸入的密碼通過加密算法后與數(shù)據(jù)庫里的數(shù)據(jù)進(jìn)行匹配。如果匹配成功，則登錄成功；如果匹配不成功，則返回對應(yīng)的錯誤提示。

頁面截圖

前端代碼

博客網(wǎng)站的后臺前端樣式，都是基于layui開發(fā)的。所以需要先下載layui。下載地址為：http://layui.winxapp.cn。下載后解壓得到目錄，如下圖：

將layui目錄整個復(fù)制到/public/static/admin目錄下。

新建/public/static/admin/css/login.css，內(nèi)容如下：

/*登陸表單樣式 start*/ body{background: url("/static/admin/imgs/login-backend.jpg") no-repeat;background-size: cover; } .wrap{width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;position: fixed; } .login{width:440px;padding: 40px;background-color: #ffffff;border-radius: 4px;/* overflow-x: hidden; */box-sizing: border-box;align-self: center; } .login a.logo{display: block;height: 58px;width: 167px;margin: 0 auto 30px auto;background-size: 167px 42px; } .login .message {/*margin: 10px 0 0 -58px;*/padding: 18px 10px 18px 0;background: #09b4c5;position: relative;color: #fff;font-size: 24px;text-align: center;word-spacing:20px; } ? .login input[type=text], .login input[type=file], .login input[type=password], .login input[type=email], select {border: 1px solid #DCDEE0;vertical-align: middle;border-radius: 3px;height: 50px;padding: 0px 16px;font-size: 14px;color: #555555;outline:none;width:100%;box-sizing: border-box; } .login input[type=text]:focus, .login input[type=file]:focus, .login input[type=password]:focus, .login input[type=email]:focus, select:focus {border: 1px solid #27A9E3; } .login input[type=submit], .login input[type=button]{display: inline-block;vertical-align: middle;padding: 12px 24px;margin: 0px;font-size: 18px;line-height: 24px;text-align: center;white-space: nowrap;cursor: pointer;color: #ffffff;background-color: #09b4c5;border-radius: 3px;border: none;-webkit-appearance: none;outline:none;width:100%; } .login hr {background: #fff 0 0 no-repeat; } .login hr.hr15 {height: 15px;border: none;margin: 0px;padding: 0px;width: 100%; } .login hr.hr20 {height: 20px;border: none;margin: 0px;padding: 0px;width: 100%; } /*登陸表單樣式 end*/

下載jquery-1.8.3.min.js文件至/public/static/admin/js目錄下。

下載md5.min.js文件至/public/static/admin/js目錄下。

下載login-backend.jpg文件至/public/static/admin/imgs目錄下。

以上3個文件的下載地址為：https://pan.baidu.com/s/18csudPMEew11Cd0XTy1H7g?pwd=blog

到此，前端文件準(zhǔn)備完成，我們來查看下目錄。

后端代碼

新建app/Http/Controllers/Admin/BaseController.php，內(nèi)容如下：

<?php namespace App\Http\Controllers\Admin; use App\Http\Controllers\Controller; class BaseController extends Controller {private $data = [];protected function assign($key, $value){$this->data[$key] = $value;}protected function view($page){$data = $this->data;return view($page, $data);} }

新建app/Http/Controllers/Admin/AuthController.php，內(nèi)容如下：

<?php namespace App\Http\Controllers\Admin; class AuthController extends BaseController {public function login(){return $this->view('admin/auth/login');} }

新建resources/views/admin/auth/login.blade.php，內(nèi)容如下：

<!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>登錄-博客后臺管理</title><link href="/static/admin/layui/css/layui.css" rel="stylesheet"><link href="/static/admin/css/login.css" rel="stylesheet"></head><body><div class="wrap"><div class="login"><div class="message">后臺管理</div><hr class="hr20"> ?<form method="post" class="layui-form" ><input name="username" placeholder="賬號" type="text" lay-verify="username" class="layui-input" autocomplete="off"><hr class="hr15"><input name="password" lay-verify="password" placeholder="密碼" type="password" class="layui-input"><hr class="hr15"><input value="登錄" lay-submit lay-filter="login" style="width:100%;" type="submit"><hr class="hr20" ></form></div></div></body> </html> <script src="/static/admin/js/jquery-1.8.3.min.js" type="text/javascript"></script> <script src="/static/admin/js/md5.min.js" type="text/javascript"></script> <script src="/static/admin/layui/layui.js" type="text/javascript"></script> ? <script>$(function () {layui.use('form', function(){var form = layui.form;form.verify({'username':function(value){if(value.length < 1){return '請輸入賬號'}},'password':function(value){if(value.length < 1){return '請輸入密碼'}}});//監(jiān)聽提交form.on('submit(login)', function(data){let params = data.field || {};params.password = md5(params.password);params._token = "{{csrf_token()}}";$.ajax({url:'/admin/auth/login',data:params,type:"post",dataType:"json",success:function(result){let code = result.code||'';if(code !== 'success') {layer.msg(result.msg || "操作失敗");return false;}window.location.href = '/admin';},error:function(error){console.log(error)}});return false;});});}) </script>

新建app/Http/Controllers/Admin/HomeController.php，內(nèi)容如下：

<?php namespace App\Http\Controllers\Admin; class HomeController extends BaseController {public function index(){return $this->view('admin/home/index');} }

新建resources/views/admin/home/index.blade.php，內(nèi)容如下：

修改routes/web.php，內(nèi)容如下：

<?php # 后臺路由 Route::group(['prefix' => 'admin' ], function () {# 后臺首頁訪問路徑：域名/adminRoute::get('/', 'Admin\HomeController@index');Route::group(['prefix' => 'auth'], function () {# 后臺登錄頁訪問路徑：域名/admin/auth/loginRoute::get('/login', 'Admin\AuthController@login');Route::post('/login', 'Admin\AuthController@loginPost');}); });

到此，我們就能通過在表單輸入賬號密碼，通過 ajax向服務(wù)器提交信息了。

這里涉及到laravel框架的第一個知識點，路由。路由也就是可以訪問的頁面或者接口地址。

所有的laravel路由都在routes目錄中的路由文件中定義。這些文件都會被框架自動加載。具體文檔，可以訪問laravel官網(wǎng)地址自行查看。

官網(wǎng)地址：https://laravel.com/docs

中文文檔：https://learnku.com/laravel/docs

好了，今天我們就先到這里。下一篇，我們一起來看下如何接收、處理用戶提交過來的參數(shù)，以及如何訪問數(shù)據(jù)庫進(jìn)行數(shù)據(jù)查詢做賬號驗證。

歡迎關(guān)注

最后，歡迎大家關(guān)注我的公眾號呀。打開微信搜索程序猿零壹公眾號即可關(guān)注，希望能與大家共同進(jìn)步。

總結(jié)

以上是生活随笔為你收集整理的04 | 后台登录：基于账号密码的登录方式(上)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： linux安装jdk配置环境变量之永久生
下一篇： ylmf OS 3.0 分配修改登陆ro