一、项目基础搭建

启动largon 打开终端命令
laravel new orange新建一个项目
下载weAdmin后台模板，并将静态资源复制到项目的public目录下，html文件复制到resources/view 目录下。

二、数据库的配置

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=orange
DB_USERNAME=root
DB_PASSWORD=123

三、将laravel自带注册登录运行起来

1、终端执行命令：php artisan make:auth 生成用户认证所需的路由和模板。此时查看web.php发现路由已更新。
2、接下来我们执行迁移命令：php artisan migrate生成数据表，然后在数据库中你刷新一下就会发现多了几张表。
3、再去刷新浏览器，页面的右上角多了登录和注册按钮，我们随即注册一个用户 user,注册成功跳转到首页。此时数据库中已插入一条数据。
4、接下来我们可以使用这个账号去登录了，由于Laravel默认的登录是使用邮箱的，我能体验简单的注册登录功能！

四、后台admin登录功能的实现。

1、创建管理员(admins)数据表
(1) 生成admins表的迁移文件：php artisan make:migration create_admins_table,
(2) 修改 database/migrations/*_create_admins_table.php 中的 up()方法,如：

<?phpuse Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;class CreateAdminsTable extends Migration
{/*** Run the migrations.** @return void*///php artisan make:migration create_users_table//php artisan migratepublic function up(){Schema::create('admins', function (Blueprint $table) {$table->increments('id');$table->string('name');$table->string('email')->unique();$table->integer('mobile')->unique();$table->string('password');$table->rememberToken();$table->timestamps();});}/*** Reverse the migrations.** @return void*/public function down(){Schema::dropIfExists('admins');}
}

终端执行php artisan migrate, 我们的数据库会自动添加admins表,手动往数据表admins里面添加一条数据。即将刚才前端注册的数据插入数据表中，数据库中密码已经加密，真是密码不要忘记。
记得修改下刚建立的数据库表的字段长度！

admin数据表

(3) 生成数据表模型：php artisan make:model Models/Admin,并修改app/Models/Admin.php为：

<?php
namespace App\Models;
use Illuminate\Notifications\Notifiable;
use Illuminate\Foundation\Auth\User as Authenticatable;class Admin extends Authenticatable
{use Notifiable;/*** The attributes that are mass assignable.** @var array*/protected $fillable = ['name', 'email', 'password',];/*** The attributes that should be hidden for arrays.** @var array*/protected $hidden = ['password', 'remember_token',];
}

为我们的后台注册用户注册登录路由

Route::prefix('admin')->namespace('Admin')->group(function () {//后台首页$this->get('login', 'LoginController@showLoginForm')->name('admin.login');$this->post('login', 'LoginController@login');$this->post('logout', 'LoginController@logout')->name('admin.logout');
});

新建管理员登录控制器：php artisan make:controller Admin/LoginController,添加代码如下(参考auth/LoginController)：

