你好， 我是程序猿零壹。
在上一篇文章如何快速部署一个基于laravel框架开发的网站中，我们一起使用laravel框架快速部署了一个网站。但是目前网站上只有一个默认的页面，显得有点孤单寂寞冷，是时候要开始给网站添砖加瓦了。
在php项目开发中，绝大部分情况下，我们都是在实现能提供某种功能的后端服务。那么我们要开发的博客网站应该具备哪些功能或者服务呢？
博客网站，实际上是一个内容发布系统。管理员在网站后台对博文进行创建、编辑之后进行发布，用户就可以在网站前台进行浏览、评价等操作。
因此我们的网站的功能分为两部分，一是后台管理，包含的功能有登录功能、修改密码、博文管理、后台账号管理、重设密码、后台角色管理、后台权限管理、系统设置管理等功能；一是前台展示，包含的功能有博文分页、博文详情、博文分类、博文推荐、博文评价等功能。
那接下来，我们就来看看后台管理功能中的登录功能是如何实现的。
登录功能，用来验证某个用户是否具有访问系统的权限。如果验证通过，该用户就可以访问系统，从而可以创建、更新、删除系统的数据和资源。
常见的登录方式，如下：
账号登录，是最简单的认证方式。用户提交用户名和密码到服务器进行认证，如果匹配则认证通过，登录成功。
短信登录，后台账号需要绑定一个手机号，登录的时候提交手机号，由系统发出一条带随机码的短信给用户，用户收到短信后再提交给系统认证。如果手机号和随机码认证通过，用户就能访问系统。
第三方登录，通过微信、支付宝、qq、github等第三方平台的账号授权来登录，跟手机一样，需要提前绑定账号。
在博客网站里，我们选择账号登录方式，也就是用户名+密码的方式来进行登录认证。
登录流程
用户在登录页面输入账号和密码，点击提交后通过ajax方式提交到服务器。服务器接受到登录请求，获取post参数到数据库里查询对应的记录，如果有查找到记录，就将用户输入的密码通过加密算法后与数据库里的数据进行匹配。如果匹配成功，则登录成功；如果匹配不成功，则返回对应的错误提示。
页面截图
前端代码
博客网站的后台前端样式，都是基于layui开发的。所以需要先下载layui。下载地址为：。下载后解压得到目录，如下图：
将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个文件的下载地址为：/s/18csudPMEew11Cd0XTy1H7g?pwd=blog
到此，前端文件准备完成，我们来查看下目录。
后端代码
新建app/Http/Controllers/Admin/BaseController.php，内容如下：
<?phpnamespace 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，内容如下：
<?phpnamespace 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，内容如下：
<?phpnamespace 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官网地址自行查看。
官网地址：/docs
中文文档：/laravel/docs
好了，今天我们就先到这里。下一篇，我们一起来看下如何接收、处理用户提交过来的参数，以及如何访问数据库进行数据查询做账号验证。
欢迎关注
最后，欢迎大家关注我的公众号呀 。打开微信搜索程序猿零壹公众号即可关注，希望能与大家共同进步。
