ORMにfunctionを追記出来るがreusableでなく、肥大化することがあるためtraitsを使うことがある。
TraitsやORMのfunctionはmethod chainやORM向けのmethodを使用できる点で優れる。
@App\foo.php (ORM)
use App\Traits\Friendable;
class User extends Authenticatable
{
use Notifiable;
use Friendable;
@App\Traits\Friendable.php
<php?
namespace App\Traits;
trait friendable {
public function hello {
return "Hello World!";
}
}
@web.php
Rotue::get('/hello', function() {
return Auth::user()->hello();
});
kati #9
参考:
Laravel内に設置型のVue.js component内からLaravelのAuth::routesを使う方法
* vue component内にはlaravel blade template が使えないので {{ route('logout') }} 等の便利なディレクティブが使えない。
通常の {{ route('logout') }} で発行されるHTMLを見てみると…
<li>
<a href="http://YOUR HOME PAGE/logout" onclick="event.preventDefault();
document.getElementById('logout-form').submit();"><i class="fa fa-sign-out"></i>
Logout
</a>
<form id="logout-form" action="http://YOUR HOME PAGE/logout" method="POST" style="display: none;"><input type="hidden" name="_token" value="WrMYReqTjHiHSoVBbIjxdnvCVhj0y70FvQ4BdeZQ"></form>
</li>
token付きでPOSTしているので手動でcsrf token を設定する必要がある。
@Vue component
<template>
<a href="/logout" onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
<i class="fa fa-sign-out"></i>
Logout
</a>
<form id="logout-form" action="/logout" method="POST" style="display: none;">
<input type="hidden" name="_token" :value="csrf_token">
</form>
</template>
<script>
var csrf_token = $('meta[name="csrf-token"]').attr('content');
export default {
data() {
return {
token: csrf_token
}
}
}
</script>
参考：
9
@UserController.php
/*--------------------------------------
| For Frontend Authentication |
---------------------------------------*/
public function signup(Request $request)
{
$this->validate($request, [
'name' => 'required',
'email' => 'required|email|unique:users',
'password' => 'required'
]);
$user = new User([
'name' => $request->input('name'),
'email' => $request->input('email'),
'password' => bcrypt($request->input('password'))
]);
$user->save();
return response()->json([
'message' => 'Successfully created user!'
], 201);
}
}
/*---------------------------------------------
| For Authentication from Frontend
----------------------------------------------*/
Route::post('/user', [
'users' => 'UserController@signup'
]);
http requestのheaderには、
Content-Type applicatiob/json →→ laravel側にjsonリクエストとして認識させる
X-Requested-With XMLHttpRequest →→ ajaxリクエストであることの表明
10
composer.jsonに
"require": { "tymon/jwt-auth": "0.5.*" }
を加筆
composer update →→ jwt-authをインストール
@config/app.php
'providers' => [
/*
* Package Service Providers...
*/
Tymon\JWTAuth\Providers\JWTAuthServiceProvider::class,
]
を加筆
@config/app.php
'aliases' => [
'JWTAuth' => Tymon\JWTAuth\Facades\JWTAuth::class,
を加筆
php artisan vendor:publish --provider="Tymon\JWTAuth\Providers\JWTAuthServiceProvider"
jwt.php が生成される( jwt-auth の config ファイル)
php artisan jwt:generate
jwt.php に
'secret' => env('JWT_SECRET', 'hoge'),
が加筆される
public function Signin(Request $request)
{
$this->validate($request, [
'name' => 'required',
'email' => 'required|email',
'password' => 'required'
]);
$credentials = $request->only('email', 'password');
try {
if(!$token = JWTAuth::attempt($credentials)) /* credentialのチェック */
{
return response()->json([
'error' => 'Invalid Credentials!'
], 401);
}
} catch(JWTException $e) {
return response()->json([
'error' => 'Could not create token!'
, 500]);
}
return response()->json([
'token' => $token /* tokenの発行 */
], 200);
}
11
CSS position stickyについて
他のカラム等を加味しながら要素を固定したい
e.g) サイドバーと別カラムでトップメニューを固定表示したい
→ sticky
他の要素を加味しない
→ fixed
stickyを使うときはtop, left, right等の場所を指定するプロパティーと一緒に使うこと
stickyに表示したい要素を構成する最上部のelementに指定すること
fixedと入れ子で指定できない(要検証)
updated: 2018/2/21
vue-awesome-swiperはflexboxを使っている。
cssに追加
.swiper-wrapper {
display: flex !important;
align-item: flex-start;
}
→→ フレックスボックスの上端をそろえる
.swiper-container {
overflow: visible !important;
}
→→ デフォルトでvue-awesome-swiperはoverflow: hiddenになっているので修正
.menu {
position: sticky;
top: 0;
}
参考：
related:
type nul > test.html
updated: 2018/4/25
metismenu ・・・ class metismenuが複数あると2つ目がエラー？？？
2種類のサイドバーを用意して画面サイズごとに切り替えたい
→→
display: none で表示を調整してもDOMが残っているとエラーが出るのでDOMごと消して切り替える
solution: v-if (DOMごと消える) ** v-showはDOMが残る
________________________________________________
<div class="large-sidenavbar">
<div v-if=" isLarge === true ">
<sidenavbar></sidenavbar> ・・・metismenu①
</div>
</div>
_________________________________________________
<swiper :options="swiperOption" ref="swiper">
<swiper-slide class="menu">
<sidenavbar></sidenavbar>・・・metismenu②
</swiper-slide>
<swiper-slide class="content"></swiper-slide>
</swiper>
____________________________________________________
<script>
computed: {
isLarge() {
if(window.matchMedia('(min-width: 1024px)').matches)
{
return true;
} else
{
return false;
}
}
}
</script>
<style>
@media (min-width: 1024px) {
.menu, .menu-button {
display: none;
}
}
</style>
2つ目はdisplay: noneで処理しても1つ目でエラーが出ない
DOMの消去とdisplay:none
DOMの消去はtoggleした時のコストが大きい、display:noneはtoggleコストは小さいがページロード時のイニシャルコストが大きい。そのため一長一短。
javascriptで画面サイズを取得
参考:
追記：
