微信小程序的数据存储与Django等服务发送请求 讲解

微信小程序前端作为一种新的应用程序开发模式，可以通过小程序内部的API进行页面跳转、数据请求与显示等操作。而服务端则可以通过不同的服务框架，如Django、Flask等提供接口供前端进行数据交互。数据交互的方式有多种，本文将主要讲解通过小程序的 wx.request() 发送 HTTP 请求，从而与 Django 服务端进行数据交互。

发送HTTP请求

通过小程序的 wx.request() 函数可以实现向服务端发送 HTTP 请求。该函数有以下参数：

wx.request({
  url: 'request URL',
  data: {},
  header: {},
  method: '',
  dataType: '',
  responseType: '',
  success: function(res) {},
  fail: function(res) {},
  complete: function(res) {},
})

常用的参数说明：

• url: 请求的 URL 地址。
• data: 发送到服务器的数据
• header: 设置请求的 header
• method: 请求方式（GET, POST, PUT等）
• dataType: 期望返回的数据类型（json, xml, html, text等）
• success: 接口调用成功的回调函数
• fail: 接口调用失败的回调函数
• complete: 接口调用结束的回调函数

如下代码所示， GET 请求带参数示例：

wx.request({
  url: 'https://example.com/test',
  data: {
    x: '',
    y: ''
  },
  success(res) {
    console.log(res.data)
  }
})

Django服务端的API接口

为了与前端进行数据交互，服务端需要提供相应的API接口，通过前端发送HTTP请求并返回JSON数据来响应请求。 Django 框架提供了DRF（Django Rest Framework）扩展包，用于构建API视图，实现API接口的快速构建，以下代码示例为获取图书信息的API接口：

from rest_framework.decorators import api_view
from rest_framework.response import Response

from .models import Book
from .serializers import BookSerializer

@api_view(['GET'])
def book_info(request, **kwargs):
    book_id = kwargs.get('book_id')
    try:
        book = Book.objects.get(id=book_id)
        serializer = BookSerializer(book)
        return Response(serializer.data)
    except Book.DoesNotExist:
        return Response({"error": "Book does not exist."}, status=404)

增加@csrf_exempt装饰器可以避免跨域访问报错

from django.views.decorators.csrf import csrf_exempt

@csrf_exempt
@api_view(['GET'])
def book_info(request, **kwargs):
    book_id = kwargs.get('book_id')
    try:
        book = Book.objects.get(id=book_id)
        serializer = BookSerializer(book)
        return Response(serializer.data)
    except Book.DoesNotExist:
        return Response({"error": "Book does not exist."}, status=404)

前端代码示例

在前端部分代码中，需要实现通过 wx.request() 函数向服务端发送请求，并显示返回的数据。以下面代码为例：

const app = getApp()

Page({
  data: {
    book_info: {}
  },
  onLoad: function (options) {
    wx.request({
      url: app.globalData.server_url + '/api/v1/book/' + options.book_id,
      success(res) {
        console.log(res.data)
        this.setData({
          book_info: res.data,
        })
      },
      fail() {
        console.log("request fail")
      }
    })
  }
})

在该示例中，通过 app.globalData.server_url 设置服务端URL地址，在 onLoad() 函数中使用 wx.request() 发送请求，并在接口返回成功时设置 book_info 数据，最后在前端页面中通过数据绑定渲染到DOM中。

总结

在小程序开发中，与服务端的数据交互是非常重要的一部分。通过小程序的 wx.request() 函数发送 HTTP 请求，并在服务端利用Django框架构建API接口，可以实现小程序前后端的数据交互。本文示例仅为演示之用，实际开发中还需要考虑一些细节问题如跨域访问，请求失败处理等。