[Day 48] 留言板後台及前台(四) - 处理留言板内容

我们之前的web.php没有考虑到编辑留言板的部分,
所以我们在留言板的後面再加上一列

//编辑留言板
Route::post('/board', 'HomeController@boardProcess');

然後加上 app/Http/Controllers/HomeController.php 加上 boardProcess这个函式

public function boardProcess($user_id)
{
    $this->page = 'user';
    $name = 'board';

    $userData = User::where('id', $user_id)->first();

    if(!$userData)
        return redirect('/');

    $boardList = Board::where('board_id', $userData->id)->orderby('created_at', 'desc')->get();
    //接收输入资料
    $input = request()->all();

    //验证规则
    $rules = [
        //内容
        'content' => [
            'required',
            'max:400'
        ],
        //电子邮件
        'email' => [
            'required',
            'max:45'
        ],
    ];

    $User = $this->GetUserData();

    $binding = [
        'title' => ShareData::TITLE,
        'page' => $this->page,
        'name' => $name,
        'User' => $this->GetUserData(),
        'userData' => $userData,
        'boardList' => $boardList,
    ];

    //验证资料
    $validator = Validator::make($input, $rules);

    //未登入的处理
    if(!$User)
    {
        //自定义错误讯息
        $validator->errors()->add('user', '请先登入才能留言');

        return view('blog.board', $binding)
            ->withErrors($validator)
            ->withInput($input);
    }

    if($validator->fails())
    {
        return view('blog.board', $binding)
            ->withErrors($validator)
            ->withInput($input);
    }
}

在这里我们要做一些说明,
因为有可能会出现错误,
所以留言板的资料还是要抓,
然後这里多一个判断登入的部分,

$User = $this->GetUserData();
if(!$User)

如果还没有登入就会做处理,
并且我们自己加入错误讯息

$validator->errors()->add('user', '请先登入才能留言');

如果发生错误,
我们还会把之前使用者编辑的内容带出来,

return view('blog.board', $binding)
    ->withErrors($validator)
    ->withInput($input);

然後甚麽都不输入并按下送出,
就会看到以下画面
https://ithelp.ithome.com.tw/upload/images/20210501/20105694sJ9PhORuCL.png

目前我们只处理了错误的部分,
至於新增留言的部份等明天再说.
因为有修改了SCSS档案,
所以附上SCSS档案内容

$mainTitleHeight: 56px;
$mainSideWidth: 130px;
$loginFormWidth: 360px;
$formImageWidth: 150px;
$formImageWidth2: 100px;
$bodyMenuHeight: 46px;
$bodyTitleHeight: 64px;

$mainColor: #0097A7;
$textColor: #FFF;
//背景颜色
$BackWhiteColor: #FFFFFF;
$BackWhiteColor2: #FAFAFA;
$lightgrayColor: #A7A7A7;
$lightgrayColor2: #E8E8E8;
$BackContentColor: #D2E624;

$mainFont: 24px;
$mainFont2: 16px;
$toolBarFont: 16px;
$loginTitleFont: 32px;
$formMainFont: 20px;
$formTextBoxTextFont: 16px;
$formIconFont: 14px;
$formTextBoxBorderFont: 40px;
$formTextBoxBorderFont2: 24px;
$bodyTitleFont: 24px;
$bodyTitleFont2: 20px;

$mainLeftMargin: 24px;
$bodyFormMargin: 16px;
$bodyFormMargin1: 20px;
$bodyFormMargin2: 12px;
$bodyFormMargin3: 30px;
$buttonTopMargin: 10px;
$bodyFormRowMargin: 40px;
$bodyFormPadding1: 24px;
$bodyFormPadding2: 12px;

body {
    overflow-x: hidden;
    overflow-y: hidden;
}

//上面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{
        margin-top: $buttonTopMargin;
        text-align: right;
        .btn_login{
            font-size: $formMainFont;
            height: 40px;
            width: 120px;
            color: $textColor;
            box-shadow: none;
            border-radius: 3px;
            border-width: 0;
        }
    }
}

