2018-04-22

【vuex】mixinでstoreを使う

vue.js vuex

vuexの基本的な使い方はみんな書いてるので省略

import Vue from 'vue'
import store from './store'

// ★ここを追加
Vue.store = store

new Vue({
  ・・・
  store: store
})

mixin/mixinHoge.js

import Vue from 'vue'

export default {
  method: {
    fuga: function() {
      Vue.store.commit('SET_FUGA', 'fuga')
      Vue.store.state.fuga // => fuga
    }
  }
}

とりあえずやりたいことはできた、以上です

2018-04-22

vue-router query stringで配列を扱う

vue.js

vue-routerでquery stringをパラメータにつける際に配列がうまくいかなかったのでそのときに調べたことをメモしておく。想定しているurl以下の形。

http://localhost/my-component/?val=1&arr[]=10&arr[]=20

最初に試した書き方

this.$router.replace({
  name: 'my-component',
  query: {
    val: 1,
    arr: [10, 20]
  }
})

// 配列で指定した部分が配列にならない・・・
// http://localhost/my-component/?val=1&arr=10&arr=20

vue-routerのドキュメント見てたらparseQueryとstringifyQueryというのがあった
https://router.vuejs.org/ja/api/options.html#parsequery--stringifyquery

vue-routerのインスタンスを作るときに関数を指定すればカスタマイズできるみたい。query stringの処理にはnode.js入れると標準でquery-stringというモジュールが入っているみたいなのでこれを使う。

vue-routerインスタンス生成部分

import queryString from 'query-string'

var router = new VueRouter({
  ・・・
  parseQuery: (query) => {
    return queryString.parse(query, {
      arrayFormat: 'bracket'
    })
  },
  stringifyQuery: (params) => {
    if (0 == Object.keys(params).length) {
      return ''
    } else {
      return '?' + queryStringify(params, {
        arrayFormat: 'bracket'
      })
    }
  }
})

呼び出し側は上で書いたのと同じだけど

this.$router.replace({
  name: 'my-component',
  query: {
    val: 1,
    arr: [10, 20]
  }
})

// 今度はうまくいった!
// http://localhost/my-component/?val=1&arr[]=10&arr[]=20

逆にurlからquery stringを取得するのも想定した形でいけた

console.log(this.$route.query) // => { val: 1, arr: [10, 20] }

以上です

2018-04-10

【postman】リクエストにrefererをセットする

リクエストの設定の「Headers」から設定できる。PHPでAPI作っていて、$_SERVER['HTTP_REFERER']に入っていたので「HTTP_REFERER」を設定していたけど上手くいかず。「Referer」という名前でセットしたらうまくいきました。

f:id:yoppy0066:20180410144245p:plain

以上です

2018-04-05

【postman】console.logを使う

https://www.getpostman.com/docs/v6/postman/sending_api_requests/debugging_and_logs
こちらのとおりだけれども。

chromeのアドレスバーから「chrome://flags/#debug-packed-apps」表示
この状態になっていることを確認
f:id:yoppy0066:20180405100536p:plain

chromeのアドレスバーから「chrome://inspect/#apps」表示
インスペクタが表示される

「Pre-request Script」「Tests」でconsole.logすると確認できる。

例

console.log( JSON.parse(responseBody) );

上記はchromeのアドオン版の話で、Macアプリとして使う場合は以下から可能でした。
メニューバー > View > Show Postman Console

以上です

2018-03-30

CentOS7にMySQL5.7インストール

mysql linux

インストール

MySQLのドキュメントを見ながら進める
https://dev.mysql.com/doc/refman/5.6/ja/linux-installation-yum-repo.html

どのパッケージをインストールするか確認

$ cat /etc/redhat-release
CentOS Linux release 7.4.1708 (Core)

EL7ベースであることがわかるったので以下のページの「No thanks, just start my download.」のURLをコピー
https://dev.mysql.com/downloads/file/?id=470281

リポジトリ追加

