小程序读取mysql数据-php写api口

数据库结构

小程序展示页面

小程序wxml页

<!--pages/day6/day6.wxml-->
<text>pages/day6/day6.wxml</text>

<!-- <button type="primary" bindtap="newBtnDown">Php信息测试</button> -->

<block wx:if="{{arr1.length > 0}}">
  <view class="view1" wx:for="{{arr1}}" wx:key="index">
    <view class="view2">楼：{{item.id}} </view>
    <view hidden class="view2">QQ:{{item[3]}} </view>
    <image src="http://q1.qlogo.cn/g?b=qq&nk={{item.qq}}&s=640" mode="widthFix" />
    <view class="view2">姓 名：{{item.name}} </view>
    <view class="view2">内 容：{{item.text}} </view>
    <view class="view2">留言时间：{{item.time}} </view>
    <view class="view2">更新时间：{{item.updateT}} </view>
    <view class="view3">
      <view bindtap="clickMe" data-id="{{item.id}}" > 编辑 </view>
      <view >删 除 </view>
    </view>

  </view>
</block>

小程序wxss页

/* pages/day6/day6.wxss */
.view1 {
  margin-top: 10rpx;
  margin-bottom: 40rpx;
  border-bottom: 2rpx solid gray;

}


.view1 view{
  margin-left: 20rpx;
  margin-top: 20rpx;
  margin-bottom: 10rpx;
}


.view3 {
  display: flex;
  padding-left: 60%;
}

image{
  padding-top: 10rpx;
  margin-left: 30rpx;
  width: 150rpx;
}

小程序js页

// pages/day6/day6.js
Page({  clickMe(e) {
    console.log(e.target.dataset.id);
    let nid = e.target.dataset.id
    wx.navigateTo({
      url: '/pages/edit/edit?id=' + nid,
    })
  },

// 页面的初始数据
  data: {
    arr1: [],
  },
  //向php页面请求数据


  newBtnDown(my_url) {
    // 需要请求的地址，字符串
    wx.request({
      url: my_url,
      data: {
        userName: JSON.stringify('Administrator'),
        passWord: JSON.stringify('123456'),
      },
      method: 'post',
      header: {
        "Content-Type": "application/x-www-form-urlencoded"
      },
      success: res => {
        //状态码
        console.log(res);
        //只有状态码返回是200时给数组赋值
        if (res.statusCode == 200) {
          this.setData({
            arr1: res.data
          })
        } else {
          console.log("加载失败");
          wx.showToast({
            title: '加失败！',
            icon: 'error',
            duration: 2000
          })
        }
      },
      fail: res => {
        console.log('出错了');
      }
    })
  },

  onLoad(options) {
    this.newBtnDown('http://www.456.com/mboard/miniapp/api.php')
  },
})

php接口文件

<?php
//接口文件 api.php
header('Content-Type:text/html;charset=utf-8');
require_once 'database.php';

//留言列表 按倒叙排序
$sql = "SELECT *  FROM `message` ORDER BY `message` . `id` DESC ";
//执行sql语句
$result = $conn->query($sql);

// 存储一个数组
$arr = [];

if ($result->num_rows > 0) {
    //输出数据
    while ($row = $result->fetch_assoc()) {
        //姓名
        $id = $row["id"];
        $name = $row["name"];
        $text = $row["text"];
        $qq = $row["qq"];
        $time = $row["time"];
        $updateT = $row["updateT"];

        // 追加数组
        $temp_arr = [
            "id" => $id,
            "name" => $name,
            "text" => $text,
            "qq" => $qq,
            "time" => $time,
            "updateT" => $updateT,
        ];
        array_push($arr, $temp_arr);
    }
} else {
    echo "0结果";
}
//声明header为json
header("Content-type:application/json");

// 输出接口数据
// var_dump($arr);
// echo json_encode(['status' => '200','msg' => 'OK!' ,'result' => $arr]);
echo json_encode($arr);

//关闭数据库
$conn->close();

php 数据库连接文件 database.php

<?php
//数据库连接 database.php
$servername = "localhost:3306";
$username = "root";
$password = "baota123456";
$dbname = "mboard";

// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection 检查连接
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}
//声明header为json
// header("Content-type:application/json");