2017-06-01

tinker

$follows = App\Follow::where('user_id', 4)->get()
=> Illuminate\Database\Eloquent\Collection {#727
all: [
App\Follow {#750
id: 1,
user_id: 4,
target_id: 1,
created_at: "2017-05-30 11:44:03",
updated_at: "2017-05-30 11:44:03",
},
App\Follow {#749
id: 2,
user_id: 4,
target_id: 2,
created_at: "2017-05-30 11:44:04",
updated_at: "2017-05-30 11:44:04",
},
],
}

>>> foreach($follows as $follow) { return $follow->user()->get(); }
=> Illuminate\Database\Eloquent\Collection {#738
all: [
App\User {#728
id: 4,
name: "Akari1987",
email: "",
provider: "github",
provider_id: "13121500",
avatar: "1496292872.jpg",
created_at: "2017-05-28 11:05:58",
updated_at: "2017-06-01 04:54:32",
},
],
}

-=======================================================

>>> $friends = array()
=> []
>>> $follows = App\Follow::where('user_id', 4)->get()
=> Illuminate\Database\Eloquent\Collection {#717
all: [
App\Follow {#718
id: 4,
user_id: 4,
target_id: 3,
created_at: "2017-06-10 23:26:25",
updated_at: "2017-06-10 23:26:25",
},
App\Follow {#719
id: 5,
user_id: 4,
target_id: 2,
created_at: "2017-06-10 23:29:07",
updated_at: "2017-06-10 23:29:07",
},
App\Follow {#720
id: 6,
user_id: 4,
target_id: 1,
created_at: "2017-06-10 23:29:10",
updated_at: "2017-06-10 23:29:10",
},
],
}
>>> foreach($follows as $follow) {
... array_push($friends, App\User::find($follow->target_id));
... }
=> null

>>> return $friends
=> [
App\User {#727
id: 3,
name: "test3",
email: "test3@test.com",
provider: null,
provider_id: null,
avatar: "1495604118.jpg",
created_at: "2017-06-09 22:41:08",
updated_at: "2017-06-09 22:41:08",
},
App\User {#723
id: 2,
name: "test2",
email: "test2@test.com",
provider: null,
provider_id: null,
avatar: "1495604947.jpg",
created_at: "2017-06-09 22:41:08",
updated_at: "2017-06-09 22:41:08",
},
App\User {#726
id: 1,
name: "test",
email: "test@test.com",
provider: null,
provider_id: null,
avatar: "1495699904.jpg",
created_at: "2017-06-09 22:41:08",
updated_at: "2017-06-09 22:41:08",
},
]

2017-05-27

oauth認証で突然動作不良が起きたら… Received HTTP status code [401] with message "<?xml version="1.0" encoding="UTF-8"?> <hash> <error>The given URL is considered malware</error> <request>/oauth/request_token</request> </hash> " when getting temporary credentials.

Laravel Error

oauth認証が突然出来なくなった

→

f:id:monteecristoo:20170527095334j:plain

原因：

ドメインがSpamhausのブロックリストに登録されたため

確認方法：

oauth認証先のセッティング画面でcallbackURLを変えてみる　例えばtwitterでは…

f:id:monteecristoo:20170527095630j:plain

とアラートが出るのでシステムの問題ではなくドメインブロックの問題とわかる。

参考：

did2memo.net

*** cloud9の.c9users.io　が登録されたためcloud9経由からtwitter oauth出来なくなった？？？　github googleは可　DBLから削除申請してもリリストされる

f:id:monteecristoo:20170527150519j:plain

2017-05-24

Laravel5.4 + VueJS CSRF token error: TokenMismatchException in VerifyCsrfToken.php line 68:

Laravel Vuejs

middleware->('auth')を使用時form関連を扱うときtokenが必要

純粋なLaravel App なら

blade templateの

{{ csrf_token() }}

からtokenを取得して

<input type="hidden" name="_token" value="7YC0Sxth7AYe4RFSjzaPf2ygLCecJhblahblah">

をセット、または

<input type="hidden" name="_token" value="<?php echo csrf_token(); ?>">

で解決できるがvueの場合や外部のパッケージを利用した場合、blade templateを使用しないでマニュアルでセットしなければいけない。

e.g. axios

var csrf_token = $('meta[name="csrf-token"]').attr('content');

import axios from 'axios';

