JSひろば開発6日目:Vueアプリのデプロイとデザイン

前回までの記事では、Djangoをデプロイし実際のドメインからアクセスできるところまで行いました。今日の作業ではバックエンドのDjangoアプリで作成したAPIのエンドポイントとVueのウェブアプリから実際にAPIのリクエストを送りバックエンドからデータをもらえるようにします。あとデザインをキレイにしましょう。

作業日2022年12月16日
作業にかけた時間8時間
合計作業時間24時間
作業内容Djangoに実際のデータを入力
VueアプリにAxiosをインストール
APIコールのリスポンスをPiniaに保管
実行ボタンの作成
アニメーションの設定
highlight.jsを設定

ではDjangoのアドミンページから実際のデータを入力してAPIのエンドポイントから取得できるようにします。

VueアプリにAxiosをインストール

npm install axios

次に、EventService.jsというAPI関連のコールをまとめた別ファイルを作成しました。

import axios from "axios";

const getClient = axios.create({
  baseURL: "http://asameshi-api.cloud/",
  withCredentials: false,
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json",
  },
});

// 
export const getCommand = () => {
  return getClient().get("command/");
};

次にPiniaのファイルにAPIコールのファンクションを保管しておきPiniaが読み込まれたらデータをフェッチするようにします。どこでこのファンクションと発火させるかは後から変更するかもしれません。

  const keywordData = [];

  const getData = () => {
    getCommand()
      .then((response) => {
        keywordData = response.data
        console.log(response.data)
      })
      .catch((error) => {
        console.log("data:" + error);
      });
    loading.value = true;
  };
  getData()

ここで、APIのGETリクエストを送ると予定通りにCORSポリシーでDjangoからブロックされてしまいました。

詳しい対応方法はDjango REST API COR Headersの使い方の記事を参照してください。ではこの記事通りにいったんDjangoのアプリを更新してまた戻ってきましょう。

あと、Vue側のアプリケーションのindex.htmlのheadタグ内に下記のmetaを追加しました。

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> 

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のプラグインもあるので試してください。

とりあえず今日はここまで!