Practical experience sharing: Vue3+Django4 full-stack project development guide

Practical experience sharing: Vue3 Django4 full-stack project development guide

Introduction:
In today's era of highly developed Internet, full-stack development has become more and more A direction that many developers pay attention to and learn from. The Vue framework is currently one of the most popular front-end frameworks, and Django is a powerful Python back-end framework. Their combination can provide us with a comprehensive full-stack development experience. This article will introduce how to use Vue3 and Django4 to build a complete full-stack project, and share some development experience and code examples.

1. Environment preparation
Before starting the project, you need to prepare the environment. Make sure you have the following software installed:

1. Node.js and npm: used to install and manage front-end dependencies.
2. Python and pip: used to install and manage back-end dependencies.
3. Vue CLI: Command line tool for creating Vue projects.
4. Django: used to create and manage backend projects.

2. Create a Vue3 project
First, we use Vue CLI to create a Vue3 project. Open the command line interface and execute the following command:

$ vue create vue_project

Follow the command line prompts, select the configuration you need, and wait for the project to be created.

3. Create a Django project
Next, we use Django to create a back-end project. Execute the following command on the command line interface:

$ django-admin startproject django_project

This will create a folder named django_project in the current directory and generate the skeleton of a project.

4. Configure the front-end and back-end connections
In this step, we need to configure the front-end and back-end connections so that the front and back ends can communicate with each other. First, create a file .env.development in the vue_project/src directory and add the following content:

VUE_APP_BACKEND_URL=http://localhost:8000

Herehttp://localhost:8000 is The address where the Django backend is running.

Next, open the vue_project/src/main.js file and add the following code before createApp:

import axios from 'axios'
axios.defaults.baseURL = process.env.VUE_APP_BACKEND_URL

This code snippet sets the default base URL of axios to The backend address we just configured.

5. Develop the front-end page
Now, we can start developing the front-end page. The syntax of Vue3 is slightly different from Vue2, but generally similar. Vue3 provides a more powerful combined API that can better manage code logic. Below is a simple example.

First, create a component file named HelloWorld.vue in the vue_project/src/components directory and add the following content:

<template>
  <div class="hello">
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  name: 'HelloWorld',
  setup() {
    const message = ref('Hello, Vue3!')
    return {
      message
    }
  }
}
</script>

<style scoped>
h1 {
  color: red;
}
</style>

This component displays a The red title, the title content is set through the responsive variable defined by ref.

In order to use this component in the page, we need to introduce it in vue_project/src/App.vue. First, delete the original content, and then add the following code:

<template>
  <div id="app">
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: 'Arial', sans-serif;
}
</style>

Here we import the HelloWorld.vue component we just created and reference it in the page.

6. Develop back-end API
In the Django project, we need to create an API to provide back-end services. Take creating a simple user API as an example.

First, execute the following command in the django_project directory to create an application named users:

$ python manage.py startapp users

Create an application named views in the users directory. py file and add the following code:

from django.http import JsonResponse

def get_users(request):
    users = [
        {"id": 1, "name": "Alice"},
        {"id": 2, "name": "Bob"},
        {"id": 3, "name": "Charlie"}
    ]
    return JsonResponse(users, safe=False)

This simple view function returns a JSON response with user information.

Next, open the django_project/django_project/urls.py file and add the following code:

from django.urls import path
from users.views import get_users

urlpatterns = [
    path('api/users', get_users),
]

This code snippet maps the get_users view function to the path /api/users.

7. Front-end and back-end communication
In order for the front-end to access the back-end API, we need to use axios to send HTTP requests. Go back to the vue_project/src/components/HelloWorld.vue file and add the following code in the setup function:

import axios from 'axios'
export default {
  name: 'HelloWorld',
  setup() {
    const message = ref('Hello, Vue3!')
    axios.get('/api/users').then((response) => {
      console.log(response.data)
    })
    return {
      message
    }
  }
}

This code snippet uses axios to send a GET request to /api/ users and print the returned data.

8. Run the project
Finally, we only need to run the front-end and back-end projects separately.

Execute the following command in the vue_project directory:

$ npm install
$ npm run serve

Execute the following command in the django_project directory:

$ python manage.py runserver

Now, open the browser and visit http:// localhost:8080, if everything goes well, you should be able to see the data returned by the backend API in the console.

Summary:
This article introduces how to use Vue3 and Django4 to build a complete full-stack project, and shares some practical experience and code examples. Through this full-stack development approach, we can build web applications with front-end and back-end separation more efficiently. I hope this article can help developers who are learning full-stack development.

The above is the detailed content of Practical experience sharing: Vue3+Django4 full-stack project development guide. For more information, please follow other related articles on the PHP Chinese website!