微信小程序网络请求服务器php接口获取数据库数据信息

article/2025/9/22 22:57:53

前言

在写php接口之前
需要事先搭建好环境
1 拥有一台服务器
2 服务器安装好宝塔
3 搭建安装好Apache套件（包括php Apache MySQL数据库等等）
4 已经开放相应的端口
5 安装微信开发者工具

如果小白没关系，下面的视频会一步一步的说明很详细，真心推荐
https://www.bilibili.com/video/BV1QA411b76i?p=1
极力建议给这位up主一键三连
视频是以搭建网站为目的搭建服务器环境，如果是单纯想写接口或者使用服务器的话，视频从第二集中间部分搭建站点开始以后的内容可以不观看，只需要观看第一集和第二集前面部分即可

同时以下内容纯个人见解，不妥之处请见谅。希望帮助到有需要的人

什么是php接口

php接口是一个放在服务器上 特定文件夹下（特定路径下）的 以.php为后缀的文件，如：
在这里插入图片描述
举个例子：本文主要介绍在微信小程序上通过网络请求执行服务器上的php文件 php文件里面的代码查询服务器某数据库 并获取该数据库上的信息 最后将信息返回到微信小程序中。微信小程序用一个变量接收返回过来的信息并放在标签< text >中在页面展示出来。
说到这里应该就明白了，接口的作用。
所以补充一下定义：
1 php接口是一个放在服务器上 特定文件夹下（特定路径下）的 以.php为后缀的文件。
2 php接口是一段php代码，可以通过网络请求来远程执行，并能返回执行结果。

所以我们接下来的工作是
  1. 新建站点：使得外界能够对我们服务器发起网络请求，同时为了知道写好的php在服务器上的存放路径（根据定义1）
  2. 数据库插入数据：简单插入一行用于测试使用的 数据
  3. php文件的创建，php代码的编写：在php文件中写一段访问数据库的代码，能查询数据库，并能响应网络请求返回查询数据
  4. 将写好的php文件放到新建站点的时候得到的特定文件夹下
  5. 新建微信小程序项目，并对服务器上的php文件发起请求，执行php代码，获取返回数据，展示数据

新建站点

本机浏览器打开宝塔面板
在这里插入图片描述
添加站点时候，修改两个地方
1 域名写你服务器IP即可
2 创建Mysql数据库，用户密码自动生成的 不用自己写
其他地方 例如路径什么的 可以不改变

这里要注意了这里的根目录就是刚刚定义1所说的特定路径 记住路径等下 将写好的php文件放到改路径里面
在这里插入图片描述
点击提交以后 可以在数据库中看到刚刚创建的Mysql数据库
在这里插入图片描述

数据库插入测试数据

点击管理
在这里插入图片描述

新建一个表
在这里插入图片描述
简单填写配置字段就好，其他不用改，然后点击保存
在这里插入图片描述
保存以后可以在左边看到新建的text表，同时我们设置一下name字段为主键唯一
然后在上方点击插入，插入一行数据
在这里插入图片描述
插入以后可以在浏览 中看到刚刚插入的数据
在这里插入图片描述

php文件的创建，php代码的编写

打开VScode（其他用来写网页的编译器都可以，不一定是vscode）
（这些编译器不用安装而且小，直接上网查资源下载即可使用）
点击文件然后打开文件夹，然后选择文件夹（随便新建一个文件夹即可）
在这里插入图片描述
在这里插入图片描述
然后新建一个text.php文件
在这里插入图片描述
在php写上 下面的代码

<?php //连接数据库$conn = new mysqli("localhost（这里写服务器IP本地可以是localhost）","数据库的用户名","数据库的密码","数据库名字");if($conn->connect_error){die("Could not connect to database");}//新建一个变量 用来获取网络请求传过来的参数$action = "read";//新建一个变量用来返回查询的数据$res = array('error' => false);//将网络请求传入过来的参数 赋值给$action变量if(isset($_GET['action'])){$action = $_GET['action'];}//读取查询数据 如果传入参数是readif($action == "read"){//返回的数据为utf8编码 防止中文乱码现象$conn->query("set names utf8");//sql语句 查询text表中的所有数据$result = $conn->query("SELECt * FROM `text`");//新建一个数组 接收数据$users = array();//遍历查询的结果 一行一行的遍历while($row = $result->fetch_assoc()){array_push($users,$row);}//将数据放在$res变量里面$res['uesrs'] = $users;}//插入数据 如果传入参数是createif($action == "create"){}//更新数据if($action == "update"){}//删除数据if($action == "delete"){}//关闭连接$conn->close();header("Content-type:application/json");//以json的格式返回查询到的数据echo json_encode($res);die();?>

