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

王林
Freigeben: 2023-07-05 17:34:02
Original
1051 Leute haben es durchsucht

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

  1. 编写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();
Nach dem Login kopieren

}

// 获取当前页码
$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;
Nach dem Login kopieren

}

// Holen Sie sich die aktuelle Seitennummer

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

//Die Anzahl der auf jeder Seite angezeigten Datenelemente

$perPage = 3;
  1. / /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>
Nach dem Login kopieren

}
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  // 当前页码
};
Nach dem Login kopieren
🎜},🎜 Methoden: {🎜
this.loadData();
Nach dem Login kopieren
🎜}🎜};🎜🎜🎜🎜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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!