微信小程序对接django本地服务器的完整流程

最近开始做微信小程序,很想用python的django编写后台,但是网上没有较详细的相关博客,自己整理了一份,按照步骤来就没问题了,主要思想就是django编写一个接口,送到微信小程序对接即可。

1.pycharm新建本地django项目,并选择好之前搭建的虚拟环境l_env,目录结构如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vErpg7g0-1594985741715)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200717172329303.png)]

2.pycharm运行django查看服务器是否正常启动,出现下面界面即为启动成功
在这里插入图片描述

3.接下来就要为小程序创建一个本地服务器的接口了

  • 导航栏找到并执行Tools–>Run manage.py Task,并输入“startapp wx_login”(注意startapp 后面是要创建的app名字),则会自动生成新的app如下图。

在这里插入图片描述

  • 打开wx_login里面的views.py,编写接口逻辑

    • 引入drf,及django里的rest_framework(小程序对接django服务器的接口必须是建立在drf框架上面的,如果没有请自行安装)和drf里面的Response。

      from rest_framework.views import APIView
      from rest_framework.response import Response
      
    • 下方创建一个继承APIView的类函数编写相关方法的接口:

      • Post方法:

        class loginView(APIView):
            def post(self,request,*args,**kwargs):
                print(request.data)
                return Response({"status":True})
        
      • 打开总的app(wx_app)里面的urls.py配置总的url

        urlpatterns = [
            path('xadmin/', xadmin.site.urls,name=xadmin),
            #'wx/'代表是浏览器端口8000后的一级路径,‘wx_login.urls’代表的是浏览器的二级路径(二级路径是调用wx_login里面的urls.py)
            path('wx/',include('wx_login.urls')),
        ]
        
      • 打开wx_login里面的urls.py配置二级路径

        from wx_login import views
        
        __author__ = 'LXG'
        __date__ = '2020/7/17 18:18'
        #'wx_login/'即为二级路径
        urlpatterns = [
            path('wx_login/', views.loginView.as_view())
        ]
        
      • 浏览器输入配置的路径查看接口是否正常启动,路径:http://127.0.0.1:8000/wx/wx_login/,报下面的错(第一张图)别慌,是因为没有session表,执行Tools–>Run manage.py Task,输入“makemigrations”等待结果后继续输入“migrate”执行迁移,控制台出现类似下面的界面(第二张图)则代表迁移成功。
        在这里插入图片描述在这里插入图片描述

      • 重启django再次输入地址:http://127.0.0.1:8000/wx/wx_login/,报错下面的情况则代表没有配置好drf
        在这里插入图片描述

      • 打开wx_app文件夹下面的settings.py,配置drf,找到INSTALLED_APPS,在最下方填上 ‘rest_framework’

        INSTALLED_APPS = [
            'django.contrib.admin',
            'django.contrib.auth',
            'django.contrib.contenttypes',
            'django.contrib.sessions',
            'django.contrib.messages',
            'django.contrib.staticfiles',
            'app',
            'xadmin',
            'crispy_forms',
            'wx',
            'rest_framework',
            ]
        
      • 再次重启django项目,输入地址:http://127.0.0.1:8000/wx/wx_login/,出现下面界面,则代表接口创建成功,而该地址就是创建的本地服务器接口,接下来就可以和小程序对接,进行数据库交互了。

      在这里插入图片描述

      • 例如:

        (1)wxml文件,给按钮绑定一个bindtap="give"事件:

        <view class="button-sp-area" style="margin-top:100rpx" > 
        			<button class="weui-btn weui-btn_primary" bindtap="give" >提交</button>
        	</view>
        

        (2)进入js文件,编写事件逻辑:

         give: function(e){		//与服务器进行交互
                console.log("执行give服务器这里了!!"),
                wx.request({
                  url: 'http://127.0.0.1:8000/wx/wx_login/',	//获取服务器地址,此处为本地地址
                  method: "POST",
                  header:{
                    "content-type": "application/x-www-form-urlencoded"		//使用POST方法要带上这个header
                  },
                  data: {		//向服务器发送的信息
                    mname: this.data.mname,
                    clent_name: this.data.clent_name,
                    id_code: this.data.id_code,
                    id_phone:this.data.id_phone,
                    choice_lipin: this.data.choice_lipin,
                  },
                  success: res => {
                    console.log(this.mname)
                    if (res.statusCode == 200) {
                      console.log(res)
                      this.setData({
                        result: res.data	//服务器返回的结果 
                      })    
                    }    
                  },
                })
              }
        

        (3)到此小程序就和django服务器建立连接了,数据库的增删改查在views.py里面刚才编写的接口类进行书写即可。

      • 如果需要用到get方法(数据库查值传递给小程序),那么更改views.py里面的class函数下面的def即可,其他配置一致,(当然小程序js文件里面的method方法要记得改成get)例如:

        class loginView(APIView):
            def get(self,request,*args,**kwargs):
                print(request.data)
                return Response({"status":True})
        

在这里插入图片描述
毕设没思路看这里https://blog.csdn.net/Q893448322/article/details/107642349?spm=1001.2014.3001.5501

如果对您有帮助,赏口饭吃❤谢谢老板❤


版权声明:本文为Q893448322原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。