JSひろば開発６日目：Vueアプリのデプロイとデザイン
前回までの記事では、Djangoをデプロイし実際のドメインからアクセスできるところまで行いました。今日の作業ではバックエンドのDjangoアプリで作成したAPIのエンドポイントとVueのウェブアプリから実際にAPIのリクエストを送りバックエンドからデータをもらえるようにします。あとデザインをキレイにしましょう。 作業日 2022年12月16日 作業にかけた時間 8時間 合計作業時間 24時間 作業内容 Djangoに実際のデータを入力VueアプリにAxiosをインストールAPIコールのリスポンスをPiniaに保管実行ボタンの作成アニメーションの設定highlight.jsを設定 ではDjangoのアドミンページから実際のデータを入力してAPIのエンドポイントから取得できるようにします。 VueアプリにAxiosをインストール 次に、EventService.jsというAPI関連のコールをまとめた別ファイルを作成しました。 次にPiniaのファイルにAPIコールのファンクションを保管しておきPiniaが読み込まれたらデータをフェッチするようにします。どこでこのファンクションと発火させるかは後から変更するかもしれません。 ここで、APIのGETリクエストを送ると予定通りにCORSポリシーでDjangoからブロックされてしまいました。 詳しい対応方法はDjango REST API COR Headersの使い方の記事を参照してください。ではこの記事通りにいったんDjangoのアプリを更新してまた戻ってきましょう。 あと、Vue側のアプリケーションのindex.htmlのheadタグ内に下記のmetaを追加しました。 Vueアプリの検証 ではAPIの問題が解決したところでこのPrimeVueのターミナルで問題発生。。このUIだと改行ができないことが発覚しました。まあターミナルなのでそうでしょうが。なのでPrimeVueのTextAreaのコンポーネントと入れ替えました。 Vueアプリのデプロイ Vueアプリのデプロイはこの記事を参考にして行いました。これもLet’s EncryptとCertbotを使ってHTTPSからアクセスできるようにしました。 とりあえず、Vueアプリがデプロイできるようになりました。後はUIの調整と細かい設定をして完了です！ アニメーションで使ったCSSはこちらの記事に書いています。Animistaというサイトです。 highlight.jsの追加 このままだと、テキストエディタのように色でハイライトされないので見づらいですね。highlight.jsをインストールしてみます。ここで入力したときと同時に1文字ずつでJavaScriptのキーワードかを判定してハイライトするようにしたかったのですが、うまくいきませんでした。テキストエリアをハイライトさせるのが難しそうでしたので諦めました。 しかし、他の方法でコマンドを実行したときにコードがハイライトされるようにできたので良しとします！ もし、単純にダイナミックでないコードをハイライトしたいのであればVueのコンポーネントで使えるHighlight.jsのプラグインもあるので試してください。 とりあえず今日はここまで！
