はじめに

年内リリースに向けての課題はまだまだありますが、リリースに向けての登竜門はそろそろ目処が経ちそうなので、開発と執筆のペースを上げます。

フロントエンドをVue.jsで開発していく

【Django】DjangoによるWeb開発プロジェクトPart3 - webpackでフロントエンドをDjangoから独立させるまで -の時に、フロントエンドをVue.jsで開発していく事を決めました。いよいよ、本格的にフロントエンドも開発していこうと思います。
まずは、おさらいとしてwebpackで単一コンポーネントのVue.jsを書ける所までを設定していきます。

サンプル例

今回は、オブジェクトを生成するフォーム、及びaxios経由でDjangoのviews.pyのメソッドを叩ける所まで行います。

サンプルコードがDjangoのTemplateでも動くか検証

templates/***/new.html

{% extends 'application.html' %}

{% block title %}**** New{% endblock %}

{% block content %}
  <main class="dashboard">
    <nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0">
      <a href="{% url '***:index' %}" class="navbar-brand col-sm-3 col-md-2 mr-0">Jails</a>
      <ul class="navbar-nav px-3">
        <li class="nav-item text-nowrap">
          <a class="nav-link" href="{% url 'logout' %}">log out</a>
        </li>
      </ul>
    </nav>
    <div class="container-fluid">
      <h2>*** New</h2>
      {% verbatim %}
        <div id="app">
          {{ message }}
        </div>
      {% endverbatim %}
    </div>
  </main>
{% endblock %}

Djangoで書く場合に注意することが一つあります。それは、Vue.jsの変数展開の記法とtemplateの記法が被っている事です({{ }})。
そのため、テンプレートHTMLファイルの中でVue.jsのコードを書きたい場合はtemplateエンジンのレンダリングを一時的にストップしなければなりません。

{% verbatim %}を利用する事で、テンプレートエンジンのレンダリングを一時的にストップする事ができます。

また、Vueにはランタイム限定ビルドと完全ビルドの2種類があります。
今回のアプリケーションはほぼバックエンドで動かすようなアプリケーションなため、完全ビルドの方法を採用しました。

webpack.config.js

// webpack.config.js
var path = require('path')
var BundleTracker = require('webpack-bundle-tracker')

