Maison > développement back-end > tutoriel php > Comment utiliser PHP et UniApp pour lire et afficher des données

Comment utiliser PHP et UniApp pour lire et afficher des données

WBOY
Libérer: 2023-07-04 18:10:02
original
1499 Les gens l'ont consulté

Comment utiliser PHP et UniApp pour lire et afficher des données

Introduction :
Dans le domaine du développement Web actuel, la lecture et l'affichage des données sont un élément très important. Cet article présentera aux lecteurs comment utiliser PHP et UniApp pour lire et afficher des données, et joindra des exemples de code correspondants. En lisant cet article, les lecteurs apprendront comment utiliser les capacités d'exploitation de bases de données fournies par PHP et comment utiliser UniApp pour afficher des données sur le terminal mobile.

1. PHP et opérations de base de données
PHP est un langage de script côté serveur largement utilisé dans le développement Web et doté de puissantes capacités d'exploitation de base de données. Avant de commencer, nous devons nous assurer que PHP et les bases de données associées sont installées.

1.1 Se connecter à la base de données
Utiliser PHP pour se connecter à la base de données est la première étape. L'exemple de code est le suivant :

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

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

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

1.2 Interroger des données
L'obtention de données est l'une des principales opérations de base de données. L'exemple de code est le suivant :

<?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 结果";
}
?>
Copier après la connexion

2. Utilisation d'UniApp
UniApp est un framework de développement multiplateforme basé sur Vue.js, qui peut créer des applications Android et iOS en même temps. Ci-dessous, nous expliquerons comment utiliser UniApp pour afficher les données obtenues par PHP.

2.1 Créer une page
Tout d'abord, créez un projet UniApp Nous devons créer une nouvelle page dans le répertoire des pages, telle que dataShow. Ajoutez la configuration suivante à pages.json :

{
  "path": "pages/dataShow/dataShow",
  "style": {
    "navigationStyle": "default"
  }
}
Copier après la connexion

2.2 Demande de données
Dans dataShow.vue, nous pouvons demander des données au serveur PHP en utilisant uni.request. L'exemple de code est le suivant :

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

2.3 Affichage de la page
Enfin, nous devons utiliser la directive v-for dans dataShow.vue pour afficher les données sur la page. L'exemple de code est le suivant :

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

3. Résumé
Cet article montre aux lecteurs comment utiliser PHP et UniApp pour lire et afficher des données en présentant le fonctionnement de PHP et de la base de données et l'utilisation d'UniApp. Tout d’abord, nous devons utiliser PHP pour nous connecter à la base de données et interroger les données requises. Ensuite, dans le projet UniApp, nous demandons des données au serveur PHP via uni.request et affichons les données sur la page via la directive v-for. J'espère que cet article pourra aider les lecteurs à approfondir leur compréhension de PHP et UniApp et à étendre davantage leurs capacités techniques.

Référence :

  1. Manuel PHP, https://www.php.net/manual/en/
  2. Site officiel d'UniApp, https://uniapp.dcloud.io/
  3. Vue.js Site officiel, https : //vuejs.org/

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal