DRF+Vue.JS前后端分离项目实例(上):使用 Django-Rest-Framework快速实现 RESTful API 接口编程

在这里插入图片描述

1. RESTFul API 接口需求及设计

本文以学生信息查询功能为例,采用前后端分离架构,要求后端提供RESTFul 接口。

1.1 本例要求提供如下查询功能:

  • 列表查询、单条查询
  • 添加学生信息
  • 更改学生信息
  • 删除学生信息

1.2 数据库student表结构如下:

字段类型长度说明
namestring30学生姓名
nostring10学号
gendertiny int10: 男, 1: 女
ageint4年龄
class_namestring30班级名称
scoreint4成绩

1.3 按REST接口指导原则, RESTFul 风格API 设计如下

在开始之前,推荐阅读 REST接口基本原理

操作请求类型资源请求url请求数据
列表查询GEThttp://127.0.0.1:8000/student/
单条查询GEThttp://127.0.0.1:8000/student/<int:id>/
添加记录POSThttp://127.0.0.1:8000/student/{‘name’:‘Jack’, ‘no’:‘A001’,…}
更改记录PUThttp://127.0.0.1:8000/student/<int:id>/{‘name’:‘Jack’, ‘no’:‘B001’,…}
删除记录DELETEhttp://127.0.0.1:8000/student/<int:id>/

注意,RESTFul风格url 不需要在 url中添加操作动词,如 http://127.0.0.1:8000/student/list/。 当然这样做也可以,只是推荐方式更简洁。

2. 为什么使用Django-rest-framework来开发RESTful API?

Django 是最流行的Python Web开发框架,本身提供了ORM 数据库封装、模板、视图、路由、权限与鉴权, 管理后台等完整的工具链,各种功能开箱即用。 django-rest-framework (简称DRF) 继承了django框架的上述优点,开发与部署不需要第3方库的支持就可以轻松完成数据库CRUD的 REST API开发,并提供完善的鉴权、分级权限控制、测试页面等功能,可以快速地开发出一套高质量的REST API。

其它的框架,如 Flask-Rest,实际应用时,还需要集成数据接口库、鉴权、权限管理等第3方库来完成,测试也需要第3方工具支持,在集成配置,代码质量控制上,难度显然增大了,最终投入成本往往超过django-rest-framework。当然如果你是有经验的Flask开发人员则另当别论。

3. 创建django 项目

3.1 安装 django-rest-framework

创建与激活虚拟环境

python3 -m venv env_rest
cd env_rest
.\script\activate   # 激活虚拟环境

pip install django
pip install djangorestframework

在linux下激活虚拟环境命令为

source env_test/bin/activate 

安装django-rest-framework

pip install django
pip install djangorestframework

3.2 创建django 项目与应用

新建1个项目

django-admin startproject RestTutorial

在RestTutorial 项目下,新建1个app

cd RestTutorial
python manage.py startapp student_rest

3.3 修改全局配置

打开RestTutorial/RestTutorial/settings.py 文件,添加以下配置

INSTALLED_APPS = [
    ...
    'rest_framework',   # 导入DRF库
    ‘student_rest’,    # 导入新建app
]

# 设置分页器
REST_FRAMEWORK = {
    'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.PageNumberPagination',
    'PAGE_SIZE': 10
}


将语言与时区修改为中国的

LANGUAGE_CODE = 'zh-hans'
TIME_ZONE = 'Asia/Shanghai'
USE_I18N = True
USE_TZ = False

3.4 准备model

django默认使用sqlite3 数据库, 你可以将数据库后端 改为mysql, postgreSql 等你熟悉的数据库,细节略过。

**定义Student Model **

打开文件 RestTutorial/student_rest/models.py, 输入以下代码

from django.db import models
from django.urls import reverse


# 学生信息model 定义
class Student(models.Model):
    name = models.CharField(max_length=30,verbose_name="姓名")
    no = models.CharField(max_length=10,verbose_name="学号")    
    gender = models.IntegerField(max_length=10,verbose_name="性别")
    age = models.IntegerField(verbose_name="年龄")
    class_name = models.CharField(max_length=30,verbose_name="班级")
    score = models.IntegerField(verbose_name="成绩")

    def __str__(self) -> str:
        return self.name

    class Meta:
        db_table = "student"
        managed = True
        verbose_name = "学生表"
        verbose_name_plural = verbose_name
        unique_together = ['no']

模型定义好以后,需要更新数据库。

python manage.py makemigrations
python manage.py migrate  

3.5 将 Student 模型加入到管理后台

为了添加数据方便,可以将新建的model 添加到django管理后台,添加初始数据更加方便

打开 RestTutorial/student_rest/admins.py 文件,添加如下代码

from django.contrib import admin
from .models import *

# Register your models here.