其中里面连接数据库的参数可以在宝塔面板中找到
在这里插入图片描述
写完以后保存编辑

将写好的php文件放到服务器中特定的文件夹

我在创建站点的时候已经 提到了 站点的根目录就是 放php文件的路径
所以在宝塔面板中找到该路径上传刚刚写好的php文件即可在这里插入图片描述
现在我们可以用浏览器测试一下php文件
打开浏览器输入
http://服务器IP地址/text.php?action=read
打开的页面为
可以看到成功显示刚刚查询的信息
此处name字段值不是我刚刚插入的中文小明而是\u5c0f\u660e 没关系，到时候放到小程序以后就会变回中文来
在这里插入图片描述

新建微信小程序项目，并测试接口

打开微信开发工具新建一个项目 不知道怎么安装开发工具的自行上网查上吧 b站也很多教程在这里插入图片描述
下面包括了微信小程序代码的书写 不懂的可以上网查相关内容 先学习一下
我就简略的讲讲

新建一个页面 步骤如下：

点击app.json文件
在pages里面添加一行代码
在CTRL+s保存
如图
在这里插入图片描述
这里就会新建了一个页面
在这里插入图片描述
然后将新建的页面添加为启动页面
点击添加编译
在这里插入图片描述
启动页面设置为demo2
在这里插入图片描述
然后再 点击 详情 将本地设置下面的 不检验合法域名…HTTPS证书 勾选上
在这里插入图片描述

然后打开demo2里面的js文件 在打data中添加一个空的数组textdata 用来接收网络请求返回的数据（php文件的执行结果）在这里插入图片描述
在onload函数中写上这段代码
（发起网络请求是可以传入参数的 代码中的 data：{ } 就表示传入的参数，php文件里面的代码有说明）

 wx.request({url: 'http://服务器的IP地址/text.php',data:{ action:"read"},success: result=>{console.log(result.data),this.setData({textdata:result.data.uesrs,})}})

如图
在这里插入图片描述
在浏览器测试php文件的时候我们已经发现如果传入的参数是action = read 那么将执行查询操作 返回查询的结果
如图是返回的结果
在这里插入图片描述
该结果也就是 微信小程序就收到的结果
它分为两个部分 我们要的是第二个部分
所以在小程序的代码里面我写的是

			success: result=>{console.log(result.data),this.setData({textdata:result.data.uesrs,})}

代码大概意思是
第一行：如果网络请求成功，那么将结果赋值给result
第二行：在调试器中输出 结果的数据
第三第四行：将结果 里面的 数据 里面的 名为uesrs 部分的数据（也就是第二部分）赋值给textdata变量（”: “的意思是赋值，”. “的意思是什么什么里面的什么什么，例如这里是 结果里面的数据 然后再数据里面的uesrs部分数据）

其实从上面第二行代码的解析可以知道 此时已经可以在 调式器中查看 获得的数据
在这里插入图片描述
再打开新建页面的wxml文件
添加下面代码

<view  wx:for="{{textdata}}"><text>{{item.Name}}</text><text>{{item.Password}}</text>
</view>

（发现了没name和password就是我们在数据库新建数据表的两个字段名）

点击编译以后结果如图
在这里插入图片描述

到这里就大功告成了
完全实现了 利用php接口获取服务器数据库数据 并显示再客户端上


http://chatgpt.dhexx.cn/article/oRunRNVi.shtml

相关文章

Android Studio —— ArrayAdapter

Android Studio —— ArrayAdapter

效果 代码过程 代码 <?xml version"1.0" encoding"utf-8"?> <TextView xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:gravity"center_vertical"andro…
阅读更多...
java arrayadapter_简单好用的Adapter---ArrayAdapter详解

java arrayadapter_简单好用的Adapter---ArrayAdapter详解

