当前位置：网站首页>04 | 后台登录：基于账号密码的登录方式(上)
04 | 后台登录：基于账号密码的登录方式(上)
2022-07-29 02:44:00 【程序员很菜】
你好， 我是程序猿零壹。
在上一篇文章如何快速部署一个基于laravel框架开发的网站中，我们一起使用laravel框架快速部署了一个网站。但是目前网站上只有一个默认的页面，显得有点孤单寂寞冷，是时候要开始给网站添砖加瓦了。
在php项目开发中，绝大部分情况下，我们都是在实现能提供某种功能的后端服务。那么我们要开发的博客网站应该具备哪些功能或者服务呢？
博客网站，实际上是一个内容发布系统。管理员在网站后台对博文进行创建、编辑之后进行发布，用户就可以在网站前台进行浏览、评价等操作。
因此我们的网站的功能分为两部分，一是后台管理，包含的功能有登录功能、修改密码、博文管理、后台账号管理、重设密码、后台角色管理、后台权限管理、系统设置管理等功能；一是前台展示，包含的功能有博文分页、博文详情、博文分类、博文推荐、博文评价等功能。
那接下来，我们就来看看后台管理功能中的登录功能是如何实现的。
登录功能，用来验证某个用户是否具有访问系统的权限。如果验证通过，该用户就可以访问系统，从而可以创建、更新、删除系统的数据和资源。
常见的登录方式，如下：
账号登录，是最简单的认证方式。用户提交用户名和密码到服务器进行认证，如果匹配则认证通过，登录成功。
短信登录，后台账号需要绑定一个手机号，登录的时候提交手机号，由系统发出一条带随机码的短信给用户，用户收到短信后再提交给系统认证。如果手机号和随机码认证通过，用户就能访问系统。
第三方登录，通过微信、支付宝、qq、github等第三方平台的账号授权来登录，跟手机一样，需要提前绑定账号。
在博客网站里，我们选择账号登录方式，也就是用户名+密码的方式来进行登录认证。
登录流程
用户在登录页面输入账号和密码，点击提交后通过ajax方式提交到服务器。服务器接受到登录请求，获取post参数到数据库里查询对应的记录，如果有查找到记录，就将用户输入的密码通过加密算法后与数据库里的数据进行匹配。如果匹配成功，则登录成功；如果匹配不成功，则返回对应的错误提示。
页面截图
前端代码
博客网站的后台前端样式，都是基于layui开发的。所以需要先下载layui。下载地址为：http://layui.winxapp.cn。下载后解压得到目录，如下图：
将layui目录整个复制到/public/static/admin目录下。
新建/public/static/admin/css/login.css，内容如下：
/*登陆表单样式 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
到此，前端文件准备完成，我们来查看下目录。
后端代码
新建app/Http/Controllers/Admin/BaseController.php，内容如下：
<?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，内容如下：
<?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，内容如下：
<!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 '请输入密码'
}
}
});
//监听提交
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，内容如下：
<?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，内容如下：
<!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/layui/css/layui.css" rel="stylesheet">
</head>
<body>
<div class="wrap">
欢迎回来，管理员。
</div>
</body>
</html>
<script src="/static/js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="/static/layui/layui.js" type="text/javascript"></script>修改routes/web.php，内容如下：
<?php
# 后台路由
Route::group([
'prefix' => 'admin'
], function () {
# 后台首页 访问路径：域名/admin
Route::get('/', 'Admin\[email protected]');
Route::group([
'prefix' => 'auth'
], function () {
# 后台登录页 访问路径：域名/admin/auth/login
Route::get('/login', 'Admin\[email protected]');
Route::post('/login', 'Admin\[email protected]');
});
});到此，我们就能通过在表单输入账号密码，通过 ajax向服务器提交信息了。
这里涉及到laravel框架的第一个知识点，路由。路由也就是可以访问的页面或者接口地址。
所有的laravel路由都在routes目录中的路由文件中定义。这些文件都会被框架自动加载。具体文档，可以访问laravel官网地址自行查看。
官网地址：https://laravel.com/docs
中文文档：https://learnku.com/laravel/docs
好了，今天我们就先到这里。下一篇，我们一起来看下如何接收、处理用户提交过来的参数，以及如何访问数据库进行数据查询做账号验证。
欢迎关注
最后，欢迎大家关注我的公众号呀 。打开微信搜索程序猿零壹公众号即可关注，希望能与大家共同进步。
边栏推荐
猜你喜欢
idea配置web容器与war打包
第十天笔记
QT compilation of IOT management platform 48 characteristic function design
Multiple inheritance and derived class member identification
C语言：小乐乐与欧几里得
Day 10 notes
PHP process communication series (I) named pipes
Some new ideas about time complexity
C language: Little Lele and hexadecimal conversion
Small program source code for campus stray cat information recording and sharing / wechat cloud development medium big cat spectrum small program source code
随机推荐
看机器人教育引领素质教育主流
第十天笔记
Asemi rectifier bridge s25vb100, s25vb100 parameters, s25vb100 application
QT qstringlist usage
OWT server source code analysis (4) -- video module analysis of mixer out
Interpretation of ue4.25 slate source code
向DataFrame中的特定位置添加一行
The origin of Nacos' name
MySQL 操作数据库数据报错：Fatal error encountered during command execution
MySQL - the difference between count (field), count (primary key), count (1), count (*)
C语言：小乐乐与欧几里得
数仓中概念术语解析
6-21 vulnerability exploitation MySQL weak password cracking
冰冰学习笔记：运算符重载---日期类的实现
Implement encapsulated public method global call in laravel framework
C语言：判断字母
Available data sets for scene classification tasks (part)
centos安装mysql8
.NET 序列化枚举为字符串
【luogu P8352】小 N 的独立集（DP套DP）（性质）