class StudentAdmin(admin.ModelAdmin):
    list_display = ['id','name','no','gender','age','class_name','score']
    list_per_page = 10
    
admin.site.register(Student, StudentAdmin)   

3.6 启动项目,添加初始数据

创建1个管理员帐号,并启动项目:

python manage.py createsuperuser 
python manage.py runserver 0.0.0.0:8000

如下出现如下信息,就表示运行成功

System check identified 1 issue (0 silenced).
July 06, 2023 - 13:52:06
Django version 3.2.8, using settings 'RestTutorial.settings'
Starting development server at http://0.0.0.0:8000/
Quit the server with CTRL-BREAK.

打开浏览器,输入 http://127.0.0.1:8000/admin/ ,登录后,进入管理后台。

打开学生表,添加初始数据,
在这里插入图片描述

4. DRF编程实现RESTful 接口

DRF 编程很关键的一步是定义Serializer 类,用于将 model 数据序列化。其使用方式与django Form 表单非常相似。
DRF 视图可采用函数式编程,或Class Based View(CBV)视图类的方式编程,并且DRF内置了各种通用视图类来简化编程。

4.1 自定义Serializer 类

新建文件: tutorial/student_rest/serializers.py,, 输入以下代码

from rest_framework import serializers
from .models import Student


class StudentSerializer(serializers.ModelSerializer):
    class Meta:
        model = Student
        fields = "__all__"

4.2 用函数式编程实现视图功能

DRF对视图编程,提供了@api_view() 装饰器来实现函数式编程,通常响应仅提供Json字节串,不提供DRF特有的接口测试页面功能。
打开 RestTutorial/student_rest/views.py, 文件,输出以下代码

from django.shortcuts import render
from django.http import JsonResponse, HttpResponse
from rest_framework.parsers import JSONParser
from django.views.decorators.csrf import csrf_exempt
from rest_framework.decorators import api_view
from rest_framework import status
from .models import Student
from .serializers import StudentSerializer


# Create your views here.

# @csrf_exempt
@api_view(['GET','POST'])
def student_list(request):
    if request.method == 'GET':
        # 获取所有数据步骤: 1.获取数据 2.序列化 3.用json格式发送数据
        qs = Student.objects.all()
        serilizer = StudentSerializer(qs, many=True)
        print(serilizer.data)
        return JsonResponse(serilizer.data, safe=False)
    elif request.method =='POST':
        # 新增一条数据的步骤: 1.获取数据 2.反序列化 3.保存至数据库 4.发送结果 
        data = JSONParser().parse(request)
        serilizer = StudentSerializer(data=data)
        if serilizer.is_valid():
            serilizer.save()
            return JsonResponse(serilizer.data, status=status.HTTP_201_CREATED)
        return JsonResponse(serilizer.errors, status=status.HTTP_400_BAD_REQUEST)

def student_detail(request,pk):
    # retrieve, update or delete a row of student model 
    
    # 读取单条数据
    try: 
        row = Student.objects.get(pk=pk)
    except Student.DoesNotExist:
        return HttpResponse(status=status.HTTP_404_NOT_FOUND)
    
    if request.method == 'GET':
        serializer = StudentSerializer(row)
        return JsonResponse(serializer.data)
    elif request.method == 'PUT':
        input_data = JSONParser().parse(request)
        serializer = StudentSerializer(row, data=input_data)
        if serializer.is_valid():
            serializer.save()
            return JsonResponse(serializer.data, status=status.HTTP_200_OK)
    elif request.method == 'DELETE':
        row.delete()
        return HttpResponse(status=status.HTTP_204_NO_CONTENT)

打开 tutorial/student_rest/urls.py, 输入


from django.urls import path
from student_rest import views, views_cbv


urlpatterns = [
    path('v1/', views.student_list),             # 用于函数式View测试, list, create
    path('v1/<int:pk>/', views.student_detail),  # 用于函数式View测试, retrieve, update, delete

]

url中加入了v1/主要是为了与下一章CBV视图类路由做个区分。
在打开项目的路由本置文件 RestTutorial/RestTutorial/urls.py, 加入一条路由

from django.contrib import admin
from django.urls import path,include
from student_rest import views

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

4.3 运行并验证

运行项目,
python manage.py runserver 0.0.0.0:8000

前面提到过, 函数式编程不提供测试界面,因此测试接口需要使用第3方工具。
由于浏览器无法发送 post, put, delete消息, 因此建议使用postman 或 curl 等工具来测试
打开postman, 查询所有记录:GET http://127.0.0.1:8000/student/v1/,
在这里插入图片描述
测试 添加数据的接口: POST http://127.0.0.1:8000/student/v1/
注意, body 选择raw, json, 手工输入要添加的数据,json格式。
在这里插入图片描述
再用list 接口查询,可以看到数据已添加成功。

5. 使用视图类实现REST API

