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

前言

在写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代码，可以通过网络请求来远程执行，并能返回执行结果。

所以我们接下来的工作是

新建站点：使得外界能够对我们服务器发起网络请求，同时为了知道写好的php在服务器上的存放路径（根据定义1）
数据库插入数据：简单插入一行用于测试使用的数据
php文件的创建，php代码的编写：在php文件中写一段访问数据库的代码，能查询数据库，并能响应网络请求返回查询数据
将写好的php文件放到新建站点的时候得到的特定文件夹下
新建微信小程序项目，并对服务器上的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接口获取服务器数据库数据并显示再客户端上