Quick Start: Getting Started Guide to Vue3+Django4 Full-Stack Development

Quick Start: Getting Started Guide to Vue3 Django4 Full-Stack Development

With the rapid development of the Internet, full-stack development has become one of the hottest technology trends in recent years. In full-stack development, it is a common way to develop by combining front-end and back-end frameworks. This article will lead you into the world of Vue3 Django4 full-stack development and provide an introductory guide for beginners.

Vue3 is the latest Vue.js framework version. It has higher performance, better development experience and more new features. Django is an advanced Python web framework that provides rich functionality and scalability. Combining them together creates powerful and modern web applications.

Before you begin, make sure you have Node.js, Vue CLI, and Python installed correctly. Once the installation is complete, we can start creating our project. First, create a Vue3 project using the Vue CLI, open a terminal and run the following command:

vue create myproject

During the creation process, you can choose to use the Vue3 preset option, which will provide you with a Vue Router and Vuex Ready-made configuration. After the creation is completed, we enter the project directory and install the dependency packages of Vue and Django:

cd myproject
npm install vue@next
pip install Django

Next, we need to create a Django application in the project and create it with the following command:

django-admin startproject backend
cd backend
python manage.py startapp api

After creation is complete, we can start writing code. First, we need to add Vue’s static file path in Django’s settings.py file, find STATIC_URL and add the following code below it:

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'frontend/dist'),
]

Then, we create a new urls.py file for Handle requests to the Vue front end. This file is located in the api directory. Write the following code:

from django.urls import path
from . import views

urlpatterns = [
    path('api/', views.api),
]

Next, we write the logic code in the views.py file to handle requests from the Vue front-end. Write the following code:

from django.shortcuts import render
from django.http import JsonResponse

def api(request):
    data = {
        'message': 'Hello from Django API!'
    }
    return JsonResponse(data)

In this simple example, we just return a JSON response containing a simple message. In actual applications, you can write more complex logic to handle different requests.

Next, we need to write front-end code with Vue. Go to the project directory and install Vue Router and Axios:

cd frontend
npm install vue-router@next axios

Then we open the src/router/index.js file and add the following code:

import { createWebHistory, createRouter } from 'vue-router'
import Home from '../views/Home.vue'
import API from '../views/API.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/api',
    name: 'API',
    component: API
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

In this example, we define Two routes: '/' corresponds to the Home component, and '/api' corresponds to the API component. Then, we create Home.vue and API.vue components in the src/views directory. Here we only need to simply display some text information.

Now we can send a request in the API.vue component to obtain data from the Django API. Use the following code to replace the original content:

<template>
  <div>
    <h1 id="message">{{ message }}</h1>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    axios.get('/api/')
      .then(response => {
        this.message = response.data.message
      })
      .catch(error => {
        console.error(error)
      })
  }
}
</script>

In this example, we send a GET request in the mounted hook function of the component, obtain the data returned by the Django API, and display the data to the page superior.

Now we have completed a basic full-stack application using Vue3 and Django4. You can run the following command to start the development server:

cd ..
python manage.py runserver

Then open http://localhost:8000/ in your browser and you will see a page containing Django API data.

Through the guidance of this article, we have led you to complete the introductory guide to Vue3 Django4 full-stack development. I hope it will be helpful to beginners, and I also hope you can further learn and explore the field of full-stack development. come on!

The above is the detailed content of Quick Start: Getting Started Guide to Vue3+Django4 Full-Stack Development. For more information, please follow other related articles on the PHP Chinese website!