Learn Vue - Vue and Django API - Preparing a Vue app with axios to consume a Django REST API скачать в хорошем качестве

Learn Vue - Vue and Django API - Preparing a Vue app with axios to consume a Django REST API

In this vue js tutorial we prepare a Django REST API and then go through the process of building a Vue js application using axios to connect and display data from the Django API. This is the first part of two tutorials, in this tutorial we outline the underpinning framework building a Vue and Django application, in the next tutorial we apply authentication. The code for this Vue example with Django is available see link below. In this tutorial you will learn how to build a Django API, the Django Rest Framework and CORS. Also we use Postman software to test API. We then cover building a Vue app using axios to allow consumption of our Django API and in Vue build views, configure a Vue Router from scratch, implement and import a Navigation bar and connecting Bootstrap to your Vue project. 00:00 Introduction 01:05 Make a new Django project 03:57 Start developing Django app 04:10 Register app in settings.py 04:37 Install Django rest framework 05:02 Build new model and migrate 06:04 Create new admin and login 07:02 Register new model in admin.py and add data to database 09:04 Create serializers.py 10:25 Build view.py 11:45 Define URLs 13:32 Test API with Postman 14:30 Start new Vue JS application 17:54 Start coding Vue app - remove helloworld 19:15 The final App.vue code 19:31 Start preparing the router 20:56 The final main.js code 21:29 Build the routes.js file 26:35 Start the axois configuration 34:15 Finish the Django application adding CORS 36:56 System demonstration Workflow ################### Django ################### Setup ##### 1. Install venv Django 2. Create APP & Register in settings.py 3. pip Install djangorestframework 4. Make model 5. createsuperadmin 6. admin.py 7. Add data 8. Create serializers.py 9. Create view 10. Config urls with /post 11. Test in postman ##### Cross-Origin Resource Sharing (CORS) ##### 13. pip install django-cors-headers (https://pypi.org/project/django-cors-...) 14. Add cors to settings apps installed and middleware then whitelist ################### Vue JS ################### Create new project (CLI) ======= 1. First we remove the the helloworld components ======= Configure routes ======= 2. Configure the App.vue file 3. Add a routes.js file 4. Configure/Connect in main.js 5. Add new file routes and configure 6. Configure main.js with router 7. Add views folder and add Posts.vue 8. Import vue router npm install --save vue-router 9. Page should be working now - lets test it ===== Build Navbar & Bootstrap ===== 10. Build Navbar file 11. Add Navbar to Posts.vue 12. Install Bootstrap npm install bootstrap 13. Add Bootstrap to main.js ====== Axios ====== 14. Install axios npm install --save axios 15. Create axios instance axios-api.js 16. Configure Posts.vue - output data (remember to turn of authentication in Django view) 17. Test new configuration Code Repository: https://github.com/veryacademy/YT-Vue... SUBSCRIBE to get more free tutorials, courses and code snippets!    / @veryacademy   Follow us on Facebook   / veryacademycom-113232103670580   Follow use on Twitter:   / veryacademy