laravel 網站后臺 · 開發者必備的知識

# 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](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>  <link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">  <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>  </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，哈，敬請期待吧。