Django接口开发

Django接口开发

一、前后端分离

• 传统开发模式

url -->> 视图函数（逻辑判断、调用数据库、渲染HTML）–>>向浏览器返回HTML页面。
项目后台的商品列表页面已经使用传统开发模式实现了

但是呢，有时候我们需要将这些内容在移动端（手机APP）或者的设备上显示。那怎么办呢？
我们可以再编写一套后台逻辑给移动端使用。但是这样比较麻烦，工作量比较大。有没有更简单的方式呢？我们可以使用前后端分离开发模式

二、前后端分离模型

前后端分离模型指的是后端只负责返回数据，不再负责渲染页面。前端负责渲染数据

接下来就要探讨一下返回的数据类型，如果我们返回Python中的字典或者列表，但是前端人员或者移动端人员不一定会Python语法。我们可以返回一种前端人员、后台人员都会的一种数据类型，这样就可以顺利的完成开发了。一般在开发中我们返回JSON或者XML数据类型

前端后端分离开发步骤：

前端：

（1）用ajax向指定url发送参数
（2）接受响应内容
（3）处理响应内容，进行DOM操作

后端：

（1）接受指定参数
（2）准备数据
（3）响应json

三、JSON和XML

• JSON介绍

  JSON(JavaScript Object Notation) : 是一种轻量级的数据交换格式，JSON数据格式类似于Python中的字典

• XML介绍

  XML(Extensible Markup Language): 可扩展标记语言,很少企业使用XML进行数据传输，了解即可

• JsonResponse

  form django.http import JsonResponse

  使用JsonResponse对象可以将Python中的字典或者其他数据类型转换为JSON数据

  # 路由
  urlpatterns += [
      # 查询所有商品
      path('api/goodses/', api_view.select_all_goods)，
      
  # 视图
  def select_all_goods(request):
      """查询所有的商品"""
  
     # 查询所有商品得到的是QuerySet类型的对象
     goods_qs = Goods.objects.all()
     # 转成列表字典格式
     goods_list = [{
       "id": goods.id, "name": goods.name} for goods in goods_qs]
      # JsonResponse
     return JsonResponse(goods_list,safe=False,json_dumps_params=					{
       "ensure_ascii":False})
  
  

  safe=False可以使用列表，默认只转换字典格式
  son_dumps_params={“ensure_ascii”:False}：显示中文

四、AJAX

• AJAX介绍

  AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步JavaScript和XML”。即使用JavaScript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）还有JSON数据

  AJAX还有一个最大的特点就是，当服务器响应时，不用刷新整个浏览器页面，而是可以局部刷新，这一特点给用户的感受是在不知不觉中完成请求和响应过程
  应用场景：注册时信息校验（百度首页注册）

• AJAX格式

  使用原生的JavaScript 使用AJAX 比较麻烦，我们采用 jQuery 实现 AJAX 请求。
  1、语法：$.ajax({参数1：值1，参数2，值2})

  • 参数介绍

  参数	描述
  url	发送请求的地址
  type	请求方式(“POST” 或 “GET”)， 默认为 “GET”。注意：其它 HTTP 请求方法如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持
  data	发送到服务器的数据。格式 {key:value,key:value}
  error	请求失败时调用此函数
  success	请求成功后的回调函数，参数：由服务器返回数据
  dataType	预期服务器返回的数据类型。如果不指定，浏览器会智能判断

可用值:
“xml”: 返回 XML 文档，可用 jQuery 处理。
“html”: 返回纯文本 HTML 信息；
“script”: 返回纯文本 JavaScript 代码。
“json”: 返回 JSON 数据 |

• 案例：

  1、前端需要做什么？

  • 以何种形式展示：web网页展示
    发送参数
    获取响应
    局部刷新-修改DOM

  2、后端需要做什么？

  • 获取商品类型，根据商品类型查询商品
    get请求

  # 视图
  def select_all_goods_by_goodstype(request):
      """查看更多，根据商品类型查询所有商品"""
      # 接收参数
      goodstype_id = request.GET.get("goodstype_id")
      # 查询数据
      goods_qs = Goods.objects.filter(goodstype_id=goodstype_id)
      # 转成列表字典格式
      goods_list = [{
       "id": goods.id, "name": goods.name,"price":goods.price,"picture":goods.picture.name,"unite":goods.unite} for goods in goods_qs]
      # JsonResponse
      return JsonResponse(goods_list,safe=False,json_dumps_params={
       "ensure_ascii":False})
  
  
  # 前端页面
  <script>
      // 根据url中的goodstype_id
      var url = window.location.href;
      var goodstype_id = url.split("?")[1].split("=")[1];
      //发送请求
      $.ajax({
       
          "url": "/api/more/",
          "method": "get",
          "data": {
       "goodstype_id": goodstype_id},
          "success": function (data) {
       
              {
       #console.log(data)#}
              {
       #console.log(typeof data)#}
              var divs = ""
              //遍历
              for(var i=0;i<data.length;i++){
       
                  var goods = data[i]
                  var id = goods["id"]
                  var name = goods["name"]
                  var picture = goods["picture"]
                  var price = goods["price"]
                  var unite = goods["unite"]