個人開発してるアプリに画面を追加しました。
去年はフロントエンドのコーディング全然できなかったのですが、だんだんVueで思ったようにコード書けるようになってきて自分の成長が実感できて嬉しいのでメモします。
コミットは以下になります。
アプリの概要はよくある写真投稿系のSNSをイメージしていて、トップページが投稿順に写真一覧を表示し、各画像をクリックするとその写真の詳細ページに移動する、という流れです。
こちらがアプリのトップ画面です。
こちらが各画像をクリックして遷移する写真の詳細画面です。
ここからユーザーの画像をクリックするとユーザーの詳細ページに飛ぶように実装する予定です。
そこまで実装できたらフォロー機能かコメント機能を追加していきたいと考えてます。
トップ画面のコードは以下のように書いています。
<template>
<div>
<div class="columns is-gapless is-multiline">
<div class="column is-4" v-for="post in postType"
:key="post.picture_id">
<router-link :to="{name: 'detail', params: {id:
post.picture_id}}">
<img :src="post.image_url">
</router-link>
</div>
</div>
</div>
</template>
<script>
export default {
props: [
"postType"
],
}
</script>
親からpostTypeというデータを受け取る子コンポーネントとしてPostList.vueを用意しています。
写真詳細画面は以下のようにコードを書いています。
<template>
<section>
<div class="columns is-mobile">
<div class="column">
<figure class="image is-48x48">
<router-link :to="{name: 'userpage', params: {user_id:
pictureData.user_id}}">
<b-tooltip :label="pictureData.user_name">
<img class="is-rounded"
:src="pictureData.icon_image">
</b-tooltip>
</router-link>
</figure>
<p>{{ pictureData.image_note }}</p>
</div>
</div>
<b-image :src="pictureData.image_url" ratio="16by9" />
<div class="columns box">
<div class="column">
<b-button
tag="router-link"
to="/"
type="is-info"
>戻る</b-button>
</div>
</div>
</section>
</template>
<script>
import api from '@/services/api'
export default {
data() {
return {
pictureData: {}
}
},
async mounted() {
api.post('/fetchImageByPictureID', {
picture_id: this.$route.params.id
})
.then((res) => {
this.pictureData = res.data
})
.catch((err) => {
console.log(err)
})
}
}
</script>
APIから写真のデータと写真を投稿したユーザーのデータを取得し変数pictureDataに代入してテンプレートで表示しています。
Buefyのtooltipが使いやすくて良かったです。
引き続きコード書いてアプリを形にしていきたいと思います。
