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.

81e27c3c1d5f9bd7e7b2da0d98a2a332connect_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.

d477f9ce7bf77f53fbcf36bec1b69b7a
89c662c6f8b87e82add978948dc499d2

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

de5f4c1163741e920c998275338d29b2
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {
data() {

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

},
mounted() {

this.loadData();

},
methods: {

loadData() {
  uni.request({
    url: 'http://your-php-server/api/getData.php',
    data: {
      page: this.page
    },
    success: (res) => {
      if (res.statusCode === 200) {
        this.userList = this.userList.concat(res.data);
      }
    }
  });
},
loadMore() {
  this.page++;
  this.loadData();
}

}
};
2cacc6d41bbb37262a98f745aa00fbf0

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!