laravel 網站後臺設計
laravel 網站後臺設計
我將記錄，我是如何使用laravel搭建一個簡單的後臺應用。
你將學會，laravel的基本使用方法。請認真實踐哦。javascript
設置路由
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
路由列表
php artisan route:listcss
+--------+----------+------------------------------+----------------------+---------------------------------------------------------------+------------+
| 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 |
+--------+----------+------------------------------+----------------------+---------------------------------------------------------------+------------+
這裏清晰的看到，前面所定義的路由,對應的地址。html
'prefix' => 'admin' 因此 admin/ 就是uri的前綴。前端
別覺得我打錯了，爲何不是url。java
uri是指,域名後面的部分，如：http://blog.c2567.com/hello.html，那麼/hello.html就是uri，也就是域名後面的部分。url是指,完整的地址，包括域名。laravel
uri詳細解釋.
http://baike.baidu.com/item/URI/2901761程序員
建立控制器
php artisan make:controller Admin/AuthControllerweb
用於處理後臺頁面以及登陸後臺。編程
<?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 路由
[ Laravel 5.1 文檔 ] 基礎 —— HTTP 中間件
[ Laravel 5.1 文檔 ] 基礎 —— HTTP 控制器
[ Laravel 5.1 文檔 ] 基礎 —— HTTP 請求
[ Laravel 5.1 文檔 ] 基礎 —— HTTP 響應
[ Laravel 5.1 文檔 ] 基礎 —— Blade 模板引擎
Laravel 5.1 中 Session 數據存儲、訪問、刪除及一次性Session實例教程
心得
這樣子就完成了一個帶有權限驗證的簡單後臺了.但願能夠幫助你們理解laravel。
正所謂，萬事開頭難，不要妄想一開始就作出漂亮的後臺界面來，這樣子只會讓你倍受打擊，完成了這個例子後，你將能夠隨意的使用更加絢麗的後臺模板來完成工做。
固然我這個簡單的後臺，用起來也至關不錯，須要追求更好的用戶體驗，就用一些 絢麗的後臺模板把。
畢竟咱們是後端程序員，完成業務邏輯纔是咱們須要完成的，絢麗易用的操做界面都是相輔的。
切忌界面先行，這樣子也會讓你工做未完成，頁面也作很差，最後倍受打擊，什麼也作很差。循序漸進，踏踏實實的完成纔是正道。
其餘
通過我觀察，大部分的laravel教程，教你作博客，是從前端界面開始的，這樣子的急功近利，可能會起反效果。
一個完善的軟件系統，都是從後臺開始一步一步測試完成的，腳踏實步，流程跑通，界面什麼的，都是順手拿來的事情。
擺正心態，認真學習，不要跳着學，正所謂，萬尺高樓從地起，打好堅實的基礎才能遊刃有餘，觸類旁通。
展望
相信你，作完以及瞭解完laravel，必定能感受到優雅的寫法帶來的愉悅，但願本篇文章能夠給予你，極大的興趣繼續學習。
下次我可能會講到，深刻地理解laravel（laravel的架構，生命週期，依賴注入，控制反轉），或者是laravel的實用組件（錯誤提示，debug工具，用戶認證）等。
laravel的學習週期，對於新手程序員，可能比較長，對於的內功不夠深厚的（編程思想及php基礎），那也是比較困難的。
固然若是你邁過了這道坎，相信內功能夠提高很多。我也儘可能的講解的通俗易懂，易上手。
對於內功深厚的程序員，我相信，不出很多天已經能夠遊刃有餘。
若有機會，我也但願錄製laravel的視頻教程，更好的講解laravel，哈，敬請期待吧。
個人博客地址:http://blog.c2567.com/
- 1. 後臺網站設計
- 2. 後臺網站設計過程
- 3. Photoshop設計網站後臺頁面
- 4. 後臺網站設計分析
- 5. 後臺網站設計前的想法
- 6. Photoshop設計後臺網站頁面
- 7. 用ps設計後臺網站
- 8. Photoshop設計網站後臺首頁
- 9. 後臺網站設計總結
- 10. 後臺金融網站設計
- 更多相關文章...
- • 網站建設指南 - 網站建設指南
- • Web 創建設計 - 網站建設指南
- • IntelliJ IDEA代碼格式化設置
- • 使用Rxjava計算圓周率
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 後臺網站設計
- 2. 後臺網站設計過程
- 3. Photoshop設計網站後臺頁面
- 4. 後臺網站設計分析
- 5. 後臺網站設計前的想法
- 6. Photoshop設計後臺網站頁面
- 7. 用ps設計後臺網站
- 8. Photoshop設計網站後臺首頁
- 9. 後臺網站設計總結
- 10. 後臺金融網站設計