How to implement data paging function through PHP and UniApp

How to implement data paging function through PHP and UniApp

Introduction:
When developing mobile applications based on UniApp, it is often necessary to obtain a large amount of data from the server and display it in the App. In order to improve user experience and application performance, we often need to display data in pages. This article will introduce how to use PHP and UniApp to implement data paging function, with code examples.

1. PHP part:

1. Create database table and data
   First we need to create a table in the database to store the data to be displayed. For example, we created a table named "user", which contains fields id, username, and age.

CREATE TABLE 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;

Then insert some test data:

INSERT INTO user (id, username, age) VALUES
(1, 'Zhang San', 18),
(2, 'Li Si', 20),
(3, 'Wang Wu', 25),
(4, 'Zhao Six', 30),
(5, 'Qianqi', 35),
(6, 'Sunba', 40),
(7, 'Zhoujiu', 45),
(8, 'Wu Shi', 50);

2. Write PHP interface
   Next we need to write a PHP interface to obtain data of a specific page number from the database.

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

// Connect to the database
$mysqli = new mysqli("localhost", "username", "password", "database");

// Check whether the connection is successful
if ( $mysqli->connect_errno) {

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

}

// Get the current page number
$page = isset($_GET['page']) ? $_GET['page' ] : 1;

//The number of data items displayed per page
$perPage = 3;

//Calculate the starting offset
$offset = ($page - 1) * $perPage;

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

// Return data to the front end in JSON format
$data = array();
while ($row = $result->fetch_assoc()) {

$data[] = $row;

}
echo json_encode($data);

//Close the database connection
$mysqli->close();
?>

2. UniApp Part:

1. Writing Vue components
   In UniApp, we need to write a Vue component to initiate HTTP requests and display the obtained data.

<script> <br>export default {<br> data() {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>return { userList: [], // 存储用户列表数据 page: 1 // 当前页码 };</pre><div class="contentsignin">Copy after login</div></div><p>},<br> mounted() {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>this.loadData();</pre><div class="contentsignin">Copy after login</div></div><p>},<br> methods: {</p><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">Copy after login</div></div><p>}<br>};<br></script>

2. Configure the request domain name
   In the UniApp project, you need to configure a legal request domain name. Add the following code to the manifest.json file and replace it with your own PHP server address.

"networkTimeout": {
"request": 60000,
"downloadFile": 60000,
"uploadFile": 60000,
"websocket": 60000
},
"uni.request": {
"protocol": "https",
"domain": "your-php-server"
}

Above These are the steps and code examples for using PHP and UniApp to implement data paging function. Obtain the data of the specified page number from the database through the PHP interface and display the data in UniApp. When the user clicks the "Load More" button, the corresponding page number is sent and the data for the next page is loaded. In this way, the data paging function is realized, which improves user experience and application performance.

The above is the detailed content of How to implement data paging function through PHP and UniApp. For more information, please follow other related articles on the PHP Chinese website!