登录
首页 >  文章 >  前端

构建全栈应用：Vue3+Django4实战案例

时间：2023-09-29 10:48:11 205浏览 收藏

本篇文章给大家分享《构建全栈应用：Vue3+Django4实战案例》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

构建全栈应用：Vue3+Django4实战案例

引言：
随着移动互联网的发展，全栈开发越来越受到关注。全栈开发工程师能够独立完成前后端开发，提高开发效率。在这篇文章中，我们将介绍如何使用最新的Vue3和Django4构建一个全栈应用，并提供一个实战案例。

一、Vue3框架简介
Vue3是目前最流行的前端框架之一，它采用了一种称为“组合式API”的全新API风格，使得代码更加可读、可维护。Vue3还引入了一些新特性，如Teleport、Suspense、Fragment等，使得开发体验更加丰富。

在编写Vue3应用之前，我们首先需要安装和配置Vue3的开发环境。我们可以使用npm或yarn来安装Vue3：

$ npm install -g @vue/cli

二、Django框架简介
Django是一个高效、灵活和安全的Python Web开发框架，它提供了一整套用于处理Web请求、访问数据库、处理表单等的组件。使用Django可以轻松构建复杂的Web应用程序。

为了使用最新的Django4，我们首先需要安装Python和Django。我们可以使用pip命令来安装Django：

$ pip install Django

三、构建全栈应用
现在，我们已经准备好构建一个全栈应用了。我们将使用Vue3作为前端框架，Django作为后端框架，来构建一个简单的任务管理应用。

  1. 创建Django项目
    首先，我们需要创建一个Django项目。打开命令行窗口，运行以下命令：
$ django-admin startproject task_manager

该命令将在当前目录下创建一个名为task_manager的Django项目。

  1. 创建Django应用
    接下来，我们需要在Django项目中创建一个应用。在命令行中运行以下命令：
$ cd task_manager
$ python manage.py startapp tasks

该命令将在Django项目中创建一个名为tasks的应用。

  1. 定义数据库模型
    在Django项目中，我们需要定义数据库模型来存储任务数据。打开tasks/models.py文件，添加以下代码：
from django.db import models

class Task(models.Model):
    title = models.CharField(max_length=100)
    description = models.TextField()
    created_at = models.DateTimeField(auto_now_add=True)

这将定义一个名为Task的模型，它包含了任务的标题、描述和创建时间。

  1. 创建API视图
    接下来，我们需要创建用于处理API请求的视图函数。打开tasks/views.py文件，添加以下代码：
from rest_framework.decorators import api_view
from rest_framework.response import Response

from .models import Task
from .serializers import TaskSerializer

@api_view(['GET', 'POST'])
def task_list(request):
    if request.method == 'GET':
        tasks = Task.objects.all()
        serializer = TaskSerializer(tasks, many=True)
        return Response(serializer.data)
    elif request.method == 'POST':
        serializer = TaskSerializer(data=request.data)
        if serializer.is_valid():
            serializer.save()
            return Response(serializer.data, status=201)
        return Response(serializer.errors, status=400)

这将定义一个名为task_list的视图函数，用于处理GET和POST请求。GET请求返回所有任务列表，而POST请求用于创建新的任务。

  1. 创建API序列化器
    在Django项目中，我们需要创建序列化器来进行数据的序列化和反序列化。序列化器负责将数据库模型转换为JSON格式的数据，并将JSON数据转换为数据库模型。在tasks目录下创建一个名为serializers.py的文件，添加以下代码：
from rest_framework import serializers

from .models import Task

class TaskSerializer(serializers.ModelSerializer):
    class Meta:
        model = Task
        fields = ['id', 'title', 'description', 'created_at']

这将定义一个名为TaskSerializer的序列化器，用于对Task模型进行序列化和反序列化。

  1. 配置URL路由
    最后，我们需要配置URL路由，将API视图映射到特定的URL。打开task_manager/urls.py文件，添加以下代码：
from django.urls import path

from tasks.views import task_list

