How to use PHP and UniApp to read and display data

How to use PHP and UniApp to read and display data

Introduction:
In today's Web development field, data reading and display is a very important part. This article will introduce readers to how to use PHP and UniApp to read and display data, and attach corresponding code examples. By reading this article, readers will learn how to use the database operation capabilities provided by PHP and how to use UniApp to display data on the mobile terminal.

1. PHP and database operations
PHP is a server-side scripting language that is widely used in Web development and has powerful database operation capabilities. Before starting, we need to make sure that PHP and related databases are installed.

1.1 Connecting to the database
Using PHP to connect to the database is the first step. The sample code is as follows:

<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "database";

// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);

// 检测连接是否成功
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}
?>

1.2 Querying data
Obtaining data is one of the core of database operations. The sample code is as follows:

<?php
$sql = "SELECT * FROM table";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    // 输出每行数据
    while($row = $result->fetch_assoc()) {
        echo "字段1：" . $row["字段1"]. " - 字段2：" . $row["字段2"]. "<br>";
    }
} else {
    echo "0 结果";
}
?>

2. Use of UniApp
UniApp is a cross-platform development framework based on Vue.js, which can build Android and iOS applications at the same time. Below we will introduce how to use UniApp to display the data obtained by PHP.

2.1 Create a page
First, create a UniApp project. We need to create a new page in the pages directory, such as dataShow. Add the following configuration to pages.json:

{
  "path": "pages/dataShow/dataShow",
  "style": {
    "navigationStyle": "default"
  }
}

2.2 Request data
In dataShow.vue, we can request data from the PHP server by using uni.request. The sample code is as follows:

export default {
  data() {
    return {
      dataList: [],
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      uni.request({
        url: 'http://localhost/getData.php',
        success: (res) => {
          this.dataList = res.data;
        },
      });
    },
  },
};

2.3 Page display
Finally, we need to use the v-for directive in dataShow.vue to display the data on the page. The sample code is as follows:

<template>
  <view>
    <view v-for="data in dataList" :key="data.id">
      <text>{{ data.字段1 }}</text>
      <text>{{ data.字段2 }}</text>
    </view>
  </view>
</template>

3. Summary
This article demonstrates to readers how to use PHP and UniApp to read and display data by introducing the operation of PHP and database and the use of UniApp. First, we need to use PHP to connect to the database and query the required data. Then, in the UniApp project, we request data from the PHP server through uni.request and display the data on the page through the v-for directive. I hope this article can help readers deepen their understanding of PHP and UniApp and further expand their technical capabilities.

Reference:

1. PHP Manual, https://www.php.net/manual/en/
2. UniApp Official Website, https://uniapp .dcloud.io/
3. Vue.js Official Website, https://vuejs.org/

The above is the detailed content of How to use PHP and UniApp to read and display data. For more information, please follow other related articles on the PHP Chinese website!