Scribd
Upload
37 views2 pages

Django & Vue.js Full Stack Guide

The document outlines the steps to create a full stack web application using Django for the backend, Django Rest Framework for APIs, and Vue.js for the frontend. It includes instructions on setting up virtual environments, creating Django and Vue.js projects, building out models, views, and serializers in Django, and connecting the frontend and backend using CORS. Key steps are to install necessary technologies like Python, Django, Vue CLI, create a Django project and app, configure the ORM, build out APIs with Django Rest Framework, and make requests to the API from a Vue.js frontend.

Uploaded by

Mufid
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
37 views2 pages

Django & Vue.js Full Stack Guide

The document outlines the steps to create a full stack web application using Django for the backend, Django Rest Framework for APIs, and Vue.js for the frontend. It includes instructions on setting up virtual environments, creating Django and Vue.js projects, building out models, views, and serializers in Django, and connecting the frontend and backend using CORS. Key steps are to install necessary technologies like Python, Django, Vue CLI, create a Django project and app, configure the ORM, build out APIs with Django Rest Framework, and make requests to the API from a Vue.js frontend.

Uploaded by

Mufid
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

A.

SKILL:
1. Front-end:
- HTML5
- CSS (BootStrap)
- JavaScript ([Link])
2. Back-end:
- Python (Django)

B. TECH STACK:
1. Front-end: HTML, CSS, JavaScript, BootStrap, Vue JS
2. Back-end: Python, Django

C. I want use:
1. Front-end: BootStrap, Vue JS
2. Back-end: Django Rest Framework

D. LANGKAH - LANGKAH:
1. Install GIT [Link] (Opsional)
2. Install VSC [Link]
3. Install Python [Link]
4. Create Virtual Environment
- Open GIT / CMD (Command Prompt)
- Run "python -m venv [your_venv_name]
- Activate the venv "[your_venv_name]\Script\activate" , write "deactive" for non active
- Yes now you are in your virtual environment

5. Create Django Project


- Go to your work path
- run "pip install Django"
- run "django-admin --version" for see your django version
- run "django-admin startproject [project_name]"
- cd [project_name]
- run "python [Link] runserver"
- Open the [Link] on your browser

6. Create Admin Web


- Check Database "python [Link] makemigrations"
- Create Database "python [Link] migrate"
- Run "python [Link] createsuperuser" for create superuser
- Running Server "python [Link] runserver"
- Open the [Link] on your browser

7. Create Django App


- Run "python [Link] startapp [app_name]"
- Go to setting/py -> input your app name into installed_app
- Create your own model in [Link]
(Note: run python [Link] makemigrations & migrate setiap ada perubahan)
- Make and Import model at [Link]
- Open the [Link] for see your chance

- Create a viewset and url in [Link] in project


- Create a [Link] in project
- pip install djangorestframework
- Go to setting/py -> input your "rest_framework", into [Link]
- edit your app in [Link]
- Open the [Link] for see your api
- So dont use postman again for check, it’s same

8. Create Vue JS Project


- Install Vue CLI [Link]
- Install CLI "npm install -g @vue/cli
- Make project "Vue create your_app"
- cd your_app
- npm run serve
- Open the [Link] on your project

- Edit [Link] and Edit Component "[Link]" etc


- Make BootStrap the CSS Framework
- pip install "django-cors-headers" and input in [Link] "corsheaders"

You might also like