Home python Django Vue.js Full Stack App

Django Vue.js Full Stack App

15 min read
Comments Off on Django Vue.js Full Stack App

This  tutorial will teach you how to do the full stack development application using  Django with Vue.js that are CREATE, RETIEVE, UPDATE and DELETE and SEARCH using mysql Database. The INSERT, SELECT, UPDATE and DELETE statements can be used in any database system, because this is support by all relational database systems.Django is world best Python Framework for developing the webapplications.


Let Learn How to Make the System Step by Step

Install the Django

After install Django lets create the django Project

Create Django Project

Lets Run the Project Using Following Command

Now you can see the welcome page of django.

After that lets configure the database mysql.

Lets Install Mysql

After that lets Upgrade the Version

After that go to mysql database i used in this example xampp server. and create the database kms.

Lets Create the Virtual Environment type the following command

after run the command there is a folder created which name is Env.inside the Env folder there is file which is created Scripts. lets go inside the folder type the following command

then need to activated so type the following command

Now you can see the Virtual Environment is activated successfully. then type the following command. come to backward

now you in the Virtual Environment lets install the Django again

After that will create the App which name is StudentApp

StudentApp we have to added in to the setting.py

After that Create the Model


Install the CORS

Install the Rest Framework

Add the dependencies in to the settings.py inside the INSTALLED_APPS

in to the settings.py inside the MIDDLEWARE add this dependencies

in to the settings.py you have add CORS_ORIGIN Setting make both as true

Angular Connected Port

After that select StudentApp Folder inside the create the file serializers.py


After that lets Configure the Mysql Database into our Django Project

 Install the database Url  type by the following command

After that Install the mysqlclient

After that Configure the database connection on settings.py

After that run the migration command 

After done successfully. then type following command

then you can see you database table has been created.

After that open views.py for generating views

views.py paste the code

Manage the Urls

Urls.py paste the code

Run the Project


Vue.js is a front-end application we have already created the folder front end inside the folder open the command prompt and type the commands.

Install  Vue.js CLI

After installed successfully create the vue.js project using following command

After Project has been created open the project on vs code editor

Create the New Components Student.vue


In this component i have created the crud operation.

Add records

View records

Update records

Delete records

Install Axios


open the src folder inside the folder has folder routes folder inside the folder has file
index.js .here  i am going to link the new component Router.


I have attached the video link below. which will do this tutorials step by step.




    Load More Related Articles
    Load More By admin
    Load More In python
    Comments are closed.

    Check Also

    Create Maven project in Intellij

    In this tutorial will see how to create Maven project in Intellij step by step. First Step…