day03微信小程序笔记-数据双向绑定、小程序发送网络请求、后端接口编写

1. 数据双向绑定：

　　xx. wxml

<view>您输入了：{{ message }}</view>
<input type="text" value="{{ message }}" bindinput="bindText"/>

　　xx.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    message: "双向绑定"
  },

  /**
   * 双向绑定-数据实时更新
   */
  bindText: function(res){
    console.log(res.detail.value)
    this.setData({message: res.detail.value})
  },

　

2. 小程序发送网络请求：

　　注意：本地开发时，需打开 微信小程序-详情-本地设置-不校验合法域名。

　　- xx.wxml

<!--pages/telphone/telphone.wxml-->
<text>pages/telphone/telphone.wxml</text>
<view>手机号：</view>
<input type="text" value="{{ phone }}" bindinput="bindPhone" placeholder="请输入手机号"/>

<view>验证码：<text>点击获取验证码</text></view>
<input type="text" value="{{ code }}" bindinput="bindCode" placeholder="请输入验证码"/>
<button bindtap="login">登录</button>

　　- xx.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    phone: "",
    code: ""
  },

  /**
   * 双向绑定-数据实时更新
   */
  bindPhone: function(res){
    console.log(res.detail.value)
    this.setData({phone: res.detail.value})
  },

  bindCode: function(res){
    this.setData({code: res.detail.value})
  },
  login: function(){
    console.log(this.data.phone, this.data.code)
    // 将手机号和验证码发送到后端，后端进行登录
    wx.request({
      url: 'http://127.0.0.1:8000/api/login/',
      data: {phone: this.data.phone, code: this.data.code},
      method: 'POST',
      timeout: 0,
      success: (result) => {
        console.log(result)
      },
    })
  },

　

3. 后端接口编写：

　　3.1. 新建文件夹-auction，并配置 python 虚拟环境

　　3.2. 安装django：pip install django 

　　3.3. 创建 django项目：django-admin startproject auction .  (注意空格和点号的作用)

　　3.4. 新建APP：python manage.py startapp api

　　3.5. 编写主路由-auction/urls.py：

from django.contrib import admin
from django.urls import path, include


urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('api.urls')),
]

　　3.6.  新建 api/urls.py 文件，并编写分路由：　　

from django.urls import path, include
from api import views

# 设置应用程序命名空间
app_name = 'api'

urlpatterns = [
    path('login/', views.LoginView.as_view(), name='login'),
]

　　3.7. 编写 登录视图-auction/views.py：

from django.shortcuts import render
from rest_framework.views import APIView
from rest_framework.response import Response

# Create your views here.


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

　　

　　3.8. setting.py 中添加新建的app和 rest_framework：

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'api',
]

　　3.9. 数据库、语言、时区等设置：

　　

DATABASES = {
    'default': {
        # 指定数据库
        'ENGINE': 'django.db.backends.mysql',
        'HOST': '127.0.0.1',
        'PORT': '3306',
        'NAME': 'mysite',
        'USER': 'root',
        'PASSWORD': 'xxxxx',
    }
}



LANGUAGE_CODE = 'zh-hans'

TIME_ZONE = 'Asia/Shanghai'

USE_I18N = True

USE_TZ = True