安裝webinoly部分省略,從安裝完成後開始
開設網站
把laravel-admin.com 換成自己的網域
# site laravel-admin.com -php
安裝完成後, 移除預設的主目錄
# cd /var/www/laravel-admin.com
# rm -rf htdocs
安裝Laravel
# composer create-project laravel/laravel htdocs
設定權限
# chown -R www-data:www-data .
# chmod -R 755 .
# chmod -R 775 storage bootstrap/cache
修改nginx網站設定根目錄
# vi /etc/nginx/sites-available/laravel-admin.com
修改以下
把
root /var/www/laravel-admin.com/htdocs;
改為
root /var/www/laravel-admin.com/htdocs/public;
存檔後
# nginx -t && service nginx reload
設定 .env 檔案並連接資料庫(選填)
# vi .env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=密碼
建立資料庫
# sudo mysql -u root -p
CREATE DATABASE laravel;
EXIT;
可以使用 webinoly -dbpass 找到 root 密碼
執行 migration
# php artisan migrate
安裝 Laravel AdminLTE
# composer require jeroennoten/laravel-adminlte
# php artisan adminlte:install --force
建立首頁測試
#vi routes/web.php
內容如下
Route::get('/', function () {
return view('home');
});
建立視圖檔案
# vi resources/views/home.blade.php
內容如下
@extends('adminlte::page')
@section('title', '首頁')
@section('content_header')
<h1>管理後台</h1>
@endsection
@section('content')
<p>這是 Laravel + AdminLTE 整合的頁面!</p>
@endsection
設定資料夾權限(再次確認用)
# chown -R www-data:www-data *
# chmod -R 775 storage bootstrap/cache
到這邊打開瀏覽器看應該是正常了

以上基本上告一個段落。往下是看需求弄了。
再來是追加”註冊/登入”等功能
安裝 Laravel Breeze
# cd /var/www/laravel-admin.com/htdocs 確認是在專案目錄內
# composer require laravel/breeze --dev
# php artisan breeze:install
這邊會遇到選擇題,可以用左右鍵跟 enter 處理



等跑完後,執行
# php artisan migrate
# chown -R www-data:www-data *
# chmod -R 775 storage bootstrap/cache
這樣基本上已經完工了。
備註:
如果不需要 Tailwind 或 Vite,也可以先停用 Vite,改用 Laravel 傳統的 asset 載入方式。
# vi resources/views/layouts/guest.blade.php
跟
# vi resources/views/layouts/app.blade.php
把
@vite(['resources/css/app.css', 'resources/js/app.js'])
改成註解為
{{-- @vite(['resources/css/app.css', 'resources/js/app.js']) --}}
刪掉 Tailwind / Alpine / Vite 前端檔案(可選)
可以移除這些 Breeze 自帶的前端資源:
# rm -rf resources/css resources/js vite.config.js
到目前應該完成了
登入頁:/login
註冊頁:/register
登入後首頁:/dashboard
追加功能: 註冊使用者需要經過最高管理者審核過才能登入
修改資料表:加入「狀態」與「是否為管理員」
# php artisan make:migration add_status_and_is_admin_to_users_table
會產出一個
database/migrations/xxxx_add_status_and_is_admin_to_users_table.php 的檔案
修改後內容如下:
public function up()
{
Schema::table('users', function (Blueprint $table) {
$table->string('status')->default('pending'); // 新增帳號狀態
$table->boolean('is_admin')->default(false); // 是否是管理者
});
}
public function down()
{
Schema::table('users', function (Blueprint $table) {
$table->dropColumn('status');
$table->dropColumn('is_admin');
});
}
存檔案執行
# php artisan migrate
建立最高管理員帳號
# php artisan tinker
然後在 tinker 裡輸入:
$user = new \App\Models\User;
$user->name = '最高管理員';
$user->email = '[email protected]';
$user->password = bcrypt('密碼打這邊');
$user->is_admin = true;
$user->status = 'active';
$user->save();
打exit 離開 tinker
這時候應該能用網址 /login 以上面的email跟密碼登入
加入樣式方便修改
# mkdir -p public/adminlte
下載 AdminLTE v3.2.0 原始碼。
網址 https://sourceforge.net/projects/adminlte/files/v3.2.0/AdminLTE%20v3.2.0.zip/download
將 dist 和 plugins 資料夾複製到 public/adminlte 資料夾中
在 Laravel 的 Blade 模板中引入資源
在 resources/views/layouts/app.blade.php 的 <head> 區塊中加入:
<!-- Font Awesome -->
<link rel="stylesheet" href="{{ asset('adminlte/plugins/fontawesome-free/css/all.min.css') }}">
<!-- AdminLTE CSS -->
<link rel="stylesheet" href="{{ asset('adminlte/dist/css/adminlte.min.css') }}">
在 </body> 標籤前加入:
<!-- jQuery -->
<script src="{{ asset('adminlte/plugins/jquery/jquery.min.js') }}"></script>
<!-- Bootstrap 4 -->
<script src="{{ asset('adminlte/plugins/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
<!-- AdminLTE App -->
<script src="{{ asset('adminlte/dist/js/adminlte.min.js') }}"></script>
替換 Breeze 登入畫面樣式,套用 AdminLTE v3 風格
# vi resources/views/auth/login.blade.php
清空原內容,改成以下 AdminLTE v3 的樣式範本:
@extends('layouts.app')
@section('content')
<div class="login-box">
<div class="login-logo">
<a href="#"><b>Admin</b>LTE</a>
</div>
<!-- /.login-logo -->
<div class="card">
<div class="card-body login-card-body">
<p class="login-box-msg">登入以開始您的工作階段</p>
<form method="POST" action="{{ route('login') }}">
@csrf
<div class="input-group mb-3">
<input type="email" name="email" class="form-control" placeholder="Email" required autofocus>
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-envelope"></span>
</div>
</div>
</div>
<div class="input-group mb-3">
<input type="password" name="password" class="form-control" placeholder="密碼" required>
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-lock"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-8">
<!-- 你可以加 remember me 或連結 -->
</div>
<div class="col-4">
<button type="submit" class="btn btn-primary btn-block">登入</button>
</div>
</div>
</form>
</div>
<!-- /.login-card-body -->
</div>
</div>
@endsection
修改登入判斷
# vi resources/views/layouts/navigation.blade.php
找到
{{ Auth::user()->name }}
改成
@if(Auth::check())
{{ Auth::user()->name }}
@endif
整個檔案內有看到 Auth::user()-> 的上下都要這樣包住
修改
# vi resources/views/layouts/app.blade.php
全部刪除換成
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<title>@yield('title', '管理後台')</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- AdminLTE CSS -->
<link rel="stylesheet" href="{{ asset('adminlte/plugins/fontawesome-free/css/all.min.css') }}">
<link rel="stylesheet" href="{{ asset('adminlte/dist/css/adminlte.min.css') }}">
<!-- 可選:自訂樣式 -->
@stack('styles')
</head>
<body class="hold-transition login-page">
@yield('content')
<!-- jQuery -->
<script src="{{ asset('adminlte/plugins/jquery/jquery.min.js') }}"></script>
<!-- Bootstrap 4 -->
<script src="{{ asset('adminlte/plugins/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
<!-- AdminLTE -->
<script src="{{ asset('adminlte/dist/js/adminlte.min.js') }}"></script>
@stack('scripts')
</body>
</html>
後面任何畫面大概這樣用就會自動套用 AdminLTE 样式
@extends('layouts.app')
@section('content')
<div class="login-box"> ... </div>
@endsection
到這邊完成 /login 了。