[Day 29] 会员登入及登出(一)

我们先做登入的画面,
在app/Http/Controllers/UserAuthController.php新增signInPage方法.

//使用者登入画面public function signInPage(){    $name = 'sign_in';    $binding = [        'title' => ShareData::TITLE,        'name' => $name,    ];    return view('user.sign-in', $binding);}

然后新增resources/views/user/sign-in.blade.php

<!-- 指定继承 layout.master 母模板 -->@extends('layout.master')<!-- 传送资料到母模板，并指定变数为title -->@section('title', $title)<!-- 传送资料到母模板，并指定变数为content -->@section('content')<form id="form1" method="post" action=""><!-- 自动产生 csrf_token 隐藏栏位-->{!! csrf_field() !!}<div class="login_form">    <div class="login_title">登入</div>    <div class="login_label">帐号(必须为E-mail)</div>    <div class="login_textbox">        <input name="account" class="form_textbox" type="text" value="{{ old('account') }}" placeholder="请输入帐号"/>    </div>    <div class="login_label">密码</div>    <div class="login_textbox">        <input name="password" class="form_textbox" type="password" value="{{ old('password') }}" placeholder="请输入密码"/>    </div>    <div class="login_error">        <!-- 错误讯息模板元件 -->        @include('layout.ValidatorError')    </div>    <div class="btn_group">        <button type="button" class="btn btn-warning btn_login" onclick="SignUp()">注册</button>        <button type="submit" class="btn btn-success btn_login">登入</button>    </div></div></form><script>function SignUp(){    location.href="/user/auth/sign-up";}</script>@endsection

scss档案修改如下

$mainTitleHeight: 56px;$loginFormWidth: 360px;$mainColor: #0097A7;$textColor: #FFF;//背景颜色$BackWhiteColor: #FFFFFF;$BackWhiteColor2: #FAFAFA;$lightgrayColor: #A7A7A7;$mainFont: 24px;$mainFont2: 16px;$toolBarFont: 16px;$loginTitleFont: 32px;$formMainFont: 20px;$formTextBoxTextFont: 16px;$formTextBoxBorderFont: 40px;$mainLeftMargin: 24px;//上面Bar的样式.toolbar_section{    height: $mainTitleHeight;    background: $mainColor;    .toolbar_title{        line-height: $mainTitleHeight;        font-size: $mainFont;        margin-left: $mainLeftMargin;        color: $textColor;    }    .toolbar_title2{        line-height: $mainTitleHeight;        font-size: $mainFont2;        margin-left: $mainLeftMargin;        color: $textColor;    }    .toolbar_right{        float: right;        height: $mainTitleHeight;        margin-right: 24px;        font-size: $toolBarFont;    }    .toolbar_text{        margin-left: 12px;        color: $textColor;        line-height: $mainTitleHeight;    }}//注册登入表单.login_form{    width: $loginFormWidth;    margin: auto;    .login_title{        margin-top: 15px;        margin-bottom: 30px;        font-size: $loginTitleFont;        font-weight: 600;        text-align: center;    }    .login_label{        font-size: $formMainFont;        font-weight: 600;        margin-bottom: 12px;    }    .login_textbox{        font-size: $formTextBoxTextFont;        line-height: $formTextBoxBorderFont;        margin-bottom: 20px;        .form_textbox{            padding-left: 12px;            width: 100%;        }    }    .login_error {        font-size: $formTextBoxTextFont;    }    .btn_group{        text-align: right;        .btn_login{            font-size: $formMainFont;            height: 40px;            width: 120px;            color: $textColor;            box-shadow: none;            border-radius: 3px;            border-width: 0;        }    }}.background_white {    min-height: calc(100vh - #{$mainTitleHeight});    background: $BackWhiteColor;}.background_white2 {    min-height: calc(100vh - #{$mainTitleHeight});    background: $BackWhiteColor2;}/****************改变Bootstrap样式****************/.container {    width: 100vw;    padding: 0;    background: $BackWhiteColor2;}//排版.form.col-sm-1 {    padding: 0;}//选单.nav-pills>li{    &>a{        border-radius: 0;        color: $lightgrayColor;        font-size: $formTextBoxTextFont;        &:hover{            background: #E9E9E9;        }    }    &.active{        border-right: solid 4px $mainColor;        &>a, {            color: $mainColor;            background: transparent;            &:hover{                color: $mainColor;                background: #E9E9E9;            }        }    }}

点击旁边的登入就会进入登入画面.