PHP7后台查询多条数据显示到微信小程序前端

1. PHP7作为后台连接数据库查询

1.1 PHP7 连接数据库

<?php
$server = "localhost";//主机
$db_username = "root";//你的数据库用户名
$db_password = "root";//你的数据库密码
$db_name = "tea_work";//你的数据库密码

$con = new mysqli($server, $db_username, $db_password,$db_name);//链接数据库

// 检测连接
if (!$con) {
    die("Connection failed: " . mysqli_connect_error());
}
//echo "连接成功";
?>

1.2 执行查询语句，并将结果返回

注意需要将每条记录存到数组中，最后转为 json 返回给小程序。

<?php
include('connect.php');//链接数据库
$q="select * from `tb_user` ";
$con->query('SET NAMES UTF8');
$result = $con->query($q);// 执行 sql

while ($row= $result->fetch_assoc()) {
    $id = $row["id"];
    $username = $row["username"];
    $password = $row["password"];
    $email = $row["email"];
    $phone = $row['phone'];
    $role = ($row['role'] == 1) ? '管理员' : '普通农户';
    $results[] = $row;
}
echo json_encode($results);
$con->close();
?>

1.3 测试方法

使用 Postman 测试一下返回结果如下：

2.小程序作为前端接收并显示数据

2.1 js文件

注意：

const util = require('../../utils/util.js');
const { $Toast } = require('../../dist/base/index');

util.js 和 index代码参考上一篇文章，链接如下：https://blog.csdn.net/weixin_46034990/article/details/106600565

// pages/discuss/discuss.js
const app = getApp();
const util = require('../../utils/util.js');
const { $Toast } = require('../../dist/base/index');
Page({

  /**
   * 页面的初始数据
   */
  data: {
    users:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    var that = this;
    wx.request({
      url: util.basePath + '/app/user-list.php',
      data: {},
      dataType: 'json',
      header: {
        'content-type': 'application/json'
      },
      success(res) {
        console.log(res.data);
        that.setData({
          users: res.data,
        });
      }
    })
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

2.2 wxml 文件

<!--pages/admin/admin.wxml-->
<scroll-view class="scbg" scroll-y="true">
	<block wx:for="{{users}}">
		<view class="box">
			<view class="firstblock">
				<view class="person">
					<view class="name">
						<text class="showname">用户名：{{item.username}}</text>
					</view>
           <view class="place">密码：{{item.password}}</view>
           <view class="place">邮件：{{item.email}}</view>
           <view class="place">电话：{{item.phone}}</view>
           <view class="place"  wx:if="{{item.role==0}}">角色：普通用户</view>
           <view class="place"  wx:elif="{{item.role==1}}">角色：管理员</view>
				</view>
			</view>
		</view>
	</block>
</scroll-view>