自我介绍後台及前台
自定义性别
我们现在要开始做自我介绍的後台部分,
在这里我们要先建一个Enum,
用来放性别的定义,
当然我们也可以直接定义男生为1, 女生为2,
但是这样子经过了一段时间,
可能自己也会乱掉,
如果交接给别人也会搞不清楚定义,
所以我们直接把定义写在一个class里面,
即使我们忘记了定义也没有关系.
我们在app资料夹底下建立一个Enum资料夹,
用来放所有的Enum的定义,
app/Enum/ESexType.php
<?PHP
namespace App\Enum;
//性别类型
class ESexType{
const MALE = 1; //男性
const FEMALE = 2; //女性
}
?>
自我介绍後台的Controller
我们在app/Http/Controllers底下新增一个AdminController,
我们现在要先取得使用者资料,
首先要先从session取得user_id,
来确定使用者是否登入,
因为这个动作我们在每个页面都会做,
而session又需要在Controller取得,
所以我们把这个方法写在Controller.php里面,
<?php
namespace App\Http\Controllers;
use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
use Illuminate\Foundation\Bus\DispatchesJobs;
use Illuminate\Foundation\Validation\ValidatesRequests;
use Illuminate\Routing\Controller as BaseController;
use App\Entity\User;
class Controller extends BaseController
{
use AuthorizesRequests, DispatchesJobs, ValidatesRequests;
public function GetUserData()
{
//取得会员编号
$user_id = session()->get('user_id');
if(is_null($user_id))
{
return null;
}
$User = User::where('id', $user_id)->first();
return $User;
}
}
我们在原本的Controller.php里面新增了一个GetUserData方法来取得使用者资料,
然後我们在AdminController取得使用者资料来用.
app/Http/Controllers/AdminController.php
<?PHP
namespace App\Http\Controllers;
use Validator;
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Facades\Log;
use App\Http\Controllers\Controller;
use App\Module\ShareData;
use App\Entity\User;
class AdminController extends Controller
{
public $page = "admin";
//自我介绍页面
public function editUserPage()
{
$User = $this->GetUserData();
if(!$User)
{
//如果找不到使用者,就回到首页
return redirect('/');
}
$name = 'user';
$binding = [
'title' => ShareData::TITLE,
'page' => $this->page,
'name' => $name,
'User' => $User,
'result' => '',
];
return view('admin.edituser', $binding);
}
}
?>
自我介绍後台的View
接着我们把主板页面修改,
当使用者登入的时候右上角会显示名字,
当使用者未登入的时候右上角会显示未登入.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>@yield('title')</title>
<script src="/js/app.js"></script>
<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/css/app.css?<?php echo date("mj", time())?>">
</head>
<boby>
<div class="toolbar_section">
<span class="toolbar_title">@yield('title')</span>
<span class="toolbar_title2">小鱼</span>
<div class="toolbar_right">
<span class="toolbar_text">
{{ $User != null ? $User->name.",您好!" : "未登入" }}
</span>
</div>
</div>
<div class="container">
<div class="col-sm-1 form background_white">
<ul class="nav nav-pills nav-stacked">
@if($page == "admin" && session()->has('user_id'))
<!-- 自我介绍 -->
<li
@if($name == "user")
class="active"
@endif
>
<a href="/admin/user">自我介绍</a>
</li>
<!-- 心情随笔 -->
<li
@if($name == "mind")
class="active"
@endif
>
<a href="/admin/mind">心情随笔</a>
</li>
<!-- 回到前台 -->
<li>
<a href="/">部落格</a>
</li>
@else
<!-- 首页 -->
<li
@if($name == "home")
class="active"
@endif
>
<a href="/">部落格</a>
</li>
@if(session()->has('user_id'))
<!-- 自我介绍 -->
<li>
<a href="/admin/user">进入後台</a>
</li>
@else
<!-- 注册 -->
<li
@if($name == "sign_up")
class="active"
@endif
>
<a href="/user/auth/sign-up">注册</a>
</li>
<!-- 登入 -->
<li
@if($name == "sign_in")
class="active"
@endif
>
<a href="/user/auth/sign-in">登入</a>
</li>
@endif
@endif
@if(session()->has('user_id'))
<!-- 登出 -->
<li>
<a href="/user/auth/sign-out">登出</a>
</li>
@endif
</ul>
</div>
<div class="col-sm-11 background_white2">
@yield('content')
</div>
</div>
</body>
</html>
为了正确显示,
之前的Controller的$binding里面都还要加上'User' => $this->GetUserData(),
来取得使用者资料.
然後再新增resources/views/admin/edituser.blade.php
这个档案,
档案内容如下
<?PHP use App\Enum\ESexType; ?>
<!-- 指定继承 layout.master 母模板 -->
@extends('layout.master')
<!-- 传送资料到母模板,并指定变数为title -->
@section('title', $title)
<!-- 传送资料到母模板,并指定变数为content -->
@section('content')
<form id="form1" method="post" action="">
<!-- 自动产生 csrf_token 隐藏栏位-->
{!! csrf_field() !!}
<div class="normal_form">
<div class="form_title">自我介绍</div>
<div class="col-sm-6">
<div class="form_label">帐号</div>
<div class="form_textbox_region">
<input name="account" class="form_textbox" type="text" value="{{ $User->account }}" readonly="true" placeholder="请输入帐号"/>
</div>
</div>
<div class="div_clear"/>
<div class="col-sm-2">
<div class="form_label">性别</div>
<div class="form_textbox_region">
<select class="form_select" id="sex" name="sex" placeholder="请选择性别">
<option value="{{ ESexType::MALE }}"
@if($User->sex == ESexType::MALE)
selected
@endif
>男性</option>
<option value="{{ ESexType::FEMALE }}"
@if($User->sex == ESexType::FEMALE)
selected
@endif
>女性</option>
</select>
</div>
</div>
<div class="col-sm-2">
<div class="form_label">身高</div>
<div class="form_textbox_region">
<input name="height" class="form_textbox" type="number" value="{{ $User->height }}" placeholder="请输入身高"/>
</div>
</div>
<div class="col-sm-2">
<div class="form_label">体重</div>
<div class="form_textbox_region">
<input name="weight" class="form_textbox" type="number" value="{{ $User->weight }}" placeholder="请输入体重"/>
</div>
</div>
<div class="col-sm-6">
<div class="form_label">兴趣</div>
<div class="form_textbox_region">
<input name="interest" class="form_textbox" type="text" value="{{ $User->interest }}" placeholder="请输入兴趣"/>
</div>
</div>
<div class="col-sm-6">
<div class="form_label">
图片
<input type="file" name="file" id="file" class="inputfile" />
<label for="file">上传图片</label>
</div>
<div class="form_textbox_region">
<img id="file_review" class="upload_img"
@if($User->picture == "")
src="/images/nopic.png"
@else
src="$User->picture"
@endif
/>
</div>
</div>
<div class="col-sm-6">
<div class="form_label">自我介绍</div>
<div class="form_textbox_region">
<textarea name="introduce" class="form_textarea" placeholder="请输入自我介绍">{{ $User->introduce }}</textarea>
</div>
</div>
<div class="div_clear"/>
<div class="form_error">
<!-- 错误讯息模板元件 -->
@include('layout.ValidatorError')
</div>
<div class="btn_group">
<button type="submit" class="btn btn-primary btn_form">储存</button>
</div>
<div>
</form>
<script>
//预览图片
$("#file").change(function(){
//当档案改变後,做一些事
readURL(this); // this代表<input id="file">
});
function readURL(input){
if(input.files && input.files[0]){
var reader = new FileReader();
reader.onload = function (e) {
$("#file_review").attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
</script>
@endsection
这个页面包含性别、身高、体重、兴趣、自我介绍及图片上传,
另外还有加上图片预览的功能,
让使用者确认有没有上传错档案.
附上scss档案
$mainTitleHeight: 56px;
$loginFormWidth: 360px;
$formImageWidth: 150px;
$mainColor: #0097A7;
$textColor: #FFF;
//背景颜色
$BackWhiteColor: #FFFFFF;
$BackWhiteColor2: #FAFAFA;
$lightgrayColor: #A7A7A7;
$mainFont: 24px;
$mainFont2: 16px;
$toolBarFont: 16px;
$loginTitleFont: 32px;
$formMainFont: 20px;
$formTextBoxTextFont: 16px;
$formIconFont: 14px;
$formTextBoxBorderFont: 40px;
$formTextBoxBorderFont2: 24px;
$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;
}
}
}
//一般表单
.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;
}
}
}
.background_white {
min-height: calc(100vh - #{$mainTitleHeight});
background: $BackWhiteColor;
}
.background_white2 {
min-height: calc(100vh - #{$mainTitleHeight});
background: $BackWhiteColor2;
}
.col-2
{
width: 50%;
float: left;
}
.div_clear
{
clear:both;
}
/****************图片上传相关****************/
.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;
}
//选单
.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;
}
}
}
}
当我们 登入 或是点击 进入後台 就会进到这个画面
在这里我们用了一张预设图片,
如果没有图片就显示预设图片,
>>: [Day 33] 自我介绍後台及前台(二) - 图片上传
「你只要懂水晶,水晶就会帮助你。」 回村後,山姆卖出了所有水晶,瞬间成为村子里最富有的人。 其他城...
Composite:组合模式,当需要组合两个类的时候,比如画图:需要画直綫和点,那麽如果分别调用画直...
Vuex的Action,相当於component内的methods,里面宣告并使用方法,但不会直接改...
在Day3时,我们有实做一支计算平行四边形的程序,但当时我们固定了平行四边形的底跟高,现在我们已经学...
上一篇谈了疫情期间Azure 提供了四种基础证照的免费考试, 因此我也在五~六月的三级防疫期间在M...