前回までの記事では、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のプラグインもあるので試してください。
とりあえず今日はここまで!