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

你好，我是程序猿零壹。

在上一篇文章如何快速部署一个基于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 () {# 后台首页   访问路径：域名/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向服务器提交信息了。

这里涉及到laravel框架的第一个知识点，路由。路由也就是可以访问的页面或者接口地址。

所有的laravel路由都在routes目录中的路由文件中定义。这些文件都会被框架自动加载。具体文档，可以访问laravel官网地址自行查看。

官网地址：https://laravel.com/docs

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

好了，今天我们就先到这里。下一篇，我们一起来看下如何接收、处理用户提交过来的参数，以及如何访问数据库进行数据查询做账号验证。