Basics to practice: Getting started with Vue3+Django4 full-stack development

Basics to practice: Introduction to Vue3 Django4 full-stack development

Overview:
Full-stack development means that a developer can handle front-end and back-end work at the same time , which is becoming increasingly important in modern web development. This article will introduce how to use Vue3 and Django4 for full-stack development, and provide some code examples to help readers get started.

1. Installing and Configuring Vue3
   First, we need to install the Vue CLI to create and manage our Vue project. Run the following command on the command line to install Vue CLI:

   npm install -g @vue/cli

   After the installation is complete, use the following command to create a new Vue project:

   vue create my-project

   Select according to the prompts and select the default option.

2. Create Vue components
   In a Vue project, we can use components to build user interfaces. In the src directory of the Vue project, create a folder named "components" and a file named "HelloWorld.vue" in it. In this file, we can write our component code, for example:

   <template>
     <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
     </div>
   </template>
   
   <script>
   export default {
     data() {
    return {
      message: 'Hello World!'
    }
     },
     methods: {
    changeMessage() {
      this.message = 'New Message!'
    }
     }
   }
   </script>

   This is a simple component that contains a title and a button that changes the content of the title when the button is clicked.

3. Configuring Django4
   Next, we need to install Django and create a new Django project. Run the following command on the command line to install Django:

   pip install django==4.0.0

   After the installation is complete, use the following command to create a new Django project:

   django-admin startproject myproject

   This will create a new Django project in the current directory named "myproject "'s new Django project.

4. Create Django views and URLs
   In the root directory of the Django project, open the settings.py file and add the following content to the INSTALLED_APPS setting:

   INSTALLED_APPS = [
    ...
    'rest_framework',
    'myapp',  // myapp是我们将要创建的应用的名称，根据需要修改
    ...
   ]

   Then, add the following at the end of the settings.py file:

   REST_FRAMEWORK = {
    'DEFAULT_PERMISSION_CLASSES': [
        'rest_framework.permissions.AllowAny',
    ]
   }

   This will configure Django to use the REST framework to create the API.

Next, create an application named "myapp" in the root directory of the Django project:

python manage.py startapp myapp

In the myapp directory, open the views.py file, And add the following:

from rest_framework.decorators import api_view
from rest_framework.response import Response

@api_view(['GET'])
def hello_world(request):
    return Response({'message': 'Hello World!'})

This is a simple view function that will return a JSON response containing "Hello World!" when we access the URL.

Next, in the myproject directory, open the urls.py file and add the following content:

from django.urls import path
from myapp.views import hello_world

urlpatterns = [
    path('api/hello/', hello_world),
]

This will align our view function with the URL path '/api/hello/' association.

5. Run the project
   Now, we have completed the basic configuration of Vue and Django. Next we need to connect the Vue application and the Django project.

In the root directory of the Vue project, open the "main.js" file and add the following content:

import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'

const app = createApp(App)
app.config.globalProperties.$http = axios
app.mount('#app')

This will globally configure the Vue application to use axios as the HTTP client.

In the root directory of the Vue project, open the "App.vue" file and add the following content:

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="getMessage">Get Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    getMessage() {
      this.$http.get('http://localhost:8000/api/hello/')
        .then(response => {
          this.message = response.data.message
        })
        .catch(error => {
          console.error(error)
        })
    }
  }
}
</script>

This will send a request to Django's view when the button is clicked and will return message is displayed on the page.

Now, we have completed all configuration. In the root directory of the Vue project, run the following command to start the Vue development server:

npm run serve

In the root directory of the Django project, run the following command to start the Django development server:

python manage.py runserver

Now, Visit "http://localhost:8080" in your browser and you will see a page containing a "Hello World!" button. When you click the button, the page will display "Hello World!".

This is an introductory guide to full-stack development with Vue3 and Django4. With the sample code in this article, you can learn how to build a basic Vue and Django application and connect them together. Hope this helps you on your full stack development journey!

The above is the detailed content of Basics to practice: Getting started with Vue3+Django4 full-stack development. For more information, please follow other related articles on the PHP Chinese website!