Happy Coding
本文目標(biāo)
新增菜單管理模塊功能畏纲，完成側(cè)邊欄菜單視圖顯示
新增遷移文件與數(shù)據(jù)填充
在終端執(zhí)行以下命令筛武，在文件夾database/migrations/新增遷移文件
php artisan make:migration --table=menus create_menus_table
在文件夾database/migrations/下打開遷移文件create_menus_table.php，修改代碼如下：
<?php
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateMenusTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('menus', function (Blueprint $table) {
$table->engine = 'InnoDB';
$table->increments('id');
$table->smallInteger('parent_id')->default(0);
$table->string('ico', 50);
$table->string('url', 50);
$table->string('name', 50);
$table->string('description', 50);
$table->tinyInteger('sort')->default(0);
$table->tinyInteger('is_hide')->default(0);
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::drop('menus');
}
}
打開文件database/seeds/DatabaseSeeder.php私植，修改代碼如下：
<?php
use Illuminate\Database\Seeder;
use Illuminate\Database\Eloquent\Model;
use App\Models\User;
use App\Models\Menu;
class DatabaseSeeder extends Seeder
{
/**
* Run the database seeds.
*
* @return void
*/
public function run()
{
Model::unguard();
$this->call(UserTableSeeder::class);
$this->call(MenuTableSeeder::class);
Model::reguard();
}
}
class UserTableSeeder extends Seeder
{
public function run()
{
DB::table('users')->delete();
User::create(['name' => 'Ann', 'email' => 'ann@qq.com', 'password' => bcrypt(123456)]);
User::create(['name' => 'Luis', 'email' => 'luis@qq.com', 'password' => bcrypt(123456)]);
User::create(['name' => 'admin', 'email' => 'admin@qq.com', 'password' => bcrypt(123456)]);
}
}
class MenuTableSeeder extends Seeder
{
public function run()
{
DB::table('menus')->delete();
Menu::create(["parent_id" => "0", "name" => "首頁管理", "url" => "index.index", 'description' => '展示系統(tǒng)的各項(xiàng)基礎(chǔ)數(shù)據(jù)']);
Menu::create(["parent_id" => "0", "name" => "菜單管理", "url" => "menu.index", 'description' => '管理菜單的新增群嗤、編輯、刪除']);
Menu::create(["parent_id" => "2", "name" => "菜單列表", "url" => "menu.index", 'description' => '管理菜單的新增兵琳、編輯、刪除']);
Menu::create(["parent_id" => "2", "name" => "新增菜單", "url" => "menu.create", 'description' => '新增菜單的頁面']);
Menu::create(["parent_id" => "2", "name" => "編輯菜單", "url" => "menu.edit", 'description' => '編輯菜單的頁面', 'is_hide' => 1]);
Menu::create(["parent_id" => "0", "name" => "角色管理", "url" => "role.index", 'description' => '管理角色的新增骇径、編輯躯肌、刪除']);
Menu::create(["parent_id" => "6", "name" => "角色列表", "url" => "role.index", 'description' => '管理角色的新增、編輯破衔、刪除']);
Menu::create(["parent_id" => "6", "name" => "新增角色", "url" => "role.create", 'description' => '新增角色的頁面']);
Menu::create(["parent_id" => "6", "name" => "編輯角色", "url" => "role.edit", 'description' => '編輯角色的頁面', 'is_hide' => 1]);
Menu::create(["parent_id" => "6", "name" => "角色賦權(quán)", "url" => "role.show", 'description' => '編輯角色的頁面', 'is_hide' => 1]);
Menu::create(["parent_id" => "0", "name" => "權(quán)限管理", "url" => "permission.index", 'description' => '管理權(quán)限的新增清女、編輯、刪除']);
Menu::create(["parent_id" => "11", "name" => "權(quán)限列表", "url" => "permission.index", 'description' => '管理權(quán)限的新增晰筛、編輯嫡丙、刪除']);
Menu::create(["parent_id" => "11", "name" => "新增權(quán)限", "url" => "permission.create", 'description' => '新增權(quán)限的頁面']);
Menu::create(["parent_id" => "11", "name" => "編輯權(quán)限", "url" => "permission.edit", 'description' => '編輯權(quán)限的頁面', 'is_hide' => 1]);
Menu::create(["parent_id" => "0", "name" => "用戶管理", "url" => "user.index", 'description' => '管理用戶的新增、編輯读第、刪除']);
Menu::create(["parent_id" => "15", "name" => "用戶列表", "url" => "user.index", 'description' => '管理用戶的新增曙博、編輯、刪除']);
Menu::create(["parent_id" => "15", "name" => "新增用戶", "url" => "user.create", 'description' => '新增用戶的頁面']);
Menu::create(["parent_id" => "15", "name" => "編輯用戶", "url" => "user.edit", 'description' => '編輯用戶的頁面', 'is_hide' => 1]);
}
}
在終端運(yùn)行命名如下：
// 生成數(shù)據(jù)表
php artisan migrate
// 填充數(shù)據(jù)表
php artisan db:seed
進(jìn)行上述操作之后怜瞒，會(huì)在數(shù)據(jù)庫生成menus數(shù)據(jù)表并往menus數(shù)據(jù)表里面填充數(shù)據(jù)
新增模型
在終端執(zhí)行以下命令父泳，在文件夾app/Models/新建文件Menu.php、Tree.php
php artisan make:model Models/Menu
php artisan make:model Models/Tree
打開文件Menu.php吴汪，修改代碼如下：
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Model;
class Menu extends Model
{
protected $guarded = [];
/**
* 獲取側(cè)邊欄菜單
* @return string
*/
public static function getSidebar()
{
$tree = Tree::createNodeTree(Menu::all());
$sidebar = self::setSidebar($tree);
return $sidebar;
}
/**
* 設(shè)置側(cè)邊欄菜單
* @param $tree
*
* @return string
*/
public static function setSidebar($tree)
{
$html = "";
foreach ($tree as $menu) {
if ($menu->is_hide == 0) {
if ($menu->child) {
$html .= '<li class="treeview">'
. '<a><i class="fa fa-bars"></i> <span>' . $menu->name . '</span><i class="fa fa-angle-left pull-right"></i></a>'
. '<ul class="treeview-menu">'
. self::setSidebar($menu->child)
. '</ul>'
. '</li>';
} else {
$html .= '<li><a href="' . route($menu->url) . '"><i class="fa fa-bars"></i><span> ' . $menu->name . '</span></a></li>';
}
}
}
return $html;
}
}
打開文件Tree.php惠窄，修改代碼如下：
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Model;
/**
* Class Tree
* 樹的創(chuàng)建與操作
*
* @package App\Models
*/
class Tree extends Model
{
/**
* 生成無序?qū)蛹?jí)樹
*
* @param $models
* @param int $parent_id
* @param int $level
* @param string $html
*
* @return array
*/
public static function createLevelTree($models, $parent_id = 0, $level = 0, $html = "-")
{
$tree = [];
foreach ($models as $model) {
if ($model->parent_id == $parent_id) {
if ($level != 0) {
$model->html = str_repeat(" ", $level);
$model->html .= '|';
}
$model->html .= str_repeat($html, $level);
$tree[] = $model;
$tree = array_merge($tree, self::createLevelTree($models, $model->id, $level + 1));
}
}
return $tree;
}
/**
* 生成無序節(jié)點(diǎn)樹
*
* @param $models
* @param int $parent_id
* @param string $node
*
* @return array
*/
public static function createNodeTree($models, $parent_id = 0, $node = 'child')
{
$tree = [];
foreach ($models as $model) {
if ($model->parent_id == $parent_id) {
$model->$node = self::createNodeTree($models, $model->id);
$tree[] = $model;
}
}
return $tree;
}
}
新增驗(yàn)證請(qǐng)求
在終端執(zhí)行以下命令，在文件夾app/Http/Requests/Form下新增表單驗(yàn)證MenuForm
php artisan make:request Form/MenuForm
修改文件MenuForm代碼如下：
<?php
namespace App\Http\Requests\Form;
use App\Http\Requests\Request;
class MenuForm extends Request
{
/**
* Determine if the user is authorized to make this request.
*
* @return bool
*/
public function authorize()
{
return true;
}
/**
* Get the validation rules that apply to the request.
*
* @return array
*/
public function rules()
{
return [
'url' => 'required',
'name' => 'required',
'parent_id' => 'required'
];
}
public function messages()
{
return [
'url.required' => '菜單地址不能為空',
'name.required' => '菜單名稱不能為空',
'parent_id.required' => '父級(jí)分類不能為空'
];
}
}
新增控制器MenuController
在終端執(zhí)行以下命令漾橙，在文件夾app/Http/Controllers/Backend新增文件MenuController.php
php artisan make:controller Backend/MenuController
修改文件MenuController.php代碼如下：
<?php
namespace App\Http\Controllers\Backend;
use App\Models\Menu;
use App\Models\Tree;
use App\Http\Requests;
use App\Http\Controllers\Controller;
use App\Http\Requests\Form\MenuForm;
class MenuController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$menus = Menu::paginate(25);
return view('backend.menu.index', compact('menus'));
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
$tree = Tree::createLevelTree(Menu::all());
return view('backend.menu.create', compact('tree'));
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
*
* @return \Illuminate\Http\Response
*/
public function store(MenuForm $request)
{
try {
if (Menu::create($request->all())) {
return redirect()->back()->withSuccess("新增菜單成功");
}
} catch (\Exception $e) {
return redirect()->back()->withErrors(array('error' => $e->getMessage()))->withInput();
}
}
/**
* Display the specified resource.
*
* @param int $id
*
* @return \Illuminate\Http\Response
*/
public function show($id)
{
//
}
/**
* Show the form for editing the specified resource.
*
* @param int $id
*
* @return \Illuminate\Http\Response
*/
public function edit($id)
{
$menu = Menu::find($id);
$tree = Tree::createLevelTree(Menu::all());
return view('backend.menu.edit', compact('menu', 'tree'));
}
/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param int $id
*
* @return \Illuminate\Http\Response
*/
public function update(MenuForm $request, $id)
{
$data = $request->all();
unset($data['_method']);
unset($data['_token']);
try {
if (Menu::where('id', $id)->update($data)) {
return redirect()->back()->withSuccess('編輯菜單成功');
}
} catch (\Exception $e) {
return redirect()->back()->withErrors(array('error' => $e->getMessage()))->withInput();
}
}
/**
* Remove the specified resource from storage.
*
* @param int $id
*
* @return \Illuminate\Http\Response
*/
public function destroy($id)
{
$childMenus = Menu::where('parent_id', '=', $id)->get()->toArray();
if ( ! empty($childMenus)) {
return redirect()->back()->withErrors("請(qǐng)先刪除其下級(jí)分類");
}
try {
if (Menu::destroy($id)) {
return redirect()->back()->withSuccess('刪除菜單成功');
}
} catch (\Exception $e) {
return redirect()->back()->withErrors(array('error' => $e->getMessage()));
}
}
}
新增路由
在文件app\Http\routes.php修改代碼如下：
Route::group(['namespace' => 'Backend', 'middleware' => ['auth']], function () {
Route::get('/', ['as' => 'index.index', 'uses' => 'IndexController@index']);
Route::resource('user', 'UserController');
Route::resource('menu', 'MenuController');
});
Route::group(['namespace' => 'Auth'], function () {
Route::get('auth/login', 'AuthController@getLogin');
Route::post('auth/login', 'AuthController@postLogin');
Route::get('auth/logout', 'AuthController@getLogout');
});
新增視圖
在文件夾resources/views/backend/新建文件夾menu杆融，并新建以下模板文件：
- edit.blade.php
- index.blade.php
- create.blade.php
index.blade.php
@extends('backend.layout.main')
@section('content')
<div class="row">
<div class="col-xs-1">
<div class="small-box">
<a href="{{URL::to('menu/create')}}" class="btn btn-success">新增菜單</a>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">菜單列表</h3>
<div class="box-tools pull-right">
<div class="input-group input-group-sm" style="width: 150px;">
<input type="text" name="table_search" class="form-control pull-right" placeholder="快速查詢">
<div class="input-group-btn">
<button type="button" class="btn btn-default disabled">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
</div>
<div class="box-body table-responsive no-padding">
<table class="table table-hover">
<tr>
<th>菜單編號(hào)</th>
<th>菜單名稱</th>
<th>菜單地址</th>
<th>操作</th>
</tr>
@forelse($menus as $menu)
<tr>
<td>{{$menu->id}}</td>
<td>{{$menu->name}}</td>
<td>{{$menu->url}}</td>
<td>
<a class="btn btn-info" href="{{URL::to('menu/'.$menu->id.'/edit')}}">
編輯
</a>
<button class="btn btn-danger" data-toggle="modal" data-target="#defalutModal" data-url="{{URL::to('menu/'.$menu->id)}}">
刪除
</button>
</td>
</tr>
@empty
<tr>
<td colspan="4" class="text-center">暫無數(shù)據(jù)</td>
</tr>
@endforelse
</table>
</div>
@if($menus->render() !== "")
<div class="box-footer">
{!! $menus->render() !!}
</div>
@endif
</div>
</div>
</div>
@include('backend.layout.model.default',['model_title'=>'操作提示','model_content'=>'你確定要?jiǎng)h除這條菜單嗎?'])
@stop
@section('script')
<script type="text/javascript">
$('#defalutModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var url = button.data('url');
var modal = $(this);
modal.find('form').attr('action', url);
})
</script>
@stop
create.blade.php
@extends('backend.layout.main')
@section('content')
<div class="row">
<div class="col-md-6">
<div class="box box-primary">
<form class="form-horizontal" action="{{URL::to('menu')}}" method="post" enctype="multipart/form-data">
<div class="box-header with-border">
<h3 class="box-title">{{$page_title or "Page Title"}}</h3>
<input type="hidden" name="_token" value="{{csrf_token()}}">
</div>
<div class="box-body">
<div class="form-group">
<label class="col-sm-3 control-label">父級(jí)菜單</label>
<div class="col-sm-9">
<select class="form-control select2" name="parent_id">
<option value="0">/</option>
@foreach($tree as $menu)
<option value="{{$menu->id}}" @if(old('parent_id') == $menu->id) selected @endif >{{$menu->html}}{{$menu->name}}</option>
@endforeach
</select>
@include('backend.layout.message.tips',['field'=>'parent_id'])
</div>
</div>
<div class="form-group">
<label for="name" class="col-sm-3 control-label">菜單名稱</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="name" name="name" placeholder="菜單名稱" value="{{old('name')}}">
@include('backend.layout.message.tips',['field'=>'name'])
</div>
</div>
<div class="form-group">
<label for="url" class="col-sm-3 control-label">菜單地址</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="url" name="url" placeholder="Controller.method" value="{{old('url')}}">
@include('backend.layout.message.tips',['field'=>'url'])
</div>
</div>
</div>
<div class="box-footer">
<button type="button" class="btn btn-default" onclick="javascript:history.back(-1);return false;">
返回
</button>
<button type="submit" class="btn btn-danger pull-right">確 定</button>
</div>
</form>
</div>
</div>
</div>
@stop
edit.blade.php
@extends('backend.layout.main')
@section('content')
<div class="row">
<div class="col-md-6">
<div class="box box-info">
<form class="form-horizontal" action="{{URL::to('menu/'.$menu->id)}}" method="post" enctype="multipart/form-data">
<div class="box-header with-border">
<h3 class="box-title">編輯菜單</h3>
<input type="hidden" name="_token" value="{{csrf_token()}}">
<input type="hidden" name="_method" value="put">
</div>
<div class="box-body">
<div class="form-group">
<label class="col-sm-3 control-label">父級(jí)菜單</label>
<div class="col-sm-9">
<select class="form-control select2" name="parent_id">
<option value="0">/</option>
@foreach($tree as $data)
<option value="{{$data->id}}" @if($menu->parent_id == $data->id) selected @endif >{{$data->html}}{{$data->name}}</option>
@endforeach
</select>
@include('backend.layout.message.tips',['field'=>'parent_id'])
</div>
</div>
<div class="form-group">
<label for="name" class="col-sm-3 control-label">菜單名稱</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="name" name="name" placeholder="菜單名稱" value="{{$menu->name}}">
@include('backend.layout.message.tips',['field'=>'name'])
</div>
</div>
<div class="form-group">
<label for="url" class="col-sm-3 control-label">菜單地址</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="url" name="url" placeholder="Controller/method" value="{{$menu->url}}">
@include('backend.layout.message.tips',['field'=>'url'])
</div>
</div>
</div>
<div class="box-footer">
<button type="button" class="btn btn-default" onclick="javascript:history.back(-1);return false;">
返回
</button>
<button type="submit" class="btn btn-danger pull-right">確 定</button>
</div>
</form>
</div>
</div>
</div>
@stop
@section('script')
<script type="text/javascript">
$(function(){
$(".select2").select2();
});
</script>
@stop
視圖共享數(shù)據(jù)
打開文件resources/views/backend/layout/sidebar.blade.php，修改代碼如下：
<aside class="main-sidebar">
<section class="sidebar">
<div class="user-panel">
<div class="pull-left image">
<img src="{{ asset("/assets/img/user2-160x160.jpg") }}" class="img-circle" alt="User Image"/>
</div>
<div class="pull-left info">
<p>Alexander Pierce</p>
<a href="#"><i class="fa fa-circle text-success"></i> Online</a>
</div>
</div>
<form action="#" method="get" class="sidebar-form">
<div class="input-group">
<input type="text" name="q" class="form-control" placeholder="Search..."/>
<span class="input-group-btn">
<button type='submit' name='search' id='search-btn' class="btn btn-flat">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</form>
<ul class="sidebar-menu">
@inject('menu','App\Models\Menu')
{!! $menu::getSidebar() !!}
</ul>
</section>
</aside>
完成上述操作后霜运，便可以在每個(gè)視圖都能看到共享的側(cè)邊欄菜單數(shù)據(jù)
效果預(yù)覽
屏幕快照 2016-02-19 11.31.53.png
屏幕快照 2016-02-19 11.31.48.png