export default {
methods: {

hoge() {

axios.post('/send_something', {

_token: csrf_token

});

}

</script>

例えばvue-core-image-uploadを導入した際、

var csrf_token = $('meta[name="csrf-token"]').attr('content');　// token の取得

data() {
　　return {
　　　　token: {
　　　　　　_token: csrf_token
　　　　},

参考：

stackoverflow.com

2017-05-21

twitter setting

2017-05-19

Laravel5.4 Laravel-Mix issue 　Error: Module build failed: Error: Couldn't find preset "es2015" relative to directory

Laravel laravel-mix issue

updated: 2018/2/13

Error: Module build failed: Error: Couldn't find preset "es2015" relative to directory

laravel-mixがes2015を認識していない

npm install babel-preset-es2015 --save-dev

プロジェクトのroot directoryに.babelrc

{
"presets": [
"es2015", { "modules": false},
]
}

を作る。

babel-preset-es2015 は古くなり、Babel 公式から babel-preset-env が recommend されている。

@.babelrc

{
  "presets": [
    ["env", {
      "modules": false
    }]
  ]
}

再度npm run dev (npm run watch中だとjsファイルを編集しない限りコンパイルされないので手動でnpm run devをし忘れないこと)

ブラウザのキャッシュ消去も忘れずに

参考:

github.com

ES6 spread syntaxが認識されない場合：

monteecristoo.hatenablog.com

babeljs.io

2017-05-18

Laravel + vue-router vue SPAページのRouting @vueJS inside Laravel

Vuejs vue-router Laravel

基本

app.jsで記述したpathをlaravel側のweb.phpにも記述。その際、returnするviewはvueの起点ページにする。

Route::get('/profile', function() {
　　return view('home');
});

→ home.blade.phpにvue componentのprofileがある場合、profileがレンダリングされた状態で開ける。

ただしcomponentがnestされている場合...

@app.js

const routes = [
　　{ path: '/profile', component: Profile,
　　　　children: [
　　　　　　{
　　　　　　　　path: '/follow', component: Follows, 　　・・・〇
　　　　　　},
　　　　　　{
　　　　　　　　path: 'activity', component: Activity　　・・・✖
　　　　　　}
　　　　]
　　},

@web.php

Route::get('/follow', function() { 　　・・・〇
　　return view('home');
});

Route::get('/profile/activity', function() {　　・・・✖
　　return view('home');
});

@親component

<router-link to="/follow">Following</router-link> 　　・・・〇

<router-link to="/profile/activity">Activity</router-link>　　・・・✖

activityはprofileページからrouter-linkを通した場合開けるが、ページリロードの場合、component profile, activityともにレンダリングされない。

/profile/activityがrouter-viewに反映されない。

一方、child componentのfollowはpathを/followとし、root path化するとリロード経由でもレンダリングされる。

child componentをリロード経由で表示させたいならpathをrootにする(pathをnestできない???純粋なVue SPAならこの制約外。)

nestされたpathのrest化に成功

問題点だったもの

vue関連を含むapp.jsの読み込み方法に問題があった

app.blade.php内にて下記のように記述

<script src='js/app.js'></script>…×

相対path表記だったため、例えば/profile/activityをロードするとapp.jsがprofile/js/app.jsになりnot foundになる。

こちらに訂正⇒ <script src="{{ asset('js/app.js') }}"></script>…〇

絶対path表記に変更

new issue:

laravel側のparameter付きroute と vue側のrouteがぶつかる

VM314:65702 Uncaught TypeError: Cannot redefine property: $router

layoutを設定したapp.blade.php内で読み込んだjavascriptファイル内にajaxリクエストをするscriptがあり、この影響でparameter付きroute時にエラーが発生していた。

error: [Deprecation] Synchronous

XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

error: Uncaught TypeError: Cannot redefine property: $router

具体的には以下をコメントアウトしてエラーが除けた

app.blade.php内(layoutを設定していたファイル)

$.get("skin-config.html", function (data) {
　　if (!$('body').hasClass('no-skin-config'))
　　$('body').append(data);
});

参考：

laracasts.com

SPA with Vue.js and Laravel: Routing Basics

mattstauffer.co

SPA with Vue.js and Laravel: Routing Basics

router-linkにparameterとさらにもう一層nestされたroute

<router-link :to="{ path: '/user/' + user.name + '/follow' }" >

<router-link :to="{ path: '/user/' + user.name + '/activity' }" >

computed: {
　　user() {
　　　　return this.$store.state.user.user; /* define param */
　　}
},

@app.js

const routes = [

　　{ 　 path: '/user/:userName', name: 'user', component: Profile,
　　　　children: [
　　　　　　{
　　　　　　　　path: '', component: Activity　　/* /user/param */
　　　　　　},
　　　　　　{
　　　　　　　　path: 'follow', component: Follows /* /user/param/follow */
　　　　　　},
　　　　　　{
　　　　　　　　path: 'activity', component: Activity /* /user/param/activity */
　　　　　　}
　　]
},

2017-05-18

Vue chips いろいろ

Vuejs

htmlタグ内では{{ }}は使わないで v-bindまたはコロンで下記のように記述

data() {

return {

img: "http://~~~~"

}

セミコロンの取り扱い

セミコロンなし　→　static

<router-link to="hoge">

セミコロンあり　→　dynamic

<router-link :to="foo">

computed: {
　　foo() {
　　　　regrgergs

　　}

vuexでstateを設定した後、各componentでstateを呼び出したいとき

ページがレンダリングした時に同時に取得したいならcomputed

created()でstateの値を入れた場合、

data() {
hoge : this.$store.state.~~~~

}

では値が取得できない。タイミングの問題？？？

computed: {

hoge() {

this.$store.state.~~~~

}

* ここで無駄にdataにhogeを作っておくとcomputedが反映されないので注意

イベント発動時にstateを取得したい場合、

sendMessage() {
　　const message = {
　　　　messageText: this.messageText,
　　　　user: this.$store.state.user.user.name
　　};

}

直接値をthis.$store.state.user.user.nameから参照できる