目录

小程序向django后端交互

小程序向django后端交互

1.前后端数据交互

  • 基本流程: wx.request() ==> django(url路由) ==> django(调用视图函数) ==> sqlite3取数据 ==> 返回Json格式数据
1.1前端获取后端传来的数据

bug1:后端获取不到前端传来的值?

回答:使用ajax千万不要使用 jquery 来找ID ,因为一个网页中ID是唯一的。

  • wx.request()

    
    wx.request({
         url:'https://域名ID/index', //必填,其他的都可以不填
         data:{  
            a:1, 
            b:2
         },
         header:{  
            'content-type':'application/json'
         },
         method:'GET',  
         dataType:'JSON',  
         responseType:'text', 
         success(res){          //接口调用成功回调函数
             console.log(res);
         },
         fail(){                //调用失败:回调函数
             console.log('fail')
         },
         complete(){   
              console.log('complete')   
         }
    )
         
    

    可以类比 jquery 中的 Ajax 请求格式理解

  • django路由

    关于创建 django 项目方法不在给出,后端用 django 或者 springboot 都可以。

    https://i-blog.csdnimg.cn/blog_migrate/40381f2e5e4f4452006984c769ea263f.png#pic_center

  • 调用视图函数,取数据,返回数据

    返回的是 Json ,对象类型与字符串类型转换。

    https://i-blog.csdnimg.cn/blog_migrate/f4f0bec87526443e3742b22605360fd6.png#pic_center

  • 显示数据

      onLoad(options) {
        wx.request({
          url: 'http://127.0.0.1:8000/orders/',
          header: {
            'content-type': 'application/json'
          },
          method: 'GET',
          dataType: 'JSON',
          responseType: 'text',
          success(res) {
            console.log(res.data);
          },
        })
      },

    https://i-blog.csdnimg.cn/blog_migrate/90fdf6a9c5742974086a7753763d5382.png#pic_center

https://i-blog.csdnimg.cn/blog_migrate/00973e9921692c207a053a743fd7afe6.png#pic_center

要注意的:咱们这里请求网址没有证书,所以要把小程序中不校验合法域名给勾上。

至此,前端获取后端数据成功。
1.2 后端获取前端传来的数据

小程序中这样写

https://i-blog.csdnimg.cn/blog_migrate/185e91312c50adcd70efe86266629df3.png#pic_center

django 中这样写

https://i-blog.csdnimg.cn/blog_migrate/b7ed631630d39fbed7d9f03634a0ab79.png#pic_center

至此完结。