Laravel 框架生成登录页面的完整实现，包括用户名、密码、验证码和管理员权限功能的开发部署方案。

2024-12-16 23 zzx

项目需求实现

功能:

用户登录表单：包括用户名、密码和验证码。
用户权限：管理员用户具有特殊权限。
验证码：防止恶意登录攻击。

实现:

使用 Laravel 提供的认证功能，扩展以支持验证码。
使用 SQLite/MySQL 等关系型数据库存储用户数据。
提供完整的部署步骤。

1. 数据库设计 (SQL 文件)

创建名为 users 的表，支持普通用户和管理员用户权限。

sql复制代码CREATE DATABASE laravel_auth;

USE laravel_auth;CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(50) UNIQUE NOT NULL,
    password VARCHAR(255) NOT NULL,
    is_admin TINYINT(1) DEFAULT 0 COMMENT '0: 普通用户, 1: 管理员',
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP);

2. Laravel 项目搭建

步骤 1: 安装 Laravel

安装 Laravel (确保 PHP、Composer 环境已配置好)：

bash复制代码composer create-project --prefer-dist laravel/laravel laravel-authcd laravel-auth

配置 .env 文件：

env复制代码DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_auth
DB_USERNAME=your_username
DB_PASSWORD=your_password

步骤 2: 安装验证码包

使用 mews/captcha 包生成验证码。

bash复制代码composer require mews/captcha

发布配置文件：

bash复制代码php artisan vendor:publish --provider="Mews\Captcha\CaptchaServiceProvider"

步骤 3: 迁移用户表

生成迁移：

bash复制代码php artisan make:migration create_users_table

修改迁移文件：在 database/migrations/xxxx_xx_xx_create_users_table.php 中编辑：

php复制代码Schema::create('users', function (Blueprint $table) {    $table->id();    $table->string('username')->unique();    $table->string('password');    $table->boolean('is_admin')->default(0);    $table->timestamps();
});

执行迁移：
```
bash复制代码php artisan migrate
```

步骤 4: 添加种子数据

创建管理员账户：

bash复制代码php artisan make:seeder UserSeeder

编辑 database/seeders/UserSeeder.php：

php复制代码use Illuminate\Support\Facades\DB;use Illuminate\Support\Facades\Hash;

DB::table('users')->insert([    'username' => 'admin',    'password' => Hash::make('admin_password'),    'is_admin' => 1,
]);

运行种子：

bash复制代码php artisan db:seed --class=UserSeeder

3. 后端逻辑开发

路由配置

在 routes/web.php 中添加：

php复制代码use App\Http\Controllers\AuthController;Route::get('/login', [AuthController::class, 'showLoginForm'])->name('login');Route::post('/login', [AuthController::class, 'login']);Route::get('/logout', [AuthController::class, 'logout'])->name('logout');Route::get('/dashboard', [AuthController::class, 'dashboard'])->middleware('auth');

控制器逻辑

创建控制器：

bash复制代码php artisan make:controller AuthController

编辑 app/Http/Controllers/AuthController.php：

php复制代码namespace App\Http\Controllers;use Illuminate\Http\Request;use Illuminate\Support\Facades\Auth;use Illuminate\Support\Facades\Hash;use App\Models\User;class AuthController extends Controller{    public function showLoginForm()    {        return view('auth.login');
    }    public function login(Request $request)    {        $request->validate([            'username' => 'required',            'password' => 'required',            'captcha' => 'required|captcha'
        ]);        $user = User::where('username', $request->username)->first();        if ($user && Hash::check($request->password, $user->password)) {            Auth::login($user);            return redirect('/dashboard');
        }        return back()->withErrors(['login' => '用户名或密码错误']);
    }    public function dashboard()    {        return view('dashboard', ['user' => Auth::user()]);
    }    public function logout()    {        Auth::logout();        return redirect('/login');
    }
}

中间件配置

确保 app/Http/Middleware/Authenticate.php:

php复制代码return redirect('/login');

验证码校验

在 config/captcha.php 中配置简单样式。

4. 前端页面设计

登录页面

在 resources/views/auth/login.blade.php：

html复制代码<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title></head><body>
    <form action="{{ route('login') }}" method="POST">
        @csrf        <div>
            <label for="username">用户名:</label>
            <input type="text" name="username" id="username" required>
        </div>
        <div>
            <label for="password">密码:</label>
            <input type="password" name="password" id="password" required>
        </div>
        <div>
            <label for="captcha">验证码:</label>
            <input type="text" name="captcha" id="captcha" required>
            <div>
                <img src="{{ captcha_src() }}" alt="captcha" onclick="this.src='{{ captcha_src() }}?'+Math.random()">
            </div>
        </div>
        <button type="submit">登录</button>
    </form></body></html>