個人開発してるアプリにユーザー詳細ページを追加しました。
コミットは以下になります。
フロントエンドを実装しながらAPIの不備も見つかったので修正しました。
写真投稿系のアプリを作成しており、画面遷移の流れは写真一覧->写真詳細ページ->ユーザー詳細ページというものを想定しています。
こちらが写真一覧画面で
写真をクリックするとその写真の詳細ページに遷移し
写真詳細ページでユーザーのアイコンをクリックするとユーザー詳細ページに遷移します。
ユーザー詳細ページのコードは以下のように書きました。
エラーハンドリングがまだちゃんとできてないのでこれから手を加えていきたいと思います。
<template>
<div>
<div class="columns is-vcentered">
<div class="column is-5">
<figure class="image is-4by3">
<img :src="userData.icon_image">
</figure>
</div>
<div class="column is-6 is-offset-1">
<h1 class="title is-2">{{ userData.user_name }}</h1>
<h3 class="subtitle">{{ userData.note }}</h3>
</div>
</div>
<div class="container has-text-centered">
<h1>{{ userData.user_name }}さんがこれまでに投稿した写真</h1>
</div>
<div>
<PostList
:postType="userData.PostedPictures"
/>
</div>
</div>
</template>
<script>
import PostList from '@/components/PostList'
import api from '@/services/api'
export default {
components: {
PostList,
},
data() {
return {
userData: {}
}
},
async mounted() {
api.post('/fetchUserData', {
user_id: Number(this.$route.params.user_id)
})
.then((res) => {
this.userData = res.data
})
.catch((err) => {
console.log(err)
})
}
}
</script>
<style>
</style>
このユーザー詳細ページを実装していて結構苦戦したのが、画面初期表示時はint型でAPIにユーザーIDを渡すのに再読み込み時はstring型になることでした。
その時に実装していたコードは以下です。URLからユーザーIDを取得してAPIに渡しています。
api.post('/fetchUserData', {
user_id: this.$route.params.user_id
})
いまだにパラメータの型が初期表示時と再読み込み時で変わる原因はわかってないのですが、早めに解決したかったので型を数値に固定する方法を調べて下記のページにたどり着きました。
JavaScriptではどうやらNumber()で変数を囲むと数値にできる値は数値に固定できるようなのでコードを以下に修正しました。
api.post('/fetchUserData', {
user_id: Number(this.$route.params.user_id)
})
上記のコードで試したところ初期表示時も再読み込み時も数値でAPIにパラメータが渡されるようになったので一旦このコードでコミットしました。
JavaScriptのベストプラクティスに沿っているかはまだよくわかってないのでより良いコードがあれば随時改善していきたいと思います。
