djangoapi接口开发（Django使用AJAX调用自己写的API接口的方法）

djangoapi接口开发

Django使用AJAX调用自己写的API接口的方法

在这个例子中，我们将使用django编写饿了么高校外卖商家查询api接口，并且使用ajax技术来实现api接口的使用，包括使用ajax get方法加载更多数据，使用ajax方法来更新、修改、新增、删除数据。利用api可以做到前后端分离，为开发web应用提供了便利。

 安装rest framework

首先使用pycharm新建一个django项目，并且使用virtualenv或者pipenv虚拟环境

创建成功会自动安装django2.1和所需依赖，restframework框架需要自己手动安装

?

1 2 3 4 5 6 7 8 9

//激活虚拟环境安装以下 (venv)$ pip install djangorestframework (venv)$ pip install django-filter (venv)$ pip install pytest (venv)$ pip install pytest-django //由于笔者使用postgresql数据库，所以还需要安装以下 (venv)$ pip install psycopg2 //使用mysql数据库安装如下 (venv)$ pip install pymysql

准备数据来提供服务

数据来源：饿了么爬虫

数据内容：全国所有大学附近的外卖商家top20

数据需要导入数据库

django编写rest api接口

项目结构

settings.py.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

// 安装的app如下 installed_apps = [  #...  'rest_framework',  'django_filters',  'api.apps.apiconfig',  'front.apps.frontconfig', ] //restframework 配置如下 rest_framework = { //这里配置了分页处理，每页最多20个项目 'default_pagination_class':'api.custompagination.limitoffsetpaginationwithupperbound',  'page_size': 20,  'default_filter_backends': (  //这里配置了排序、过滤、搜索器  'django_filters.rest_framework.djangofilterbackend',  'rest_framework.filters.orderingfilter',  'rest_framework.filters.searchfilter',  ),  //这里配置了用户认证，管理员才可以更改内容，未登录不能更改  'default_authentication_classes':(  'rest_framework.authentication.basicauthentication',  'rest_framework.authentication.sessionauthentication',  ),  //这里配置了访问次数限制，过多会返回429错误 too many requests  'default_throttle_classes': (  'rest_framework.throttling.anonratethrottle',  'rest_framework.throttling.userratethrottle',  ),  //这里配置了访问次数，anon代表匿名用户，user代表已登录用户，entries是我自己设置的作用域，300/hour代表最多300次每小时  'default_throttle_rates': {  'anon': '300/hour',  'user': '100/hour',  'entries': '200/hour',  },  'default_versioning_class':'rest_framework.versioning.namespaceversioning', }

models.py.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

from django.db import models class entry(models.model):  city = models.charfield(max_length=50)  school = models.charfield(max_length=100)  link = models.charfield(max_length=100,null=true,default='null')  name = models.charfield(max_length=200)  lat = models.charfield(max_length=20,null=true,default='0.0')  lng = models.charfield(max_length=20,null=true,default='0.0')  address = models.charfield(max_length=200,null=true,default='null')  distance = models.charfield(max_length=20,null=true,default='0')  time = models.charfield(max_length=20,null=true,default='0:00')  contact = models.charfield(max_length=200,null=true,default='null')  score = models.charfield(max_length=10,null=true,default='0')  comments = models.charfield(max_length=20,null=true,default='0')  sell = models.charfield(max_length=20,null=true,default='0')  image = models.charfield(max_length=200,null=true,default='null')  owner = models.foreignkey('auth.user',related_name='entries',on_delete=models.cascade)  # class meta:  # ordering = ('name',)  def __str__(self):  return self.name

serializers.py.

?

1 2 3 4 5 6 7 8 9

from rest_framework import serializers from api.models import entry //这里继承自超链接模型序列器，用于把数据转换为json格式，并且显示链接 class entryserializer(serializers.hyperlinkedmodelserializer):  owner = serializers.readonlyfield(source='owner.username')  class meta:  model = entry  fields = ('url','pk','name','city','school','link','lat','lng','address','distance','time','contact',  'score','comments','sell','image','owner')

views.py.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

from rest_framework import generics from rest_framework.response import response from rest_framework.reverse import reverse from api.models import entry from api.serializers import entryserializer from rest_framework import permissions from rest_framework.permissions import isauthenticated from rest_framework.throttling import scopedratethrottle from api import custompermission //这里是获取所有数据，可实现http get、post、option操作 class entrylist(generics.listcreateapiview):  //限流自定义作用域  throttle_scope = 'entries'  throttle_classes = (scopedratethrottle,)  queryset = entry.objects.all()  serializer_class = entryserializer  name = 'entry-list'  filter_fields = ('city','school','name')  search_fields = ('school','city')  ordering_fields = ('city')    //管理员才能post操作创建新的数据  permission_classes = (  permissions.isauthenticatedorreadonly,  custompermission.iscurrentuserownerorreadonly,  )  def perform_create(self, serializer):  serializer.save(owner=self.request.user)   //这里是获取具体某一项的数据，可实现http get、put、patch、option操作 class entrydetail(generics.retrieveupdatedestroyapiview):  throttle_scope = 'entries'  throttle_classes = (scopedratethrottle,)  queryset = entry.objects.all()  serializer_class = entryserializer  name = 'entry-detail'  permission_classes = (  permissions.isauthenticatedorreadonly,  custompermission.iscurrentuserownerorreadonly,  ) //api根目录 class apiroot(generics.genericapiview):  name = 'api-root'  def get(self, request, *args, **kwargs):  return response({  'entries': reverse(entrylist.name, request=request),  })

