web application development - github pagesweb application development david drohan ([email protected])...
TRANSCRIPT
Produced by
Department of Computing & MathematicsWaterford Institute of Technology
http://www.wit.ie
Web Application Development
David Drohan ([email protected])
USING AXIOS TO CONSUME DONATION-SERVER API
Vue.jsRELATED
AxiosA PROMISE-BASED HTTP CLIENT
VUEJS - AXIOS 3
What is Axios?q Promise based HTTP client for the browser and node.js
q Features include
§ Make XMLHttpRequests from the browser
§ Make http requests from node.js
§ Supports the Promise API
§ Intercept request and response
§ Transform request and response data
§ Cancel requests
§ Automatic transforms for JSON data
§ Client side support for protecting against XSRF (Cross-Site Request Forgery, aka one-click attack)
q Supported by all Major Browsers
https://github.com/axios/axiosVUEJS - AXIOS 4
Installing
VUEJS - AXIOS 5
DonationVue & AxiosThere are many times when building applications for the web that you may want to consumeand display data from an API. Our DonationVue Web App is no exception. There are several waysto do this, but a very popular approach is to use axios, which as already mentioned, is apromise-based HTTP client.
We’ve already built the Server and Api (hosted at https://donationweb-server.herokuapp.com)which is a big help J but that isn’t always the case – most of the time all you know about theserver (with your developer hat on) is the ‘endpoints’ to ‘hit’ when requesting and/or sendingdata.
This section will take a quick look at how we interact with our Heroku node web server throughour Vue Web App and Axios.
VUEJS - AXIOS 6
DonationVue ‘Services’ Setup
VUEJS - AXIOS 7
api.js
donationservice.js
DonationWeb RevisitedLet’s remind ourselves of the Api we created (back in the day!)
VUEJS - AXIOS 8
Resource URI (structure) HTTP RequestList of Donations /donations GETGet a Single Donation /donations/{id} GETUpvote a Donation /donations/{id}/vote PUTDelete a Donation /donations/{id} DELETEUpdate a Donation /donations/{id} PUTAdd a Donation /donations/{id} POSTTotal of Donation Votes /donations/votes GET
DonationVue ‘Mapped’Here’s our client side methods mapped to the server side endpoints
VUEJS - AXIOS 9
Resource URI (structure) HTTP RequestfetchDonations() /donations GETfetchDonation(…) /donations/{id} GETupvoteDonation(…) /donations/{id}/vote PUTdeleteDonation(…) /donations/{id} DELETEputDonation(…) /donations/{id} PUTpostDonation(…) /donations/{id} POSTTotal of Donation Votes /donations/votes GET
fetchDonations()
VUEJS - AXIOS 10
fetchDonation()
VUEJS - AXIOS 11
id passed from Donations.vue
upvoteDonation()
VUEJS - AXIOS 12
getting our list again
deleteDonation()
VUEJS - AXIOS 13
sweetAlerts
putDonation()
VUEJS - AXIOS 14
postDonation()
VUEJS - AXIOS 15
setting Headers
Case StudyLABS IN ACTION
VUEJS - AXIOS 16
Demo Application
VUEJS - AXIOS 17
https://donationweb-vue.firebaseapp.com