Django CRUD Application with VueJs as front-end | VueJs + Django Rest Framework + MySQL example – Part 3: VueJs Client

django-vue-crud-example-django-rest-api-mysql-feature-image

This tutorial is part 3 of Django-VueJs-MySQL series. Today, we will create Vuejs Client to make HTTP request & receive response from Django Server.

>> Part 1: Overview
>> Part 2: Django Server

Video

[Coming soon…]

VueJs Client Overview

Goal

The image below shows overview about Vuejs Components that we will create:

django-vue-crud-example-django-rest-api-mysql-client-components

Project Structure

django-vue-crud-example-django-rest-api-mysql-vue-project-structure

– package.json with 3 main modules: vuevue-routeraxios.
– 4 components: CustomersListCustomerAddCustomerSearchCustomer.
– router.js defines routes, each route has a path and maps to a component.
– http-common.js initializes HTTP Client with baseUrl and headers for axios HTTP methods.
– vue.config.js configures port for Vue App.

For more details about how to use Vue Router in this example, please visit:
Vue Router example – with Nav Bar, Dynamic Route & Nested Routes

Setup VueJs Project

Init Project

Point cmd to the folder you want to save Project folder, run command:
vue create vue-django

You will see 2 options, choose default

vue-create-project-config

Add Vue Router to Project

– Run command: npm install vue-router.
– Import router to src/main.js:

Initialize HTTP Client

Install axios with command: npm install axios.
Then create http-common.js file:

Configure Port for Vue App

vue.config.js

Implement VueJs Client App

Components

List of Items

components/CustomersList.vue

Item Details

components/Customer.vue

Add Item

components/AddCustomer.vue

Search Items

components/SearchCustomers.vue

Routing

Define Routes

src/router.js

App template with Navbar and router-view

src/App.vue:

Run

– Run Django server with command: python manage.py runserver .
– Vue.js Client: npm run serve.

Open Browser with Url: http://localhost:4200/.

Source Code

vue-rest-client-django-mysql

By grokonez | March 3, 2019.



Related Posts


1 thought on “Django CRUD Application with VueJs as front-end | VueJs + Django Rest Framework + MySQL example – Part 3: VueJs Client”

  1. Hey

    Great article. Would you mind maybe making a full example with the django bits included? API authentication etc?
    And github/lab/etc, would be more convenient to browse the source.

    Best wishes,
    Z

Got Something To Say:

Your email address will not be published. Required fields are marked *

*