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 上一篇：dedecms独立页面怎么加（dedecms调用当前栏目的子栏目的两种方法分享） 下一篇：mysql中的null和空值的区别（解决mysql使用not in 包含null值的问题） 您可能感兴趣 localstorage底层技术（浅谈Web Storage API的使用） php开发api接口登录（PHP调用接口API封装的例子） laravel开发api实例（Laravel框架集成UEditor编辑器的方法图文与实例详解） vue3 composition api用法（vue3中provide和inject的使用） laravel api 调试（laravel 实现设置时区的简单方法） jmeter接口性能测试教程（Xmeter API接口测试工具使用方法解析） laravel设置跨域请求（Laravel实现ApiToken认证请求） api接口安全方面的几个建议 isapi和cgi限制 jquery的动画效果api（jQuery框架实现元素显示及隐藏三种动画方式） html5文档的基本结构及必要的注释（关于HTML5+ API plusready的兼容问题） 创建一个简单的Web API 项目 使用Fiddler测试WebApi接口 laravel api 调试（Laravel框架自定义公共函数的引入操作示例） html5 web技术（html5视频常用API接口的实战示例） laravel事务状态（laravel dingo API返回自定义错误信息的实例） 这部民警编演的红色话剧，讲述了一个不断追寻的故事（这部民警编演的红色话剧） 日本菜有什么好吃（日本菜有什么好吃的做法） 韩国泡菜做法（韩国泡菜的做法步骤） 泰国旅游攻略（泰国旅游攻略必去景点） 越难春卷（越难春卷皮怎么用） 休闲VS新古典 办公家居简约设计（办公家居简约设计） 热门推荐 mysql字符串截取字段（MySQL如何从不固定位置提取字符串元素详解） mongodb基本数据类型 阿里云服务器ecs怎么设置（如何解决阿里云ECS服务器误开启了防火墙导致远程连接不上的问题） 云服务器搭建网站怎么选择合适（访问量过万的网站需要多大云服务器？） navicat15激活页面不显示（Navicat for MySQL 15注册激活详细教程） jquery使用data缓存数据 docker 加入k8s吗（k8s和Docker关系简单说明） 如何解除表的锁定 html注册表单验证代码（JavaScript+html实现前端页面随机二维码验证） dell r730服务器安装操作系统（DELL R730服务器配置RAID与安装服务器系统以及域的控制详细图文教程） 排行榜 1 vue离线地图有哪些（vue 集成腾讯地图实现api附DEMO） 2 ASP.NET中Web API的简单实例 3 vue项目有element插件（Vue Element前端应用开发之前端API接口的封装） 4 ASP.NET Web API是什么 5 laravel事务状态（laravel dingo API返回自定义错误信息的实例） 6 html5 web技术（html5视频常用API接口的实战示例） 7 laravel api 调试（Laravel框架自定义公共函数的引入操作示例） 8 使用Fiddler测试WebApi接口 9 创建一个简单的Web API 项目 首页 编程学习 Web前端 数据库 软件设计 开心学习 ©2013-2021 保留所有权利