拖延症最可怕的地方就是:就算自己这边没有拖延&#xff0c;但对方也会拖延&#xff0c;进而导致自己这边也开始拖延起来&#xff01;现在这个项目我这边已经是完工了&#xff0c;但是对方迟迟没有搞定&#xff0c;导致整个项目无法提交。 这就是拖延症的可怕&#xff1a;我们不…
阅读更多...
ArrayAdapter SimpleAdapter

ArrayAdapter SimpleAdapter

1.ArrayAdapter 数组适配器 用于简单的文字列表 2.SimpleAdapter 简单适配器 用户条目只有两个控件的列表 3.条目点击事件 ListView 一般用 setOnItemClickListener() 这个方法属于 AdapterView 1.先得到适配器 getAdapter() 2.在得到所在位置的条目的数…
阅读更多...
ArrayAdapter使用示例

ArrayAdapter使用示例

1&#xff09;ArrayAdapter使用示例&#xff1a; 运行效果图&#xff1a; 代码实现&#xff1a; public class MainActivity extends AppCompatActivity {Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.…
阅读更多...
Android Listview ArrayAdapter示例

Android Listview ArrayAdapter示例

ListView 的使用大致上可以分为四个步骤&#xff1a;添加 ListView 组件、存储数据、设置列表项item的布局文件、加载数据/资源进行显示、添加监听。 这篇文章主要讲一下最简单的ArrayAdapter的用法 示例效果如下&#xff1a; 主layout文件 <?xml version"1.0"…
阅读更多...
java arrayadapter_「arrayadapter」Android之ArrayAdapter（数组适配器）的三种方法 - seo实验室...

java arrayadapter_「arrayadapter」Android之ArrayAdapter（数组适配器）的三种方法 - seo实验室...

arrayadapter arrayadapter数组适配器用于绑定格式单一的数据&#xff0c;数据源可以是集合或者数组 列表视图(listview)以垂直的形式列出需要显示的列表项。 实现过程&#xff1a;新建适配器->添加数据源到适配器->视图加载适配器 第一种&#xff1a;直接用ListView组件…
阅读更多...
java arrayadapter_Android之ArrayAdapter详解

java arrayadapter_Android之ArrayAdapter详解

BaseAdapter之ArrayAdapter ArrayAdapter是BaseAdapter的一个具体实现&#xff0c;可直接使用泛型进行构造&#xff0c;能像List一样直接对Adapter进行增删操作。也是最简单的一个了 ArrayAdapter使用示例&#xff1a; 运行效果图&#xff1a; public class MainActivity exten…
阅读更多...
ArrayAdapter

ArrayAdapter

Android Adapter:ArrayAdapter篇 版权声明&#xff1a;本文为博主原创文章&#xff0c;未经博主允许不得转载。 这是Android Adapter系列文章的第一篇&#xff0c;该系列主要会讲到如下几种Adapter。&#xfffc; ArrayAdapter是BaseAdapter的一个具体实现&#xff0c;可直接使…
阅读更多...
ArrayAdapter三个参数和四个参数的使用区别

ArrayAdapter三个参数和四个参数的使用区别

ArrayAdapter三个参数和四个参数的使用区别: //3参形式:public ArrayAdapter (Context context, int resource, T[] objects)//4参形式:public ArrayAdapter (Context context, int resource, int textViewResourceId, T[] objects)参数介绍 Context context //指上下文,一般写…
阅读更多...
【Android基础】ArrayAdapter适配器展示数据

【Android基础】ArrayAdapter适配器展示数据

文章目录 前言创建ListView启动渲染数据 效果图 前言 适配器充当View与数据之间的桥梁&#xff0c;本文记录下ArrayAdapter适配器展示数据&#xff1b;ArrayAdapter比较简单&#xff0c;只能显示一行文本&#xff1b; 创建ListView <?xml version"1.0" encodi…
阅读更多...
Android 数组适配器和简单适配器

Android 数组适配器和简单适配器

数组适配器ArrayAdapter ArrayAdapter主要用于每行列表只展示文本的情况 声明一个数组适配器 ArrayAdapter<String> arrayAdapter new ArrayAdapter<String>(this, R.layout.support_simple_spinner_dropdown_item, stringArray);//stringArray为字符串数组 pr…
阅读更多...
winhex 19.8 注册码生成工具(keygen)

winhex 19.8 注册码生成工具(keygen)

