Practical drill: Vue3+Django4 full-stack development practice

Practical drill: Vue3 Django4 full-stack development practice

With the rapid development of the Internet, the development model of front-end and back-end separation has become the mainstream of modern web development. As two popular development frameworks, Vue and Django play an important role in front-end and back-end development. This article will introduce how to use Vue3 and Django4 for full-stack development, and demonstrate its practical process through a practical example.

1. Project planning

Before starting development, we first need to carry out project planning. We will create a simple task management system where users can log in, create tasks, view task lists, and update the status of tasks. The system will use Vue3 as the front-end framework, Django4 as the back-end framework, and use APIs for front-end and back-end communication.

2. Front-end development

1. Create Vue3 project
   First, we use Vue CLI to create a new Vue3 project. Execute the following command in the terminal:

   vue create frontend

   Copy after login

   Select the required configuration items according to the prompts and wait for the project to be created.

2. Set routing and page components
   Create the router.js file in the src directory and set the routing. We will have three pages: the login page, the task list page, and the task details page. Add the following code in router.js:

   import { createRouter, createWebHistory } from 'vue-router'
   import Login from './views/Login.vue'
   import TaskList from './views/TaskList.vue'
   import TaskDetail from './views/TaskDetail.vue'
   
   const routes = [
     {
    path: '/login',
    name: 'Login',
    component: Login
     },
     {
    path: '/taskList',
    name: 'TaskList',
    component: TaskList
     },
     {
    path: '/taskDetail/:id',
    name: 'TaskDetail',
    component: TaskDetail
     }
   ]
   
   const router = createRouter({
     history: createWebHistory(process.env.BASE_URL),
     routes
   })
   
   export default router

   Copy after login
3. Create page components
   Create Login.vue, ## in the src/views directory #TaskList.vue and TaskDetail.vue three page components, and write related HTML and logic. The specific code is no longer shown here, readers can create relevant components by themselves as needed.
Send API request
4. Create the
   api.js file in the src directory for sending API requests. Here we use the Axios library to send HTTP requests. The specific API request code can be written according to the design of the back-end API.
Integrate Vuex
5. Create the
   store.js file in the src directory and configure Vuex. We will store user information and task list data in the store, and modify and obtain this data through mutations and actions.

At this point, our front-end development work is completed. You can start the development server by executing the

npm run serve command, and access http://localhost:8080 in the browser to view the page.

3. Back-end development

1. Create Django4 project

   Execute the following command in the terminal to create a new Django4 project:
   

   django-admin startproject backend

   Copy after login

2. Create application

   Enter the project directory and execute the following command to create a new application:
   

   cd backend
   python manage.py startapp tasks

   Copy after login

3. Set the database and model

   In the project settings Configure the database information in .py and create the required model in models.py of the tasks application. For example, the task model can be defined as follows:
   

   from django.db import models
   
   class Task(models.Model):
    title = models.CharField(max_length=200)
    description = models.TextField()
    status = models.CharField(max_length=20)
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)

   Copy after login

Create API view
4. Create the API view in views.py of the tasks application and define related routes. Using Django's Rest Framework makes it easier to create API views and routes.
   
Configuring CORS
5. Since the front-end and back-end run on different domain names or ports, we need to configure cross-domain resource sharing (CORS). Cross-domain requests can be implemented by configuring settings.py.
   

4. Front-end and back-end integration

1. Run the back-end server

   Execute the following command in the terminal to start the Django development server:
   

   python manage.py runserver

   Copy after login
Configuring the front-end API request
2. Configure the base URL of the API request in the front-end
   api.js file so that it points to the address and port of the back-end server.
Configure front-end routing
3. Configure routing in the front-end
   router.js file according to actual needs.

Now, our front-end and back-end integration work has been completed. You can test the functionality of your application and communicate with the backend by accessing the frontend's URL.

5. Summary

This article introduces how to use Vue3 and Django4 for full-stack development, and demonstrates its practical process through a practical example. Through the front-end and back-end separation development model, we can develop and maintain powerful web applications more efficiently. I hope this article can provide some inspiration to beginners and help in actual development. If there are any deficiencies, please correct me.

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