[Day 39] 心情随笔後台及前台(一) - 心情随笔列表

心情随笔後台及前台

今天我们终於要进行心情随笔的部分,
首先是要建後台画面及功能,
我们的心情随笔就建纯文字就好了,
首先我们预计会有这些路由,
routes/web.php

Route::group(['middleware'=>['auth.admin']], function(){
    Route::group(['prefix' => 'admin'], function(){
        //心情随笔相关
        Route::group(['prefix' => 'mind'], function(){
            //心情随笔列表页面
            Route::get('/', 'AdminController@mindListPage');
            //新增心情随笔资料
            Route::get('/add', 'AdminController@addMindPage');
            //处理心情随笔资料
            Route::post('/edit', 'AdminController@editMindProcess');
            //单一资料
            Route::group(['prefix' => '{mind_id}'], function(){
                //编辑心情随笔资料
                Route::get('/edit', 'AdminController@editMindPage');
                //删除心情随笔资料
                Route::get('/delete', 'AdminController@deleteMindProcess');
            });
        });
    });
});

我们在第11天已经建立mind这个资料表,
然後在第23天也建立了mind的Entity档案,

接下来要先做列表页面,
所以我们要写mindListPage这个方法,
app/http/controllers/AdminController.php

use App\Entity\Mind;
...
//心情随笔列表页面
public function mindListPage()
{
    Log::notice('取得心情随笔列表');
    //先取得自己的资料
    $User = $this->GetUserData();
    //取得心情随笔列表
    $list = Mind::where('user_id', $User->id)->get();
    $name = 'mind';

    $binding = [
        'title' => ShareData::TITLE,
        'page' => $this->page,
        'name' => $name,
        'User' => $User,
        'List' => $list,
        'result' => '',
    ];
    return view('admin.mindlist', $binding);
}

然後前端做一个这样的画面,目前反正没有List资料, 所以先不处理, 先放个空的table就好
resources/views/admin/mindlist.blade.php

<!-- 指定继承 layout.master 母模板 -->
@extends('layout.master')

<!-- 传送资料到母模板，并指定变数为title -->
@section('title', $title)

<!-- 传送资料到母模板，并指定变数为content -->
@section('content')
<!-- 自动产生 csrf_token 隐藏栏位-->
{!! csrf_field() !!}
<div class="normal_form">
    <div class="form_title">心情随笔列表</div>
    <div class="btn_group">
        <button type="button" class="btn btn-primary btn_form" onclick="AddData()">新增</button>
    </div>
    <div class="table-responsive">
        <table class="table table-hover form_label">
            <thead>
                <tr>
                    <th>日期</th>
                    <th>内容</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </div>
<div>

<script>
function AddData()
{
    location.href = "/admin/mind/add";
}
</script>
@endsection

附上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;

$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;
$bodyFormRowMargin: 40px;
$bodyFormPadding1: 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;
        }
    }
}

//一般表单
.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 {
        font-size: $formTextBoxTextFont;
    }

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

    .btn_group_middle{
        text-align: center;
        .btn_form{
            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;
}

.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_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%;
}

/****************改变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});
}

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

画面就会像这样
https://ithelp.ithome.com.tw/upload/images/20210424/20105694LFyPZHhGKc.png


<<:  AutoML应用分享║DataRobot 年度线上大会 2021

>>:  IOS Swift 请问你哪位 ? Protocol<协定>自我介绍。

Day3 CSS装潢大师

上一篇我们讲解完了网路的基石html，接下来我们要介绍的就是网页的装潢家CSS，如果说网页是一栋大楼...

[Day29] 後端13：後端Code总结

不过有些需要下的指令可不能省喔～ .env APP_NAME=Laravel APP_ENV=loc...

D11-用 Swift 和公开资讯，打造投资理财的 Apps { 台股申购实作.4 - 用 Calendar 物件处理台湾的民国年}

股票申购是和时间有关的 feature，所以需要有一个 DateUtility，这个类别负责所有 D...

Day11:while循环

Python程序语言总共有二种回圈的语法。第一种是"for"回圈，另外一个则是&...

[Day - 06 ] - Spring Conditional 运用与原理

Abstract 当每个开发者初始化一套服务时，可能会因不同的系统或不同的Java版本相容性问题进而...