软件的前后端交互

Web端软件
移动端软件: 安卓 IOS
小程序

软件的客户端,负责与用户交互,展示效果 客户端:客户用户的

软件的服务端,负责数据调度,安全性,架构。。。 服务端:服务器上

客户端 发送数据/请求 到服务端
服务端 接受请求/数据 并响应处理 靠 http 协议传输数据,post ,get
服务端返回数据到客户端

安装PHPstudy

image.png

点击其他选项菜单

image.png

点击网站根目录 跳到www文件夹下面

image.png

www文件夹下面 创建一个文件夹wechat 作为后端工厂目录

image.png

在wechat 创建文件 wechatapi.php

image.png

使用编辑器打开php文件

image.png

开发者文档

https://www.w3cschool.cn/weixinapp/weixinapp-network-request.html

后端地址

image.png

www/wechat/weChatApi.php
http://127.0.0.1/wechat/weChatApi.php

勾选不校验合法域名

image.png

http://127.0.0.1对应www文件夹

编辑php代码

<?php
echo "炸鸡";  //好比是c语言里的return
?>

编辑小程序端代码

  data: {
    food:"豆腐"
  },
  test: function () {
   // console.log("函数绑定到");
   var that=this;
    wx.request({ //对后端发起请求的一个api
      url: 'http://127.0.0.1/wechat/weChatApi.php', // url是你的后端地址  仅为示例，并非真实的接口地址  https//www.baidu.com
      method: 'POST', //GET
      header: {
        "Content-Type": "application/json"  //请求头 
      },
      success: function(res){  //  success 函数当请求成功后  回显的函数
        console.log(res.data)  
        that.setData({
          food: res.data
        })
      }
    })
  },

编辑wxml文件

<input  maxlength="10" placeholder="最大输入长度10" /> <button bindtap="test">搜索</button>
吃{{food}}

一个简单的前后端交互