【Illustrator・Ai】イラレの手書きクレヨン風の自作ブラシで、ひよこのキャラクターを作ってみた。
わかりやすいようなめちゃくちゃわかりづらいようなタイトル(笑)
①アプリ側(Vue.js)からユーザ情報を外部サーバ(Laravel)になげる
②Laravel側で、受け取った情報に紐づく追加情報をデータベース(mysql)から抽出し、Jsonデータとしてアプリ側(Vue.js)に投げ返す
③返ってきた追加情報をアプリ側(Vue.js)で表示させる
想定としては、“ログイン情報からユーザ情報を取得し、プロフィール画面に表示する”みたいなことをしようとしてます。
▼ profile.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<script> export default { data() { //データの初期値を設定 return { userid: "", name: "", profile: "", sex: "", birth: "", pref: "", }; }, methods: { getProfiles() { const data = { userid: 'bonchan' //今回投げるuserid } var self = this; axios.post('https://Larabel側URL/profile', data) .then(res => { self.userid = res.data.userid; self.name = res.data.name; self.profile = res.data.profile; self.sex = res.data.sex; self.birth = res.data.birth; self.pref = res.data.pref; }).catch( error => { console.log(error); }); } }, created() { //APIアクセスでgetProfiles()を呼び出す this.getProfiles() } } </script> |
とりあえず、固定のuserid「bonchan」を投げたら、ニックネームとか出身地とかひっぱってくる感じにします。通信にはaxiosを使いました。この設定などは別記事で載せます><
▼routes/web.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?php /* |-------------------------------------------------------------------------- | Web Routes |-------------------------------------------------------------------------- | | Here is where you can register web routes for your application. These | routes are loaded by the RouteServiceProvider within a group which | contains the "web" middleware group. Now create something great! | */ //Route::get('/', function () { // return view('welcome'); //}); Route::post('/profile', 'ProfileController@get_profile'); |
まず、http://●●/profileにpostリクエストされたらProfileController.phpのget_profile関数を参照させます。
▼Http/Controllers/ProfileController.php
|
1 2 3 4 5 6 7 8 9 10 |
public function get_profile(Request $request) { header("Access-Control-Allow-Origin: *"); //CORS header("Access-Control-Allow-Headers: Origin, X-Requested-With"); $userid = $request->userid; //postされてきたuseridを変数にいれる $profiles = Profile::where('userid', '=', $userid) ->get()->toArray(); //profilesテーブルから、useridが一致するデータを抽出 //dd($profiles); $data = response()->json($profiles[0]); //json形式に return $data; } |
DBからデータを抽出し、最後Json形式にしてデータを投げ返します!Json形式について、こちらの記事がめちゃくちゃわかりやすいです。CORS処理記載もありますが、、これも別記事にまとめます><
▼ profile.vueのJS
|
1 2 3 4 5 6 7 8 9 10 |
var self = this; axios.post('https://Larabel側URL/profile', data) .then(res => { self.userid = res.data.userid; self.name = res.data.name; self.profile = res.data.profile; self.sex = res.data.sex; self.birth = res.data.birth; self.pref = res.data.pref; }).catch( error => { console.log(error); }); |
「1.Vue.js側でのPOST処理」で全部書いてありますが、、「res.data.キー名」で返ってきた値を、ひとつづつ代入してます。もっといいやり方はありそう..。
またthis.name = res.data.name;で代入しようとしたところ、thisが本来のデータを参照してくれずうまく値を入れられなかったので、selfにいったん退避させるという方法をとりました。参考はこちら
▼ profile.vueのHTML
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="name"> <dl class=" prof_box"> <dt class="label"><label for="name">ニックネーム</label></dt> <dd class="input"><input maxlength="50" name="name" placeholder="ニックネームを追加" class="input_name" v-model="name"></dd> </dl> </div> <div class="profile"> <dl class=" prof_box"> <dt class="label"><label for="profile">プロフィール</label></dt> <dd class="input"><textarea maxlength="160" name="description" placeholder="プロフィールを追加" class="input_prof" v-model="profile">{{ profile }}</textarea></dd> </dl> </div> |
一部抜粋です。返ってきたデータは{{ profile }}のように二重かぎかっこで表示させることができました。inputのvalueに入れたいときは、v-model=”name”と記述することで、value値に表示させることができました。
ひとまずこれで表示することができました。vue.js、Laravel初心者のため手探りすぎるので、、もっと良いやり方あったら教えていただきたいです!
KOHIMOTO LABO
WebプロダウションKOHIMOTO Inc.が発信を通して成長していくためのラボ🧪 IT企業出身。世界中の人へ発信できるWebサイトを通じて、社会がより良い方向へアップデートしていく為に日々学び、技術を生かしていきます。
PICK UP