//一般表单
.normal_form{
    width: 100%;
    margin: auto;

    .form_title{
        margin-top: 15px;
        margin-bottom: 30px;
        font-size: $loginTitleFont;
        font-weight: 600;
        text-align: center;
    }

    .form_label{
        font-size: $formMainFont;
        font-weight: 600;
        margin-bottom: 12px;
    }

    .form_textbox_region{
        font-size: $formTextBoxTextFont;
        line-height: $formTextBoxBorderFont;
        margin-bottom: 20px;
        .form_textbox{
            padding-left: 12px;
            width: 100%;
        }

        .form_select {
            height: calc(#{$formTextBoxBorderFont} + 4px);
            padding-left: 12px;
            width: 100%;
        }

        .form_textarea{
            line-height: $formTextBoxBorderFont2;
            padding-left: 12px;
            width: 100%;
            height: calc(#{$formTextBoxBorderFont2}*8);
        }
    }

    .form_error {
        text-align: left;
        font-size: $formTextBoxTextFont;
    }

    .btn_form{
        font-size: $formMainFont;
        height: 40px;
        width: 120px;
        color: $textColor;
        box-shadow: none;
        border-radius: 3px;
        border-width: 0;
    }
    
    .btn_group{
        margin-top: $buttonTopMargin;
        text-align: right;
    }

    .btn_group_middle{
        text-align: center;
    }
}


.background_white {
    min-height: calc(100vh - #{$mainTitleHeight});
    background: $BackWhiteColor;
}

.background_white2 {
    min-height: calc(100vh - #{$mainTitleHeight});
    background: $BackWhiteColor2;
}

.main_region
{
    padding: 10px;
}

.col-10
{
    width: 10%;
    float: left;

    .circle_img {
        margin: auto;
        cursor: pointer;
        width: calc(9vw - 10px - 2px);
        height: calc(9vw - 10px - 2px);
        border-radius: 100%;
    }
}

.div_clear
{
    clear:both;
}

.body_title {
    font-size: $bodyTitleFont;
    font-weight: 600;
    margin-top: $bodyFormMargin1;
    margin-bottom: $bodyFormMargin2;
}

.body_content {
    font-size: $formMainFont;
    background-color: $BackContentColor;
    margin-top: $bodyFormMargin2;
    margin-bottom: $bodyFormMargin3;
    padding-top: $bodyFormPadding2;
    padding-bottom: $bodyFormPadding2;
    border-radius: 5px;
}

.body_form_title {
    font-size: $bodyTitleFont2;
    font-weight: 600;
}

.body_img {
    width: $formImageWidth2;
    height: $formImageWidth2;
    border-radius: 100%;
}

.body_form_row {
    margin-top: $bodyFormRowMargin;
}

.body_show_region {
    min-height: calc(100vh - #{$bodyFormMargin * 2} - #{$bodyFormMargin1} - #{$bodyFormMargin} - #{$bodyTitleFont} - #{$mainTitleHeight});
    width: calc(100% - #{$bodyFormMargin});
    margin: 0;
    margin-top: $bodyFormMargin;
    margin-bottom: $bodyFormMargin;
    padding: $bodyFormPadding1;
    border: solid 1px $lightgrayColor2;
    position: relative;

    &.menu {
        min-height: calc(100vh - #{$bodyFormMargin * 2} - #{$bodyFormMargin1} - #{$bodyFormMargin} - #{$bodyTitleFont} - #{$mainTitleHeight} - #{$bodyMenuHeight} - #{$bodyTitleHeight});
        margin-top: 0;
        padding: 0;
    }

    .bottom {
        position: absolute;
        bottom: 20px;
        width: calc(100% - #{$bodyFormPadding1 * 2});

        .center_button_region {
            text-align:center;
        }
    }
}


/****************图片上传相关****************/

.inputfile
{
    width: 0.1px; 
    height: 0.1px; 
    opacity: 0; 
    overflow: hidden; 
    position: absolute; 
    z-index: -1;
}

.inputfile + label 
{
    color: white;
    background-color: #EF5350;
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.5rem 2rem;
    border-radius: 0.5rem;
}
.inputfile + label:hover 
{
    background-color: #D2302E;
    cursor: pointer;
}

.upload_img {
    width: $formImageWidth;
    height: $formImageWidth;
    border-radius: 100%;
}

td.right {
    text-align: right;
}

/****************改变Bootstrap样式****************/


.container {
    width: 100vw;
    padding: 0;
    background: $BackWhiteColor2;
}

//排版
.form.col-sm-1 {
    padding: 0;
    min-width: $mainSideWidth;
}

.form.col-sm-11 {
    max-width: calc(100vw - #{$mainSideWidth});
    max-height: calc(100vh - #{$mainTitleHeight});
    overflow-y: auto;
}

//选单
.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;
            }
        }
    }
}

/****************改变CKEditor样式****************/

.ck-content {
    min-height: 200px;
}

<<:  LeetCode Weekly Contest 239的详解分享

>>:  隐蔽频道(Covert Channel) &侧通道(Side Channel) &带外公开频道(Out-of-band Overt Channel)

test

test 这是H4标题 ...

[Day18] - Django-REST-Framework API 呼叫及介面操作

昨天我们使用 DRF 实作出了第一个 API -- 商品查询 API 。相信大家都有感到成就感吧!以...

Day 28 - 设籍有关涉及射击的射击游戏

Intro 这次是写了两个小游戏,并从里面学到一点 member function 的用法,还有字串...

Day 4:透过 npm、Hexo 指令在本机端安装你的 Hexo 部落格

当前置必要安装工具用好後,就可以在本机搭建 Hexo 部落格啦!安装过程会使用到指令,所以我们要打开...

卡夫卡的藏书阁【Book7】- Kafka 实作新增 Topic

「不要屈服,不要淡化,不要使它看来合逻辑,不要依据潮流而修改你的灵魂。相反的,狠狠的追随你最强烈的...