module.exports = {
    entry: './frontend/packs/application.js',
    output: {
        path: path.resolve(__dirname, './public/bundles/'),
        filename: "[name]-[hash].js",
    },
    plugins: [
        new BundleTracker({filename: './webpack-stats.json'})
    ],
    module: {
        rules: [
            {
                test: /\.js$/,
                include: [ // use `include` vs `exclude` to white-list vs black-list
                    path.resolve(__dirname, "node_modules"), // white-list your app source files
                    require.resolve("bootstrap-vue"), // white-list bootstrap-vue
                ],
                loader: "babel-loader"
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    }
}

aliasでvueを設定しています。

最後にテスト用にapplication.jsに以下のサンプルコードを書いてみます。

application.js

document.addEventListener("DOMContentLoaded", function (event) {
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
});

DOMが完全にコンテンツを読み込んでから、Vueを実行したいために、document.addEventListener("DOMContentLoaded", function (event)をかましています。

./node_modules/.bin/webpack --config webpack.config.js --mode=development

以上で、Vueのサンプルは動いたので、ここから本格的に開発をしていきます。

単一ファイルコンポーネントによるVueインスタンスの登録

Vueをより良く使うために、コンポーネントを利用します。コンポーネントは名前付きの再利用可能なVueインスタンスです。ルートVueインスタンス内でよりカスタマイズした要素として利用できるようになります。また、カスタマイズしたコンポーネントは、Webpack や Browserify のビルドツールにより実現された .vue拡張子のファイルで書くと、CSSやHTML、Vueの記述を一つにまとめる事ができます(単一ファイルコンポーネント)
以下にサンプルを書いてみます。

***.vue

<template>
  <div><p v-if="isVisible">{{ message }}</p></div>
</template>

<script>
    module.exports = {
        name: '****',
        data: function () {
            return {
                message: 'hello'
            }
        },
        computed: {
            isVisible: function () {
                if (this.message) {
                    return true;
                } else {
                    return false;
                }
            }
        }
    }
</script>

<style scoped>

</style>

内容自体は単純にhelloという文字列を返しているだけです。
さらに、これをapplication.js側でRootVueインスタンスを生成し、コンポーネント登録します。

application.js

import Example from './****.vue'

document.addEventListener("DOMContentLoaded", function (event) {
    new Vue({
        el: '#app',
        components: {
            'my-component': Example
        }
    })
})

これにより、Djangoのtemplateファイルでは<my-component>を記述する事で、RootVueインスタンスを呼び出す事ができます。

templates/jails/new.html

{% extends 'application.html' %}

{% block title %}**** New{% endblock %}

{% block content %}
  <main class="dashboard">
    <div class="container-fluid">
      <h2>**** New</h2>
      <div id="app">
        <my-component></my-component>
      </div>
    </div>
  </main>
{% endblock %}

本当はそろそろ、Vuexとか使うべきかとは思われますが、まだフロントエンド開発に慣れていないため、このように単一ファイルコンポーネントを作成し、RootVueインスタンスで呼び出せるように作っていきます。

単一ファイルコンポーネントでPUTリクエストを書いていく

今回は、VMの起動、停止のようなボタンをAjax経由で操作できるようなPUTリクエストをVue.jsで書いていきます。Vue.jsでは、Ajaxの代わりに、axiosというHTTPクライアントを利用して、リモートDjangoのメソッドを叩けるようにします。

application.js

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'

Vue.use(BootstrapVue);

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import '../css/application.css'
import '../css/login.css'
import '../css/top.css'
import VMStop from './vm_stop.vue'
import VMStart from './vm_start.vue'

document.addEventListener("DOMContentLoaded", function (event) {
    new Vue({
        el: '#app',
        components: {
            'vm-stop': VMStop,
            'vm-start': VMStart,
        }
    })
})

my-componentの時と同じように、VM起動、停止のコンポーネントを作っていきます。

vm_start.vue

<template>
  <button type="button" class="btn btn-success" @click="vm_start">Start</button>
</template>

<script>
    import axios from 'axios'

    axios.defaults.xsrfCookieName = 'csrftoken'
    axios.defaults.xsrfHeaderName = 'X-CSRFToken'
    export default {
        name: 'VM-Start',
        props: {
            vm_name: String
        },
        methods: {
            vm_start: function () {
                axios.put('http://*****:8080/jails/start', {
                    vm_name: this.vm_name
                }).then(response => (console.log(response)))
            }
        }
    }
</script>

<style scoped>

</style>

CSRFトークンをaxios経由でハンドリングできるようにするために、


    axios.defaults.xsrfCookieName = 'csrftoken'
    axios.defaults.xsrfHeaderName = 'X-CSRFToken'

で、axiosのヘッダにCSRFトークンをアタッチします。

また、プロパティを定義する事で、親コンポーネントで記述されたデータの値を子ポーネントに渡すことができます。

        props: {
            vm_name: String
        },

        vm_name: this.vm_name

これにより、Djangoのtemplateファイルの方で直接データを渡す事ができます。

index.html

  <jail-start vm_name={{ vm.name }}></jail-start>

最後にDjangoのurls.pyでPUTリクエストに対応するパスを生成し、メソッドの中身を記述します。

urls.py

    path('start', views.start, name='start'),
    path('stop', views.stop, name='stop'),

views.py


from django.shortcuts import render
from django.http import Http404
from django.http import HttpResponse
import json

def start(request):
    try:
        response = json.loads(request.body)
        *** = *****(response['jail_name'])
        ***.start()
    except (Exception, SystemExit):
        raise Http404("**** does not exist")
    return HttpResponse('OK')

def stop(request):
    try:
        response = json.loads(request.body)
        *** = ****(response['jail_name'])
        ***.stop()
    except (Exception, SystemExit):
        raise Http404("**** does not exist")
    return HttpResponse('OK')

以上で、VMの起動・停止がaxios経由で行えるようになりました。

まとめ

もうネタバレしちゃいますが、今、ホスティングシステムを作っています。そろそろ0.0.1バージョンはリリースできそうなので、しっかりコミットしていきます。

シリーズ

Part4 ← Part5 → Part6

はじめに

フロントエンドをVue.jsで開発していく

サンプル例

サンプルコードがDjangoのTemplateでも動くか検証

単一ファイルコンポーネントによるVueインスタンスの登録

単一ファイルコンポーネントでPUTリクエストを書いていく

まとめ

シリーズ

参考文献