api接口开发环境_API接口开发

406ec18494bd20e8115dca9f5c083978.png

前言

在工作中,逐渐多的出现不使用页面展示数据,直接使用数据接口,这样有以下好处:

1.首先可以实现动静分离,将数据库的查询和页面的渲染彻底分开。

2.网站可以支持批量的脚本开发。

最原始的接口搭建是使用类视图搭建接口,但接口的规范很难约束,接着就出现了接口框架。使用框架进行规范的接口开发即restful,django具有restful的插件(djangorestframework)。下面来具体实现开发一个接口。

接口开发步骤

1.安装插件

Pip install djangorestframework
Pip install django-filter
Pip install Markdown (restful依赖包)

8480d6fd1788577eeefbbe7347fd6966.png

2.配置settings

bd33e7eb6b9b3f72a6f26c1480a2d2ba.png

0185b07796988e578dacf887b65d876a.png

注意:使用接口尽量需要有数据库模型

33db01b3097cc478526257f7cc623cab.png

3.编写接口逻辑

3.1创建序列化,在对应APP下创建serializers.py.(名称可任意,但是通常项目中会这样写)

1.  #当前文件只是为了规定接口模型和数据字段2.  from django.contrib import admin3.  from django.urls import path,include,re_path4.  from Buyer.views import index5.  from Store.models import Goods6.  from Store.models import GoodsType8.  from rest_framework import routers, serializers, viewsets9.  #导入框架11.  # Serializers define the API representation.12.  classUserSerializer(serializers.HyperlinkedModelSerializer):13.  """
14. 声明数据
15. """16. classMeta: #元类17. model = Goods #要进行接口序列化的模型18. fields = ['goods_name', 'goods_price', 'goods_number', 'goods_description'] #序列要返回的字段20. classGoodsTypeSerializer(serializers.HyperlinkedModelSerializer):21. """
22. 声明查询的表和返回的字段
23. """24. classMeta:25. model = GoodsType26. fields = ["name","description"]

3.2对应APP的views下:在这是通过url指向,所以更类似于视图

1.  from rest_framework import viewsets2.  from Store.Serializers import *3.  # ViewSets define the view behavior.4.  #当前部分还是执行接口的查询逻辑5.  classUserViewSet(viewsets.ModelViewSet):6.      queryset = Goods.objects.all() #具体返回的数据7.      serializer_class = UserSerializer #指定过滤的类8.  classTypeViewSet(viewsets.ModelViewSet):9.      """
10. 返回具体查询的内容
11. """12. queryset = GoodsType.objects.all()#查询所有数据13. serializer_class = GoodsTypeSerializer#需要的数据需要从这里找

3.3 url指出接口

1.  from Store.views import UserViewSet2.  from Store.views import TypeViewSet3.  from rest_framework import routers4.  router = routers.DefaultRouter() #声明一个默认的路由注册器5.  router.register(r"goods",UserViewSet) #注册写好的接口视图6.  router.register(r"goodsType",TypeViewSet) #注册写好的接口视图9.  urlpatterns = [10.      path('admin/', admin.site.urls),11.      path('Store/', include("Store.urls")),12.      path('Buyer/', include('Buyer.urls')),13.      path('ckeditor/',include('ckeditor_uploader.urls')),14.      re_path('^API', include(router.urls)), #restful 的根路由15.      re_path('^api-auth',include('rest_framework.urls')) #接口认真16.  ]
按照功能对项目进行划分:

1.创建serializers文件用来存放接口的过滤器。

60dff16abb04bfdbb467b535469cda0d.png

2.在视图当中查询接口要返回的数据,并指定过滤器。(views)

b3c6830418e727ae556613a14ced4d4d.png

3.在路由中注册接口.

93dea42b44aa5704cad1902b9e19b65b.png

web端使用接口

通常要用到ajax和vue,数据通过接口返回,然后前端使用ajax进行请求,使用vue进行渲染

1.准备静态页面

2.编写视图

701166f925f7b1698bb914be01d3c254.png

3.路由指出

ed92d7eda423db2743b3f3801d9ca0d6.png

4.静态页面ajax访问接口

1.  Vue.use(VueResource);#此处的Vue是使用VueResource中的Vue.2.  var vue = new Vue(3.      {4.          el: "#goods",5.          data: {6.              goods_list: []7.          },8.          created:function () {9.              this.$http.get("/APIgoods/").then(10.                  function (data) {11.                      this.goods_list = data.data;12.                      console.log(data.data)13.                  },14.                  function (error) {15.                      console.log(error)16.                  }17.              )18.          },19.          methods: {21.          }22.      }23.  );

原文:https://blog.csdn.net/weixin_44689393/article/details/100750360

bee1277eae418f9b137fd406dc9bba54.png 386a391bbc5467444b8c70618446f1fb.gif fbbc55fc372f07d589db780348e8b154.png b7a0d530747ca174cfb6cc1e087888f0.gif想要获取学习实战、高并发、架构 、笔试面试资料请扫码咨询+薇薇微信
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值