PHP와 UniApp을 통해 데이터 페이징 기능을 구현하는 방법

PHP와 UniApp을 통해 데이터 페이징 기능을 구현하는 방법

소개:
UniApp을 기반으로 모바일 애플리케이션을 개발할 때 서버에서 대량의 데이터를 가져와 앱에 표시해야 하는 경우가 종종 있습니다. 사용자 경험과 애플리케이션 성능을 향상시키기 위해 페이지에 데이터를 표시해야 하는 경우가 많습니다. 이 기사에서는 PHP와 UniApp을 사용하여 데이터 페이징 기능을 구현하는 방법을 코드 예제와 함께 소개합니다.

1. PHP 부분:

1. 데이터베이스 테이블 및 데이터 생성
   먼저 표시할 데이터를 저장할 데이터베이스에 테이블을 생성해야 합니다. 예를 들어, ID, 사용자 이름 및 연령 필드가 포함된 "user"라는 테이블을 만들었습니다.

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接口，用于从数据库中获取特定页码的数据。

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

그런 다음 테스트 데이터를 삽입하세요:

INSERT INTO 사용자 (id, 사용자 이름, 나이) 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);
   

PHP 인터페이스 작성

다음으로 다음에서 데이터를 다운로드하기 위한 PHP 인터페이스를 작성해야 합니다. 데이터베이스 특정 페이지 번호에 대한 데이터를 가져옵니다.

1138cf2108c7bade8bc97ea48b20c68fconnect_errno) {

$data[] = $row;

}

// 현재 페이지 번호

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

//각 페이지에 표시되는 데이터 항목 수

$perPage = 3;

2. / /시작 오프셋 계산
   $offset = ($page - 1) * $perPage;

// 데이터 쿼리

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

// 데이터를 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);

// 데이터베이스 연결 종료

$mysqli->close();

?>

🎜 2. UniApp 부분: 🎜🎜🎜Vue 컴포넌트 작성🎜UniApp에서는 다음을 작성해야 합니다. HTTP 요청을 시작하고 얻은 데이터를 표시하는 Vue 구성 요소. 🎜🎜🎜ca9ceec3554d5f69281718c4b9ecdc8b🎜 89c662c6f8b87e82add978948dc499d2🎜

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

🎜de5f4c1163741e920c998275338d29b2🎜21c97d3a051048b8e55e3c8f199a54b2🎜🎜3f1c4e4b6b16bbbd69b2ee476dc4f83a🎜기본값 내보내기 {🎜 데이터() {🎜

this.loadData();

🎜},🎜 마운트() {🎜

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

🎜},🎜 메소드: {🎜rrreee🎜}🎜};🎜2cacc6d41bbb37262a98f745aa00fbf0🎜🎜🎜요청 도메인 이름 구성🎜UniApp 프로젝트에서는 법적 요청 도메인 이름을 구성해야 합니다. 매니페스트.json 파일에 다음 코드를 추가하고 이를 자신의 PHP 서버 주소로 바꿉니다. 🎜🎜🎜"networkTimeout": {🎜 "request": 60000,🎜 "downloadFile": 60000,🎜 "uploadFile": 60000,🎜 "websocket": 60000🎜},🎜"uni.request": {🎜 "프로토콜" : "https",🎜 "domain": "your-php-server"🎜}🎜🎜위는 PHP와 UniApp을 사용하여 데이터 페이징 기능을 구현하는 단계와 코드 예제입니다. PHP 인터페이스를 통해 데이터베이스에서 지정된 페이지 번호의 데이터를 얻고 UniApp에 데이터를 표시합니다. 사용자가 "추가 로드" 버튼을 클릭하면 해당 페이지 번호가 전송되고 다음 페이지에 대한 데이터가 로드됩니다. 이러한 방식으로 데이터 페이징 기능이 실현되고 사용자 경험과 애플리케이션 성능이 향상됩니다. 🎜

위 내용은 PHP와 UniApp을 통해 데이터 페이징 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!