更新内容

.env.dev

@@ -1,6 +1,6 @@
 APP_NAME=Laravel
 APP_ENV=local
-APP_KEY=base64:c4sdvDT0AHk5reW7Zv6hz5Y5nIIXUrOYiknhBou7s4s=
+APP_KEY=base64:bdomFa+r6S774rRyFNeb4pCBxVe4WbuzAzk+LyP86+k=
 APP_DEBUG=true
 APP_URL=http://localhost
 
@@ -57,4 +57,3 @@ VITE_PUSHER_PORT="${PUSHER_PORT}"
 VITE_PUSHER_SCHEME="${PUSHER_SCHEME}"
 VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
 
-

app/Http/Controllers/AuthController.php

@@ -0,0 +1,55 @@
+<?php
+
+namespace App\Http\Controllers;
+
+
+/*
+ * 用户认证控制器
+ */
+
+use Illuminate\Http\Request;
+use Illuminate\Routing\Controller as BaseController;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Validator;
+
+
+class AuthController extends BaseController
+{
+    public function getLogin() {
+        return view('login');
+    }
+
+    public function postLogin(Request $request)
+    {
+        // 登录逻辑
+        $credentials = $request->only(['username', 'password']);
+        $remember = (bool) $request->input('remember', false);
+
+        $validator = Validator::make($credentials, [
+            'username'          => 'required',
+            'password'          => 'required',
+        ]);
+
+        if ($validator->fails()) {
+            return ['status'=>'fail','message'=>$validator->errors()];
+        }
+
+        if (Auth::guard('web')->attempt($credentials, false)) {
+            // 登录成功
+            return ['status'=>'success','message'=>'登录成功'];
+        }
+        // 登录失败
+        return ['status'=>'fail','message'=>'用户名或密码错误'];
+    }
+
+    public function logout(Request $request)
+    {
+        // 登出逻辑
+        Auth::guard('web')->logout();
+
+        $request->session()->invalidate();
+
+        return redirect('/');
+    }
+
+}

app/Http/Controllers/Controller.php

@@ -9,4 +9,9 @@ use Illuminate\Routing\Controller as BaseController;
 class Controller extends BaseController
 {
     use AuthorizesRequests, ValidatesRequests;
+
+    public function __construct()
+    {
+
+    }
 }

app/Http/Controllers/HomeController.php

@@ -0,0 +1,26 @@
+<?php
+
+namespace App\Http\Controllers;
+
+
+/*
+ * 用户认证控制器
+ */
+
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Validator;
+
+
+class HomeController extends Controller
+{
+
+
+    public function index(Request $request)
+    {
+        return view('index');
+    }
+
+
+
+}

app/Models/User.php

@@ -12,14 +12,15 @@ class User extends Authenticatable
 {
     use HasApiTokens, HasFactory, Notifiable;
 
+    protected $table = 'site_users';
+
     /**
      * The attributes that are mass assignable.
      *
      * @var array<int, string>
      */
     protected $fillable = [
-        'name',
-        'email',
+        'username',
         'password',
     ];
 
@@ -39,6 +40,6 @@ class User extends Authenticatable
      * @var array<string, string>
      */
     protected $casts = [
-        'email_verified_at' => 'datetime',
+     //   'email_verified_at' => 'datetime',
     ];
 }

resources/views/__sidebar.blade.php

@@ -0,0 +1,38 @@
+<div class="sidebar">
+    <div class="menu-wrap">
+        <a href="/" class="sidebar-logo">
+            <img src="/static/images/logo.svg" alt="Sylvia">
+        </a>
+        <nav class="menu-nav">
+            <ul>
+                <li><a href="/">主页</a></li>
+                <li><a href="gallery.html">功能类产品</a></li>
+                <li><a href="gallery.html">屏幕保护膜</a></li>
+                <li><a href="gallery.html">智能切膜机</a></li>
+            </ul>
+
+            <div class="menu-contacts">
+
+                <a href="#" class="menu-contacts__item">
+					<span class="menu-contacts__icon">
+						<i class="fa fa-envelope"></i>
+					</span>
+                    <p>Marketing@mietubl.com</p>
+                </a>
+            </div>
+            <div class="menu-close__wrap">
+                <a href="#" class="menu-close"><img style="transform: rotate(180deg);" src="/static/images/arrow-right.svg" alt=""></a>
+            </div>
+        </nav>
+    </div>
+
+    <a href="/" class="logo">
+        <img src="/static/images/logo.svg" alt="">
+    </a>
+
+    <a href="#" class="hamburger-button">
+        <span></span>
+        <span></span>
+        <span></span>
+    </a>
+</div>

