Laravel + VueJS : VueJS component 内のどこからでも jquery を使用できるようにする Laravel Mix

updated: 2018/5/2

この記事は検証途中で内容が不正確

方法1 Laravel Mix から

@webpack.mix.js

let webpack = require('webpack');

 

mix.webpackConfig({

  plugins: [

    new webpack.ProvidePlugin({

      $: 'jquery',

      jquery: 'jquery',

      window.jquery: 'jquery'

    })

  ]

});

 これで、 Laravel Mix でコンパイルしたファイルは jquery を参照できるようになる。

 

参考:

stackoverflow.com

https://webpack.js.org/plugins/provide-plugin/#usage-jquery

 

方法2 Laravel Mix でコンパイルされたファイルより前に jquery を読み込む

<body>

  <script src="https://cdn.jsdelivr.net/npm/jquery"></script>

  <script src="{{ secure_asset('js/app.js') }}"></script>

</body>

vueJs responsive screen switcher

updated: 2018/4/27

 

vueJS でスクリーンサイズに応じて処理を切り替えたい場合に関して過去に書いた記事のフォローアップ

monteecristoo.hatenablog.com

 

上記方法だとリロードごとには適用されるが例えばタブレットの縦横を回転させたときなどには適用されない( computed で作ったプロパティが vue 内の dependency に依存しないためリアクティブに値が変化しない??)

 

スクリーンの大小を取得するメソッドを作り、window に addEventListener で画面のリサイズごとにイベントを発火させる。

data() {
return {
isLarge: '',
}
},

methods: {
screen: function () {
if(window.matchMedia('(min-width: 1024px)').matches)
{
this.isLarge = true;
} else
{
this.isLarge = false;
}
}
},
mounted() {

初期値の設定
if(window.matchMedia('(min-width: 1024px)').matches)
{
this.isLarge = true;
} else
{
this.isLarge = false;
}

リサイズされた時のイベント発火
window.addEventListener('resize', this.screen);
},

 

* Vuetify なら onResize() を使用して実装も可能

vuetifyjs.com

 

参考:

forum.vuejs.org

 

raspberry pi 外付けHDD 復旧 can't read superblock ext4 file system

ext4パーティションを作った外付けHDD がfilezilla で転送中にフリーズ 

再起動したら HDD が認識されなくなった

raspberry pi も起動画面で

cannot open access to console the root account is locked

と表示されコンソールも開けなくなったので OS からクリーンインストールし直した

(SDカードを別のPCからファイルを書き換えて直せたかも)

参考:

raspberrypi.stackexchange.com

raspberry pi 側の HDD マウント設定をし直して

@terminal

sudo mount -a 

>>>  mount: /dev/sda1 can't read superblock

 

dmesg 

~~~~~~~~~~~~~~~ sda ~~~~~~~~~~~~~~~~~~~~~

認識はされている

 

sudo mkfs ext4 -n /dev/sda

superblock の箇所が表示される

 

sudo fsck /dev/sda1 -p

自動で破損個所が修復された

 

sudo mount -a

>>> 問題なし

 

参考:

monteecristoo.hatenablog.com

islandcnt.exblog.jp

 

 

 

Laravel-Mix issue sass scss .sourceMaps() を使っても chrome debugger で表示されないとき


mix.js('resources/assets/js/app.js', 'public/js')
.js('resources/assets/js2/app2.js', 'public/js/app2.js')

.sass('resources/assets/scss/app.scss', 'public/css')
.sass('resources/assets/scss/style.scss', 'public/css')
.sass('resources/assets/scss2/app.scss', 'public/css2')
.sass('resources/assets/scss2/style.scss', 'public/css2')
.sourceMaps();

 

js のみソースマップが作られ scss のソースマップが出ないとき…

 

mix.webpackConfig({ devtool: "inline-source-map" }); 

上記を webpack.mix.js に追加

 

参考:

github.com