下面这个是我电脑生成的&#xff0c;可以先试试&#xff0c;如果不行可以下载工具重新生成。 // WinHex license fileName: DimitarSerg Addr: dsmail.ua Addr: Ukraine Data: 0F557DBDC9F648EACF4065D7F857223E Data: 4E0656414E48F4DEE6991EC8205CB994 Cksm: F22E328E下载地…
阅读更多...
cdr2022辅助注册机序列号

cdr2022辅助注册机序列号

CorelDRAW2022使用专业工具踏上设计之旅&#xff0c;绘制矢量图片、调整布局、编辑照片等&#xff0c;空间广阔&#xff0c;操作精微详尽。它供给了规划者一整套的绘图工具包括圆形、矩形、多边形、方格、螺旋线&#xff0c;等等&#xff0c;并合作塑形工具&#xff0c;对各种根…
阅读更多...
软件注册码

软件注册码

edit plus 注册码自动生成网页&#xff1a; http://demon.tw/my-work/editplus-regcode-online.html baoyou F3507-CC2A0-2E1E5-4802E-54FB6 http://www.jb51.net/tools/editplus/ wm ware workstation 12 注册码 5A02H-AU243-TZJ49-GTC7K-3C61N &#xff08;亲测 可用&…
阅读更多...
各种注册码

各种注册码

1、navicat for mysql 10.1.7注册码,找了很多都不能用&#xff0c;终于找到一个可用的了&#xff1a; 名和组织随意,注册码是:NAVN-LNXG-XHHX-5NOO 下载地址&#xff1a;http://www.cr173.com/soft/38153.html 注册码原文&#xff1a;http://blog.sina.com.cn/s/blog_763dc8…
阅读更多...
各种杀毒软件序列号注册码大全

各种杀毒软件序列号注册码大全

瑞星杀毒软件2006升级包以及的序列号||||金山毒霸2006正版序列号注册码和升级器 看到后觉得不错&#xff0c;特来推荐给各位 瑞星杀毒软件2006升级包以及的序列号 产品序列号&#xff1a;7JE9R9-QTSIEI-EFF4SB-EJ5200 产品序列号&#xff1a;52LDJG-Q9LBCT-6ACQX2-R38200 产品序…
阅读更多...
NB-IOT+GPS模组

NB-IOT+GPS模组

NB-IOTGPS模组AM21E助力物联网基于位置的服务 定位模块大家都知道&#xff0c;就是提供位置信息的模块产品&#xff0c;定位精度在3-5米&#xff0c;主要智能穿戴&#xff0c;物品管理&#xff0c;智慧物流领域中。 在选择以智能手环、智能手表为代表的智能穿戴设备时&#xf…
阅读更多...
NB-IoT物联网技术

NB-IoT物联网技术

一、什么是NBIOT NB-IoT是指窄带物联网(Narrow Band -Internet of Things)技术。NB-IOT聚焦于低功耗广覆盖(LPWA)物联网(IoT)市场&#xff0c;是一种可在全球范围内广泛应用的新兴技术。NB-IOT使用License频段&#xff0c;可采取带内、保护带或独立载波等三种部署方式&#xf…
阅读更多...
【Jetson目标检测SSD-MobileNet应用实例】（五）根据输出的检测结果，使用串口和STM32配合进行电机控制

【Jetson目标检测SSD-MobileNet应用实例】（五）根据输出的检测结果，使用串口和STM32配合进行电机控制

【Jetson目标检测SSD-MobileNet应用实例】&#xff08;一&#xff09;win11中配置SSD-MobileNet网络训练境搭建 【Jetson目标检测SSD-MobileNet应用实例】&#xff08;二&#xff09;制作自己的数据集–数据集的采集、标注、预处理 【Jetson目标检测SSD-MobileNet应用实例】&am…
阅读更多...
NB-IOT 温湿度数据上报及IOT平台数据下发（STM32L4，电信Oceanconnect, COAP协议）

NB-IOT 温湿度数据上报及IOT平台数据下发（STM32L4，电信Oceanconnect, COAP协议）

在设备侧&#xff0c;智能设备采用了NB-IOT芯片&#xff0c;它和中国电信物联网开放平台之间通过CoAP协议通讯。CoAP报文的payload里是设备的应用数据。 应用server通过http/https协议和平台通讯&#xff0c;通过调用平台的开放API来控制设备&#xff0c;平台把设备上报的数据…
阅读更多...
推荐文章

Copyright @ 2022~2023