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 上一篇下一篇 猜您喜欢 百度地图获取api过程（JavaScript接入百度地图API的方法步骤） laravel开发api实例（Laravel框架集成UEditor编辑器的方法图文与实例详解） laravel框架少见方法详解（laravel 配置路由 api和web定义的路由的区别详解） laravel api接口开发版本控制（Laravel 创建可以传递参数 Console服务的例子） python高德地图可视化（利用python和百度地图API实现数据地图标注的方法） laravel api 调试（laravel 实现设置时区的简单方法） python中pip和pip3有什么区别（ISAPI-REWRITE伪静态规则写法以及说明） 由于Web服务器上的“ISAPI 和CGI 限制”的解决方法 python爬百度api有次数限制吗（对python借助百度云API对评论进行观点抽取的方法详解） thinkphp框架实例（ThinkPHP框架整合微信支付之JSAPI模式图文详解） 小米音乐可绑定QQ音乐， QQ音乐 真的会消失在小米的设备上吗（小米音乐可绑定QQ音乐） 小米Watch S1评测 或许能成为小米冲击高端可穿戴设备的里程碑（小米WatchS1评测或许能成为小米冲击高端可穿戴设备的里程碑） 手机QQ与小米路由器在一起 明天揭晓，敬请期待（手机QQ与小米路由器在一起） 小米音乐与 QQ 音乐合作，便捷迁移会员（小米音乐与QQ音乐合作） 小米推出米兔儿童电话手表奥特曼版，799 元，支持微信 QQ（小米推出米兔儿童电话手表奥特曼版） 贾怀胤唱《白龙马》 炸场 了 没想到京剧还能这么玩（贾怀胤唱白龙马） 热门推荐 1宝塔小程序制作（宝塔面板微信小程序使用图文教程） 2dedecms怎么使用（DEDECMS网站系统目录权限设置教程） 3python图书馆管理系统源码（python实现图书借阅系统） 4navicat中如何使用sql语句（Navicat Premium操作MySQL数据库执行sql语句） 5idea怎样连接mysql（IDEA配置连接MYSQL数据库遇到Failed这个问题解决） 6php环境搭建apache（apache 支持 php5 的配置方法） 7python怎样读取txt文件的数据内容（Python实现读取txt文件中的数据并绘制出图形操作示例） 8python气温变化数据分析（基于python历史天气采集的分析） © 2021 开心学习