So implementieren Sie die Daten-Paging-Funktion über PHP und UniApp

So implementieren Sie die Daten-Paging-Funktion über PHP und UniApp

Einführung:
Bei der Entwicklung mobiler Anwendungen auf Basis von UniApp ist es häufig erforderlich, große Datenmengen vom Server abzurufen und in der App anzuzeigen. Um das Benutzererlebnis und die Anwendungsleistung zu verbessern, müssen wir häufig Daten auf Seiten anzeigen. In diesem Artikel wird anhand von Codebeispielen erläutert, wie Sie mit PHP und UniApp die Daten-Paging-Funktion implementieren.

1. PHP-Teil:

1. Datenbanktabellen und Daten erstellen
   Zuerst müssen wir eine Tabelle in der Datenbank erstellen, um die anzuzeigenden Daten zu speichern. Wir haben beispielsweise eine Tabelle mit dem Namen „Benutzer“ erstellt, die die Felder „ID“, „Benutzername“ und „Alter“ enthält.

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;

Dann fügen Sie einige Testdaten ein:

INSERT INTO user (id, username, age) VALUES

(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);
   

Schreiben Sie eine PHP-Schnittstelle

Als nächstes müssen wir eine PHP-Schnittstelle zum Herunterladen von Daten schreiben Die Datenbank ruft Daten für eine bestimmte Seitenzahl ab.

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

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

// Mit der Datenbank verbinden
$mysqli = new mysqli( "localhost", "username", "password", "database");

// Überprüfen Sie, ob die Verbindung erfolgreich ist
if ($mysqli->connect_errno) {

$data[] = $row;

}

// Holen Sie sich die aktuelle Seitennummer

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

//Die Anzahl der auf jeder Seite angezeigten Datenelemente

$perPage = 3;

2. / /Berechnen Sie den Startoffset
   $offset = ($page - 1) * $perPage;

// Daten abfragen

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

// Gibt die Daten im JSON-Format an das Frontend zurück
$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);

// Schließen Sie die Datenbankverbindung

$mysqli->close();

?>

🎜 2. UniApp-Teil: 🎜🎜🎜Vue-Komponente schreiben🎜In UniApp müssen wir schreiben eine Vue-Komponente zum Initiieren von HTTP-Anfragen und zum Anzeigen der erhaltenen Daten. 🎜? {🎜

return {
  userList: [],  // 存储用户列表数据
  page: 1  // 当前页码
};

🎜},🎜 Methoden: {🎜

this.loadData();

🎜}🎜};🎜🎜🎜🎜Konfigurieren Sie den Anforderungsdomänennamen.🎜Im UniApp-Projekt müssen Sie den rechtlichen Anforderungsdomänennamen konfigurieren. Fügen Sie den folgenden Code zur Datei manifest.json hinzu und ersetzen Sie ihn durch Ihre eigene PHP-Serveradresse. 🎜🎜🎜"networkTimeout": {🎜 "request": 60000,🎜 "downloadFile": 60000,🎜 "uploadFile": 60000,🎜 "websocket": 60000🎜},🎜"uni.request": {🎜 "protocol" : „https“,🎜 „domain“: „your-php-server“🎜}🎜🎜Oben sind die Schritte und Codebeispiele für die Verwendung von PHP und UniApp zur Implementierung der Daten-Paging-Funktion aufgeführt. Rufen Sie die Daten der angegebenen Seitenzahl über die PHP-Schnittstelle aus der Datenbank ab und zeigen Sie die Daten in UniApp an. Wenn der Benutzer auf die Schaltfläche „Mehr laden“ klickt, wird die entsprechende Seitennummer gesendet und die Daten für die nächste Seite geladen. Auf diese Weise wird die Daten-Paging-Funktion realisiert, die das Benutzererlebnis und die Anwendungsleistung verbessert. 🎜

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Daten-Paging-Funktion über PHP und UniApp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!