$ yum localinstall -y https://dev.mysql.com/get/mysql57-community-release-el7-11.noarch.rpm

インストール

$ yum install -y mysql-community-server

# 確認
$ mysqld --version
mysqld  Ver 5.7.21 for Linux on x86_64 (MySQL Community Server (GPL))

初期セットアップ

rootの初期パスワード確認

# grep 'A temporary password is generated for root' /var/log/mysqld.log
2018-03-29T15:10:11.430995Z 1 [Note] A temporary password is generated for root@localhost: kgqO#QbnM86S

パスワードのポリシーを変更
/etc/my.cnf に追記

validate-password=OFF
default_password_lifetime=0

起動

# systemctl start mysqld.service

MySQLに接続して最低限のセットアップは以下のサイトを参考に行なった
https://weblabo.oscasierra.net/mysql-57-init-setup/

mysql_secure_installation メモ

# パスワード変更しない
Change the password for root ? ((Press y|Y for Yes, any other key for No) : No

# anonymousユーザーは削除
Remove anonymous users? (Press y|Y for Yes, any other key for No) : Y

# リモートからのrootログインも認めない
Disallow root login remotely? (Press y|Y for Yes, any other key for No) : Y

# testデータベースは削除
Remove test database and access to it? (Press y|Y for Yes, any other key for No) : Y

# リロードする
Reload privilege tables now? (Press y|Y for Yes, any other key for No) : Y

作業用ユーザーの作成

$ grant all on *.* to username@localhost identified by '********';

エラーとか

rootで起動するなということらしい

# mysqld start
2018-03-30T02:28:32.878384Z 0 [Note] mysqld (mysqld 5.7.21) starting as process 9771 ...
2018-03-30T02:28:32.893485Z 0 [ERROR] Fatal error: Please read "Security" section of the manual to find out how to run mysqld as root!
2018-03-30T02:28:32.893811Z 0 [ERROR] Aborting
2018-03-30T02:28:32.894005Z 0 [Note] Binlog end
2018-03-30T02:28:32.894385Z 0 [Note] mysqld: Shutdown complete

rootにパスワードがセットされている

# mysql -uroot
ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO)

# mysql -uroot -p
Enter password:
ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO)

参考
https://weblabo.oscasierra.net/mysql-57-init-setup/

2018-03-27

【mac】homebrewでMySQL5.6をインストール

mac mysql

homebrewでMySQLをインストールすると5.7がインストールされた。が、今回は5.6を使いたかったのでそのときの手順をメモしておく。

MySQL5.7のアンインストール

$ brew uninstall mysql

MySQL5.6がインストール可能であることを確認してインストール

$ brew search mysql@5.6
==> Searching local taps...
mysql@5.6

$ brew install mysql@5.6

.bash_profile

export PATH="/usr/local/opt/mysql@5.6/bin:$PATH"

.my.cnf(※)

[mysqld]
# 追記
skip-grant-tables
datadir=/usr/local/var/mysql5.6

※my.cnfの場所
/etc/my.cnf
/etc/mysql/my.cnf
/usr/local/etc/my.cnf
~/.my.cnf

起動

$ mysql.server start

以上です

2018-03-23

【Rails】プロジェクト作成手順（カレントディレクトリに）

Rails Ruby

何度も似たような事書いてる気がするけど。プロジェクトごとにrubyのバージョンを設定してrailsインストールして、同ディレクトリにrailsプロジェクトを作成する手順。ついでにMySQLも。

# install可能なバージョンを確認(Ruby, Rails)
$ rbenv	install	-ls
$ gem list -ra '^rails$'

# Ruby2.5.0のinstallと有効化
$ rbenv	install	2.5.0
$ rbenv use 2.5.0

# Railsのinstall
$ bundle init

$ vi Gemfile
gem "rails", "5.1.5"                                                                                                                                                                                               

$ bundle install --path=vendor/bundle

# カレントディレクトリにMySQLを使うプロジェクト作成
$ rails new . -d mysql

以上です。