Developing-a-Single-Page-App-with-Flask-and-Vue-js #

Install: Enable the Bootstrap Vue library in client/src/main.js:

POST Route #

Server #

Update the existing route handler to handle POST requests for adding a new book: Update the imports: With the Flask server running, you can test the POST route in a new terminal tab: You should see: You should also see the new book in the response from the http://localhost:5000/books endpoint. Developing%20a%20Single%20Page%20App%20with%20Flask%20and%20Vue%20js%20900a7939c8244b579780a034209512c4/add-new-book.gif

Alert Component #

Next, let’s add an Alert component to display a message to the end user after a new book is added. Developing%20a%20Single%20Page%20App%20with%20Flask%20and%20Vue%20js%20900a7939c8244b579780a034209512c4/alert-2.png To make it dynamic, so that a custom message is passed down, use a binding expression in Books.vue: Add the message to the data options, in Books.vue as well: Then, within addBook, update the message: Finally, add a v-if, so the alert is only displayed if showMessage is true: Add showMessage to the data: Update addBook again, setting showMessage to true: Test it out! Handle cancel button click

First, add a new modal to the template, just below the first modal: Add the form state to the data part of the script section:

Challenge: Instead of using a new modal, try using the same modal for handling both POST and PUT requests.

(2) Handle update button click #

Update the “update” button in the table: Add a new method to update the values in editForm: Then, add a method to handle the form submit:

(3) Wire up AJAX request #

(4) Alert user #

Update updateBook:

(5) Handle cancel button click #

Add method: Update initForm: Make sure to review the code before moving on. Developing%20a%20Single%20Page%20App%20with%20Flask%20and%20Vue%20js%20900a7939c8244b579780a034209512c4/update-book.gif

DELETE Route #

Server #

Update the route handler:

Client #

Update the “delete” button like so: Add the methods to handle the button click and then remove the book: Now, when the user clicks the delete button, the onDeleteBook method is fired, which, in turn, fires the removeBook method. Developing%20a%20Single%20Page%20App%20with%20Flask%20and%20Vue%20js%20900a7939c8244b579780a034209512c4/developing_spa_flask_vue.png