resources/views/index.blade.php

@@ -0,0 +1,128 @@
+
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+    <title>相册</title>
+
+    <link rel="shortcut icon" href="/static/images/favicon.ico" type="image/x-icon">
+    <link rel="icon" href="/static/images/favicon.ico" type="image/x-icon">
+
+    <link rel="stylesheet" href="/static/css/swiper-bundle.min.css">
+    <link rel="stylesheet" href="/static/css/font-awesome.min.css">
+    <link rel="stylesheet" href="/static/css/magnific-popup.min.css">
+    <link rel="stylesheet" href="/static/css/animate.min.css">
+    <link rel="stylesheet" href="/static/css/main.css">
+</head>
+<body>
+
+<div class="menu-overlay"></div>
+
+<main class="main">
+
+    <div class="home def-row">
+
+        @include('__sidebar', [])
+
+        <div class="prelodaer-wrap">
+            <div class="preloader-item">
+                <img src="/static/images/logo-preloader.svg" alt="Preloader">
+            </div>
+        </div>
+
+        <div class="content home-content">
+
+            <div class="swiper swiper-banner">
+                <div class="swiper-wrapper">
+
+                    <!-- Slide START -->
+                    <div class="swiper-slide animeslide-slide">
+                        <div class="banner-item" style="background-image: url(/static/images/frame-banner-index1.jpg);">
+                            <div class="banner-content">
+                                <div class="banner-title-mini" data-animate="bottom">Album</div>
+                                <h1 class="h1 banner-title" data-animate="bottom">A brand that satisfies consumers and makes money for dealers</h1>
+                                <div class="banner-desc" data-animate="bottom">
+                                    <p></p>
+                                </div>
+                                <div class="banner-btn" data-animate="bottom">
+                                    <a class="link-portfolio" href="gallery.html">
+                                        Show portfolio
+                                        <img src="/static/images/arrow-right.svg" alt="">
+                                        <span class="right-border"></span>
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Slide END -->
+
+                    <!-- Slide START -->
+                    <div class="swiper-slide animeslide-slide">
+                        <div class="banner-item" style="background-image: url(/static/images/frame-banner-index2.jpg);">
+                            <div class="banner-content">
+                                <div class="banner-title-mini" data-animate="bottom">Portraits</div>
+                                <h1 class="h1 banner-title" data-animate="bottom">Screen Protector DIY Solution</h1>
+                                <div class="banner-desc" data-animate="bottom">
+                                    <p>Mietubl screen protector machine makes it an easy work to match screen protectors and mobile phones without preparing a huge inventory. The mini phone skin printer helps design and personalize almost patterns, making customized services the standout feature of your business.</p>
+                                </div>
+                                <div class="banner-btn" data-animate="bottom">
+                                    <a class="link-portfolio" href="gallery.html">
+                                        Show portfolio
+                                        <img src="/static/images/arrow-right.svg" alt="">
+                                        <span class="right-border"></span>
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Slide END -->
+
+                    <!-- Slide START -->
+                    <div class="swiper-slide animeslide-slide">
+                        <div class="banner-item" style="background-image: url(/static/images/frame-banner-index3.jpg);">
+                            <div class="banner-content">
+                                <div class="banner-title-mini" data-animate="bottom">Portraits</div>
+                                <h1 class="h1 banner-title" data-animate="bottom">Next-generation MagSafe</h1>
+                                <div class="banner-desc" data-animate="bottom">
+                                    <p></p>
+                                </div>
+                                <div class="banner-btn" data-animate="bottom">
+                                    <a class="link-portfolio" href="gallery.html">
+                                        Show portfolio
+                                        <img src="/static/images/arrow-right.svg" alt="">
+                                        <span class="right-border"></span>
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Slide END -->
+
+                </div>
+
+                <div class="banner-nav-wrap">
+                    <div class="swiper-button-prev"></div>
+                    <div class="swiper-scrollbar"></div>
+                    <div class="swiper-button-next"></div>
+                </div>
+            </div><!-- end swiper-banner -->
+        </div><!-- end home-content -->
+    </div><!-- end home -->
+</main>
+
+
+<script src="/static/js/jquery-3.7.0.min.js"></script>
+<script src="/static/js/swiper-bundle.min.js"></script>
+<script src="/static/js/wow.min.js"></script>
+<script src="/static/js/masonry.pkgd.min.js"></script>
+<script src="/static/js/imagesloaded.pkgd.min.js"></script>
+<script src="/static/js/magnific-popup.min.js"></script>
+<script src="/static/js/blazy.min.js"></script>
+<script src="/static/js/parazoom.min.js"></script>
+<script src="/static/js/script.js"></script>
+</body>
+</html>

