Laravel框架（一）搭建简易登录界面

Hi，本文将教大家如何使用PHP中的 Laravel框架 搭建一个简易的登录界面，本文为本人课程正在学习的内容，因此只展示如何创建页面和一些简单的语言，如有不正确的地方还请理解（李姐万岁）

一、软件工具

phpstorm 2023
phpstudy_pro（小皮面板）
Laravel v8.83.27

二、具体步骤

因本人课程教学中使用的是 phpstudy_pro（小皮面板）搭建的，因此接下来使用小皮面板为例。

1.Laravel框架初始页面

将下载好的Laravel框架压缩名称为stucms解压至小皮面板下的 www目录中。
打开小皮面板开启首页的Apache服务。

在小皮面板->网站中选择新建网站，域名可以随意起，网站根目录选择Laravel框架下的 public目录，其他设置无需修改。

在任意浏览器中输入刚刚输入的自定义域名，出现图中的内容则为创建成功。

注意：在小皮面板中创建网站时，会将 Laravel框架->public下.htaccess文件中的内容清除，导致无法访问到初始界面，在创建网站时请先复制文件中的内容。（内容如下）

<IfModule mod_rewrite.c>
    <IfModule mod_negotiation.c>
        Options -MultiViews -Indexes
    </IfModule>

    RewriteEngine On

    # Handle Authorization Header
    RewriteCond %{HTTP:Authorization} .
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

    # Redirect Trailing Slashes If Not A Folder...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} (.+)/$
    RewriteRule ^ %1 [L,R=301]

    # Send Requests To Front Controller...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]
</IfModule>

2.创建控制器、路由、视图页面

右键stucms文件选择在PhpStorm打开，打开PhpStorm的终端输入指令创建控制器

控制器文件位置在app/http/Controllers下

php artisan make:controller 目录名/控制器名Controller

在resources下的views文件夹下创建登录视图页面后，在控制器中配置视图函数

public function login(){
   return view('admin.login');
}

在routes下的web.php文件中配置路由地址

use App\Http\Controllers\Admin\LoginController;

Route::get('admin/login',[LoginController::class,'login']);

使用HTML语言搭建好登录界面

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="{{url('css/bootstrap.css')}}">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            /*background: linear-gradient(to left, #bae73f, #f441a5);*/
            position: relative;
        }
        .container .Card{
            box-shadow: 0 0 0.5px black;
        }
        ul,ul li{
            list-style: none;
            text-align: center;
        }
</style>
</head>
<body>
    <div class="container">
        <div class="row mt-5">
            <div class="Card col-6 border offset-3 text-center mt-5 bg-white rounded">
                <h1 class="my-4">BeiMu CMS</h1>
                <form action="{{url('admin/dologin')}}" method="post">
                    {{-- 数据验证 Token --}}
                    @csrf
                    {{-- 账户输入框 --}}
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <label for="user" class="input-group-text" id="basic-addon1">账户</label>
                        </div>
                        <input type="text" name="username" id="user" class="form-control username" placeholder="username" arialabel="username" aria-describedby="basic-addon1">
                    </div>
                    {{-- 密码输入框 --}}
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <label for="pwd" class="input-group-text" id="basic-addon1">密码</label>
                        </div>
                        <input type="password" name="password" id="pwd" class="form-control" placeholder="password" arialabel="password" aria-describedby="basic-addon1">
                    </div>
                    {{-- 确认输入框 --}}
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <label for="pwd" class="input-group-text" id="basic-addon1">确认密码</label>
                        </div>
                        <input type="password" name="password_confirmation" id="pwd" class="form-control" placeholder="password" arialabel="password" aria-describedby="basic-addon1">
                    </div>
                    {{-- 功能按钮组 --}}
                    <div class="text-center my-4">
                        <input type="submit" value="登录" class="btn btn-outline-success">
                        <input type="reset" value="重置" class="btn btn-outline-danger">
                        <input type="button" value="注册" class="btn btn-outline-primary">
                    </div>
                </form>
                @if($errors->any())
                    <div class="text-center alert alert-danger">
                        <ul>
                            @foreach($errors->all() as $error)
                                <li class="img-fluid mr-5 pt-3">{{$error}}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
            </div>
        </div>
    </div>
</body>
</html>

再次在浏览器中访问刚才配置的域名地址，例：www.stu.com/admin/login（例图）

此时，简易的登录界面就搭建好了 qwq

3.数据验证

在各个网站登录时，会显示账户为必填或密码长度为XX的提示，接下来演示Laravel框架中的数据验证中的一部分内容

首先在routes/web.php中定义一个路由

Route::post('admin/dologin',[LoginController::class,'dologin']);

在app/http/Controllers中创建一个路由，内容如下

public function dologin(Request $request){
        $validateDate=$request->validate([
            'username'=>'required|between:6,12',
            // 账户名为必填、长度在6至12之间
            'password'=>'required|confirmed|min:6',
            // 密码为必填、二次确认密码、最小长度为6
            'password_confirmation'=>'required',
            // 确认密码框为必填
        ],[
            // 如条件不符合 则显示下面对应的内容
            'username.required'=>'请输入你的账户',
            'username.between'=>'用户名长度在6 - 8范围内',
            'password.required'=>'密码不可为空',
            'password.min'=>'密码最小不可少于6位数',
            'password.confirmed'=>'两次密码不一致',
            'password_confirmation.required'=>'确认密码不可为空',
        ]);
        // 验证成功则跳转
        print('验证成功');
    }

OK，本文到此结束，以上内容均为本人正在学校课程中正在学习的内容，学艺不精，如有错误还请理解。

温馨提示：最后更新于2024-03-27 17:44:42，某些文章具有时效性，若有错误或已失效，请评论反馈。

版权声明 1、本网站名称：北牧日记
2、本站永久网址：www.imbeimu.top
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们进行更新。

THE END