Vue.js, Expressを使用しサーバからファイル一覧を取得・表示

この記事は、Expressを使用してサーバからファイル一覧を取得して表示する方法について記述します。画像ファイル一覧を取得し、取得した一覧の情報をもとに画像一覧を表示します。

  • サーバから画像一覧を取得
  • ファイル名、URL、タイプをJSON形式で返す
  • クライアントから受け取った情報をもとに画像を取得し一覧表示

ExpressのAPIリファレンス

  • res.send()
  • res.json()
  • res.end()

res.end()は何もデータを返さない時に使用します。データを返したいときはres.send(), res.json()を使用しますが、JSONを返すときは両者全く同じ結果となるようです。sendの場合はステータスを返したり、res.send(‘<h1>Hello World</h1>’)のようにHTMLを直接返すことを可能です。

ソースコード

v-forで取得した一覧の分だけテーブルの行を追加しています。

画像表示エリアを調整しています。overflow: scrollを指定してはみ出た分はスクロールして表示させます。画像は横幅のみサイズ指定し、縦幅はautoとすることで縦横比を維持したままサイズを変更します。

axiosを使用して画像一覧を取得するAPIを実行します。結果が帰って来たらバインドする変数にデータをセットします。elementへのマウントが行われた後にこれらの処理が実行されます。したがって、elでelementを指定している場合、createdではタイミングとして早いと言うことになります。

  • インスタンス作成時:beforeCreate, created
  • マウント時:beforeMount, mounted
  • データ更新時:beforeUpdate, updated
  • インスタンスの削除時:beforeDestroy, destroyed

ファイル一覧を取得する際はfs.readdirで一覧を取得したのち、fs.statSyncでファイルが存在しているか確認した上で、testメソッドを使用して正規表現でpng,jpg形式のファイルのみ抽出しています。

JSON形式にデータをセットし直したのち、res.json(infos)でJSONをクライアントに返します。

終わりに

本記事ではExpressを使用してサーバからファイル一覧を取得して表示する方法について記述しました。

最後まで読んでいただきありがとうございました。

本記事が皆様の参考になれば幸いです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です