github.com

jenssegers/laravel-mongodb Basic Usage on cloud9 with php7⑧ sample case

App\User ===> App\MongoMessage  Mysql Relationships

App\MessageGroup ===> App\MongoMessage hasMany Relationships

 

App\User

  public function mongoMessages() {

    return $this->hasMany(MongoMessage::class);

  }

 

App\MessageGroup

  public function mongoMessages() {

    return $this->hasMany(MongoMessage::class);

  }

 

App\MongoMessage

  public function User() {

    return $this->belongsTo(User::class);

  }

 

  public function MessageGroup() {

    return $this->belongsTo(MessageGroup::class);

  }

 

@tinker 

$user = App\User::first();

$group = App\MessageGroup::first();

 

$message = App\MongoMessage::create(["body" => "test"]);

$message = $user->mongoMessages()->save($message);

$message = $group->mongoMessages()->save($message);

 

@mongo shell

db.mongoMessage.find()

 >>> _id: ~~~

  body: test,

  user_id: 1  ・・・SQL

  messageGroup_id: ~~~  ・・・mongoDB

 

@tinker

$group = App\MessageGroup::first();

$group->mongoMessages()->latest()->first();

>>> App\MongoMessage {

  _id: ~~~,

  body: test,

  user_id: 1,

  messageGroup_id: ~~~,

}

任意のメッセージグループの最新メッセージとメッセージ送信ユーザーの id を取得

 

related:

monteecristoo.hatenablog.com

Laravel 5.x よく使う query builder

updated: 2018/4/14

first() 

 get() >>> get() で複数の collection が返ってくるのでさらに処理したい場合は foreach で処理

e.g.)

$messages = App\Message::whereNull("body")->get();

foreach($messages as $message) {
  $mssage->delete();

}

 

whereIn()

whereNotIn()

whereNull()

latest()

oldest()

 

20 Laravel Eloquent Tips and Tricks

laravel-news.com

jenssegers/laravel-mongodb Basic Usage on cloud9 with php7⑦ convert mongoDB to Mysql

  1. setting up Mysql Relationships
  2. create the route and controller 
  3. fetch the data from mongoDB
  4. extract the value from the response(3)
  5. fetch the data from Mysql using the value(4)
  6. return the response

1.

  @app\user

    use Jenssegers\Mongodb\Eloquent\HybridRelations;

    use App\MongoMessage;

    class User extends Authenticatable
    {
      use HybridRelations;

      public function mongoMessages()
      {
        return $this->hasMany(MongoMessage::class);
      }

  @app\mongoMessage

    use Moloquent;

    use App\User;

    class MongoMessage extends Moloquent
{
protected $connection = 'mongodb';
protected $collection = 'mongo_messages';

protected $fillable = ['user_id', 'group', 'body', 'receiver'];

public function user()
{
return $this->belongsTo(User::class);
}

 

2. 

  @web.php

    Route::get('getMongoMessages', 'mongoController@getMongoMessages');

  @mongoController

    public function getMongoMessages{ }

 

3-6.

 

public function mongoMessages()
{
$mongoMessages = MongoMessage::get(); ③
$mMessages = array();
foreach($mongoMessages as $mongoMessage)
{
$user_id = $mongoMessage->user_id; ④
$user = User::where('id', $user_id)->first(); ⑤

$addData["name"] = $user->name;
$addData["avatar"] = $user->avatar;
$mongoArray = $mongoMessage->toArray();
$mongoArray += $addData;

array_push($mMessages, $mongoArray);
}
return $mMessages; ⑥
}

 

$mongoMessage->user_id は Mysql Relationships によって mongoMessage が作成された時点で自動的に付与される。

$mMessages は元々の mongoDB から返された値の user_id を使って Mysql base DB の User から name と avatar を取得してそれらが追加された値になる。

参考:

monteecristoo.hatenablog.com

monteecristoo.hatenablog.com