Django CRUD Application with VueJs as front-end | VueJs + Django Rest Framework + MySQL example
Tags: django, vue, mysql
Published: 2021-04-03 09:47:37

https://grokonez.com/frontend/vue-js/django-crud-application-with-vuejs-as-front-end-vuejs-django-rest-framework-mysql-example-part-3-vuejs-client

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


<!-- wp:paragraph -->
<p>This tutorial is part 3 of&nbsp;<a href="https://grokonez.com/django/django-crud-application-with-vuejs-as-front-end-vuejs-django-rest-framework-mysql-example-part-1-overview">Django-VueJs-MySQL series</a>. Today, we will create Vuejs Client to make HTTP request &amp; receive response from Django Server.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>>> <a href="https://grokonez.com/django/django-crud-application-with-vuejs-as-front-end-vuejs-django-rest-framework-mysql-example-part-1-overview">Part 1: Overview</a><br>>> <a href="https://grokonez.com/django/django-crud-application-with-vuejs-as-front-end-vuejs-django-rest-framework-mysql-example-part-2-django-server">Part 2: Django Server</a></p>
<!-- /wp:paragraph -->

<!-- wp:more -->
<!--more-->
<!-- /wp:more -->

<!-- wp:heading {"level":3} -->
<h2>Video</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>[Coming soon...]</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h2>VueJs Client Overview</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":4} -->
<h3>Goal</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The image below shows overview about Vuejs Components that we will create:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":17083} -->
<figure class="wp-block-image"><img src="https://grokonez.com/wp-content/uploads/2019/03/django-vue-crud-example-django-rest-api-mysql-client-components.png" alt="django-vue-crud-example-django-rest-api-mysql-client-components" class="wp-image-17083"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":4} -->
<h3>Project Structure</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":17085} -->
<figure class="wp-block-image"><img src="https://grokonez.com/wp-content/uploads/2019/03/django-vue-crud-example-django-rest-api-mysql-vue-project-structure.png" alt="django-vue-crud-example-django-rest-api-mysql-vue-project-structure" class="wp-image-17085"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>–&nbsp;<strong>package.json</strong>&nbsp;with 3 main modules:&nbsp;<code>vue</code>,&nbsp;<code>vue-router</code>,&nbsp;<code>axios</code>.<br>– 4 components:&nbsp;<strong><em>CustomersList</em></strong>,&nbsp;<strong><em>Customer</em></strong>,&nbsp;<strong><em>AddCustomer</em></strong>,&nbsp;<strong><em>SearchCustomer</em></strong>.<br>–&nbsp;<strong>router.js</strong>&nbsp;defines&nbsp;<code>routes</code>, each route has a path and maps to a component.<br>–&nbsp;<strong>http-common.js</strong>&nbsp;initializes HTTP Client with&nbsp;<code>baseUrl</code>&nbsp;and&nbsp;<code>headers</code>&nbsp;for axios HTTP methods.<br>–&nbsp;<strong>vue.config.js</strong>&nbsp;configures&nbsp;<code>port</code> for Vue App.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>For more details about how to use Vue Router in this example, please visit:<br><a href="https://grokonez.com/frontend/vue-js/vue-router-example-with-nav-bar-dynamic-route-nested-routes">Vue Router example – with Nav Bar, Dynamic Route &amp; Nested Routes</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Setup VueJs Project</h3>
<!-- /wp:heading -->

<!-- wp:heading {"level":4} -->
<h3>Init Project</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Point cmd to the folder you want to save Project folder, run command:<br><code>vue create vue-django</code></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>You will see 2 options, choose&nbsp;<strong>default</strong></p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":14671} -->
<figure class="wp-block-image"><img src="https://grokonez.com/wp-content/uploads/2018/09/vue-create-project-config.png" alt="vue-create-project-config" class="wp-image-14671"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":4} -->
<h4>Add Vue Router to Project</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>– Run command:&nbsp;<code>npm install vue-router</code>.<br>– Import&nbsp;<code>router</code>&nbsp;to&nbsp;<strong>src/main.js</strong>:</p>
<!-- /wp:paragraph -->

<!-- wp:html -->
<pre><code class="language-javascript">import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')
</code></pre>


https://grokonez.com/frontend/vue-js/django-crud-application-with-vuejs-as-front-end-vuejs-django-rest-framework-mysql-example-part-3-vuejs-client