はじめに
勉強も兼ねて社内で使う簡単な Web アプリを
バックエンドは Flask で、フロントエンドは Vue.js でそれを Docker のコンテナで動かそうと、
そんな今時の感じで作ろうと思ったら出鼻をくじかれた。
いけると思ったのに
まずは Vue.js の公式を見ながら Hello, world! 出してみようと思い、公式通りに作った。
はじめに-Vue.js
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<meta charset='utf-8'>
<title>index</title>
</head>
<body>
<div id='app'>
{{ message }}
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</html>
Flask も最低限に記述
index.py
#!/usr/bin/env python
# -*- coding: utf-8 -*-
from flask import Flask
from flask import g
from flask import render_template
from flask import request
from flask import Response
app = Flask(__name__)
@app.route('/index')
def index():
return render_template('index.html')
def main():
app.run(debug=True, host='0.0.0.0', port=5000)
if __name__ == '__main__':
main()
これで、ホスト:5000->コンテナ:5000 でコンテナに穴を開けて、
http://localhost:5000/index にアクセス
何も出ないよね ??
この index.html をブラウザで普通にローカルのファイルとして読み込むとちゃんと表示される。なぜ。
答えはこう
index.html
<body>
<div id='app'>
[[ message ]]
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
delimiters: ['[[', ']]']
})
</script>
注目は、[[ message ]] と、delimiters: ['[[', ']]']です。
これは、Flask が使用しているテンプレーエンジンのデリミタと、Vue.js のデリミタが共に{{ }}でコンフリクトしてしまっているため、Vue.js のデリミタを [[ ]]に変更しています。
delimiters-Vue.js
焦った〜