In-depth learning: Vue3+Django4 full-stack development examples

In-depth study: Vue3 Django4 full-stack development example

Overview:
With the rapid development of web applications, full-stack development has become a hot topic. As popular front-end and back-end frameworks, Vue and Django are widely used in full-stack development. This article will introduce how to use the latest versions of Vue3 and Django4 for full-stack development, and use a practical example to demonstrate its powerful functions and flexible scalability.

1. Environment setup:
   First, we need to ensure that Python, Node.js and Vue CLI have been installed correctly. You can install it using the following command:
2. Python installation: https://www.python.org/downloads/
3. Node.js installation: https://nodejs.org/
4. Vue CLI installation: npm install -g @vue/cli

5. Create Django project:
   First, we need to create a new Django project. Open the command line and create the project using the following command:

   django-admin startproject myproject

6. Create a Django application:
   Next, we need to create a Django application. Enter the project directory and create the application using the following command:

   cd myproject
   python manage.py startapp myapp

7. Configure Django routing:
   In the myproject/myproject/urls.py file, configure Django’s root route and myapp Sub-route:

   from django.urls import path, include
   
   urlpatterns = [
    path('api/', include('myapp.urls')),
   ]

8. Create Django view:
   In the myapp/views.py file, create Django’s view function:

   from django.shortcuts import render
   from django.http import JsonResponse
   
   def hello(request):
    return JsonResponse({'message': 'Hello, World!'})

9. Configure Django routing:
   In the myapp/urls.py file, configure the routing of myapp:

   from django.urls import path
   
   from . import views
   
   urlpatterns = [
    path('hello/', views.hello),
   ]

10. Start the Django server:
    Use the following command to start the Django development server ：

    python manage.py runserver

    Visit http://localhost:8000/api/hello/, you should be able to see the returned JSON data.

11. Create Vue project:
    Now, we need to create a new Vue project. Open the command line and use the following command to create the project:

    vue create myvueapp

    Note: When creating the project, select the default preset configuration, or configure it according to your own needs.

12. Configure the Vue development server agent:
    In the root directory of the Vue project, find the vue.config.js file (if not, please create a new one), and add the following configuration:

    module.exports = {
     devServer: {
         proxy: {
             '/api': {
                 target: 'http://localhost:8000',
                 ws: true,
                 changeOrigin: true
             }
         }
     }
    }

13. Create Vue component:
    In the src directory of the Vue project, find the App.vue file and replace its content with the following code:

    <template>
      <div>
     <h1 id="message">{{ message }}</h1>
      </div>
    </template>
    
    <script>
    export default {
      data() {
     return {
       message: ""
     };
      },
      mounted() {
     this.fetchData();
      },
      methods: {
     fetchData() {
       fetch("/api/hello/")
         .then(response => response.json())
         .then(data => {
           this.message = data.message;
         })
         .catch(err => {
           console.log(err);
         });
     }
      }
    };
    </script>

14. Start the Vue development server:
    Use the following command to start the Vue development server:

    cd myvueapp
    npm run serve

    Visit http://localhost:8080 and you should be able to see the data obtained from the Django API.

So far, we have successfully completed the Vue3 Django4 full-stack development example. Through this example, we learned how to set up a development environment, create Django projects and Vue projects, and how to configure routing, create views and components, and obtain data from the back-end API through AJAX.

Summary:
Through the study of this article, we have an in-depth understanding of the full-stack development of Vue3 and Django4, and practiced a practical case. Full stack development provides us with greater flexibility and efficiency, allowing us to handle both front-end and back-end needs simultaneously. I hope readers can have a deeper understanding of Vue3 Django4 full-stack development through this example, and be able to apply these knowledge and technologies in actual projects.

The above is the detailed content of In-depth learning: Vue3+Django4 full-stack development examples. For more information, please follow other related articles on the PHP Chinese website!