前回の状況はこちら。
最新ソースはこちら
https://github.com/takishita2nd/diet-mng
さて、前回作成したダイアログから入力したデータをサーバ側に送って、データベースに保存します。
まずはPHP側から。
WebAPIを作成します。
class ApiController extends Controller
{
public function __construct()
{
$this->middleware('auth');
$this->weightManagement = new WeightManagementRepository();
}
public function add(Request $request)
{
$param = $this->weightManagement->getParam();
$this->weightManagement->add([
$param[0] => date('Y-m-d H:i'),
$param[1] => $request->contents["weight"],
$param[2] => $request->contents["fat_rate"],
$param[3] => $request->contents["bmi"],
], Auth::user());
return response()->json();
}
}
class WeightManagementRepository
{
private $paramNames = ['datetime', 'weight', 'fat_rate', 'bmi'];
public function __construct()
{
}
public function add($param, $user)
{
$model = new WeightManagement();
foreach($this->paramNames as $name)
{
$model->$name = $param[$name];
}
$model->save();
$this->attachToUser($model, $user);
}
public function attachToUser($model, $user)
{
$model->users()->attach($user);
}
public function getParam()
{
return $this->paramNames;
}
}
class WeightManagement extends Model
{
public function users()
{
return $this->belongsToMany('App\User');
}
}
class User extends Authenticatable
{
public function WeightManagements()
{
return $this->belongsToMany('App\Model\WeightManagement');
}
}
Route::post('api/weight/add', 'Weight\ApiController@add');
これでAPIが完成。
次はVue.js側です。
<template>
<div>
<div id="overlay" v-show="show">
<div id="content">
<p v-if="error_flg == true" class="error">
<ui>
<li v-for="error in errors">{{ error }}</li>
</ui>
</p>
<table class="edit">
<tbody>
<tr>
<td>体重</td>
<td><input type="number" v-model="contents.weight" /></td>
</tr>
<tr>
<td>体脂肪</td>
<td><input type="number" v-model="contents.fat_rate" /></td>
</tr>
<tr>
<td>BMI</td>
<td><input type="number" v-model="contents.bmi" /></td>
</tr>
</tbody>
</table>
<p id="command">
<button @click="clickAdd">入力</button>
<button @click="closeModal">閉じる</button>
</p>
</div>
</div>
</div>
</template><script>
export default {
props: ['show'],
data() {
return {
errors: [],
error_flg: [],
param: {},
contents: {
weight: "",
fat_rate: "",
bmi: "",
},
};
},
created: function() {
},
methods: {
clickAdd: function() {
var self = this;
this.param.contents = this.contents;
axios.post('api/weight/add', this.param).then(function(response){
self.clear();
self.closeModal();
}).catch(function(error){
self.error_flg = true;
self.errors = error.response.data.errors;
});
},
closeModal: function() {
this.$parent.showDialogContent = false;
},
clear: function() {
this.contents.weight = "";
this.contents.fat_rate = "";
this.contents.bmi = "";
this.error_flg = false;
this.errors = [];
}
}
}
</script>contentsの各パラメータが入力ダイアログのinputの値と結びついています。
入力ボタンをクリックすると、contetsをparamに設定し、app/weight/addへPOSTリクエストを送信します。
応答が帰ってくると、ダイアログを閉じます。
うまくいっているようです。
