# laravel 网站后台设计 我将记录,我是如何使用laravel搭建一个简单的后台应用。 你将学会,laravel的基本使用方法。请认真实践哦。 {% asset_img 1.jpg laravel后台界面 %} {% asset_img 2.jpg laravel后台登陆界面 %} # 设置路由 ## routes.php 定义的代码 ``` Route::group([ 'namespace' => 'Admin' , 'prefix' => 'admin' ], function(){ // 控制器在 "App\Http\Controllers\Admin" 命名空间下 //登录页面 Route::get('login', "AuthController@getLogin"); //提交登录 Route::post('login', "AuthController@postLogin"); //退出登录 Route::get('loginout', "AuthController@loginout"); Route::group([ 'middleware'=> 'adminAuth' ],function(){ //后台主页 Route::get('/', "AuthController@index"); //后台头部 Route::get('/header', "AuthController@header"); //后台菜单 Route::get('/menu', "AuthController@menu"); //后台的主要部分,欢迎页面,或者是系统状态. Route::get('/main', "AuthController@main"); }); }); ``` | 属性名 | 意思 | | - | - | | namespace | 命名空间 | prefix | 路由前缀 | middleware | 中间件 ## 路由列表 `php artisan route:list` ``` +--------+----------+------------------------------+----------------------+---------------------------------------------------------------+------------+ | Domain | Method | URI | Name | Action | Middleware | +--------+----------+------------------------------+----------------------+---------------------------------------------------------------+------------+ | | GET|HEAD | / | | Closure | | | | GET|HEAD | _debugbar/assets/javascript | debugbar.assets.js | Barryvdh\Debugbar\Controllers\AssetController@js | | | | GET|HEAD | _debugbar/assets/stylesheets | debugbar.assets.css | Barryvdh\Debugbar\Controllers\AssetController@css | | | | GET|HEAD | _debugbar/clockwork/{id} | debugbar.clockwork | Barryvdh\Debugbar\Controllers\OpenHandlerController@clockwork | | | | GET|HEAD | _debugbar/open | debugbar.openhandler | Barryvdh\Debugbar\Controllers\OpenHandlerController@handle | | | | GET|HEAD | admin | | App\Http\Controllers\Admin\AuthController@index | adminAuth | | | GET|HEAD | admin/header | | App\Http\Controllers\Admin\AuthController@header | adminAuth | | | GET|HEAD | admin/login | | App\Http\Controllers\Admin\AuthController@getLogin | | | | POST | admin/login | | App\Http\Controllers\Admin\AuthController@postLogin | | | | GET|HEAD | admin/loginout | | App\Http\Controllers\Admin\AuthController@loginout | | | | GET|HEAD | admin/main | | App\Http\Controllers\Admin\AuthController@main | adminAuth | | | GET|HEAD | admin/menu | | App\Http\Controllers\Admin\AuthController@menu | adminAuth | +--------+----------+------------------------------+----------------------+---------------------------------------------------------------+------------+ ``` 这里清晰的看到,前面所定义的路由,对应的地址。 `'prefix' => 'admin'` 所以 `admin/` 就是uri的前缀。 别以为我打错了,为什么不是`url`。 `uri`是指,域名后面的部分,如:`http://blog.c2567.com/hello.html`,那么`/hello.html`就是`uri`,也就是域名后面的部分。 `url`是指,完整的地址,包括域名。 uri详细解释. http://baike.baidu.com/item/URI/2901761 # 创建控制器 `php artisan make:controller Admin/AuthController` 用于处理后台页面以及登录后台。 ``` <?php namespace App\Http\Controllers\Admin; use Illuminate\Http\Request; use App\Http\Requests; use App\Http\Controllers\Controller; class AuthController extends Controller { public function index() { return view('admin.index'); } public function header() { return view('admin.header'); } public function menu() { return view('admin.menu'); } public function main() { return view('admin.main'); } public function getLogin() { return view('admin.login'); } public function postLogin(Request $request) { $username = $request->input('username'); $password = $request->input('password'); if($username == 'chensuilong' && $password == '123456'){ session(['isAdminLogin'=>true]); return redirect('admin/'); }else{ echo '账号,或者密码错误'; return view('admin.login'); } } public function loginout(Request $request) { $request->session()->flush(); return redirect('admin/'); } } ``` # 创建中间件 `php artisan make:middleware adminAuthMiddleware` 用于处理后台的权限,是否允许显示后台 在`app\Http\Kernel.php`, 找到 `$routeMiddleware`,加入中间件的别名。 ``` 'adminAuth' => \App\Http\Middleware\adminAuthMiddleware::class ``` ``` <?php namespace App\Http\Middleware; use Closure; class adminAuthMiddleware { /** * Handle an incoming request. * * @param \Illuminate\Http\Request $request * @param \Closure $next * @return mixed */ public function handle($request, Closure $next) { //判断session中isAdminLogin视为为true,如果不是,那么跳转到登录页面. if(session('isAdminLogin') != true){ return redirect('/admin/login'); } return $next($request); } } ``` # 创建视图 创建文件夹 `resources\views\Admin` ## 建立文件 `resources\views\Admin\index.blade.php` `resources\views\Admin\header.blade.php` `resources\views\Admin\menu.blade.php` `resources\views\Admin\main.blade.php` `resources\views\Admin\login.blade.php` ## index.blade.php ``` <html> <head> <title>最简单的后台</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > </head> <frameset rows="80,*" frameborder=0 > <frame src="/admin/header"> <frameset cols="205,*"> <frame src="/admin/menu"> <frame name="action" src="/admin/main"> </frameset> </frameset> </html> ``` ## header.blade.php ``` <style type="text/css"> body{ background:rgb(0,153,204); color:#FFF; } h2{ line-height: 40px; } </style> <h2>简单的后台</h2> ``` ## menu.blade.php ``` <style type="text/css"> *{ margin: 0; padding: 0; } body{ background: #3C4045; } #menu { font-size: 12px; } #menu li{ padding-bottom: 12px; } #menu h1{ font-size: 14px; line-height: 30px; background-color: #22282e; color: #FFF; margin-bottom: 8px; padding: 10px; } #menu a{ line-height: 25px; display: block; color: #FFF; cursor: pointer; list-style-type: none; text-decoration: none; padding: 10px; } #menu a:hover{ background-color: #0099cc; font-weight: bold; } </style> <ul id="menu"> <li> <h1>用户管理</h1> <a href="/admin/user/index" target="action">管理用户</a> <a href="/admin/user/create" target="action">添加用户</a> </li> <li> <h1>服务器状态</h1> <a href="/admin/main" target="action">状态</a> </li> <li> <h1>后台管理</h1> <a href="/admin/config.html" target="action">后台设置</a> <a href="/admin/loginout" target="_top">退出后台</a> </li> </ul> ``` ## main.blade.php ``` <h3>这是一个超级简单的后台</h3> ``` ## login.blade.php ``` <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>登录后台</title> <!-- Bootstrap core CSS --> <link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> <!-- Custom styles for this template --> <style> body { padding-top: 40px; padding-bottom: 40px; background-color: #eee; } .form-signin { max-width: 330px; padding: 15px; margin: 0 auto; } .form-signin .form-signin-heading, .form-signin .checkbox { margin-bottom: 10px; } .form-signin .checkbox { font-weight: normal; } .form-signin .form-control { position: relative; height: auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 10px; font-size: 16px; } .form-signin .form-control:focus { z-index: 2; } .form-signin input[type="password"] { margin-bottom: 10px; border-top-left-radius: 0; border-top-right-radius: 0; } </style> </head> <body> <div class="container"> <form class="form-signin" role="form" action="/admin/login" method="post"> <input type="hidden" name="_token" value="{{ csrf_token() }}"> <h2 class="form-signin-heading">登录后台</h2> <label for="username" class="sr-only">用户名</label> <input type="text" name="username" id="username" class="form-control" placeholder="UserName" required autofocus> <label for="inputPassword" class="sr-only">密码</label> <input type="password" name="password" id="inputPassword" class="form-control" placeholder="Password" required> <button class="btn btn-lg btn-primary btn-block" type="submit">登录</button> </form> </div> <!-- /container --> </body> </html> ``` # 总结 ## 需要进一步了解的地方 * laravel 路由定义 * laravel 控制器的创建及使用 * laravel 中间件的创建及使用 * laravel 视图及模板引擎 * laravel session 的使用 [[ Laravel 5.1 文档 ] 基础 —— HTTP 路由](http://laravelacademy.org/post/53.html#route-groups) [[ Laravel 5.1 文档 ] 基础 —— HTTP 中间件](http://laravelacademy.org/post/57.html) [[ Laravel 5.1 文档 ] 基础 —— HTTP 控制器](http://laravelacademy.org/post/60.html) [[ Laravel 5.1 文档 ] 基础 —— HTTP 请求](http://laravelacademy.org/post/68.html) [[ Laravel 5.1 文档 ] 基础 —— HTTP 响应](http://laravelacademy.org/post/70.html) [[ Laravel 5.1 文档 ] 基础 —— 视图](http://laravelacademy.org/post/76.html) [[ Laravel 5.1 文档 ] 基础 —— Blade 模板引擎](http://laravelacademy.org/post/79.html) [Laravel 5.1 中 Session 数据存储、访问、删除及一次性Session实例教程](http://laravelacademy.org/post/2045.html) ## 心得 这样子就完成了一个带有权限验证的简单后台了.希望可以帮助大家理解laravel。 正所谓,万事开头难,不要妄想一开始就做出漂亮的后台界面来,这样子只会让你倍受打击,完成了这个例子后,你将可以随意的使用更加绚丽的后台模板来完成工作。 当然我这个简单的后台,用起来也相当不错,需要追求更好的用户体验,就用一些 绚丽的后台模板把。 毕竟我们是后端程序员,完成业务逻辑才是我们需要完成的,绚丽易用的操作界面都是相辅的。 切忌界面先行,这样子也会让你工作未完成,页面也做不好,最后倍受打击,什么也做不好。按部就班,踏踏实实的完成才是正道。 ## 其他 经过我观察,大部分的laravel教程,教你做博客,是从前端界面开始的,这样子的急功近利,可能会起反效果。 一个完善的软件系统,都是从后台开始一步一步测试完成的,脚踏实步,流程跑通,界面什么的,都是顺手拿来的事情。 摆正心态,认真学习,不要跳着学,正所谓,万尺高楼从地起,打好坚实的基础才能游刃有余,举一反三。 # 展望 相信你,做完以及了解完laravel,一定能感觉到优雅的写法带来的愉悦,希望本篇文章可以给予你,极大的兴趣继续学习。 下次我可能会讲到,深入地理解laravel(laravel的架构,生命周期,依赖注入,控制反转),或者是laravel的实用组件(错误提示,debug工具,用户认证)等。 laravel的学习周期,对于新手程序员,可能比较长,对于的内功不够深厚的(编程思想及php基础),那也是比较困难的。 当然如果你迈过了这道坎,相信内功可以提升不少。我也尽量的讲解的通俗易懂,易上手。 对于内功深厚的程序员,我相信,不出数日已经可以游刃有余。 如有机会,我也希望录制laravel的视频教程,更好的讲解laravel,哈,敬请期待吧。