（六）數據綁定和雙向綁定

時間 2021-08-15

標籤 html 前端 vue django json 小程序後端微信小程序 api 服務器欄目 HTML 简体版

原文原文鏈接

一 html的數據綁定

<html>
    ...
    
    <div id="content"></div>
    
    <script>
    　　var name = "學習數據綁定";
　　　　　　　$('#content').val(name);
    </script>
    
</html>

二 vue.js數據綁定

<html>
      <div id="app">
          <div>{{message}}</div>
      </div>
  
      <script>
          new Vue({
            el: '#app',
            data: {
              message: '學習vue.js數據綁定'
            }
          })
      </script>
      
  </html>

三微信小程序的數據綁定

***.wxml

<text>數據綁定</text>

<view>數據：{{message}}</view>

<button bindtap="changeVal">點擊改變數據</button>

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    message:'學習小程序數據綁定'
  },
  changeVal:function(){
    console.log(this.data.message)
    // 通常狀況下改變數據 可是這種方法只能改變js  不能改變前端頁面
    this.data.message ="學習數據小程序綁定"
    console.log(this.data.message)

    // 下面改前端頁面
    this.setData({ message: "學習小程序數據綁定"})

  },
})

四微信小程序-雙向綁定

<view>您輸入了：{{message}}</view>

<input value="{{message}}" bindinput="bindText"></input>

value="{{message}}與上面的view聯動 可是如今是單向的聯動

bindinput="bindText"是雙向聯動

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    message:"學習雙向綁定",
  },
// 定義上面的函數
  bindText:function(e){
    this.setData({ message: e.detail.value})
  },
})

示例登錄小例子

注意：示例中的手機號和驗證碼是本身輸入的不經過服務商html

小程序前端前端

***.wxml

<view>手機號</view>
<input value="{{phone}}" bindinput="bindPhone"></input>

<view>驗證碼</view>
<input value="{{code}}" bindinput="bindCode"></input>

<button bindtap="login">登錄</button>

***.js

Page({
  data: {
    phone:"",
    code:"",
  },
// 獲取前端數據賦值給data中對應的phone和code
  bindPhone: function (e) {
    this.setData({ phone: e.detail.value })
  },
  bindCode: function (e) {
    this.setData({ code: e.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},     傳到後端的數據
      header: {},
      method: 'POST',
      // 返回的數據類型
      // dataType: 'json',
      // responseType: 'text',
      success: function(res) {
　　　　　　console.log(res)
　　　　},
      // fail: function(res) {},
      // complete: function(res) {},
    })

  },
})

後端端口
vue

是一個django的項目運用 drfdjango

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'app01.apps.App01Config',
    'rest_framework'                # 註冊drf
]

settings

# 使用include
from django.conf.urls import url, include
from django.contrib import admin

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^api/', include("app01.urls")),
]

項目下url

# app下的url
from django.conf.urls import url, include
from django.contrib import admin
from app01 import views
urlpatterns = [
    url(r'^login/', views.LoginView.as_view()),
]

app下的url

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})

app寫的view

接下來咱們啓動項目json

在前端發送的時候會報一個錯誤小程序

緣由：【等在項目上線的時候設置】
    1. 微信小程序必須是https
    2. 後臺必須設置要訪問的域名

目前咱們的解決辦法後端

解決辦法---在編輯器上找到詳情在下圖標記處打鉤微信小程序

這樣的話就能夠順利經過了api

後端服務器

後面咱們在介紹有服務器的發送短信

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。