如何用Django REST-API和Axios构建一个Vue应用程序

DebugUsery
386 阅读4分钟

用Django REST-API和Axios构建Vue应用程序

在开发应用程序时，使用API来消耗和显示数据是很常见的。这个过程可以使用Axios库来创建Vue.js应用程序，其中Django是一个基于python的后台框架，只使用Django rest框架包作为API。

为了帮助你掌握这个概念，我们将介绍使用Vue.js、Axios和Django REST API来消费和显示API的数据。

前提条件

读者应具备以下条件才能跟上本教程的进度。

  • 对[Django REST框架]和REST API的基本了解。
  • 对[Vue.js]和[Axios]库的了解。
  • 知道如何使用[PyCharm]、[Visual Studio Code]或任何其他IDE来处理[Python Django]和[Vue.js]。

简介

Django是一个基于Python的后端框架，用于创建本地应用程序或使用Django休息框架包的API。我们还可以将它与Vue.js（一个基于JavaScript的前端框架）结合起来构建应用程序。

这个过程是通过将Vue.js脚本直接纳入Django模板HTML代码而实现的。然而，我们也可以使用Django的API，使用名为Axios的HTTP客户端库来消费和显示数据。为了实现这一点，我们将与Django REST API和Axios一起创建一个简单的Vue Todo应用程序。

设置Django和Vue

你必须在你的机器上设置好Django、Vue.js和Axios库才能开始。首先，使用下面的命令来检查Django是否已经安装。

pip show Django

如果没有，用下面的命令安装它。

pip install Django

由于我们将使用Django REST API和Axios，我们需要安装Django rest framework 包来处理API请求，以及Django-cors-headers ，以允许通过Ajax完成请求。

pip install djangorestframework
pip install django-cors-headers

对于Vue.js和Axios库，我们使用下面的命令。

sudo npm install -g @vue/cli //for vue.js
npm install Axios

创建Django应用程序

设置好Django后，让我们创建我们的Todo应用程序和所有需要的模型。

Django TodoApp项目

我们首先创建Django项目并激活虚拟环境。

django-admin.py startproject TodoApp

要创建和激活虚拟环境。

virtualenv -p env
source bin/activate

在TodoApp文件夹里面，在INSTALLED_APPS部分的settings.py 文件里面添加已安装的Django rest_framework，和cors头文件。

接下来，使用下面的命令在完成所有迁移后运行应用程序。

python manage.py runserver

产生的输出应该是。

Django Output

注意：为了告诉Django项目接受连接，请确保在settings.py 文件中添加一行CORS_ORIGIN_ALLOW_ALL = True 。

Django TodoApp模型

我们需要在TodoApp 文件夹中使用所示命令创建Todo应用程序，然后在settings.py 文件中的INSTALLED_APPS部分添加该应用程序的名称。

python manage.py startapp todo

接下来，我们需要在以下命令的帮助下创建所需的超级用户和数据库模型。

python manage.py createsuperuser #set the username, email, and password

在todo应用程序文件夹下的models.py 文件内添加下面的代码片段来创建数据库。

class WorkTodo(models.Model):  
    WORKTODO = 'worktodo'
    WORKDONE = 'workdone'

    STATUS_CHOICES = (  
        (WORKTODO, 'Work To do'),
        (WORKDONE, 'Work Done')
    )

    work_description = models.CharField(max_length=255)  
    work_status = models.CharField(max_length=10, choices=STATUS_CHOICES,
                              default=WORKTODO)

由于我们使用rest_framework，我们需要在todo应用程序文件夹下创建另一个文件，名为serializers.py 。

这个文件与Django中的Form和ModelForm类比较相似。它为创建处理模型实例和查询集的序列化器提供了方便的快捷方式，也为管理响应的输出提供了一般方法。通过序列化器，数据会被转化为可以存储或传输的格式。

from rest_framework import serializers
from .models import WorkTodo

class WorkSerializer(serializers.HyperlinkedModelSerializer):
    class Meta:
        model = WorkTodo
        fields = ('id', 'work_description', 'work_status')

为了返回todo应用程序的任务，我们将代码片段添加到views.py 文件中。

from django.shortcuts import render
from .models import WorkTodo 
from .serializers import WorkSerializer 