DRF的函数式编程,相对于其它编程语言已经非常简便了。 但前一章可以看出,post, put 实际上还要做校验与保存等工作,delete要做删除等动作,实际应用时可能更多。如果有多个模式,每个类都要写重复语句。为节省这些精力,DRF提供了视图类,混入类来帮助简化编程,同时还提供了测试界面的功能。

5.1 CBV 视图类实现代码

下面我们新建1个文件 RestTutorial/student_rest/views_cbv.py, 输入以下代码

from django.shortcuts import render
from django.http import HttpResponse
from django.views.decorators.csrf import csrf_exempt
from .models import Student
from .serializers import StudentSerializer
from rest_framework import generics
from rest_framework.permissions import IsAdminUser

class StudentList(generics.ListCreateAPIView):
    queryset = Student.objects.all()
    serializer_class = StudentSerializer

class StudentDetail(generics.RetrieveUpdateDestroyAPIView):
    queryset = Student.objects.all()
    serializer_class = StudentSerializer

非常简洁地就实现了第4章的全部功能。 下面为新的视图类添加路由;
打开 tutorial/student_rest/urls.py, 添加

    path("v2/", views_cbv.StudentList.as_view()), # 用于Class-based View测试, list, create
    path("v2/<int:pk>/", views_cbv.StudentDetail.as_view()), # 用于Class-based View测试, retrieve, update, delete

5.2 验证

再次运行项目, 这次不需要第3方工具,就可以进行完整测试
打开浏览器, 输入 http://127.0.0.1:8000/student/v2/ , 页面显示如下:
在这里插入图片描述
页面最下方提供了添加学习数据的post接口测试功能。

再打开detail view 页面,如http://127.0.0.1:8000/student/v2/6/, 页面如下:
在这里插入图片描述
页面下方,是 PUT更改数据的测试接口,上方有delete 按钮,用于测试delete 接口。 接口数据显示也非常友好,也便于前端开发人员阅读。

对于较正式的项目,本人推荐使用django test模块,编写自动化测试脚本,也不需要selenium等第3方测试工具支持。

总结

使用 django-rest-framework 开发基于数据库CRUD的 REST API, 提供完整的内置工具箱,便得整个开发以及测试过程方便快捷,同时,django提供了强大的扩展功能,对于项目的后期扩展、维护也带来了便利。
因此,使用 django-rest-framework 框架进行REST API开发,是中小项目非常不错的选择。

