はじめに

アニメの名言を返すbotを作って、LINEの会話がもっと伝わるようにしてみた件についてでLINE botは実装されていたが、DB内に登録されている名言の一覧表示がなかったので実装したお話。

こちらからanimergenに登録されている名言の一覧が見れます。

モチベーション

1.DB内に登録されている名言の一覧表示を表示したい（中の人の欲望）
2.予想していたものが出てこない、何が登録されているのか知りたい（ユーザーフィードバック）
需要と供給の一致？

大まかにはこの三つ
Python, Vue.js, Bootstrap
元々Flaskで実装されていたので、使ったのはほとんどVue.js, Bootstrapだけ。

animergenに登録されている名言の一覧
クリックすると登録されている画像が表示される。

pyhtonからVue.jsにデータを渡そうとすると、FlaskとVue.jsのdelimiters同じものを使用していて上手く動かない。
今回はVue.js側でdelimitersを変更。


var app = new Vue({
  el: "#app",
  delimiters: ["[[", "]]"],
  data: {
    message: "Hello Vue!"
  }
})

そのへんのことはこちらの方が分かりやすく書いて頂いている。先人の知恵に感謝。

データを受け取ってしまえばこっちのもの。bootstrap-vueでガシガシ実装。
1.table
2.pagination
3.input-group
4.modal

つたない文章に最後までお付き合いいただきありがとうございました。