# 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>
<!-- 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，哈，敬请期待吧。
- 后端
- composer
- composer配置国内镜像
- composer安装及设置2
- PHP
- 贝塔SG11加密
- 申请KEY
- 开始加密
- php 中连接tcp服务的三种方式
- php websocket 教程
- editor内容转换数组
- 使用正则判断中文维吾尔文
- PHP常用函数总结
- 常用助手函数
- 通过Imagick把pdf转换图片
- 维吾尔语基本区转换扩展区
- php GD库生成一个由文字和图片生成新的图片
- aes加密
- php数组函数 -- array_column,array_multisort 实现二维数组排序
- PHP操作Excel
- php更新内容
- 辅助查询（*）
- 【时间】操作
- 时间函数例子
- Date/Time 函数（不包含别名函数）
- php网络相关
- HTTP请求的返回值含义说明
- 使用php语言开发一个类似数据库操作的文件表类
- pinyin
- 维吾尔语基本区转换扩展区(2)
- php获取当前环境的信息
- laravel
- laravel 队列的使用
- laravel 自定义助手函数
- laravel seeder的使用
- laravel项目从git下载命令
- laravel 多个数据库配置
- laravel 填充假数据
- laravel 动态路由
- laravel 自定义 validate 响应
- laravel 创建追加字段的模拟访问器
- laravel 线上环境的数据库更改或添加字段
- laravel 模型查询按照whereIn排序
- laravel 使用 workerman 通过TCP 文件传输功能
- laravel api Header添加Accept头
- Laraval IDE 自动补全插件 laravel-ide-helper
- laravel 网站后台
- laravel 设置路由
- laravel-第三方composer包
- laravel 开发技巧
- laravel 昨天，今天时间
- 使用宝塔计划任务启动laravel调度器
- laravel结合workerman第二节
- Laravel - 上传多个文件
- 查询聊天好友列表
- 事件系统 event, listener
- laravel 安装 laravel-modules
- 自定义求看守器-toekn
- laravel限流
- 使用 Laravel api Resource 类时自定义分页信息
- Laravel php artisan命令大全
- 验证器
- workerman 创建wss服务
- 架构师必须知道的26项PHP安全实践
- python
- Python读取文件代码块已经备好，用的时候光拿（建议收藏）
- Python常用库大全
- api 签名验证
- git
- git命令
- 十分钟学会git基础
- Git代码同时上传到GitHub和Gitee(码云)
- Git - 多人协同开发利器，团队协作流程规范与注意事项
- 删除远程仓库的文件
- github查询方法
- 错误
- 解除项目git版本控制
- linux
- sentos安装supervisor
- PHP怎么守护进程运行php脚本
- 600条最强Linux命令总结
- centos开启防火墙、开放指定端口
- 前端
- vue
- vue2发布之前的config简单配置
- vue2安装scss命令
- vue2父子组件之间双向数据绑定
- 国际化双语--安装VueI18n
- vue3-setup 组件传参（defineProps、defineEmits、defineExpose
- Vue3 新写法速览：十分钟内轻松get
- 关于vue的外连接
- watch讲解
- computed
- webpack 打包后生成很多小文件怎么优化？
- vue2 vue.config.js常见配置和打包部署测试
- 小程序
- 小程序长期订阅消息
- 小程序自定义TabBar后如何实现keep-alive
- 收藏的html和css和js
- CSS 省略号（单行省略号、多行省略号）
- UyghurInput_a.js
- font.css
- 漂亮按钮样式
- clock.html
- css
- scroll css样式
- CSS流动布局-页面自适应
- css grid布局
- 禁止wap页面调整字体大小
- CSS @media 和 min-width/max-width
- 网站变灰是怎么实现的
- 瀑布流实现方式
- javascript
- SortableJS拖动排序
- wondow scroll滚动到上边
- 原生js插入HTML元素
- Konva.js —— 像操作DOM一样操作canvas
- 通过canvas合并俩个图片
- js scroll更多加载
- js 实现复制功能
- js判断安卓和苹果或者微信
- 浏览器打开控制台禁止
- 原生js一些dom操作
- js http客户端集合
- fetch
- axios
- canvas 点钟
- layer dialog
- jquery 和 laravel ajax全局配置
- layui 获取select的自定义参数
- konva.js中文开发文档
- js 大文件分片上传
- js监听网络状态实现断网重连后自动刷新页面
- js生成video缩略图
- JS获取当前系统电量情况
- uniapp
- uni-app swiper数量过多时卡顿优化方案
- uniapp 帖子集合
- 微信wap
- wap分享朋友和朋友圈
- wap 手机页面微信支付
- JsSdk微信公众号支付
- 通用各种小知识
- 正则表达式
- JS正则匹配过滤字符串中的html标签及html标签内的内容
- 判断维吾尔文输入
- 正则表达式符号
- 正则表达式练习
- 百度网盘不限速下载助手
- 解决VSCode下载慢或下载失败的问题
- 性能测试 使用Apache的ab测试工具
- nginx从入门到精通
- nginx
- Nginx 是怎么禁止访问php的 ？
- 宝塔面板
- supervisor
- 卸载宝塔
- redis
- redis实用笔记
- redis入门到精通
- phpredis
- redis数据库基础
- PHP对Redis的基本操作
- ffmpeg
- 合并多个音视
- 获取音视时长
- FFmpeg视频处理入门教程(新手必看)
- 外连接
- 安装
- PHP基于ffmpeg实现转换视频，截图及生成缩略图的方法
- Linux安装ffmpeg
- docker
- 服务实现
- docker基本命令
- rewrite笔记
- 别人笔记链接
- 计算机常用知识
- 二进制1-10
- 斐波那契数列
- mysql
- 高性能高可用的MySQL,得从各种规范开始
- 读写分离配置
- 重要外连接，前端/ 后端/数据库等等
- 关于程序必须收藏的文章链接集合
- markdown
- 一篇文章讲清楚markdown