Step by step: Vue3+Django4 full stack project implementation steps

Step by step: Vue3 Django4 full-stack project implementation steps

With the continuous development of web development, full-stack development has gradually become a trend. Vue and Django are one of the most popular technology stacks in front-end and back-end development, and their combination is also very powerful. In this article, we will introduce step by step how to implement a full stack project using Vue3 and Django4.

1. Preparation
   First, we need to install Node.js and Python locally, as well as the corresponding package managers npm and pip. At the same time, we also need an integrated development environment (IDE), such as VS Code.

2. Create Django project
   Open the terminal, enter the directory where you want to create the project, and execute the following command to create the Django project:

   django-admin startproject myproject

3. Create Django application
   Enter the project directory and execute the following command to create a Django application:

   cd myproject
   python3 manage.py startapp myapp

4. Configure Django database
   Open the settings.py file and configure the database information, such as using SQLite:

   DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
   }

5. Create database model
   Define your database model in the models.py file. For example, we create a User model:

   from django.db import models
   
   class User(models.Model):
    name = models.CharField(max_length=100)
    email = models.EmailField()
    password = models.CharField(max_length=100)

6. Perform database migration
   Run the following command to perform database migration:

   python3 manage.py makemigrations
   python3 manage.py migrate

7. Create Django Views
   Write your Django view functions in the views.py file. For example, we create a view function to get all users:

   from django.shortcuts import render
   from django.http import JsonResponse
   from .models import User
   
   def get_users(request):
    users = User.objects.all()
    data = [{'name': user.name, 'email': user.email} for user in users]
    return JsonResponse({'users': data})

8. Create Vue project
   In the terminal, enter the directory where you want to create a Vue project, and execute the following command to create Vue Project:

   vue create myproject

9. Configure Vue proxy
   Configure the Vue proxy in the myproject/vue.config.js file and proxy the request to the Django backend:

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

10. Create Vue component
    Create a Users.vue component in the src/views directory to display the user list:

    <template>
      <div>
     <ul>
       <li v-for="user in users" :key="user.name">
         {{ user.name }} - {{ user.email }}
       </li>
     </ul>
      </div>
    </template>
    
    <script>
    export default {
      data() {
     return {
       users: []
     }
      },
      created() {
     this.getUsers()
      },
      methods: {
     getUsers() {
       axios.get('/api/users')
         .then(response => {
           this.users = response.data.users
         })
     }
      }
    }
    </script>

11. Configure Vue routing
    Configure Vue's routing in the src/router/index.js file and use the Users.vue component as a route:

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    import Users from '../views/Users.vue'
    
    Vue.use(VueRouter)
    
    const routes = [
      {
     path: '/',
     name: 'Users',
     component: Users
      }
    ]
    
    const router = new VueRouter({
      mode: 'history',
      base: process.env.BASE_URL,
      routes
    })
    
    export default router

12. Run the project
    At the root of Django and Vue respectively Execute the following command in the directory to run the project:

    python3 manage.py runserver
    npm run serve

Now, you can visit http://localhost:8080 in the browser to view your full-stack project. The Users component will get the data from the Django backend and display it on the page.

Summary:
Through the above steps, we successfully implemented a full-stack project using Vue3 and Django4. By integrating front-end and back-end development, we can develop powerful web applications more efficiently. I hope this article will be helpful to you and make you better familiar with the full-stack development process of Vue and Django.

The above is the detailed content of Step by step: Vue3+Django4 full stack project implementation steps. For more information, please follow other related articles on the PHP Chinese website!