#vue2019-12-25FlaskとVueでCRUD操作(バックエンド編)FlaskとVue.jsでCRUD機能のついた簡単なWebアプリ(ブックリスト)を作成してみました。実際には同時進行で作成していますがバックエンドとフロントエンドに分けて記事を書いていきます。構成vue_apiディレクトリの下にfrontend(vue.js)とbackend(flask)ディレクトリを作成。flaskは一応モデルだけ分離して作成しています。flaskとvueの連携については前回の記事を参照してください。|--config.pyライブラリのインストールアプリを作成するにあたって必要なライブラリを仮想環境下でインストールします。app.run()Api(app)でインスタンスを生成してapiに代入。add_resource()でapiにリソースを追加して、第2引数でルーティングの設定。Bookapp(Resource):以下で作成。クラスの中でhttpメソッドに対応した関数(GET/POST/PUT/DELETE)を定義して具体的な処理を書きます。Succeeded"}のレスポンスを返すようにしています。CORSを利用すると、flaskのサーバーを立てた上でvue側のサーバー「localhost:8080」からもapp.pyにアクセスできるようになります。build」するのが面倒でないならCORSは必要ありません。idCRUDの処理はmodel.pyに記述。チュートリアル的なものなのでデータベースのカラムはid、タイトル、著者、出版社だけです。SQLAlchemyで取得したデータはjsonifyを使ってもjsonに変換できないのでFlask-Marshmallowを介してjsonに変換しています。vueから送られたデータはjson形式なのでrequest.get_json()で受け取ります。これでバックエンド側のAPIセッティングは終了したので次回はフロントエンドを作成していきます。ソースコードはこちらから。