使用laravel系统已经为我们建立的前台登录模板,在此基础上我们可以建立自己的后台登录模块!来看看详细步骤。
- 开发环境:laravel5.7 largon集成开发环境
- 后台模板:WeAdmin(LayUI)
一、项目基础搭建
- 启动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()方法,如:
<?php
use 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 migrate
public 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里面添加一条数据。即将刚才前端注册的数据插入数据表中,数据库中密码已经加密,真是密码不要忘记。 - 记得修改下刚建立的数据库表的字段长度!
(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):
<?php
namespace 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
创建后台管理员中间件,并添加代码如下:
<?php
namespace 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:controller Admin/HomeController
增加一条路由规则,加载我们的后台首页
public function index()
{
// dd('后台首页,当前管理员:' . auth('admin')->user()->name);
return view('admin.index');
}
- 创建后台首页与login注册界面(注意修改css js路径)
views准备好后台登录页面和后台首页页面
后台登录页面(注意此处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"></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"></i>资讯</a>
</dd>
<dd>
<a onclick="WeAdminShow('图片','http://www.baidu.com')"><i class="iconfont"></i>图片</a>
</dd>
<dd>
<a onclick="WeAdminShow('用户','https://www.youfa365.com/')"><i class="iconfont"></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"></i>
<cite>会员管理</cite>
<i class="iconfont nav_right"></i>
</a>
<ul class="sub-menu">
<li>
<a _href="./pages/member/list.html">
<i class="iconfont"></i>
<cite>会员列表</cite>
</a>
</li>
<li>
<a _href="./pages/member/del.html">
<i class="iconfont"></i>
<cite>会员删除</cite>
</a>
</li>
<li>
<a href="javascript:;">
<i class="iconfont"></i>
<cite>会员管理</cite>
<i class="iconfont nav_right"></i>
</a>
<ul class="sub-menu">
<li>
<a _href="./pages/member/addInput.html">
<i class="iconfont"></i>
<cite>输入框操作</cite>
</a>
</li>
<li>
<a _href="./pages/404.html">
<i class="iconfont"></i>
<cite>三级菜单演示</cite>
</a>
</li>
<li>
<a _href="./pages/404.html">
<i class="iconfont"></i>
<cite>导航菜单演示</cite>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="javascript:;">
<i class="iconfont"></i>
<cite>文章管理</cite>
<i class="iconfont nav_right"></i>
</a>
<ul class="sub-menu">
<li>
<a _href="./pages/article/list.html">
<i class="iconfont"></i>
<cite>文章列表</cite>
</a>
</li>
<li>
<a _href="./pages/article/category.html">
<i class="iconfont"></i>
<cite>分类管理</cite>
</a>
</li>
</ul>
</li>
<li>
<a href="javascript:;">
<i class="iconfont"></i>
<cite>订单管理</cite>
<i class="iconfont nav_right"></i>
</a>
<ul class="sub-menu">
<li>
<a _href="./pages/order/list.html">
<i class="iconfont"></i>
<cite>订单列表</cite>
</a>
</li>
</ul>
</li>
<li>
<a href="javascript:;">
<i class="iconfont"></i>
<cite>管理员管理</cite>
<i class="iconfont nav_right"></i>
</a>
<ul class="sub-menu">
<li>
<a _href="./pages/admin/list.html">
<i class="iconfont"></i>
<cite>管理员列表</cite>
</a>
</li>
<li>
<a _href="./pages/admin/role.html">
<i class="iconfont"></i>
<cite>角色管理</cite>
</a>
</li>
<li>
<a _href="./pages/admin/cate.html">
<i class="iconfont"></i>
<cite>权限分类</cite>
</a>
</li>
<li>
<a _href="./pages/admin/rule.html">
<i class="iconfont"></i>
<cite>权限管理</cite>
</a>
</li>
</ul>
</li>
<li>
<a href="javascript:;">
<i class="iconfont"></i>
<cite>系统统计</cite>
<i class="iconfont nav_right"></i>
</a>
<ul class="sub-menu">
<li>
<a _href="./pages/echarts/echarts1.html">
<i class="iconfont"></i>
<cite>拆线图</cite>
</a>
</li>
<li>
<a _href="./pages/echarts/echarts2.html">
<i class="iconfont"></i>
<cite>柱状图</cite>
</a>
</li>
<li>
<a _href="./pages/echarts/echarts3.html">
<i class="iconfont"></i>
<cite>地图</cite>
</a>
</li>
<li>
<a _href="./pages/echarts/echarts4.html">
<i class="iconfont"></i>
<cite>饼图</cite>
</a>
</li>
<li>
<a _href="./pages/echarts/echarts5.html">
<i class="iconfont"></i>
<cite>雷达图</cite>
</a>
</li>
<li>
<a _href="./pages/echarts/echarts6.html">
<i class="iconfont"></i>
<cite>k线图</cite>
</a>
</li>
<li>
<a _href="./pages/echarts/echarts7.html">
<i class="iconfont"></i>
<cite>热力图</cite>
</a>
</li>
<li>
<a _href="./pages/echarts/echarts8.html">
<i class="iconfont"></i>
<cite>仪表图</cite>
</a>
</li>
<li>
<a _href="./pages/echarts/echarts9.html">
<i class="iconfont"></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>
自此后天前台用户多用户登录完成!