from rest_framework import viewsets
from rest_framework.authentication import BasicAuthentication
from rest_framework.permissions import IsAuthenticated

class WorkViewSet(viewsets.ModelViewSet): 
    authentication_classes = (BasicAuthentication,)
    permission_classes = (IsAuthenticated,)
    queryset = WorkTodo.objects.all() 
    serializer_class = WorkSerializer

运行所有的数据库迁移，打开python shell，并执行下面的命令。

python manage.py shell 
>>> from todo.models import WorkTodo
>>> task1 = WorkTodo.objects.create(work_description='Cleaning')
>>> task2 = WorkTodo.objects.create(work_description='Reading')
>>> task3 = WorkTodo.objects.create(work_description='Cooking',work_status=1)
>>> WorkTodo.objects.all()
<QuerySet [<WorkTodo: WorkTodo object (1)>, <WorkTodo: WorkTodo object (2)>, <WorkTodo: WorkTodo object (3)>]>
>>>

Vue应用程序的API可访问性

为了让Vue应用程序能够查看API，在TodoApp/urls.py 文件中添加以下代码。

from Django.contrib import admin
from Django.URLs import path, include

from rest_framework import routers 

from todo.views import WorkViewSet 

router = routers.DefaultRouter() 
router.register(r'tasks', WorkViewSet)

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include(router.urls))
]

然后，我们通过输入创建超级用户时使用的用户名和密码来运行下面的CURL命令，以测试该应用程序。

$ curl -H 'Accept: application/json; indent=4' -u username:useranmepassword http://127.0.0.1:8000/tasks/

该命令会产生下面的输出。

Test Output

完整的Django代码可以在这里找到。

创建Vue应用程序

设置好Vue.js后，我们使用下面的命令创建并运行我们的项目。

vue create TodoApp
cd TodoApp
npm run serve

Vue Output

获取和显示应用程序数据

一旦Vue.js应用程序被创建，我们需要该应用程序使用Axios 库与后台通信，并显示任务。在src 文件夹下的HelloWorld.vue 文件中添加下面的代码片段。

<template>
  <div class="hello">
    <h1 class="title">TODO APP</h1> 

    <hr>

    <div class="columns">
      <div class="column is-one-third is-offset-one-third">
        <form>
          <h2 class="subtitle">Add the task</h2>

          <div class="field">
            <label class="label">Add Description</label>
            <div class="control">
              <input class="input" type="text">
            </div>
          </div>

          <div class="field"> 
            <label class="label">Select Status</label>
            <div class="control">
              <div class="select">
                <select>
                  <option value="worktodo">Work To do</option>
                  <option value="workdone">Work Done</option>
                </select>
              </div>
            </div>
          </div>

          <div class="field is-grouped"> 
            <div class="control">
              <button class="button is-link">Submit</button>
            </div>
          </div>
        </form>
      </div>
    </div>

    <hr>

    <div class="columns">
      <div class="column is-half"> 
        <h2 class="subtitle">Task Todo</h2>

       <div class="todo">
      <div class="card" v-for="task in tasks" v-if="task.status == 'todo'"> 
        <div class="card-content">
          <div class="content">
            {{ task.work_description }} 
          </div>
        </div>

        <footer class="card-footer">
          <a class="card-footer-item">Work Done</a>
        </footer>
      </div>
    </div>
  </div>
  </div>

  <div class="column is-half">
    <h2 class="subtitle">Work Done</h2>

    <div class="done">
      <div class="card" v-for="task in tasks" v-if="task.status == 'done'">
        <div class="card-content">
          <div class="content">
            {{ task.work_description }}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'HelloWorld',
  data () {
    return {
      tasks: [] 
    }
  },
  mounted () { 
    this.get_Tasks();
  },
  methods: {
    get_Tasks() {
        axios({
            method:'get',
            url: 'http://127.0.0.1:8000/tasks/',
            auth: {
                username: 'your username',
                password: 'your password'
            }
        }).then(response => this.tasks = response.data);
    }
  }
}
</script>

重新运行该项目，你应该看到两组任务。要完成的任务出现在左边，而已经完成的任务则在右边。

Final Output

总结

在本教程中，我们学习了如何使用Axios库在Vue.js应用程序中获取和显示数据，并使用Django框架作为后端API。

avatar
文章
阅读
粉丝