PythonのWebフレームワークであるFlaskとVue.jsを使って、書籍管理アプリを作成してみました。この記事では、書籍の追加機能のみを実装しています。
＊作成したもの
書籍管理アプリ- 書籍名、作者名、既読有無の追加登録
※「Add Book」ボタンを押すとダイアログが出現し、その画面で入力した内容が画面に反映されます。
＊参考
＊環境
- MacOS
- Python 2.7.14
- Flask 1.0.2
- Vue 2.9.6
＊ディレクトリ構成
下記の記事の続きから始めます。├── assets <-- 画像やフォントなどを格納するディレクトリ
│ └── logo.png
├── components <-- 機能ごとのコンポーネントを格納するディレクトリ
│ └── Ping.vue
├── router
│ └── index.js <-- コンポーネントとマッピングするURLを定義
│
├── App.vue <-- 全てのコンポーネントが読み込むrootコンポーネント
└── main.js <-- Vueを読み込んで初期化するエンドポイント
＊bootstrap-vue のインストール
書籍を追加するときに表示させるダイアログを簡単に実装するために、bootstrap-vueをインストールします。$ npm install bootstrap-vue@2.0.0-rc.11 --save
import文を追加します。
<src/main.js>
import 'bootstrap/dist/css/bootstrap.css';
import BootstrapVue from 'bootstrap-vue'; <-- 追加
import Vue from 'vue';
import App from './App';
import router from './router';
Vue.config.productionTip = false;
Vue.use(BootstrapVue);
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>',
});
＊Client側の実装（Vue）
BooksのURL定義を追加します。<router/index.js>
import Vue from 'vue';
import Router from 'vue-router';
import Ping from '@/components/Ping';
import Books from '@/components/Books'; <-- 追加
Vue.use(Router);
export default new Router({
routes: [
####### ↓ 追加ここから ########
{
path: '/',
name: 'Books',
component: Books,
},
####### ↑ 追加ここまで ########
{
path: '/ping',
name: 'Ping',
component: Ping,
},
],
mode: 'history',
});
modeでは hash かhistoryを設定することができます。
hashはURLが変更されたときにページが読み込みできないようにします。
HTML5の機能のhistory.pushState APIを使用するときはhistoryの設定が必要ですが、それ以外はhashでも問題ないようです。
componentsディレクトリにBooksのVueファイルを追加します。
このファイルのtemplateタグに画面レイアウト、scriptタグにボタン押下時の処理を実装します。
<Books.vue>
<template>
<div class="container">
<div class="row">
<div class="col-sm-10">
<h1>Books</h1>
<hr><br><br>
<button type="button" class="btn btn-success btn-sm" v-b-modal.book-modal>Add Book</button>
<br><br>
<table class="table table-hover">
<thead>
<tr>
<th scope="col">Title</th>
<th scope="col">Author</th>
<th scope="col">Read?</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="(book, index) in books" :key="index">
<td>{{ book.title }}</td>
<td>{{ book.author }}</td>
<td>
<span v-if="book.read">Yes</span>
<span v-else>No</span>
</td>
<td>
<button type="button" class="btn btn-warning btn-sm">Update</button>
<button type="button" class="btn btn-danger btn-sm">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
####### ↓ ダイアログの実装ここから ########
<b-modal ref="addBookModal"
id="book-modal"
title="Add a new book"
hide-footer>
<b-form @submit="onSubmit" @reset="onReset" class="w-100">
<b-form-group id="form-title-group"
label="Title:"
label-for="form-title-input">
<b-form-input id="form-title-input"
type="text"
v-model="addBookForm.title"
required
placeholder="Enter title">
</b-form-input>
</b-form-group>
<b-form-group id="form-author-group"
label="Author:"
label-for="form-author-input">
<b-form-input id="form-author-input"
type="text"
v-model="addBookForm.author"
required
placeholder="Enter author">
</b-form-input>
</b-form-group>
<b-form-group id="form-read-group">
<b-form-checkbox-group v-model="addBookForm.read" id="form-checks">
<b-form-checkbox value="true">Read?</b-form-checkbox>
</b-form-checkbox-group>
</b-form-group>
<b-button type="submit" variant="primary">Submit</b-button>
<b-button type="reset" variant="danger">Reset</b-button>
</b-form>
</b-modal>
####### ↑ ダイアログの実装ここまで ########
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
books: [],
addBookForm: {
title: '',
author: '',
read: [],
},
};
},
methods: {
getBooks() {
const path = 'http://localhost:5000/books';
axios.get(path)
.then((res) => {
this.books = res.data.books;
})
.catch((error) => {
// eslint-disable-next-line
console.error(error);
});
},
addBook(payload) {
const path = 'http://localhost:5000/books';
axios.post(path, payload)
.then(() => {
this.getBooks();
})
.catch((error) => {
// eslint-disable-next-line
console.log(error);
this.getBooks();
});
},
initForm() {
this.addBookForm.title = '';
this.addBookForm.author = '';
this.addBookForm.read = [];
},
onSubmit(evt) {
evt.preventDefault();
this.$refs.addBookModal.hide();
let read = false;
if (this.addBookForm.read[0]) read = true;
const payload = {
title: this.addBookForm.title,
author: this.addBookForm.author,
read, // property shorthand
};
this.addBook(payload);
this.initForm();
},
onReset(evt) {
evt.preventDefault();
this.$refs.addBookModal.hide();
this.initForm();
},
},
created() {
this.getBooks();
},
};
</script>
＊補足１：Vue.jsのディレクティブについて
先頭に「v-」を付ける属性のことをディレクティブとよびます。- v-if
条件を指定することができます。
ここでは既読有無の値が True だった場合に「Yes」、Falseだった場合に「No」を出力するようにしています。
<span v-if="book.read">Yes</span>
<span v-else>No</span>
- v-model
入力された値をリアルタイムでVueのインスタンスのモデルに格納することができます。
ここでは、ダイアログでinputタグに入力された値をaddBookFormに格納して、入力された値が画面に追加で出力されるようにしています。下記のように使います。
var msg = new Vue ({
el: "#msg",
data: {
message: ""
}
})
<div id="msg">
<div class="result">{{message}}</div>
<div class="result-count">{{message.length}}</div>
<input type="text" v-model="message">
</div>
- v-for
繰り返しができます。ここではレスポンスで取得した書籍リストを、画面に出力するときに使っています。下記のように使います。
var fruits = new Vue ({
el: "#fruits",
data: {
colors: ["banana", "apple", "orange"]
}
})
<div id="fruits">
<ul>
<li v-for="fruit in fruits">{{fruit}}</li>
</ul>
</div>
＊補足２：その他のVue.jsの書き方について
- axios
アプリケーション側にリクエストを投げてjsonレスポンスを受け取れるようにします。
axios.get(path) でリクエストを送り、response.data でレスポンスを受け取ることができます。
- created()
インスタンスが生成された後に処理が実行されます。
ここでは登録されている書籍を出力しています。
＊Server側の実装（Flask）
Client側でAddボタンが押されたときの処理を行うメソッドを実装し、@app.route でURLをマッピングします。<app.py>
from flask import Flask, jsonify, request <-- requestを追加
from flask_cors import CORS
DEBUG = True
app = Flask(__name__)
app.config.from_object(__name__)
CORS(app)
####### ↓ 初期データの定義ここから ########
BOOKS = [
{
'title': 'On the Road',
'author': 'Jack Kerouac',
'read': True
},
{
'title': 'Harry Potter and the Philosopher\'s Stone',
'author': 'J. K. Rowling',
'read': False
},
{
'title': 'Green Eggs and Ham',
'author': 'Dr. Seuss',
'read': True
}
]
####### ↑ 初期データの定義ここまで ########
@app.route('/ping', methods=['GET'])
def ping_pong():
return jsonify('pong!')
####### ↓ booksを追加ここから ########
@app.route('/books', methods=['GET', 'POST'])
def all_books():
response_object = {'status': 'success'}
if request.method == 'POST':
post_data = request.get_json()
BOOKS.append({
'title': post_data.get('title'),
'author': post_data.get('author'),
'read': post_data.get('read')
})
response_object['message'] = 'Book added!'
else:
response_object['books'] = BOOKS
return jsonify(response_object)
####### ↑ booksを追加ここまで ########
if __name__ == '__main__':
app.run()
Flaskのwebアプリを起動します。
~flask$ python app.py
Vueのwebアプリを起動します。
~flask/front/client$ npm run dev
起動したら下記URLにアクセスします。
http://localhost:8080/
Add Book ボタンを押すと書籍を追加することができます。
＊所感
intellijを使って実装していたのですが、無償版だとVueをサポートしてくれないようで、補完やスペルチェックをしてくれずタイプミスが多くなってしまいました。theadタグのスペルを誤って「thread」にしていたり、modalのスペルを誤って「model」にしていた等、スペルのミスで結構ハマったので、Vueをサポートしているエディタで実装したほうが安全かと思います。
ハマりはしましたが、そのおかげで処理をよく読んで調べたり、デバッグしたりすることができたので、より理解が深まりました。
FlaskとVueを使った大まかな流れは理解できたのですが、まだ追加機能しか実装していないので、今後は更新や削除機能も実装していきたいと思います。
Sign up here with your email
ConversionConversion EmoticonEmoticon