urlpatterns = [
    path('api/tasks/', task_list, name='task-list'),
]

这将配置一个名为task-list的URL路由，它将task_list视图函数映射到/api/tasks/路径。

四、构建Vue3应用
现在，我们已经完成了后端的搭建，接下来我们将使用Vue3构建前端页面。

  1. 创建Vue3项目
    首先，我们需要创建一个Vue3项目。在命令行中运行以下命令：
$ vue create task-manager

该命令将创建一个名为task-manager的Vue3项目。

  1. 安装依赖模块
    在创建项目后，我们需要安装一些依赖模块。在命令行中运行以下命令：
$ cd task-manager
$ npm install axios

axios是一个强大的HTTP客户端，用于发送异步请求。我们将使用axios来与Django后端进行通信。

  1. 编写Vue组件
    然后，我们需要编写一些Vue组件来展示任务列表和创建新任务的界面。打开src/components目录下的TaskList.vue文件，添加以下代码：
<template>
  <div>
    <h1>Task List</h1>
    <ul>
      <li v-for="task in tasks" :key="task.id">
        {{ task.title }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tasks: []
    }
  },
  mounted() {
    this.fetchTasks()
  },
  methods: {
    async fetchTasks() {
      const response = await this.$http.get('/api/tasks/')
      this.tasks = response.data
    }
  }
}
</script>

这将定义一个名为TaskList的Vue组件，用于展示任务列表。

然后，创建一个名为CreateTask.vue的文件，添加以下代码：

<template>
  <div>
    <h1>Create Task</h1>
    &lt;input type=&quot;text&quot; v-model=&quot;title&quot; placeholder=&quot;Title&quot;&gt;
    &lt;input type=&quot;text&quot; v-model=&quot;description&quot; placeholder=&quot;Description&quot;&gt;
    <button @click="createTask">Create</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '',
      description: ''
    }
  },
  methods: {
    async createTask() {
      const data = {
        title: this.title,
        description: this.description
      }
      await this.$http.post('/api/tasks/', data)
      this.title = ''
      this.description = ''
      this.$emit('task-created')
    }
  }
}
</script>

这将定义一个名为CreateTask的Vue组件，用于创建新的任务。

  1. 修改App组件
    最后，我们需要修改App.vue组件，将TaskList和CreateTask组件添加到页面中。打开src/App.vue文件，修改以下代码：
<template>
  <div>
    <task-list @task-created="fetchTasks" />
    <create-task @task-created="fetchTasks" />
  </div>
</template>

<script>
import TaskList from './components/TaskList.vue'
import CreateTask from './components/CreateTask.vue'

export default {
  components: {
    TaskList,
    CreateTask
  },
  methods: {
    fetchTasks() {
      this.$refs.taskList.fetchTasks()
    }
  }
}
</script>

这将使得TaskList和CreateTask组件在App页面中正常显示，并且当创建任务后会触发fetchTasks方法。

五、运行应用
现在，我们已经完成了前后端的开发工作，可以运行应用进行测试了。

  1. 启动Django后端
    在命令行中运行以下命令，启动Django后端服务器：
$ cd task_manager
$ python manage.py runserver
  1. 启动Vue3前端
    在一个新的命令行窗口中运行以下命令，启动Vue3前端服务器：
$ cd task-manager
$ npm run serve
  1. 测试应用
    现在，打开浏览器，访问http://localhost:8080，就可以看到应用的界面了。在任务列表中，可以看到已经创建的任务，点击“Create Task”按钮，可以创建新的任务。

结束语：
通过本文的介绍，我们了解了如何使用Vue3和Django4构建全栈应用的基本步骤。通过实战案例，我们学习了如何在Vue3中发送请求，并在Django中处理请求数据。希望本文对您的全栈开发学习之路有所帮助。

理论要掌握，实操不能落！以上关于《构建全栈应用：Vue3+Django4实战案例》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！

前往漫画官网入口并下载 ➜
Django VUE 全栈应用
相关阅读
更多>
最新阅读
更多>
318 收藏
课程推荐
更多>