Нумерация страниц на стороне сервера с использованием ngx-нумерации страниц - PullRequest
Новая
       9

Нумерация страниц на стороне сервера с использованием ngx-нумерации страниц

0 голосов
/ 14 января 2020

Я получил модуль ngx-pagination, работающий со всеми списками в GET, но я хочу, чтобы нумерация страниц также работала на стороне сервера, но я не уверен, как реализовать его дальше, чем у меня. Я смотрю на документацию по ngx-нумерации, но я немного запутался. Вот что у меня есть.

html код 

<body [ngClass]="[(this.isOpen && this.mobile) || (this.isOpen && this.tablet) ? 'hideContent' : 'showContent']">
    <div class="loading">
        <!-- <mat-spinner class="loader" *ngIf="isLoading"></mat-spinner> -->

        <ngx-spinner id="loadingIcon" *ngIf="isLoading" type="cog" size="large" color="#3071a9">


            <p class="loadingTitle">Loading...</p>
        </ngx-spinner>

    </div>

    <div class="spacing"></div>
    <div class="container">
        <div class="row no-gutters"
            *ngIf="!this.isOpen && this.mobile || this.isOpen && !this.mobile || !this.isOpen && !this.mobile">
            <div class="class col-md-7"></div>

        </div>

        <!-- /|slice:0:show -->
        <!--; let i = index-->
        <div class="row"
            *ngFor="let auction of posts | paginate: { itemsPerPage: 10, currentPage: p, totalItems: this.posts.count }">
            <div class="col-md-12 col-centered">

                <div class="listingCard" [@simpleFadeAnimation]="'in'">

                    <div class=container>

                        <div class="row">
                            <div class="col-md-3">

                            </div>
                            <div class="col-md-6">
                                <div id="title">{{auction.title}}</div>
                            </div>

                        </div>

                    </div>



                </div>
            </div>

        </div>

    </div>

    <pagination-controls (pageChange)="p = $event"></pagination-controls>

</body>

</html>

<!DOCTYPE html>
<html>

<head>
</head>

<body [ngClass]="[(this.isOpen && this.mobile) || (this.isOpen && this.tablet) ? 'hideContent' : 'showContent']">
    <div class="loading">
        <!-- <mat-spinner class="loader" *ngIf="isLoading"></mat-spinner> -->
        <ngx-spinner id="loadingIcon" *ngIf="isLoading" type="cog" size="large" color="#3071a9">

            <p class="loadingTitle">Loading...</p>
        </ngx-spinner>
    </div>
    <div class="spacing"></div>
    <div class="container">
        <div class="row no-gutters"
            *ngIf="!this.isOpen && this.mobile || this.isOpen && !this.mobile || !this.isOpen && !this.mobile">
            <div class="class col-md-7"></div>
        </div>
        <!-- /|slice:0:show -->
        <!--; let i = index-->
        <div class="row"
            *ngFor="let auction of posts | paginate: { itemsPerPage: 10, currentPage: p, totalItems: this.posts.count }">
            <div class="col-md-12 col-centered">
                <div class="listingCard" [@simpleFadeAnimation]="'in'">
                    <div class=container>
                        <div class="row">
                            <div class="col-md-3">
                            </div>
                            <div class="col-md-6">
                                <div id="title">{{listing.title}}</div>
                            </div>
                        </div>
                    </div>
                    =
                </div>
            </div>
        </div>
    </div>
    <pagination-controls (pageChange)="p = $event"></pagination-controls>
</body>

.ts Файл компонент 

 p: number = 1;

ngOnInit(){
    this.submitListingService.getListings(this.postsPerPage, this.currentPage);
    this.listingService
      .getPostUpdateListener()
      .pipe(takeUntil(this.destroy))
      .subscribe((postData: { listing: Listing[]; postCount: number }) => {
        this.isLoading = false;
        this.totalPosts = postData.postCount;
        this.posts = postData.listing;
        this.filteredPosts = postData.listing;
      });
}

Angular услуга 