urls.py.

?

1 2 3 4 5 6 7

from django.urls import path from api import views urlpatterns = [  path('entries/', views.entrylist.as_view(), name=views.entrylist.name),  path('entry-detail/<int:pk>', views.entrydetail.as_view(), name=views.entrydetail.name),  path('', views.apiroot.as_view(), name=views.apiroot.name) ]

ele/urls.py.

?

1 2 3 4 5 6

from django.urls import path,include urlpatterns = [  path('v1/',include('api.urls')),  path('v1/api-auth/',include('rest_framework.urls')),  path('',include('front.urls')) ]

以下为启动界面

到此为止非常简单的api就写完了，接下来就是自动化测试是否达到预期效果。 如图，测试通过！

在程序中调用刚刚写好的api

创建一个新的app并且添加到settings.py里面

?

1	(venv)$ python manage.py startapp front

做好的效果如下：点击加载更多会触发ajax

由于篇幅有限，这里贴出js代码 使用ajax get请求刚刚写好的api接口并且添加到表格中

myjs.js.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

$('#load-more').click(function () {  $.ajax({  method:'get',  url:api_url,  datatype:'json',  success:function (data) {  api_url = data['next'];  if (api_url == null){  $('#load-more').val('已加载全部');  $('#load-more').attr('disabled',true);  //api_url这里就是刚刚写好的api接口  api_url = 'v1/entries/';  }  var results = data['results'];  for (i=0;i<results.length;i++){  $('#ele-table-body').append(  ' <tr>\n' +  ' <th scope="col">'+results[i]['pk']+'</th>\n' +  ' <th scope="col">'+results[i]['city']+'</th>\n' +  ' <th scope="col"><a href="/detail/' + results[i]['pk'] +'" rel="external nofollow" >' + results[i]['name'] + '</a></th>\n' +  ' <th scope="col">'+results[i]['school']+'</th>\n' +  ' <th scope="col">'+results[i]['score']+'</th>\n' +  ' </tr>'  )  }  }  })  });

可以修改具体的一条数据，使用ajax patch方法提交数据。 注：put方法是修改所有数据，而patch方法是修改局部数据

myjs.js.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

$('#edit-confirm-btn').click(function () { var name = $('#name').val(); 标签： API ajax django 上一篇下一篇 猜您喜欢 jquery中wrap、wrapAll、wrapInner laravel事务状态（laravel dingo API返回自定义错误信息的实例） laravel 快速开发api技巧（Laravel5.4简单实现app接口Api Token认证方法） laravel api 调试（Laravel框架自定义公共函数的引入操作示例） isapi和cgi限制 vue3 axios 怎么封装api（vue中如何简单封装axios浅析） ASP.NET Web API中参数的传递 laravel 后台任务配置（在Laravel中使用GuzzleHttp调用第三方服务的API接口代码） python爬百度api有次数限制吗（对python借助百度云API对评论进行观点抽取的方法详解） docker和golang哪个好（使用Golang玩转Docker API的实践） 如何看待美国数十万加仑牛奶倒下水道 历史又重演了（如何看待美国数十万加仑牛奶倒下水道） 历史惊人的相似，美国80万加仑牛奶倒入下水道，意味着什么（历史惊人的相似） 美国数十万加仑牛奶倒进下水道，世界会重演1929年的大萧条吗（美国数十万加仑牛奶倒进下水道） 美国数十万加仑牛奶倒入下水道，贫民区食不果腹，历史再次重演（美国数十万加仑牛奶倒入下水道） 美国倒掉数十万加仑牛奶 上热搜第一，这一幕似曾相识（美国倒掉数十万加仑牛奶） 深度 倒牛奶 这一幕为何又在美国上演（深度倒牛奶） 热门推荐 1docker nginx 配置详解（Docker 如何安装 Nginx） 2sql server内外连接的作用（浅谈SQL Server交叉联接 内部联接） 3docker容器启动执行多条命令（详解Shell脚本控制docker容器启动顺序） 4C#快速排序 5mysql数据库与表的基本操作总结（Mysql、Oracle中常用的多表修改语句总结） 6docker如何加volume（Dockerfile 中 VOLUME 与 docker -v 的区别说明） 7vue3.0 自定义组件（Vue 3.0自定义指令的使用入门） 8基于yii2框架的开源系统（Yii框架参数配置文件params用法实例分析） © 2021 开心学习