完整项目代码: 点击下载

  • 2
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
本季课程把开发知识拆解到项目里,让你在项目情境里学知识。这样的学习方式能让你保持兴趣、充满动力,时刻知道学的东西能用在哪、能怎么用。平时不明白的知识点,放在项目里去理解就恍然大悟了。  一、融汇贯通本视频采用了前后端分离的开发模式,前端使用Vue.js+Element UI实现了Web页面的呈现,后端使用PythonDjango REST Framework框架实现了数据访问的接口,前端通过Axios访问后端接口获得数据。在学习完本章节后,真正理解前后端的各自承担的工作。 二、贴近实战本课程为学生信息管理系统课程:Vue3 + Vite + ElementPlus + Django REST Framework项目实战 本季课程主学生信息管理系统V5.0,内容包含:Django REST framework安装和项目初始化、数据的序列化、ViewSet视图集、DefaultRouter路由类、django-filter实现过滤、rest framework实现查找、rest framework实现分页、npm的使用使用Vite构建vue3项目、Package.json解析、ElementPlus安装和应用vue-router实现路由、使用Vuex的store对象、后台管理系统主界面的布局、axios组件的安装和请求、axios请求的模块化、请求拦截器和响应拦截器、使用el-select实现联级下拉、使用cascader实现联级选择、vue表单的验证、实现学生信息的添加、修改和删除、实现文件的上传等等功能 本案例完整的演示了项目实现过程,虽然不复杂,但涉及的内容非常多,特别是前后端交互的时候,有诸多的坑等着你去踩,好在王老师全程代码呈现,带着大家一起填坑,大大提高学习效率的同时,也培养了大家良好的代码习惯,希望大家一起跟着王进老师学习Python开发。三、后续课程预告:VueDjango REST Framework实现JWT登录认证 
在前面的文章中,我们已经学习了如何使用DjangoDRF创建RESTful API,并使用Vue.js作为前端框架来消费API。在本文中,我们将继续学习如何使用Vue.js和Axios来实现前端和后端的分离。 ## 1. 创建Vue.js项目 首先,我们需要创建一个Vue.js项目。我们可以使用Vue CLI来创建一个新的项目。在命令行中运行以下命令: ``` vue create frontend ``` 这将创建一个名为“frontend”的新Vue.js项目。在创建项目时,您将被要求选择要使用的其他插件和库。您可以根据需要选择这些选项。 创建项目后,我们需要将其连接到我们的Django后端。 ## 2. 连接到Django后端 为了连接到Django后端,我们需要使用Axios。Axios是一个用于从Web浏览器或Node.js中创建HTTP请求的JavaScript库。我们可以使用Axios来发送HTTP请求并从后端获取数据。 在Vue.js项目使用Axios非常简单。我们只需要将Axios添加到我们的项目中并使用它来发送请求。 首先,我们需要安装Axios。在命令行中运行以下命令: ``` npm install axios ``` 接下来,在我们的Vue.js应用程序中,我们需要导入Axios并使用它来发送HTTP请求。在Vue.js应用程序的主JavaScript文件中添加以下代码: ```javascript import Vue from 'vue' import App from './App.vue' import axios from 'axios' Vue.config.productionTip = false Vue.prototype.$http = axios new Vue({ render: h => h(App), }).$mount('#app') ``` 这将使我们能够使用Axios来发送HTTP请求。现在,我们可以使用Axios从Django后端获取数据。 ## 3. 从DRF获取数据 为了从DRF获取数据,我们需要使用Django REST framework的API视图。API视图允许我们使用DRF来创建RESTful API,并从前端获取数据。 在我们的Django后端中,我们已经创建了一个API视图,该视图允许我们从数据库中获取数据。我们可以使用Axios来从该API视图中获取数据。 在我们的Vue.js应用程序中,我们可以使用Axios来发送HTTP GET请求并从API视图中获取数据。我们可以将以下代码添加到Vue.js应用程序的主JavaScript文件中: ```javascript import Vue from 'vue' import App from './App.vue' import axios from 'axios' Vue.config.productionTip = false Vue.prototype.$http = axios new Vue({ render: h => h(App), mounted() { // Fetch the data from the API this.$http.get('http://localhost:8000/api/data/') .then(response => { // Set the data to the response data this.$store.commit('setData', response.data) }) } }).$mount('#app') ``` 在这个代码片段中,我们使用Axios发送HTTP GET请求并从API视图中获取数据。我们使用`this.$store.commit`方法将数据存储在Vue.js应用程序的状态管理器中。 ## 4. 在Vue.js使用数据 现在,我们已经从DRF获取了数据,我们可以在Vue.js应用程序中使用这些数据。为此,我们可以使用Vue.js的模板语言和组件。 在Vue.js中,我们可以使用模板语言来将数据呈现为HTML。我们可以使用组件来将数据分解为可重用的块。 例如,我们可以创建一个名为“DataList”的Vue.js组件,该组件可以接受从DRF获取的数据并将其呈现为HTML列表。我们可以在Vue.js应用程序的`components`文件夹中创建一个新文件,并将以下代码添加到该文件中: ```vue <template> <div> <ul> <li v-for="(item, index) in data" :key="index">{{ item.name }}</li> </ul> </div> </template> <script> export default { name: 'DataList', props: { data: Array } } </script> ``` 在这个代码片段中,我们创建了一个名为“DataList”的Vue.js组件。该组件接受一个名为“data”的属性,并将其呈现为HTML列表。我们使用Vue.js的`v-for`指令将数据项映射到HTML列表中。 现在,我们可以在我们的Vue.js应用程序中使用这个组件并将从DRF获取的数据传递给它。为此,我们可以将以下代码添加到Vue.js应用程序的主JavaScript文件中: ```javascript import Vue from 'vue' import App from './App.vue' import axios from 'axios' import DataList from './components/DataList' Vue.config.productionTip = false Vue.prototype.$http = axios Vue.component('DataList', DataList) new Vue({ render: h => h(App), mounted() { // Fetch the data from the API this.$http.get('http://localhost:8000/api/data/') .then(response => { // Set the data to the response data this.$store.commit('setData', response.data) }) } }).$mount('#app') ``` 在这个代码片段中,我们使用Vue.js的`Vue.component`方法注册了一个名为“DataList”的组件。我们还从DRF获取数据并将其存储在Vue.js应用程序的状态管理器中。 现在,我们可以在Vue.js应用程序的模板中使用“DataList”组件,并将从DRF获取的数据传递给它。为此,我们可以将以下代码添加到Vue.js应用程序的模板中: ```vue <template> <div> <h1>Data List</h1> <DataList :data="data" /> </div> </template> ``` 在这个代码片段中,我们使用Vue.js的“DataList”组件,并将从DRF获取的数据传递给它。 ## 5. 总结 在本文中,我们学习了如何使用Axios从DRF获取数据,并将数据传递给Vue.js组件。我们还学习了如何使用Vue.js的模板语言和组件来呈现数据。 使用DRFVue.js可以轻松创建RESTful API,并实现前端和后端的分离。这使得我们能够更快地开发Web应用程序,并改进Web应用程序的可维护性和可扩展性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值