Comment implémenter la fonction de pagination de données via PHP et UniApp

Comment implémenter la fonction de pagination de données via PHP et UniApp

Introduction :
Lors du développement d'applications mobiles basées sur UniApp, il est souvent nécessaire d'obtenir une grande quantité de données du serveur et de les afficher dans l'application. Afin d'améliorer l'expérience utilisateur et les performances des applications, nous devons souvent afficher les données dans des pages. Cet article expliquera comment utiliser PHP et UniApp pour implémenter la fonction de pagination de données, avec des exemples de code.

1. Partie PHP :

1. Création de tables et de données de base de données
   Nous devons d'abord créer une table dans la base de données pour stocker les données à afficher. Par exemple, nous avons créé une table nommée "user", qui contient les champs identifiant, nom d'utilisateur et âge.

CREATE TABLE user (user (
id int(11) NOT NULL AUTO_INCREMENT,
username varchar(255) NOT NULL,
age int(11) NOT NULL,
PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

然后插入一些测试数据：

INSERT INTO user (id, username, age) VALUES
(1, '张三', 18),
(2, '李四', 20),
(3, '王五', 25),
(4, '赵六', 30),
(5, '钱七', 35),
(6, '孙八', 40),
(7, '周九', 45),
(8, '吴十', 50);

2. 编写PHP接口
   接下来我们需要编写PHP接口，用于从数据库中获取特定页码的数据。

header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json');

// 连接数据库
$mysqli = new mysqli("localhost", "username", "password", "database");

// 检查连接是否成功
if ($mysqli->connect_errno) {

echo "Failed to connect to MySQL: " . $mysqli->connect_error;
exit();

}

// 获取当前页码
$page = isset($_GET['page']) ? $_GET['page'] : 1;

// 每页显示的数据条数
$perPage = 3;

// 计算起始偏移量
$offset = ($page - 1) * $perPage;

// 查询数据
$result = $mysqli->query("SELECT * FROM user id int(11) NOT NULL AUTO_INCREMENT,

username varchar(255) NOT NULL,

age int(11) NOT NULL,
PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

Puis insérez quelques données de test :

INSERT INTO utilisateur (id, nom d'utilisateur, âge) VALEURS

(1, '张三', 18),
(2 , '李四', 20),
(3, 'Wang Wu', 25),

(4, 'Zhao Liu', 30),

(5, 'Qian Qi', 35),

(6, ' Sun Ba', 40),

(7, 'Zhoujiu', 45),
1. (8, 'Wu Shi', 50);
   

Écrire une interface PHP

Ensuite, nous devons écrire une interface PHP pour télécharger des données depuis la base de données Obtenez des données pour un numéro de page spécifique.

header('Access-Control-Allow-Origin: *');

header('Content-Type: application/json');

// Se connecter à la base de données
$mysqli = new mysqli( "localhost", "username", "password", "database");

// Vérifiez si la connexion a réussi
if ($mysqli->connect_errno) {

$data[] = $row;

}

// Obtenez le numéro de la page actuelle

$page = isset($_GET['page']) ? $_GET['page'] : 1;

//Le nombre d'éléments de données affichés sur chaque page

$perPage = 3;

2. / /Calculer le décalage de départ
   $offset = ($page - 1) * $perPage;

// Requête de données

$result = $mysqli->query("SELECT * FROM user LIMIT $ offset, $perPage") ;

// Renvoie les données au front-end au format JSON
$data = array();
while ($row = $result->fetch_assoc()) {

<view v-for="user in userList" :key="user.id">
  <text>{{ user.username }}</text>
  <text>{{ user.age }}</text>
</view>
<button @click="loadMore">加载更多</button>

}
echo json_encode($data);

// Fermez la connexion à la base de données

$mysqli->close();

?>

🎜 2. Partie UniApp : 🎜🎜🎜Écrire le composant Vue🎜Dans UniApp, nous devons écrire un composant Vue pour lancer des requêtes HTTP et afficher les données obtenues. 🎜🎜🎜🎜🎜<script>🎜export par défaut {🎜 data() {🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>this.loadData();</pre><div class="contentsignin">Copier après la connexion</div></div>🎜},🎜 Mounted() {🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>loadData() { uni.request({ url: 'http://your-php-server/api/getData.php', data: { page: this.page }, success: (res) =&gt; { if (res.statusCode === 200) { this.userList = this.userList.concat(res.data); } } }); }, loadMore() { this.page++; this.loadData(); }</pre><div class="contentsignin">Copier après la connexion</div></div>🎜},🎜 méthodes : {🎜rrreee🎜}🎜};🎜</script>🎜🎜🎜Configurer le nom de domaine de la demande🎜Dans le projet UniApp, vous devez configurer le nom de domaine de la demande légale. Ajoutez le code suivant au fichier manifest.json et remplacez-le par votre propre adresse de serveur PHP. 🎜🎜🎜"networkTimeout": {🎜 "request": 60000,🎜 "downloadFile": 60000,🎜 "uploadFile": 60000,🎜 "websocket": 60000🎜},🎜"uni.request": {🎜 "protocole" : "https",🎜 "domain": "your-php-server"🎜}🎜🎜Ci-dessus sont les étapes et les exemples de code pour utiliser PHP et UniApp pour implémenter la fonction de pagination de données. Obtenez les données du numéro de page spécifié à partir de la base de données via l'interface PHP et affichez les données dans UniApp. Lorsque l'utilisateur clique sur le bouton « Charger plus », le numéro de page correspondant sera envoyé et les données de la page suivante seront chargées. De cette manière, la fonction de pagination de données est réalisée et l'expérience utilisateur et les performances des applications sont améliorées. 🎜

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!