<?phpnamespace App\Http\Controllers\Admin;use App\Http\Controllers\Controller;
use Illuminate\Foundation\Auth\AuthenticatesUsers;
use Illuminate\Http\Request;class LoginController extends Controller
{/*|--------------------------------------------------------------------------| Login Controller|--------------------------------------------------------------------------|| This controller handles authenticating users for the application and| redirecting them to your home screen. The controller uses a trait| to conveniently provide its functionality to your applications.|*/use AuthenticatesUsers;/*** Where to redirect users after login.** @var string*/protected $redirectTo = '/admin';/*** Create a new controller instance.** @return void*/public function __construct(){$this->middleware('guest:admin')->except('logout');}public function showLoginForm(){return view('admin.login');}protected function guard(){return auth()->guard('admin');}/*** 后台管理员退出跳转到后台登录页面* Log the user out of the application.** @param  \Illuminate\Http\Request  $request* @return \Illuminate\Http\Response*/public function logout(Request $request){$this->guard()->logout();$request->session()->invalidate();return redirect('/admin/login');}protected function attemptLogin(Request $request){$username = $request->input('username');$password = $request->input('password');// 验证用户名登录方式$usernameLogin = $this->guard()->attempt(['name' => $username, 'password' => $password], $request->has('remember'));if ($usernameLogin) {return true;}// 验证手机号登录方式$mobileLogin = $this->guard()->attempt(['mobile' => $username, 'password' => $password], $request->has('remember'));if ($mobileLogin) {return true;}// 验证邮箱登录方式$emailLogin = $this->guard()->attempt(['email' => $username, 'password' => $password], $request->has('remember'));if ($emailLogin) {return true;}return false;}protected function validateLogin(Request $request){$request->validate([$this->username() => 'required|string','password' => 'required|string',]);}public function username(){return 'username';}
}

添加管理员认证，修改config/auth.php文件，如：

'guards' => ['web' => ['driver' => 'session','provider' => 'users',],'admin' => ['driver' => 'session','provider' => 'admins',],'api' => ['driver' => 'token','provider' => 'users',],
],

'providers' => ['users' => ['driver' => 'eloquent','model' => App\User::class,],'admins' => ['driver' => 'eloquent','model' => App\Models\Admin::class,]// 'users' => [//     'driver' => 'database',//     'table' => 'users',// ],
],

创建admin登录所用的中间件
通过命令：php artisan make:middleware AdminAuthMiddleware创建后台管理员中间件，并添加代码如下：

<?phpnamespace App\Http\Middleware;use Closure;
use Illuminate\Support\Facades\Auth;
class AdminAuthMiddleware
{/*** Handle an incoming request.** @param  \Illuminate\Http\Request  $request* @param  \Closure  $next* @return mixed*/public function handle($request, Closure $next, $guard = null){//当 auth 中间件判定某个用户未认证，会返回一个 JSON 401 响应，或者，如果不是 Ajax 请求的话，将用户重定向到 login 命名路由（也就是登录页面）。if (Auth::guard($guard)->guest()) {if ($request->ajax() || $request->wantsJson()) {return response('Unauthorized.', 401);} else {return redirect()->guest('admin/login');}}return $next($request);}
}

接下来去app\Http\Kernel.php protected $routeMiddleware里面注册该中间件
'auth.admin' => \App\Http\Middleware\AdminAuthMiddleware::class,
然后在后台并在web.php中使用此中间件，添加后台中间件

Route::prefix('admin')->namespace('Admin')->group(function () {//后台首页$this->get('login', 'LoginController@showLoginForm')->name('admin.login');$this->post('login', 'LoginController@login');$this->post('logout', 'LoginController@logout')->name('admin.logout');Route::middleware('auth.admin:admin')->name('admin.')->group(function () {Route::get('/', 'HomeController@index');});
});

创建后台首页控制器
此时我们的Admin\HomeController并未创建
创建后台首页路由
php artisan make:route Admin/HomeController
增加一条路由规则，加载我们的后台首页

public function index(){
//        dd('后台首页，当前管理员：' . auth('admin')->user()->name);return view('admin.index');}

创建后台首页与login注册界面（注意修改css js路径）
views准备好后台登录页面和后台首页页面

image.png

后台登录页面(注意此处ajax后台登录失败错误信息的回显方式)

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>管理员登录-WeAdmin Frame型后台管理系统-WeAdmin 1.0</title><meta name="renderer" content="webkit|ie-comp|ie-stand"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"><meta http-equiv="Cache-Control" content="no-siteapp" /><link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /><link rel="stylesheet" href="/static/css/font.css"><link rel="stylesheet" href="/static/css/weadmin.css"><script src="/lib/layui/layui.js" charset="utf-8"></script></head>
<body class="login-bg"><div class="login"><div class="message">WeAdmin 1.0-管理登录</div><div id="darkbannerwrap"></div><form method="post" class="layui-form" >@csrf<input name="username" placeholder="用户名"  type="text" lay-verify="required" class="layui-input" ><hr class="hr15"><input name="password" lay-verify="required" placeholder="密码"  type="password" class="layui-input"><hr class="hr15"><input class="loginin" value="登录" lay-submit lay-filter="login" style="width:100%;" type="submit">{{--<hr class="hr20" >--}}{{--<div>--}}{{--前端静态展示，请随意输入，即可登录。--}}{{--</div>--}}</form></div><script src="/js/jquery.js" charset="utf-8"></script><script type="text/javascript">layui.extend({admin: '{/}/static/js/admin'});layui.use(['form','admin'], function(){var form = layui.form,admin = layui.admin;// layer.msg('玩命卖萌中', function(){//   //关闭后的操作//   });//监听提交form.on('submit(login)', function(data){var data=data.field;console.log(data);$.ajax({type: 'POST',url: "/admin/login",data:data,success: function (data) {localStorage.setItem("login",true);location.href='/admin'},error: function (data) {var error_msg=JSON.parse(data.responseText).errors;layer.msg(error_msg.username[0],function(){// location.href='/index.html'});},})// layer.msg(JSON.stringify(data.field),function(){//     // location.href='/index.html'// });return false;});});   </script>  <!-- 底部结束 -->
</body>
</html>

后台首页（注意此处后台登录模块右上角登录名的回显方式）

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>后台管理-WeAdmin Frame型后台管理系统-WeAdmin 1.0</title><meta name="renderer" content="webkit|ie-comp|ie-stand"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"><meta http-equiv="Cache-Control" content="no-siteapp" /><link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" /><link rel="stylesheet" href="./static/css/font.css"><link rel="stylesheet" href="./static/css/weadmin.css"><script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script></head><body><!-- 顶部开始 --><div class="container"><div class="logo"><a href="./index.html">WeAdmin v1.0</a></div><div class="left_open"><i title="展开左侧栏" class="iconfont">&#xe699;</i></div><ul class="layui-nav left fast-add" lay-filter=""><li class="layui-nav-item"><a href="javascript:;">+新增</a><dl class="layui-nav-child"><!-- 二级菜单 --><dd><a onclick="WeAdminShow('资讯','https://www.youfa365.com/')"><i class="iconfont">&#xe6a2;</i>资讯</a></dd><dd><a onclick="WeAdminShow('图片','http://www.baidu.com')"><i class="iconfont">&#xe6a8;</i>图片</a></dd><dd><a onclick="WeAdminShow('用户','https://www.youfa365.com/')"><i class="iconfont">&#xe6b8;</i>用户</a></dd></dl></li></ul><ul class="layui-nav right" lay-filter=""><li class="layui-nav-item"><a href="javascript:;">{{Auth::guard('admin')->user()->name}}</a><dl class="layui-nav-child"><!-- 二级菜单 --><dd><a onclick="WeAdminShow('个人信息','http://www.baidu.com')">个人信息</a></dd><dd><a onclick="WeAdminShow('切换帐号','./login.html')">切换帐号</a></dd><dd>{{--<a class="loginout" href="/admin/logout">退出</a>--}}<a class="loginout" href="{{ route('admin.logout') }}"onclick="event.preventDefault();document.getElementById('logout-form').submit();">退出</a><form id="logout-form" action="{{ route('admin.logout') }}" method="POST" style="display: none;">@csrf</form></dd></dl></li><li class="layui-nav-item to-index"><a href="/">前台首页</a></li></ul></div><!-- 顶部结束 --><!-- 中部开始 --><!-- 左侧菜单开始 --><div class="left-nav"><div id="side-nav"><ul id="nav"><li><a href="javascript:;"><i class="iconfont">&#xe6b8;</i><cite>会员管理</cite><i class="iconfont nav_right">&#xe697;</i></a><ul class="sub-menu"><li><a _href="./pages/member/list.html"><i class="iconfont">&#xe6a7;</i><cite>会员列表</cite></a></li><li><a _href="./pages/member/del.html"><i class="iconfont">&#xe6a7;</i><cite>会员删除</cite></a></li><li><a href="javascript:;"><i class="iconfont">&#xe70b;</i><cite>会员管理</cite><i class="iconfont nav_right">&#xe697;</i></a><ul class="sub-menu"><li><a _href="./pages/member/addInput.html"><i class="iconfont">&#xe6a7;</i><cite>输入框操作</cite></a></li><li><a _href="./pages/404.html"><i class="iconfont">&#xe6a7;</i><cite>三级菜单演示</cite></a></li><li><a _href="./pages/404.html"><i class="iconfont">&#xe6a7;</i><cite>导航菜单演示</cite></a></li></ul></li></ul></li><li><a href="javascript:;"><i class="iconfont">&#xe705;</i><cite>文章管理</cite><i class="iconfont nav_right">&#xe697;</i></a><ul class="sub-menu"><li><a _href="./pages/article/list.html"><i class="iconfont">&#xe6a7;</i><cite>文章列表</cite></a></li><li><a _href="./pages/article/category.html"><i class="iconfont">&#xe6a7;</i><cite>分类管理</cite></a></li></ul></li><li><a href="javascript:;"><i class="iconfont">&#xe723;</i><cite>订单管理</cite><i class="iconfont nav_right">&#xe697;</i></a><ul class="sub-menu"><li><a _href="./pages/order/list.html"><i class="iconfont">&#xe6a7;</i><cite>订单列表</cite></a></li></ul></li><li><a href="javascript:;"><i class="iconfont">&#xe726;</i><cite>管理员管理</cite><i class="iconfont nav_right">&#xe697;</i></a><ul class="sub-menu"><li><a _href="./pages/admin/list.html"><i class="iconfont">&#xe6a7;</i><cite>管理员列表</cite></a></li><li><a _href="./pages/admin/role.html"><i class="iconfont">&#xe6a7;</i><cite>角色管理</cite></a></li><li><a _href="./pages/admin/cate.html"><i class="iconfont">&#xe6a7;</i><cite>权限分类</cite></a></li><li><a _href="./pages/admin/rule.html"><i class="iconfont">&#xe6a7;</i><cite>权限管理</cite></a></li></ul></li><li><a href="javascript:;"><i class="iconfont">&#xe6ce;</i><cite>系统统计</cite><i class="iconfont nav_right">&#xe697;</i></a><ul class="sub-menu"><li><a _href="./pages/echarts/echarts1.html"><i class="iconfont">&#xe6a7;</i><cite>拆线图</cite></a></li><li><a _href="./pages/echarts/echarts2.html"><i class="iconfont">&#xe6a7;</i><cite>柱状图</cite></a></li><li><a _href="./pages/echarts/echarts3.html"><i class="iconfont">&#xe6a7;</i><cite>地图</cite></a></li><li><a _href="./pages/echarts/echarts4.html"><i class="iconfont">&#xe6a7;</i><cite>饼图</cite></a></li><li><a _href="./pages/echarts/echarts5.html"><i class="iconfont">&#xe6a7;</i><cite>雷达图</cite></a></li><li><a _href="./pages/echarts/echarts6.html"><i class="iconfont">&#xe6a7;</i><cite>k线图</cite></a></li><li><a _href="./pages/echarts/echarts7.html"><i class="iconfont">&#xe6a7;</i><cite>热力图</cite></a></li><li><a _href="./pages/echarts/echarts8.html"><i class="iconfont">&#xe6a7;</i><cite>仪表图</cite></a></li><li><a _href="./pages/echarts/echarts9.html"><i class="iconfont">&#xe6a7;</i><cite>地图DIY实例</cite></a></li></ul></li></ul></div></div><!-- <div class="x-slide_left"></div> --><!-- 左侧菜单结束 --><!-- 右侧主体开始 --><div class="page-content"><div class="layui-tab tab" lay-filter="wenav_tab" id="WeTabTip" lay-allowclose="true"><ul class="layui-tab-title" id="tabName"><li>我的桌面</li></ul><div class="layui-tab-content"><div class="layui-tab-item layui-show">{{--<iframe src='./pages/welcome.html' frameborder="0" scrolling="yes" class="weIframe"></iframe>--}}</div></div></div></div><div class="page-content-bg"></div><!-- 右侧主体结束 --><!-- 中部结束 --><!-- 底部开始 --><div class="footer"><div class="copyright">Copyright ©2018 WeAdmin v1.0 All Rights Reserved</div></div><!-- 底部结束 --><script type="text/javascript">
//          layui扩展模块的两种加载方式-示例
//          layui.extend({
//            admin: '{/}../../static/js/admin' // {/}的意思即代表采用自有路径，即不跟随 base 路径
//          });
//          //使用拓展模块
//          layui.use('admin', function(){
//            var admin = layui.admin;
//          });layui.config({base: './static/js/',version: '101100'}).use('admin');layui.use(['jquery','admin'], function(){var $ = layui.jquery;$(function(){var login = JSON.parse(localStorage.getItem("login"));if(login){if(login=0){window.location.href='/admin/login';return false;}else{return false;}}else{window.location.href='/admin/login';return false;}});});</script></body><!--Tab菜单右键弹出菜单--><ul class="rightMenu" id="rightMenu"><li data-type="fresh">刷新</li><li data-type="current">关闭当前</li><li data-type="other">关闭其它</li><li data-type="all">关闭所有</li></ul></html>

自此后天前台用户多用户登录完成！

laravel 利用auth完成前台和后台的登录模块相关推荐

【onethink1.0】HTML模板获取前台和后台当前登录用户名
1.版本:onethink1.0:位置:HTML模板前台:{:get_username()} 后台:{:session('user_auth.username')} 转载于:https://www. ...
.net前台ajax,asp.net利用Ajax和Jquery在前台向后台传参数并返回值
1----------前台首先需要 Jquer的包下面是 $(function () { $('#txtUserName').blur(function () { var username = $ ...
ASP.NET中使用JSON方便实现前台与后台的数据交换
一.前台向后台请求数据在页面加载时,有时需要对一些表单进行初始化,此时可以利用JQuery的 get 函数向后台发起异步请求: /初始化函数 function initSettings() {$.g ...
servlet向ajax传递数据库,一、JSP、servlet、SQL三者之间的数据传递(前台与后台数据交互)...
背景: 目前业界很流行的MVC(model-view-control)开发模式,理解为模型是Bean, 视图是 Html/Jsp, 控制是Servlet, 关联数据库的Dao web的运行机制: 数 ...
一文搞懂前台，后台，中台，前端，后端，管理端，业务端，技术中台，业务中台，数据中台，物联网中台到底是什么？
1. 前台/前端前台 (Frontend):是指用户直接面对的系统界面部分,包括用户界面设计.页面交互逻辑.数据呈现和用户操作等,主要职责是与用户打交道,用友好的交互方式把闭门造车的后台功能暴露出来 ...
如何知道你的app进入了前台还是后台
众所周知android是个开放性系统,所以系统提供的api往往都不够用,如果遇到了某些需求系统api满足不了我们,就需要自己研究了. 本文就是实现一个利用Application.ActivityLif ...
如何判断app在前台还是后台
项目遇到一个轮训,有通知就toast.但是toast是可以不受actvity控制的,当我按home键让app常驻后台后,我要他不吐司,这时候我们需要判断app在前台还是后台. 发挥谷歌搜索的威力 Ch ...
iOS应用处于前台、后台、应用被杀掉场景-收到远程推送内容进行收款语音播报；
iOS应用处于前台.后台.应用被杀掉场景-收到远程推送内容进行收款语音播报: 介绍: 收银应用两大技术点:远程推送.收款成功语音播报收款金额及其他附带语音内容: 顺便点下android语音播报有一个至 ...
利用js传一个对象到后台
利用JS对象把值传到后台记得以前刚写asp.net 从前台往后台传值都是var data=A,B,C,D,E; 循环添加用逗号隔开后台还要被测试测出只输入,就错了哈哈..后来用✈◆类似的符号隔 ...
html静态和后端,前台和后台，前端和后端
概述学习AJAX的过程中,发现自己之前存在着很多的不足,于是花了些时间,总结了一些知识,现在和大家分享一下. 前端和后端,前台和后台前端和后端指的是客户端和服务器端:前台和后台指的都是客户端上浏览 ...

laravel 利用auth完成前台和后台的登录模块

一、项目基础搭建

二、数据库的配置

三、将laravel自带注册登录运行起来

四、后台admin登录功能的实现。

laravel 利用auth完成前台和后台的登录模块相关推荐

最新文章

热门文章