web application development - github pagesweb application development david drohan ([email protected])...
TRANSCRIPT
![Page 1: Web Application Development - GitHub PagesWeb Application Development David Drohan (ddrohan@wit.ie) USING AXIOSTO CONSUME DONATION-SERVER API Vue.js RELATED Axios A PROMISE-BASED HTTP](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96debd9e39513f27943b6/html5/thumbnails/1.jpg)
Produced by
Department of Computing & MathematicsWaterford Institute of Technology
http://www.wit.ie
Web Application Development
David Drohan ([email protected])
![Page 2: Web Application Development - GitHub PagesWeb Application Development David Drohan (ddrohan@wit.ie) USING AXIOSTO CONSUME DONATION-SERVER API Vue.js RELATED Axios A PROMISE-BASED HTTP](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96debd9e39513f27943b6/html5/thumbnails/2.jpg)
USING AXIOS TO CONSUME DONATION-SERVER API
Vue.jsRELATED
![Page 3: Web Application Development - GitHub PagesWeb Application Development David Drohan (ddrohan@wit.ie) USING AXIOSTO CONSUME DONATION-SERVER API Vue.js RELATED Axios A PROMISE-BASED HTTP](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96debd9e39513f27943b6/html5/thumbnails/3.jpg)
AxiosA PROMISE-BASED HTTP CLIENT
VUEJS - AXIOS 3
![Page 4: Web Application Development - GitHub PagesWeb Application Development David Drohan (ddrohan@wit.ie) USING AXIOSTO CONSUME DONATION-SERVER API Vue.js RELATED Axios A PROMISE-BASED HTTP](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96debd9e39513f27943b6/html5/thumbnails/4.jpg)
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
![Page 5: Web Application Development - GitHub PagesWeb Application Development David Drohan (ddrohan@wit.ie) USING AXIOSTO CONSUME DONATION-SERVER API Vue.js RELATED Axios A PROMISE-BASED HTTP](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96debd9e39513f27943b6/html5/thumbnails/5.jpg)
Installing
VUEJS - AXIOS 5
![Page 6: Web Application Development - GitHub PagesWeb Application Development David Drohan (ddrohan@wit.ie) USING AXIOSTO CONSUME DONATION-SERVER API Vue.js RELATED Axios A PROMISE-BASED HTTP](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96debd9e39513f27943b6/html5/thumbnails/6.jpg)
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
![Page 7: Web Application Development - GitHub PagesWeb Application Development David Drohan (ddrohan@wit.ie) USING AXIOSTO CONSUME DONATION-SERVER API Vue.js RELATED Axios A PROMISE-BASED HTTP](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96debd9e39513f27943b6/html5/thumbnails/7.jpg)
DonationVue ‘Services’ Setup
VUEJS - AXIOS 7
api.js
donationservice.js
![Page 8: Web Application Development - GitHub PagesWeb Application Development David Drohan (ddrohan@wit.ie) USING AXIOSTO CONSUME DONATION-SERVER API Vue.js RELATED Axios A PROMISE-BASED HTTP](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96debd9e39513f27943b6/html5/thumbnails/8.jpg)
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
![Page 9: Web Application Development - GitHub PagesWeb Application Development David Drohan (ddrohan@wit.ie) USING AXIOSTO CONSUME DONATION-SERVER API Vue.js RELATED Axios A PROMISE-BASED HTTP](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96debd9e39513f27943b6/html5/thumbnails/9.jpg)
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
![Page 10: Web Application Development - GitHub PagesWeb Application Development David Drohan (ddrohan@wit.ie) USING AXIOSTO CONSUME DONATION-SERVER API Vue.js RELATED Axios A PROMISE-BASED HTTP](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96debd9e39513f27943b6/html5/thumbnails/10.jpg)
fetchDonations()
VUEJS - AXIOS 10
![Page 11: Web Application Development - GitHub PagesWeb Application Development David Drohan (ddrohan@wit.ie) USING AXIOSTO CONSUME DONATION-SERVER API Vue.js RELATED Axios A PROMISE-BASED HTTP](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96debd9e39513f27943b6/html5/thumbnails/11.jpg)
fetchDonation()
VUEJS - AXIOS 11
id passed from Donations.vue
![Page 12: Web Application Development - GitHub PagesWeb Application Development David Drohan (ddrohan@wit.ie) USING AXIOSTO CONSUME DONATION-SERVER API Vue.js RELATED Axios A PROMISE-BASED HTTP](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96debd9e39513f27943b6/html5/thumbnails/12.jpg)
upvoteDonation()
VUEJS - AXIOS 12
getting our list again
![Page 13: Web Application Development - GitHub PagesWeb Application Development David Drohan (ddrohan@wit.ie) USING AXIOSTO CONSUME DONATION-SERVER API Vue.js RELATED Axios A PROMISE-BASED HTTP](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96debd9e39513f27943b6/html5/thumbnails/13.jpg)
deleteDonation()
VUEJS - AXIOS 13
sweetAlerts
![Page 14: Web Application Development - GitHub PagesWeb Application Development David Drohan (ddrohan@wit.ie) USING AXIOSTO CONSUME DONATION-SERVER API Vue.js RELATED Axios A PROMISE-BASED HTTP](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96debd9e39513f27943b6/html5/thumbnails/14.jpg)
putDonation()
VUEJS - AXIOS 14
![Page 15: Web Application Development - GitHub PagesWeb Application Development David Drohan (ddrohan@wit.ie) USING AXIOSTO CONSUME DONATION-SERVER API Vue.js RELATED Axios A PROMISE-BASED HTTP](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96debd9e39513f27943b6/html5/thumbnails/15.jpg)
postDonation()
VUEJS - AXIOS 15
setting Headers
![Page 16: Web Application Development - GitHub PagesWeb Application Development David Drohan (ddrohan@wit.ie) USING AXIOSTO CONSUME DONATION-SERVER API Vue.js RELATED Axios A PROMISE-BASED HTTP](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96debd9e39513f27943b6/html5/thumbnails/16.jpg)
Case StudyLABS IN ACTION
VUEJS - AXIOS 16
![Page 17: Web Application Development - GitHub PagesWeb Application Development David Drohan (ddrohan@wit.ie) USING AXIOSTO CONSUME DONATION-SERVER API Vue.js RELATED Axios A PROMISE-BASED HTTP](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec96debd9e39513f27943b6/html5/thumbnails/17.jpg)
Demo Application
VUEJS - AXIOS 17
https://donationweb-vue.firebaseapp.com