resources/views/welcome.blade.php → resources/views/login.blade.php

@@ -3,7 +3,8 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>登录页面</title>
+    <meta name="csrf-token" content="{{ csrf_token() }}">
+    <title>相册系统登录</title>
     <style>
         body {
             background-color: #2B2C30;
@@ -58,16 +59,54 @@
     </style>
 </head>
 <body>
+<!-- 登录表单 -->
+<form method="POST" action="/post-login" id="loginForm">
 <div class="login-wrapper">
     <div class="logo">
         <img src="/static/images/logo.png" alt="logo">
     </div>
     <div class="login-container">
         <h2>登录</h2>
-        <input type="text" placeholder="用户名" required>
-        <input type="password" placeholder="密码" required>
+        <input type="text"  name="username" placeholder="用户名" required>
+        <input type="password" name="password" placeholder="密码" required>
+        <div style="color:red;" id="errorMsg"></div>
         <button type="submit">登录</button>
     </div>
 </div>
+</form>
+<script src="/static/js/jquery-3.7.0.min.js"></script>
+<script>
+    $(document).ready(function() {
+        // ajaj登录表单提交
+        $('#loginForm').submit(function(e) {
+            var username = $('input[name="username"]').val();
+            var password = $('input[name="password"]').val();
+            // 获取 CSRF 令牌
+            var csrfToken = $('meta[name="csrf-token"]').attr('content');
+            $.ajax({
+                url: '/post-login',
+                type: 'POST',
+                headers: {
+                    'X-CSRF-TOKEN': csrfToken // 添加 CSRF 令牌到请求头
+                },
+                data: {
+                    username: username,
+                    password: password
+                },
+                success: function(res) {
+                    if (res.status == 'success') {
+                        window.location.href = '/index';
+                    } else {
+                        $('#errorMsg').html(res.message);
+                    }
+                },
+                error: function(err) {
+                    console.log(err);
+                }
+            });
+            return false; // 阻止表单默认提交事件
+        });
+    });
+</script>
 </body>
 </html>

routes/web.php

@@ -1,7 +1,8 @@
 <?php
 
+use App\Http\Controllers\AuthController;
+use App\Http\Controllers\HomeController;
 use Illuminate\Support\Facades\Route;
-
 /*
 |--------------------------------------------------------------------------
 | Web Routes
@@ -13,8 +14,10 @@ use Illuminate\Support\Facades\Route;
 |
 */
 
-Route::get('/', function () {
-    return view('welcome');
-});
+Route::get('/', [AuthController::class, 'getLogin']);
+
+Route::get('/index', [HomeController::class, 'index']);
+
+Route::post('/post-login', [AuthController::class, 'postLogin']);