getListings(postsPerPage: number, currentPage: number) {
    let listings = "Get Listings";
    const params = new HttpParams().set("listings", listings);
    const queryParams = `?pagesize=${postsPerPage}&page=${currentPage}`;
    this.http
      .get<{ message: string; posts: any; maxPosts: number }>(
        "http://localhost:3000/api/listings" + queryParams,
        { params }
      )
      .pipe(
        map(postData => {
          return {
            posts: postData.posts.map(post => {
              return {
               title: post.title,                   
                id: post._id
              };
            }),
            maxPosts: postData.maxPosts
          };
        })
      )
      .pipe(takeUntil(this.destroy))
      .subscribe(transformedPostData => {
        this.posts = transformedPostData.posts;
        this.postsUpdated.next({
          listing: [...this.posts],
          postCount: transformedPostData.maxPosts
        });
      });
  }

-> Код сервера
приложение. js

app.get("/api/listings", (req, res, next) => {
  Post.find({ auctionEndDateTime: { $gte: Date.now() } })
      .populate("creator", "username")
      .then(documents => {
        req.params.Id = mongoose.Types.ObjectId(req.params.Id);
        res.status(200).json({
          message: "Auction listings retrieved successfully!",
          posts: documents
        });
      });
});

Ответы [ 3 ]

2 голосов
/ 18 января 2020

Вот еще один способ сделать это. Это может быть лучше подходит для вашего случая. 

  Post.find({ auctionEndDateTime: { $gte: Date.now() } })
      .populate("creator", "username")
      .then(documents => {
          req.params.Id = mongoose.Types.ObjectId(req.params.Id);

          let per_page = req.query.pagesize;
          let page = req.query.page || 1;
          let offset = (page - 1) * per_page;
        res.status(200).json({
          message: "Auction listings retrieved successfully!",
          posts: documents.slice(offset).slice(0,
                per_page)

        });
      });

и вот еще один подход с использованием slice

  var skip = req.query.pagesize * (req.query.page - 1)

        Post.where('auctionEndDateTime').gte(Date.now()).slice([skip, req.query.pagesize])
                      .populate("creator", "username")
                      .then(documents => {

              res.status(200).json({
                 message: "Auction listings retrieved successfully!",
                 posts: documents
              });
          })
0 голосов
/ 18 января 2020

Ваш Сервисный файл , 

getListings(postsPerPage: number, currentPage: number) {
    // let listings = "Get Listings";
    // const params = new HttpParams().set("listings", listings);
    // const queryParams = `?pagesize=${postsPerPage}&page=${currentPage}`;
    const queryParams = postsPerPage+"/"+currentPage; //change this .
    this.http
    .get<{ message: string; posts: any; maxPosts: number }>(
        "http://localhost:3000/api/listings/" + queryParams
        )
    .pipe(
        map(postData => {
            return {
                posts: postData.posts.map(post => {
                    return {
                        title: post.title,                   
                        id: post._id
                    };
                }),
                maxPosts: postData.maxPosts
            };
        })
        )
    .pipe(takeUntil(this.destroy))
    .subscribe(transformedPostData => {
        this.posts = transformedPostData.posts;
        this.postsUpdated.next({
            listing: [...this.posts],
            postCount: transformedPostData.maxPosts
        });
    });
}

Поскольку вы отправляете параметры, вам нужно изменить URL-адрес API, как указано ниже в коде сервера,

Ваш Код сервера будет выглядеть следующим образом: 

app.get("/api/listings/:postPerPage/:currentPage", (req, res, next) => {
    let postPerPage = req.params.postPerPage;
    let currentPage = req.params.currentPage;
    Post.find({ auctionEndDateTime: { $gte: Date.now() } })
    .populate("creator username")
    .skip(postPerPage * currentPage)
    .limit(postPerPage)
    .then(documents => {
        req.params.Id = mongoose.Types.ObjectId(req.params.Id);
        res.status(200).json({
            message: "Auction listings retrieved successfully!",
            posts: documents
        });
    });
});

Из приведенного выше кода вы получите сообщение, равное postPerPage .

Надеюсь, это то, что вы ищете. Спасибо

0 голосов
/ 17 января 2020

Вам понадобятся два значения на стороне сервера: одно - страница, т.е. какой номер страницы отображать, а второе - ограничение, т.е. сколько результатов показывать на странице. Затем просто используйте: 

.skip(limit * (page - 1)).limit(limit)

Первый оператор пропустит нежелательные результаты, например: если страница равна 2, а ограничение равно 20, то в первой операции первые 20 результатов будут пропущены, а во второй операции мы ограничим результат до 20 результатов, поэтому вы получите документы с 21 по 40, что является желаемым результатом.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...