Excelから関数型言語マスター6回目： Vue.js＋内部API（表示編）...をやってみた

元記事様:  https://qiita.com/piacerex/items/50d847170291c41fef64

実行環境

・Mac OS v10.15.7(スペックがゴミすぎてOSのアップデートが不能💦)

・Elixir v1.13.2 ( Erlang/OTP 24)

・Phoenix v1.6.6

・PostgreSQL v14.1

DBのインストール

...は、Phoenix Framework をインストールしたときにやったのでバージョン確認だけ。

はい、できてますね。次...

ディレクトリ作って、データベース作って、いつもの起動までこぎつける。

PhoenixでAPIを作る

【マイグレーション】→migration、移行、今回の場合は内部APIを作成すること

APIでデータを参照する

私はデフォルトのWebブラウザがChromeなので、Postmanで同様のことができるかやってみる。

空のデータベースがあるところまでの確認ができた

APIでデータを投入する

Twitterでご指摘いただいた箇所を訂正。

ちゃんとテーブルにデータが入るようになりました👍✨

【CSRFトークンエラー】→CSRF攻撃かどうかを判定する仕組みにひっかかっている状態。どういう仕組みでCSRF攻撃かどうかを検証しているかについてはまだ分からない。

【CSRF】→クロスサイトリクエストフォージェリという攻撃。Webアプリケーションに存在する脆弱性、もしくはその脆弱性を利用した攻撃方法のこと。今回の場合、私が作成した内部APIがCSRFと勘違いされているのかも。

Vue.jsでデータ表示する（axiosでAPI呼出）

表示できた。

参考: https://www.trendmicro.com/ja_jp/security-intelligence/research-reports/threat-solution/csrf.html

【参考】前回CSS崩れを起こした時のコード

#lib/vue_sample_web/templates/page/index.html.heex　を開いて...

<section class="phx-hero">
 <h1><%= gettext "Welcome to %{name}!", name: "Phoenix" %></h1>
 <p>Peace of mind from prototype to production</p>
</section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>

<div id="app">

<h1>Posts</h1>
<table border="1">
<tr v-for="result in results">
   <td style="padding: 10px;">{{ result.title }}</td>
   <td style="padding: 10px;">{{ result.body }}</td>
</tr>
</table>

</div>

<script>
   var app = new Vue
   ( {
       el: '#app',
       data: 
       {
           results: [], 
       }, 
       mounted()
       {
           axios.get( '/posts' )
           .then( response => { this.results = response.data.data } )
       }, 
   } )
</script>

前回、CSSが適用されなくなってしまった問題は解決。しかし理由がわからない。わかったらまた追記予定。

【おまけ】Phoenix 1.5と1.6の記法違いを比較

Phoenix v.1.5.xでルーディングするコード↓

defmodule VueSampleWeb.Router do
 use VueSampleWeb, :router
 …
 scope "/", VueSampleWeb do
   pipe_through :browser # Use the default browser stack

   get "/", PageController, :index
   resources "/posts", PostController, except: [:new, :edit]
 end

Phoenix v.1.6.xでルーディングするコード↓

defmodule VueSampleWeb.Router do
 use VueSampleWeb, :router
 …
 scope "/", VueSampleWeb do
   pipe_through :browser

   get "/", PageController, :index
   resources "/posts", PostController, except: [:new, :edit]
 end
 …

えぇ...全然書き方が違う...!!😳 v1.6.xの「破壊的変更」ってこういうことなのかな。少しその片鱗を見た気がする。

【おまけ2】PostgreSQLのパスワードリセットをかけた話

深夜に見る赤文字、めっちゃ怖いんだが...。ふむ？PostgreSQLのパスワード認証が通っていないらしい。

で、文脈を読み違った結果、VSCodeの方じゃなくて、PostgreSQLの方をお手本のconfig/dev.exs が通るようにパスワード側をpostgresにした😅

(※後に、「パスワードがpostgres以外の方はconfig/dev.exs側を変えよ」という指示であったと理解する。)

# Configure your database
config :vue_sample, VueSample.Repo,
 username: "postgres",
#-----------この部分↓を"自分で設定したパスワード"に変更せよ--------
 password: "postgres", 
 database: "vue_sample_dev",
 hostname: "localhost",
 show_sensitive_data_on_connection_error: true,
 pool_size: 10

最初からこうしておけばパスワード変更かけなくても通ったのにね。読解力大事😖

【おまけ3】migrationができなくなったのでテーブルをリセットした話

# there are pending migrations for repo: LiveViewTodos.Repo. Try running `mix ecto.migrate` in the command line to migrate it

スクショを撮り忘れてしまったが、最初、マイグレーションがうまくいかず、Webページに上記のメッセージが表示されていた。

で、指示通り "mix ecto.migrate" をかけるとコンソールに以下が表示されていた。

migrations can't be executed, migration name create_posts is duplicated

調べると、どうも、昨日作った400エラーを返したテーブルが既にあって、それが原因で新しいテーブルが作れないらしい。

昨日作ったテーブルを再活用する術を見つけられなかったので、

mix ecto.drop

で一旦テーブルを消して、お手本の

mix ecto.create

のところからやり直した。

これとCSS崩れが影響してないといいけど...

参考: https://elixirforum.com/t/pending-migration-error-try-running-mix-ecto-migrate-which-does-not-help/41138/6