laravel 實戰(zhàn)之 - 登錄首頁

laravel 實戰(zhàn)之 - 登錄首頁

前言

  • 實戰(zhàn)環(huán)境

    操作系統(tǒng)：centOS 7
    數(shù)據(jù)庫：sqlite3
    php：7.2
    laravel：5.8
    css框架：bootstrap 4
    工作目錄：默認為項目根目錄

  • 預(yù)期

    • 通過路由協(xié)調(diào)視圖和控制器顯示登錄界面，并獲取用戶輸入數(shù)據(jù)

設(shè)計

用戶邏輯

  1. 用戶通過訪問 http://localhost/login 頁面訪問到 login 視圖
  2. login 視圖有一個表單，用戶可以輸入信息后提交到后臺
  3. 后臺可以獲取到用戶輸入信息

邏輯分析

由【用戶邏輯】可知，我們一共需要實現(xiàn)兩個功能，一個是 login 視圖，讓用戶可以輸入信息并提交，一個是后臺，可以獲取到用戶輸入信息

開發(fā)邏輯

  1. 配置 login 路由，指向 loginController 控制器的 login 方法，login 方法可以調(diào)取到 login 視圖，顯示出登錄首頁；
  2. 配置 show 路由，指向 loginController 控制器的 show 方法，show 方法可以顯示打印出從 login 視圖提交的信息；

實施邏輯

  1. 新建兩個路由 login 和 show ，分別指向控制器 loginController 的 login 和 show 方法；
  2. 新建一個控制器 loginController ，并在該控制器下新建 login 和 show 兩個方法，其中 login 方法用來調(diào)取 login 視圖，show 方法用來顯示后臺獲取到的用戶提交的信息；
  3. 新建一個視圖，用來顯示登錄界面，并將用戶輸入信息提交至后臺

實操

  1. 新建兩個路由 login 和 show ，分別指向控制器 loginController 的 login 和 show 方法；
# 在 ./routes/web.php 文件后追加
// 首頁登錄
  // login 登錄界面
  Route::get('login',"loginController@login");
  // 顯示獲取到的用戶數(shù)據(jù)
  Route::get('show/{user}/{password}',"loginController@show");
  1. 新建一個控制器 loginController ，并在該控制器下新建 login 和 show 兩個方法，其中 login 方法用來調(diào)取 login 視圖，show 方法用來顯示用戶輸入的信息；
# 在工作目錄執(zhí)行 php artisan make:controller loginController 命令創(chuàng)建 loginController 控制器
# 在 ./app/Http/Controllers/loginController.php 控制器中添加方法
//返回 login 視圖
    public function login() {
      return view('login');
    }

    //顯示用戶輸入的數(shù)據(jù)
    public function show(Request $request) {
      dd($request->input('user'),$request->input('password'));
    }
  1. 新建一個視圖，用來顯示登錄界面，并將用戶輸入信息提交至后臺
<!-- 新建 ./resources/views/login.blade.php 視圖 -->
<!-- 新建表單：-->
    <form action="show" method="get">
      @csrf
      <div class="form-group">
        <label for="user-id">user</label>
        <input type="text" class="form-control" id="user-id" name="user" />
      </div>
      <div class="form-group">
        <label for="password-id">password</label>
        <input type="password" class="form-control" id="password-id" name="password" />
      </div>
      <button type="reset" class="btn btn-primary">重置</button>
      <button type="submit" class="btn btn-primary">提交</button>
    </form>

完整代碼：

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet"  integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>laravel 實戰(zhàn)之 - 首頁登錄</title>
  </head>
  <body>
        <div class="container">

                <form action="show" method="get">
                        @csrf
                        <div class="form-group">
                                <label for="user-id">user</label>
                                <input type="text" class="form-control" id="user-id" name="user" />
                        </div>
                        <div class="form-group">
                                <label for="password-id">password</label>
                                <input type="password" class="form-control" id="password-id" name="password" />
                        </div>
                        <button type="reset" class="btn btn-primary">重置</button>
                        <button type="submit" class="btn btn-primary">提交</button>
                </form>

        </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

此圖鎮(zhèn)樓

1557419047352.png
1557419075679.png

今日總結(jié)

我們今天都操作了哪些呢：

  1. 新建了兩條路由 login 和 show
    細心的小伙伴們一定發(fā)現(xiàn)了這兩條路由都是以Route::get開頭的，但是，是所有的路由的都是這樣嗎，當然不是啦，laravel 路由支持很多種方法的，不但有get，還有post、put、patch、delete等等，如過有興趣的小伙伴們可以去閱讀下官方的相關(guān)說明，了解即可，不要求完全記憶。
  2. 新建了一個 loginController 控制器，并添加了 login 和 show 方法，其中 show 方法中show(Request $request)中的第一個Request是規(guī)定用法噢，千萬不要打錯了，后一個$request是一個自定義的變量，名字不做限制，正確引用即可。
  3. 新建了一個 login 視圖，其中表單中的@csrf是csrf驗證，它可以使你的網(wǎng)站更為安全，提交至post put delete路由方法的表單中必須要有的噢，不然 laravel 中是無法正確提交表單的噢。
  4. 我們今天用的是 get 方式提交的表單，但是聰明的小伙伴們肯定知道 get 方式提交的表單是明文傳輸?shù)模貏e的不安全，所以表單提交一般都需要使用 post 方式提交，那我們這個登錄首頁要如何修改成 post 的方式提交表單，并在后臺獲取到用戶輸入的信息呢？
    方法是很簡單的，我們只需要將我們今天在./routes/web.php中新增的第二條路由Route::get('show',"loginController@show");修改為Route::post('show',"loginController@show");，然后再將 ./resources/views/login.blade.php視圖中的<form action="show" method="get">修改為<form action="show" method="post">就完成了。

是不是很簡單，但是一定要操作噢，不然很容易陷在看一遍，忘一遍，又看一遍，又忘一遍的怪圈中，白白浪費了美好時光。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容