{"id":322115,"date":"2021-04-26T15:01:32","date_gmt":"2021-04-26T15:01:32","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=322115"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=322115","title":{"rendered":"\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043a\u044d\u0448\u0438\u0440\u0443\u0435\u043c\u0443\u044e \u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043d\u0435 \u0431\u043e\u0438\u0442\u0441\u044f \u043d\u0435\u043e\u0436\u0438\u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u0411\u0414"},"content":{"rendered":"\n<div class=\"post__text post__text_v2\" id=\"post-content-body\">\n<p>\u0415\u0441\u043b\u0438 \u043d\u0430 \u0432\u0430\u0448\u0435\u043c \u0441\u0430\u0439\u0442\u0435 \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430, \u0442\u043e \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0435\u0433\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0442\u0430\u043a \u0438\u043b\u0438 \u0438\u043d\u0430\u0447\u0435 \u0434\u0435\u043b\u0438\u0442\u044c. <\/p>\n<p>\u0412\u0441\u0435 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0435 \u043c\u043d\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u0438\u043c\u0435\u044e\u0442 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438 \u0438 \u044f \u043f\u043e\u043f\u044b\u0442\u0430\u043b\u0441\u044f \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0438\u0441\u0442\u0435\u043c\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u043c\u043e\u0436\u0435\u0442 \u0440\u0435\u0448\u0438\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0437 \u043d\u0438\u0445 \u0438 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0441\u043b\u043e\u0436\u043d\u0430 \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n<h2>\u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u044b<\/h2>\n<h4>1. \u041f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u044f (\u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043d\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b)<\/h4>\n<figure class=\"float full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/76b\/ad2\/e59\/76bad2e5988f1e687f5e251881bc14a3.png\" alt=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u0441 \u0441\u0430\u0439\u0442\u0430 habr.com\" title=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u0441 \u0441\u0430\u0439\u0442\u0430 habr.com\" width=\"958\" height=\"242\"><figcaption>\u041f\u0440\u0438\u043c\u0435\u0440 \u0441 \u0441\u0430\u0439\u0442\u0430 habr.com<\/figcaption><\/figure>\n<p>\u041f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u044f \u0438\u043b\u0438 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043d\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b&nbsp;\u2014&nbsp;\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0441\u0442\u0430\u0440\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430,&nbsp;\u043a\u043e\u0442\u043e\u0440\u044b\u0439, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435&nbsp;\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043d\u0430&nbsp;\u0425\u0430\u0431\u0440\u0435&nbsp;\u043e\u0441\u043d\u043e\u0432\u043d\u044b\u043c \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0435\u0433\u043e \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0438 \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u0430\u043a \u0441\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0442\u0430\u043a \u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0439 \u0447\u0430\u0441\u0442\u0438.  <\/p>\n<p>\u041a\u043e\u0434 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438\u0437 \u0431\u0434 \u0447\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0430\u0440\u043e\u0439 \u0441\u0442\u0440\u043e\u043a.<\/p>\n<p>\u0422\u0443\u0442 \u0438 \u0434\u0430\u043b\u0435\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u043d\u0430 \u044f\u0437\u044b\u043a\u0435 arangodb aql, \u044f \u0441\u043a\u0440\u044b\u043b \u043a\u043e\u0434 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0442.\u043a \u0442\u0430\u043c \u043f\u043e\u043a\u0430 \u043d\u0438\u0447\u0435\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0433\u043e.<\/p>\n<pre><code>\/\/ \u0412\u043e\u0437\u0432\u0440\u0430\u0442 \u043f\u043e 20 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.   LET count = 20 LET offset = count * ${page}  FOR post IN posts \tSORT post.date DESC \/\/ \u0441\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u043e\u0442 \u043d\u043e\u0432\u044b\u0445 \u043a \u0441\u0442\u0430\u0440\u044b\u043c \tLIMIT offset, count \tRETURN post<\/code><\/pre>\n<p>\u041d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u043c\u044b \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u043c \u0438 \u0432\u044b\u0432\u043e\u0434\u0438\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u0432\u0448\u0438\u0439\u0441\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442, \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e vuejs \u0441 nuxtjs \u0434\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430, \u043d\u043e \u0442\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0430 \u043b\u044e\u0431\u043e\u043c \u0434\u0440\u0443\u0433\u043e\u043c \u0441\u0442\u0435\u043a\u0435, \u0432\u0441\u0435 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u044b\u0435 \u0434\u043b\u044f vue \u043c\u043e\u043c\u0435\u043d\u0442\u044b \u044f \u0431\u0443\u0434\u0443 \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c.<\/p>\n<pre><code class=\"xml\"># https:\/\/example.com\/posts?page=3 main.vue  &lt;template&gt; &lt;!-- \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 template \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 body\t--&gt; \t&lt;div&gt;     &lt;template v-for=\"post in posts\"&gt; &lt;!-- \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\t--&gt; \t\t\t&lt;div :key=\"post.id\"&gt; \t\t\t\t{{ item.title }} \t\t\t&lt;\/div&gt;     &lt;\/template&gt; \t&lt;\/div&gt; &lt;\/template&gt;  &lt;script&gt; export default { \tdata() { \t\treturn { \t\t\tposts: [], \/\/ \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0441 \u043f\u043e\u0441\u0442\u0430\u043c\u0438 \t\t} \t},   computed: { \/\/ \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 this, \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u044b\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0438   \tcurrentPage(){       \/\/ \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043d\u043e\u043c\u0435\u0440 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438\u0437 \u0441\u0441\u044b\u043b\u043a\u0438 \u0438 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u043c \u043a \u0447\u0438\u0441\u043b\u0443 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e +       return +this.$route.query.page || 0     },   }, \tasync fetch() { \/\/ \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u0434 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b      \t\tconst page = this.currentPage          \/\/ \u0437\u0430\u043f\u0440\u043e\u0441 \u043a \u0441\u0435\u0440\u0432\u0435\u0440\u0443, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442 \u0437\u0430\u043f\u0440\u043e\u0441 \u043a \u0431\u0430\u0437\u0435 \u0434\u0430\u043d\u043d\u044b\u0445   \tthis.posts = await this.$axios.$get('posts', {params: {page}})   } } &lt;\/script&gt;<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0443 \u043d\u0430\u0441 \u0432\u044b\u0432\u043e\u0434\u044f\u0442\u0441\u044f \u0432\u0441\u0435 \u043f\u043e\u0441\u0442\u044b \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u043d\u043e \u043f\u043e\u0433\u043e\u0434\u0438\u0442\u0435, \u043a\u0430\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u0431\u0443\u0434\u0443\u0442 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u044c\u0441\u044f \u043c\u0435\u0436\u0434\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438? \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u0430\u0440\u0443 \u043a\u043d\u043e\u043f\u043e\u043a \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043b\u0438\u0441\u0442\u044b\u0432\u0430\u043d\u0438\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446.<\/p>\n<pre><code class=\"xml\">&lt;template&gt; &lt;!-- \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 template \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 body\t--&gt;   &lt;div&gt;     &lt;div&gt;       &lt;template v-for=\"post in posts\"&gt; &lt;!-- \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\t--&gt;         &lt;div :key=\"post.id\"&gt;           {{ item.title }}         &lt;\/div&gt;       &lt;\/template&gt;     &lt;\/div&gt;     &lt;div&gt;  &lt;!-- \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0438\t--&gt;       &lt;button @click=\"prev\"&gt;       \t\u041f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430       &lt;\/button&gt;       &lt;button @click=\"next\"&gt;       \t\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430       &lt;\/button&gt;     &lt;\/div&gt;   &lt;\/div&gt; &lt;\/template&gt;  &lt;script&gt; export default {   \/\/... \u0442\u0443\u0442 \u043a\u043e\u0434 \u0438\u0437 \u043f\u0440\u043e\u0448\u043b\u043e\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430      methods: {\/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443     prev(){ \t\t\tconst page = this.currentPage()       if(page &gt; 0)         \/\/ \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043d\u0430 https:\/\/example.com\/posts?page={page - 1} \t\t\t\tthis.$router.push({query: {page: page - 1}})     },     next(){ \t\t\tconst page = this.currentPage()       if(page &lt; 100) \/\/ \u0434\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u0432\u0441\u0435\u0433\u0434\u0430 \u0435\u0441\u0442\u044c \u0440\u043e\u0432\u043d\u043e 100 \u0441\u0442\u0440\u0430\u043d\u0438\u0446         \/\/ \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043d\u0430 https:\/\/example.com\/posts?page={page + 1} \t\t\t\tthis.$router.push({query: {page: page + 1}})     },   }, } &lt;\/script&gt;<\/code><\/pre>\n<p><strong>\u041c\u0438\u043d\u0443\u0441\u044b \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u0430<\/strong><\/p>\n<ul>\n<li>\n<p>\u041f\u0440\u0438 \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u0438 \u043a\u043e\u043d\u0446\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u0441\u044f \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0432\u0440\u0443\u0447\u043d\u0443\u044e.<\/p>\n<\/li>\n<li>\n<p>\u041d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b, \u0442.\u043a \u043f\u043e\u0441\u0442\u044b \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0438\u0435\u0441\u044f \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 2, \u043f\u0440\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u043d\u043e\u0432\u044b\u0445, \u043d\u0435\u043f\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0441\u043c\u0435\u0441\u0442\u044f\u0442\u0441\u044f \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 3, 4 \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435, \u0442.\u0435 \u043e\u0434\u043d\u0430 \u0438 \u0442\u0430 \u0436\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f GET \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0440\u0430\u0437\u043d\u044b\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u043f\u043e\u0441\u0442\u043e\u0432.<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0432 \u043c\u043e\u043c\u0435\u043d\u0442 \u043f\u0435\u0440\u0435\u043b\u0438\u0441\u0442\u044b\u0432\u0430\u043d\u0438\u044f \u0434\u043e\u0431\u0430\u0432\u044f\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u0435 \u043f\u043e\u0441\u0442\u044b, \u0442\u043e \u043c\u044b \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0443\u0432\u0438\u0434\u0438\u043c \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0438 \u043d\u0430\u043f\u0440\u043e\u0442\u0438\u0432, \u043f\u0440\u043e\u043f\u0443\u0441\u0442\u0438\u043c \u0435\u0441\u043b\u0438 \u0431\u0443\u0434\u0435\u043c \u043b\u0438\u0441\u0442\u0430\u0442\u044c \u0432 \u043e\u0431\u0440\u0430\u0442\u043d\u0443\u044e \u0441\u0442\u043e\u0440\u043e\u043d\u0443.<\/p>\n<\/li>\n<\/ul>\n<h4>2. \u0411\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0439 \u0441\u043a\u0440\u043e\u043b\u043b\u0438\u043d\u0433<\/h4>\n<p>\u042d\u0442\u043e\u043c \u0441\u043f\u043e\u0441\u043e\u0431 \u0440\u0435\u0448\u0430\u0435\u0442 \u043f\u0435\u0440\u0432\u0443\u044e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443, \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u044c\u0441\u044f \u043c\u0435\u0436\u0434\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438. <\/p>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0438\u0434\u0435\u044f \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043f\u0440\u0438 \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u0438 \u043a\u043e\u043d\u0446\u0430 \u043f\u0440\u043e\u0448\u043b\u043e\u0439 \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u043e\u0432\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043a \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c.<\/p>\n<p>\u041f\u0440\u0438 \u0442\u0430\u043a\u043e\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 No3 \u043f\u0440\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0435\u0449\u0435 \u0431\u043e\u043b\u0435\u0435 \u044f\u0432\u043d\u043e, \u0435\u0441\u043b\u0438 \u0440\u0430\u043d\u044c\u0448\u0435 \u043c\u044b \u043d\u0435 \u043c\u043e\u0433\u043b\u0438 \u0443\u0432\u0438\u0434\u0435\u0442\u044c 2 \u043f\u043e\u0445\u043e\u0436\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0440\u044f\u0434\u043e\u043c, \u0442\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u044d\u0442\u043e \u0441\u0442\u0430\u043d\u0435\u0442 \u043e\u0431\u044b\u0447\u043d\u043e\u0439 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0435\u0439, \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0433\u0440\u044f\u0437\u043d\u044b\u043c \u0442\u0440\u044e\u043a\u043e\u043c \u0438 \u043e\u0442\u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u043c id \u043f\u0440\u044f\u043c\u043e \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435, \u043d\u043e \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u0441\u044f 40 \u043d\u043e\u0432\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0437\u0430 \u0440\u0430\u0437? \u041c\u044b \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u043c 3 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043a&nbsp;\u0441\u0435\u0440\u0432\u0435\u0440\u0443, \u0447\u0442\u043e\u0431\u044b \u0434\u043e\u0441\u0442\u0438\u0447\u044c&nbsp;\u043d\u043e\u0432\u044b\u0445 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432, \u0442.\u043a \u043f\u0440\u043e\u0448\u043b\u044b\u0435 \u0441\u043c\u0435\u0441\u0442\u044f\u0442\u0441\u044f \u043d\u0430 2 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b (\u043f\u0440\u0438 \u0443\u0441\u043b\u043e\u0432\u0438\u0438 \u0447\u0442\u043e \u043d\u0430 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 20 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432). \u042d\u0442\u043e \u043d\u0435 \u043c\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434! <\/p>\n<p>\u041a\u0430\u043a \u0440\u0435\u0448\u0430\u044e\u0442 \u044d\u0442\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u043b\u044e\u0434\u0438 \u0438\u0437 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0430:<\/p>\n<ul>\n<li>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u043c\u043d\u043e\u0439 \u0432\u044b\u0448\u0435 \u043f\u043e\u0434\u0445\u043e\u0434, \u044f \u043d\u0435 \u0438\u0441\u043a\u0430\u043b \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043d\u0438\u0435, \u043d\u043e \u044f \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0443\u0432\u0435\u0440\u0435\u043d \u0432 \u044d\u0442\u043e\u043c, \u0442.\u043a \u044d\u0442\u043e \u0441\u0430\u043c\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0439\u0442\u0438 \u043d\u0430 \u0443\u043c, \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0431\u044b\u0441\u0442\u0440\u043e\u0433\u043e \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438\u043b\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f mvp.<\/p>\n<\/li>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u044e\u0442 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u0435, \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044e\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u0430 \u0437\u0430\u0442\u0435\u043c \u0432\u044b\u0434\u0430\u044e\u0442 \u043f\u043e\u0440\u0446\u0438\u043e\u043d\u043d\u043e. \u0422\u0443\u0442 \u0441\u0440\u0430\u0437\u0443 \u043d\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442\u0441\u044f 2 \u043c\u0438\u043d\u0443\u0441\u0430.&nbsp;\u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u044d\u0442\u043e&nbsp;\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043b\u0438\u0448\u043d\u0435\u0439 \u043f\u0430\u043c\u044f\u0442\u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432 \u0432\u0441\u0435\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439.&nbsp;\u0412\u043e-\u0432\u0442\u043e\u0440\u044b\u0445, \u0431\u043e\u043b\u0435\u0435&nbsp;\u0441\u043b\u043e\u0436\u043d\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f, \u0442\u0440\u0435\u0431\u0443\u044e\u0449\u0430\u044f \u0438 \u043b\u043e\u0433\u0438\u043a\u0438 \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u0438 \u043b\u043e\u0433\u0438\u043a\u0438 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432. \u042f&nbsp;\u0443\u0432\u0435\u0440\u0435\u043d, \u0447\u0442\u043e&nbsp;\u0442\u0430\u043a\u0438\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u0440\u0435\u0448\u0438\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u0438\u0437\u043b\u0438\u0448\u043d\u0435\u0439 \u043f\u0430\u043c\u044f\u0442\u0438, \u043d\u043e \u043f\u0440\u043e\u0449\u0435 \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u043e\u0442 \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u0441\u0442\u0430\u043b\u0430, \u0434\u0430 \u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u044d\u0442\u043e \u043d\u0435 \u0440\u0435\u0448\u0430\u0435\u0442, \u0430 \u043b\u0438\u0448\u044c \u0443\u0441\u0443\u0433\u0443\u0431\u043b\u044f\u0435\u0442 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044e.<\/p>\n<\/li>\n<li>\n<p>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u044b \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0431\u043e\u043b\u0435\u0435 \u0438\u043b\u0438 \u043c\u0435\u043d\u0435\u0435 \u0438\u0437\u043e\u0431\u0440\u0435\u0442\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f, \u043d\u043e \u0442\u043e \u0447\u0442\u043e \u044f \u0445\u043e\u0447\u0443 \u0432\u0430\u043c \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0438\u0442\u044c \u044f \u043f\u043e\u043a\u0430 \u043d\u0435 \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u043b. \u0412 \u0441\u0432\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u043c\u043d\u0435 \u0431\u044b \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u043c\u043e\u0433\u043b\u0430 \u043f\u043e\u0434\u043e\u0431\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u0438 \u0440\u0435\u0448\u0438\u043b \u0435\u0451 \u0441\u043e\u0437\u0434\u0430\u0442\u044c. \u0414\u0443\u043c\u0430\u044e \u0447\u0442\u043e \u043b\u044e\u0434\u044f\u043c \u0441 \u043f\u043e\u0445\u043e\u0436\u0435\u0439 \u0437\u0430\u0434\u0430\u0447\u0435\u0439 \u043e\u043d\u0430 \u043e\u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0439!<\/p>\n<\/li>\n<\/ul>\n<h2>\u041c\u043e\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f<\/h2>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0438\u0434\u0435\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043d\u0430\u043c \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043a \u0431\u0430\u0437\u0435, \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043d\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u0438\u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0432 \u0437\u0430\u043f\u0440\u043e\u0441.<\/p>\n<h4>\u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u043a\u043e\u0434 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435<\/h4>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0435\u0448\u0438\u043c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u0441\u0451 \u043f\u0435\u0440\u0435\u0432\u0435\u0440\u043d\u0435\u043c.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044f\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0441\u0442\u0430\u043d\u0435\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439 \u043d\u043e\u043c\u0435\u0440 0, \u0430 \u043f\u0440\u0435\u0434\u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044f\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043d\u043e\u043c\u0435\u0440\u043e\u043c 1, \u0441\u043b\u043e\u0432\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 (page) \u0441\u044e\u0434\u0430 \u0443\u0436\u0435 \u043d\u0435 \u0432\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u0442.\u043a \u043c\u044b \u0441 \u0434\u0435\u0442\u0441\u0442\u0432\u0430 \u043f\u0440\u0438\u0432\u044b\u043a\u043b\u0438 \u0447\u0442\u043e \u0432 \u043a\u043d\u0438\u0436\u043a\u0430\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438\u0434\u0443\u0442 \u0441 \u043d\u0430\u0447\u0430\u043b\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0431\u043e\u043b\u0435\u0435 \u043d\u0435\u0439\u0442\u0440\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043b\u043e\u0432\u043e offset (\u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435).<\/p>\n<pre><code>LET count = 20 LET offset = ${offset}  FOR post IN posts \tSORT post.date ASC \/\/ \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043e\u0442\u0441\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0432\u0441\u0451 \u0432 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435 \tLIMIT offset, count \tRETURN post<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0441\u0442\u043e\u0432 \u043c\u044b \u0431\u044b \u043d\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438, GET &#171;\/?offset=0&#187; \u0432\u0441\u0435\u0433\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442.<\/p>\n<p>\u041f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u043f\u0435\u0440\u0432\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0441\u0442\u0430\u043b\u043e \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0441\u043b\u043e\u0436\u043d\u0435\u0435, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c \u043e\u0431\u0430 \u0432\u044b\u0448\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u0430, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u0441 \u0443\u0440\u043e\u0432\u043d\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043a \u0431\u0430\u0437\u0435 \u043d\u0430 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u0441\u0435\u0440\u0432\u0435\u0440\u0430 (\u044f\u0437\u044b\u043a nodejs):<\/p>\n<pre><code class=\"javascript\">async getPosts({offset}) {   const isOffset = offset !== undefined   if (isOffset &amp;&amp; isNaN(+offset)) throw new BadRequestException()  \tconst count = 20 \t\/\/ \u0421\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043a\u0440\u0430\u0442\u043d\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0447\u0442\u043e\u0431\u044b \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u043d\u0435 \u043f\u0435\u0440\u0435\u0441\u0435\u043a\u0430\u043b\u0438\u0441\u044c \tif (offset % count !== 0) throw new BadRequestException()  \tconst sort = isOffset ? ` \t\tSORT post.date DESC \t\tLIMIT ${+offset}, ${count} \t` : ` \t\tSORT post.date ASC \t\tLIMIT 0, ${count * 2} \/\/ \u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u0447\u0435\u043c \u043d\u0443\u0436\u043d\u043e \u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u043f\u0435\u0440\u0432\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430* \t`  \tconst q = { \t\tquery: ` \t\t\tFOR post IN posts \t\t\t${sort} \t\t\tRETURN post \t\t`, \t\tbindVars: {} \t}  \t\/\/ \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u043e\u0431\u0449\u0438\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u043d\u0430\u0439\u0434\u0435\u043d\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \tconst cursor = await this.db.query(q, {fullCount: true, count: isOffset}) \tconst fullCount = cursor.extra.stats.fullCount  \t\/*    \t*\u0415\u0441\u043b\u0438 \u043e\u0431\u0449\u0435\u0435 \u0447\u0438\u0441\u043b\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u0431\u0430\u0437\u0435 \u043d\u0435 \u043a\u0440\u0430\u0442\u043d\u043e count{20} \u0442\u043e \u0432 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u0435 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 2 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b [21-39] \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \t\t\u0412 \u0442\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0432\u0442\u043e\u0440\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0442.\u043a \u043e\u043d\u0430 \u0443\u0436\u0435 \u0432\u0445\u043e\u0434\u0438\u0442 \u0432 \u043f\u0435\u0440\u0432\u0443\u044e \t\t\u0415\u0441\u043b\u0438 \u043e\u0431\u0449\u0435\u0435 \u0447\u0438\u0441\u043b\u043e \u0434\u0435\u043b\u0438\u0442\u0441\u044f \u043d\u0430 20 \u0442\u043e \u0432 \u043f\u0435\u0440\u0432\u043e\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u0435 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 1-\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 c count{20} \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \t*\/    let data; \tif (isOffset) {     \/\/ \u043e\u0442\u0441\u0435\u043a\u0430\u0435\u043c \u043f\u043e\u043f\u044b\u0442\u043a\u0443 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0432\u0442\u043e\u0440\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0435\u0441\u043b\u0438 \u043e\u043d\u0430 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u0430 \u0432 \u043f\u0435\u0440\u0432\u0443\u044e \t\tconst allow = offset &lt;= fullCount - cursor.count - count \t\tif (!allow) throw new NotFoundException() \t\t\/\/ \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u043f\u043e\u0441\u0442\u0430\u043c, \u0442.\u043a \u0432 \u0437\u0430\u043f\u0440\u043e\u0441\u0435 \u043a \u0431\u0430\u0437\u0435 \u043c\u044b \u0432\u0441\u0451 \u043f\u0435\u0440\u0435\u0432\u0435\u0440\u043d\u0443\u043b\u0438  \t\tdata = (await cursor.all()).reverse() \t} else { \t\tconst all = await cursor.all() \t\tif (fullCount % count === 0) {       \/\/ \u043e\u0442\u0440\u0435\u0437\u0430\u0435\u043c \u043b\u0438\u0448\u043d\u0438\u0435 20 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u0430\u043a \u0442\u0443\u0442, \u0442\u0430\u043a \u0438 \u0432 \u0437\u0430\u043f\u0440\u043e\u0441\u0435 \u043a \u0431\u0434, \u0432\u043e\u043f\u0440\u043e\u0441 \u043b\u0438\u0448\u044c \u0432 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \t\t\tdata = all.slice(0, count)  \t\t} else {       \/* \u0422\u0443\u0442 \u043f\u043e\u0441\u043b\u043e\u0436\u043d\u0435\u0439, \u0435\u0441\u043b\u0438 \u0440\u0430\u043d\u0435\u0435 \u043c\u044b \u043c\u043e\u0433\u043b\u0438 \u0438\u043c\u0435\u0442\u044c \u043d\u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 0-20 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432,       \u0442\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u0442\u0430\u043c \u043d\u0430\u043c \u0432\u0441\u0435\u0433\u0434\u0430 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f 20 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0447\u0443 \u043d\u0443\u0436\u043d\u043e \u043a\u043e\u043c\u043f\u0435\u043d\u0441\u0438\u0440\u043e\u0432\u0430\u0442\u044c,       \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430 \u043f\u0435\u0440\u0432\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 0-20 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043a \u0438\u043c\u0435\u044e\u0449\u0438\u043c\u0441\u044f,       \u0432 \u0437\u0430\u043f\u0440\u043e\u0441\u0435 \u043a \u0431\u0434 \u0434\u043b\u044f \u043f\u0435\u0440\u0432\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043c\u044b \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0441 \u0437\u0430\u043f\u0430\u0441\u043e\u043c 40 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432       \u0438 \u0437\u0430\u0442\u0435\u043c \u0437\u0434\u0435\u0441\u044c \u043e\u0442\u0440\u0435\u0437\u0430\u0435\u043c \u043b\u0438\u0448\u043d\u0438\u0435       *\/ \t\t\tconst pagesCountUp = Math.ceil(fullCount \/ count) \t\t\tconst resultCount = fullCount - pagesCountUp * count + count * 2 \t\t\tdata = all.slice(0, resultCount) \t\t} \t}  \tif (!data.length) throw new NotFoundException()  \treturn { fullCount, count: data.length, data } }<\/code><\/pre>\n<p><strong>\u0427\u0435\u0433\u043e \u043c\u044b \u044d\u0442\u0438\u043c \u0434\u043e\u0431\u0438\u043b\u0438\u0441\u044c:<\/strong><\/p>\n<ul>\n<li>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u043a\u0440\u044b\u0442\u0438\u044f id \u043f\u043e\u0441\u043b\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u043e\u0432\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441\u0442\u0430\u043b\u0438 \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b.<\/p>\n<\/li>\n<li>\n<p>\u0417\u0430\u043f\u0440\u043e\u0441\u044b \u0442\u0435\u043f\u0435\u0440\u044c \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u044b \u0438 \u043b\u0435\u0433\u043a\u043e \u043f\u043e\u0434\u0434\u0430\u044e\u0442\u0441\u044f \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e, \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c \u043f\u043b\u0430\u0432\u0430\u044e\u0449\u0438\u043c \u043f\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u0438\u0445 id \u043e\u0441\u0442\u0430\u043b\u0441\u044f \u0437\u0430\u043f\u0440\u043e\u0441 \u0431\u0435\u0437 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 offset.<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u0448 \u043a\u043e\u0434 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442(.<\/p>\n<\/li>\n<\/ul>\n<p>\u041c\u0438\u043d\u0443\u0441\u044b \u043c\u043e\u0435\u0433\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u0430:<\/p>\n<ul>\n<li>\n<p>\u0412\u043e\u043f\u0440\u043e\u0441 \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u0438 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0438 \u0432\u0441\u0435 \u0435\u0449\u0451 \u043e\u0442\u043a\u0440\u044b\u0442, \u044d\u0442\u043e \u043d\u0435 \u0447\u0430\u0441\u0442\u0430\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0442\u044c \u043a\u044d\u0448, \u043b\u0438\u0431\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c null \u0432\u043c\u0435\u0441\u0442\u043e \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u044d\u0442\u043e \u043d\u0435 \u043f\u043b\u043e\u0445\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435, \u0442.\u043a. \u0437\u0430\u0447\u0430\u0441\u0442\u0443\u044e \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043d\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442, \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043b\u0438\u0448\u044c \u043f\u043e\u043c\u0435\u0447\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u0443\u0434\u0430\u043b\u0435\u043d\u043d\u044b\u0439, \u0435\u0441\u043b\u0438 \u0442\u0430\u043a\u0438\u0445 &#171;null-\u0437\u043e\u043c\u0431\u0438&#187; \u0441\u0442\u0430\u043d\u0435\u0442 \u043c\u043d\u043e\u0433\u043e, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u0432\u0441\u0435 null-\u0437\u043e\u043c\u0431\u0438 \u0438\u0437 \u0432\u044b\u0434\u0430\u0447\u0438 \u0438 \u0441\u0431\u0440\u043e\u0441\u0438\u0442\u044c \u043a\u044d\u0448 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432.<\/p>\n<\/li>\n<\/ul>\n<h4>\u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u043a\u043e\u0434 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435<\/h4>\n<p>\u0417\u0430\u043e\u0434\u043d\u043e \u044f \u043f\u043e\u043a\u0430\u0436\u0443 \u043a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u0443\u044e \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0443 \u0438\u0437 \u043f\u0443\u043d\u043a\u0442\u0430 \u21162.<\/p>\n<pre><code class=\"xml\">&lt;template&gt; \t&lt;div&gt; \t\t&lt;div ref='posts'&gt; \t\t\t&lt;template v-for=\"post in posts\"&gt; \t\t\t\t&lt;div :key=\"post.id\" style=\"height: 200px\"&gt; &lt;!-- \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432\u044b\u0441\u043e\u0442\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443, \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e \u0445\u043e\u0440\u043e\u0448\u043e\t--&gt; \t\t\t\t\t{{ item.title }} \t\t\t\t&lt;\/div&gt; \t\t\t&lt;\/template&gt; \t\t&lt;\/div&gt; \t\t&lt;div&gt; &lt;!-- \u0443\u0431\u0438\u0440\u0430\u0435\u043c \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0442.\u043a \u0442\u0435\u043f\u0435\u0440\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0430\u0432\u0442\u043e\u043f\u043e\u0434\u0433\u0440\u0443\u0437\u043a\u0430\t--&gt; \t\t\t&lt;button @click=\"prev\" v-if=\"currentPage &gt; 1\"&gt; \t\t\t\t\u041f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \t\t\t&lt;\/button&gt; \t\t&lt;\/div&gt; \t&lt;\/div&gt; &lt;\/template&gt;  &lt;script&gt; const count = 20 export default { \tdata() { \t\treturn { \t\t\tposts: [], \t\t\tfullCount: 0, \t\t\tpagesCount: 0, \t\t\tdataLoading: true, \t\t\toffset: undefined, \t\t} \t}, \tasync fetch() { \t\tconst offset = this.$route.query?.offset \t\tthis.offset = offset \t\tthis.posts = await this.loadData(offset) \t\tsetTimeout(() =&gt; this.dataLoading = false) \t}, \tcomputed: { \t\tcurrentPage() { \t\t\treturn this.offset === undefined ? 1 : this.pageFromOffset(this.offset) \t\t} \t}, \tmethods: {      \/\/ \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043a\u043e\u0434 \u0434\u043b\u044f \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u0432 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438 \u043e\u0431\u0440\u0430\u0442\u043d\u043e \t\tpageFromOffset(offset) { \t\t\treturn offset === undefined ? 1 : this.pagesCount - offset \/ count \t\t}, \t\toffsetFromPage(page) { \t\t\treturn page === 1 ? undefined : this.pagesCount * count - count * page \t\t}, \t\tprev() { \t\t\tconst offset = this.offsetFromPage(this.currentPage - 1) \t\t\tthis.$router.push({query: {offset}}) \t\t}, \t\tasync loadData(offset) { \t\t\ttry { \t\t\t\tconst data = await this.$axios.$get('posts', {params: {offset}}) \t\t\t\tthis.fullCount = data.fullCount \t\t\t\tthis.pagesCount = Math.ceil(data.fullCount \/ count) \t\t\t\t\/\/ \u0423\u0434\u0430\u043b\u044f\u0435\u043c \u0432\u0442\u043e\u0440\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0435\u0441\u043b\u0438 \u043e\u043d\u0430 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u043f\u0435\u0440\u0432\u043e\u0439 \t\t\t\tif (this.fullCount % count !== 0) \t\t\t\t\tthis.pagesCount -= 1 \t\t\t\treturn data.data \t\t\t} catch (e) { \t\t\t\t\/\/... \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 404 \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u043e\u0448\u0438\u0431\u043e\u043a \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \t\t\t\treturn [] \t\t\t} \t\t}, \t\tonScroll() { \t\t\t\/\/ \u0437\u0430 1000 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0434\u043e \u043a\u043e\u043d\u0446\u0430 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \t\t\tconst load = this.$refs.posts.getBoundingClientRect().bottom - window.innerHeight &lt; 1000 \t\t\tconst nextPage = this.pageFromOffset(this.offset) + 1 \t\t\tconst nextOffset = this.offsetFromPage(nextPage) \t\t\tif (!this.dataLoading &amp;&amp; load &amp;&amp; nextPage &lt;= this.pagesCount) { \t\t\t\tthis.dataLoading = true \t\t\t\tthis.offset = nextOffset \t\t\t\tthis.loadData(nextOffset).then(async (data) =&gt; { \t\t\t\t\tconst top = window.scrollY \t\t\t\t\t\/\/ \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u043e\u0432\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c \u0430\u0434\u0440\u0435\u0441\u043d\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443 \t\t\t\t\tthis.posts.push(...data) \t\t\t\t\tawait this.$router.replace({query: {offset: nextOffset}}) \t\t\t\t\tthis.$nextTick(() =&gt; { \t\t\t\t\t\t\/\/ \u0418\u0441\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438 \u043a\u043e\u0433\u0434\u0430 viewport \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0432\u043d\u0438\u0437\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u043e\u0441\u043b\u0435 \u043f\u043e\u0434\u0433\u0440\u0443\u0437\u043a\u0438 \t\t\t\t\t\twindow.scrollTo({top}); \t\t\t\t\t\tthis.dataLoading = false \t\t\t\t\t}) \t\t\t\t}) \t\t\t} \t\t} \t}, \tmounted() { \t\twindow.addEventListener('scroll', this.onScroll) \t}, \tbeforeDestroy() { \t\twindow.removeEventListener('scroll', this.onScroll) \t}, } &lt;\/script&gt;<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043b\u0438\u0448\u0435\u043d\u043d\u0430\u044f \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044b\u0445 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u043e\u0432 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f. \u041d\u0435\u0441\u043e\u043c\u043d\u0435\u043d\u043d\u043e \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442\u044b \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043b\u0443\u0447\u0448\u0435, \u044f \u0445\u043e\u0442\u0435\u043b \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0441\u0430\u043c \u043f\u043e\u0434\u0445\u043e\u0434, \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0443 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0440\u0430\u0437\u043d\u043e\u0439.<\/p>\n<h2>\u0411\u043e\u043d\u0443\u0441: \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0433\u0438\u0431\u043a\u0443\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430 \u043f\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c<\/h2>\n<p>\u0412 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0442\u044c\u0441\u044f \u043b\u0438\u0448\u044c \u043d\u0430 1 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0432\u043f\u0435\u0440\u0435\u0434 \u0438\u043b\u0438 \u043d\u0430\u0437\u0430\u0434, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043d\u0430 \u043b\u044e\u0431\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a (\u0432 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u043d\u044b\u0445 \u0441\u043a\u043e\u0431\u043a\u0430\u0445 \u0442\u0435\u043a\u0443\u0449\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430):<\/p>\n<p><code>&lt; 1 ... 26 [27] 28 ... 255 &gt;<\/code><\/p>\n<p><code>&lt; [1] 2 3 4 5 ... 255 &gt;<\/code><\/p>\n<p><code>&lt; 1 ... 251 252 253 254 [255] &gt;<\/code><\/p>\n<p>\u041e\u0441\u043d\u043e\u0432\u0430 \u043c\u0435\u0442\u043e\u0434\u0430 \u0434\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u0438 \u0432\u0437\u044f\u0442\u0430 \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u043e\u0431\u0441\u0443\u0436\u0434\u0435\u043d\u0438\u044f: <a href=\"https:\/\/gist.github.com\/kottenator\/9d936eb3e4e3c3e02598#gistcomment-3238804\" rel=\"noopener noreferrer nofollow\">https:\/\/gist.github.com\/kottenator\/9d936eb3e4e3c3e02598#gistcomment-3238804<\/a> \u0438 \u0441\u043a\u0440\u0435\u0449\u0435\u043d\u0430 \u0441 \u043c\u043e\u0438\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c.<\/p>\n<details class=\"spoiler\">\n<summary>\u041f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0435\u043d\u0438\u0435 \u0431\u043e\u043d\u0443\u0441\u0430<\/summary>\n<div class=\"spoiler__content\">\n<p>\u0412 \u043d\u0430\u0447\u0430\u043b\u0435 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u044d\u0442\u043e\u0442 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 \u0432\u043d\u0443\u0442\u0440\u044c \u0442\u0435\u0433\u0430 &lt;script&gt;<\/p>\n<pre><code class=\"javascript\">const getRange = (start, end) =&gt; Array(end - start + 1).fill().map((v, i) =&gt; i + start) const pagination = (currentPage, pagesCount, count = 4) =&gt; { \tconst isFirst = currentPage === 1 \tconst isLast = currentPage === pagesCount  \tlet delta \tif (pagesCount &lt;= 7 + count) { \t\t\/\/ delta === 7: [1 2 3 4 5 6 7] \t\tdelta = 7 + count \t} else { \t\t\/\/ delta === 2: [1 ... 4 5 6 ... 10] \t\t\/\/ delta === 4: [1 2 3 4 5 ... 10] \t\tdelta = currentPage &gt; count + 1 &amp;&amp; currentPage &lt; pagesCount - (count - 1) ? 2 : 4 \t\tdelta += count \t\tdelta -= (!isFirst + !isLast) \t}  \tconst range = { \t\tstart: Math.round(currentPage - delta \/ 2), \t\tend: Math.round(currentPage + delta \/ 2) \t}  \tif (range.start - 1 === 1 || range.end + 1 === pagesCount) { \t\trange.start += 1 \t\trange.end += 1 \t}  \tlet pages = currentPage &gt; delta \t\t ? getRange(Math.min(range.start, pagesCount - delta), Math.min(range.end, pagesCount)) \t\t : getRange(1, Math.min(pagesCount, delta + 1))  \tconst withDots = (value, pair) =&gt; (pages.length + 1 !== pagesCount ? pair : [value])  \tif (pages[0] !== 1) { \t\tpages = withDots(1, [1, '...']).concat(pages) \t}  \tif (pages[pages.length - 1] &lt; pagesCount) { \t\tpages = pages.concat(withDots(pagesCount, ['...', pagesCount])) \t} \tif (!isFirst) pages.unshift('&lt;') \tif (!isLast) pages.push('&gt;')  \treturn pages }<\/code><\/pre>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u044e\u0449\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u044b<\/p>\n<pre><code class=\"xml\">&lt;template&gt; \t&lt;div ref='posts'&gt; \t\t&lt;div&gt; \t\t\t&lt;div v-for=\"post in posts\" :key=\"item.id\"&gt;{{ post.title }}&lt;\/div&gt; \t\t&lt;\/div&gt; \t\t&lt;div style=\"position: fixed; bottom: 0;\"&gt; &lt;!-- \u041f\u0440\u0438\u043a\u0440\u0435\u043f\u0438\u043c \u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u044e \u043a \u043e\u043a\u043d\u0443 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 --&gt; \t\t\t&lt;template v-for=\"(i, key) in pagination\"&gt; \t\t\t\t&lt;button v-if=\"i === '...'\" :key=\"key + i\" @click=\"selectPage()\"&gt;{{ i }}&lt;\/button&gt; \t\t\t\t&lt;button :key=\"i\" v-else :disabled=\"currentPage === i\" @click=\"loadPage(pagePaginationOffset(i))\"&gt;{{ i }}&lt;\/button&gt; \t\t\t&lt;\/template&gt; \t\t&lt;\/div&gt; \t&lt;\/div&gt; &lt;\/template&gt;  &lt;script&gt; export default { \tdata() { \t\treturn { \t\t\tposts: [], \t\t\tfullCount: 0, \t\t\tpagesCount: 0, \t\t\tinterval: null, \t\t\tdataLoading: true, \t\t\toffset: undefined, \t\t} \t}, \tasync fetch() {\/* \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 *\/}, \tcomputed: { \t\tcurrentPage()  {\/* \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 *\/}, \t\t \t\t\/\/ \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u044e \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438 \u043e\u0431\u0449\u0435\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \t\tpagination() { \t\t\treturn this.pagesCount ? pagination(this.currentPage, this.pagesCount) : [] \t\t}, \t}, \tmethods: { \t\tpageFromOffset(offset) {\/* \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 *\/}, \t\toffsetFromPage(page) {\/* \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 *\/}, \t\tasync loadData(offset) {\/* \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 *\/}, \t\tonScroll() {\/* \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 *\/},  \t\t\/\/  \u043c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430 \u043d\u0430 \u043d\u0443\u0436\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \t\tloadPage(offset) { \t\t\twindow.scrollTo({top: 0}) \t\t\tthis.dataLoading = true  \t\t\tthis.loadData(offset).then((data) =&gt; { \t\t\t\tthis.offset = offset \t\t\t\tthis.posts = data \t\t\t\tthis.$nextTick(() =&gt; { \t\t\t\t\tthis.dataLoading = false \t\t\t\t}) \t\t\t}) \t\t}, \t\t\/\/ \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u0438 \u0432 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f \t\tpagePaginationOffset(item) { \t\t\tif (item === '...') return undefined \t\t\tlet page = isNaN(item) ? this.currentPage + (item === '&gt;') - (item === '&lt;') : item \t\t\treturn page &lt;= 1 ? undefined : this.offsetFromPage(page) \t\t}, \t\t\/\/ \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u0432\u044b\u0431\u043e\u0440\u0430 \u043b\u044e\u0431\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \t\tselectPage() { \t\t\tconst page = +prompt(\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043d\u043e\u043c\u0435\u0440 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b\"); \t\t\tthis.loadPage(this.offsetFromPage(page)) \t\t}, \t}, \tmounted() { \t\twindow.addEventListener('scroll', this.onScroll) \t}, \tbeforeDestroy() { \t\twindow.removeEventListener('scroll', this.onScroll) \t}, } &lt;\/script&gt; <\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c, \u043f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438, \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043d\u0430 \u043d\u0443\u0436\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443.<\/p>\n<\/div>\n<\/details>\n<\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/554456\/\"> https:\/\/habr.com\/ru\/post\/554456\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text_v2\" id=\"post-content-body\">\n<p>\u0415\u0441\u043b\u0438 \u043d\u0430 \u0432\u0430\u0448\u0435\u043c \u0441\u0430\u0439\u0442\u0435 \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430, \u0442\u043e \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0435\u0433\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0442\u0430\u043a \u0438\u043b\u0438 \u0438\u043d\u0430\u0447\u0435 \u0434\u0435\u043b\u0438\u0442\u044c. <\/p>\n<p>\u0412\u0441\u0435 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0435 \u043c\u043d\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u0438\u043c\u0435\u044e\u0442 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438 \u0438 \u044f \u043f\u043e\u043f\u044b\u0442\u0430\u043b\u0441\u044f \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0438\u0441\u0442\u0435\u043c\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u043c\u043e\u0436\u0435\u0442 \u0440\u0435\u0448\u0438\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0437 \u043d\u0438\u0445 \u0438 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0441\u043b\u043e\u0436\u043d\u0430 \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n<h2>\u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u044b<\/h2>\n<h4>1. \u041f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u044f (\u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043d\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b)<\/h4>\n<figure class=\"float full-width\"><figcaption>\u041f\u0440\u0438\u043c\u0435\u0440 \u0441 \u0441\u0430\u0439\u0442\u0430 habr.com<\/figcaption><\/figure>\n<p>\u041f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u044f \u0438\u043b\u0438 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043d\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b&nbsp;\u2014&nbsp;\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0441\u0442\u0430\u0440\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430,&nbsp;\u043a\u043e\u0442\u043e\u0440\u044b\u0439, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435&nbsp;\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043d\u0430&nbsp;\u0425\u0430\u0431\u0440\u0435&nbsp;\u043e\u0441\u043d\u043e\u0432\u043d\u044b\u043c \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0435\u0433\u043e \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0438 \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u0430\u043a \u0441\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0442\u0430\u043a \u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0439 \u0447\u0430\u0441\u0442\u0438.  <\/p>\n<p>\u041a\u043e\u0434 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438\u0437 \u0431\u0434 \u0447\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0430\u0440\u043e\u0439 \u0441\u0442\u0440\u043e\u043a.<\/p>\n<p>\u0422\u0443\u0442 \u0438 \u0434\u0430\u043b\u0435\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u043d\u0430 \u044f\u0437\u044b\u043a\u0435 arangodb aql, \u044f \u0441\u043a\u0440\u044b\u043b \u043a\u043e\u0434 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0442.\u043a \u0442\u0430\u043c \u043f\u043e\u043a\u0430 \u043d\u0438\u0447\u0435\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0433\u043e.<\/p>\n<pre><code>\/\/ \u0412\u043e\u0437\u0432\u0440\u0430\u0442 \u043f\u043e 20 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.   LET count = 20 LET offset = count * ${page}  FOR post IN posts \tSORT post.date DESC \/\/ \u0441\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u043e\u0442 \u043d\u043e\u0432\u044b\u0445 \u043a \u0441\u0442\u0430\u0440\u044b\u043c \tLIMIT offset, count \tRETURN post<\/code><\/pre>\n<p>\u041d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u043c\u044b \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u043c \u0438 \u0432\u044b\u0432\u043e\u0434\u0438\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u0432\u0448\u0438\u0439\u0441\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442, \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e vuejs \u0441 nuxtjs \u0434\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430, \u043d\u043e \u0442\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0430 \u043b\u044e\u0431\u043e\u043c \u0434\u0440\u0443\u0433\u043e\u043c \u0441\u0442\u0435\u043a\u0435, \u0432\u0441\u0435 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u044b\u0435 \u0434\u043b\u044f vue \u043c\u043e\u043c\u0435\u043d\u0442\u044b \u044f \u0431\u0443\u0434\u0443 \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c.<\/p>\n<pre><code class=\"xml\"># https:\/\/example.com\/posts?page=3 main.vue  &lt;template&gt; &lt;!-- \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 template \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 body\t--&gt; \t&lt;div&gt;     &lt;template v-for=\"post in posts\"&gt; &lt;!-- \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\t--&gt; \t\t\t&lt;div :key=\"post.id\"&gt; \t\t\t\t{{ item.title }} \t\t\t&lt;\/div&gt;     &lt;\/template&gt; \t&lt;\/div&gt; &lt;\/template&gt;  &lt;script&gt; export default { \tdata() { \t\treturn { \t\t\tposts: [], \/\/ \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0441 \u043f\u043e\u0441\u0442\u0430\u043c\u0438 \t\t} \t},   computed: { \/\/ \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 this, \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u044b\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0438   \tcurrentPage(){       \/\/ \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043d\u043e\u043c\u0435\u0440 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438\u0437 \u0441\u0441\u044b\u043b\u043a\u0438 \u0438 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u043c \u043a \u0447\u0438\u0441\u043b\u0443 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e +       return +this.$route.query.page || 0     },   }, \tasync fetch() { \/\/ \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u0434 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b      \t\tconst page = this.currentPage          \/\/ \u0437\u0430\u043f\u0440\u043e\u0441 \u043a \u0441\u0435\u0440\u0432\u0435\u0440\u0443, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442 \u0437\u0430\u043f\u0440\u043e\u0441 \u043a \u0431\u0430\u0437\u0435 \u0434\u0430\u043d\u043d\u044b\u0445   \tthis.posts = await this.$axios.$get('posts', {params: {page}})   } } &lt;\/script&gt;<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0443 \u043d\u0430\u0441 \u0432\u044b\u0432\u043e\u0434\u044f\u0442\u0441\u044f \u0432\u0441\u0435 \u043f\u043e\u0441\u0442\u044b \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u043d\u043e \u043f\u043e\u0433\u043e\u0434\u0438\u0442\u0435, \u043a\u0430\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u0431\u0443\u0434\u0443\u0442 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u044c\u0441\u044f \u043c\u0435\u0436\u0434\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438? \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u0430\u0440\u0443 \u043a\u043d\u043e\u043f\u043e\u043a \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043b\u0438\u0441\u0442\u044b\u0432\u0430\u043d\u0438\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446.<\/p>\n<pre><code class=\"xml\">&lt;template&gt; &lt;!-- \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 template \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 body\t--&gt;   &lt;div&gt;     &lt;div&gt;       &lt;template v-for=\"post in posts\"&gt; &lt;!-- \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\t--&gt;         &lt;div :key=\"post.id\"&gt;           {{ item.title }}         &lt;\/div&gt;       &lt;\/template&gt;     &lt;\/div&gt;     &lt;div&gt;  &lt;!-- \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0438\t--&gt;       &lt;button @click=\"prev\"&gt;       \t\u041f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430       &lt;\/button&gt;       &lt;button @click=\"next\"&gt;       \t\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430       &lt;\/button&gt;     &lt;\/div&gt;   &lt;\/div&gt; &lt;\/template&gt;  &lt;script&gt; export default {   \/\/... \u0442\u0443\u0442 \u043a\u043e\u0434 \u0438\u0437 \u043f\u0440\u043e\u0448\u043b\u043e\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430      methods: {\/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443     prev(){ \t\t\tconst page = this.currentPage()       if(page &gt; 0)         \/\/ \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043d\u0430 https:\/\/example.com\/posts?page={page - 1} \t\t\t\tthis.$router.push({query: {page: page - 1}})     },     next(){ \t\t\tconst page = this.currentPage()       if(page &lt; 100) \/\/ \u0434\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u0432\u0441\u0435\u0433\u0434\u0430 \u0435\u0441\u0442\u044c \u0440\u043e\u0432\u043d\u043e 100 \u0441\u0442\u0440\u0430\u043d\u0438\u0446         \/\/ \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043d\u0430 https:\/\/example.com\/posts?page={page + 1} \t\t\t\tthis.$router.push({query: {page: page + 1}})     },   }, } &lt;\/script&gt;<\/code><\/pre>\n<p><strong>\u041c\u0438\u043d\u0443\u0441\u044b \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u0430<\/strong><\/p>\n<ul>\n<li>\n<p>\u041f\u0440\u0438 \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u0438 \u043a\u043e\u043d\u0446\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u0441\u044f \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0432\u0440\u0443\u0447\u043d\u0443\u044e.<\/p>\n<\/li>\n<li>\n<p>\u041d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b, \u0442.\u043a \u043f\u043e\u0441\u0442\u044b \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0438\u0435\u0441\u044f \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 2, \u043f\u0440\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u043d\u043e\u0432\u044b\u0445, \u043d\u0435\u043f\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0441\u043c\u0435\u0441\u0442\u044f\u0442\u0441\u044f \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 3, 4 \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435, \u0442.\u0435 \u043e\u0434\u043d\u0430 \u0438 \u0442\u0430 \u0436\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f GET \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0440\u0430\u0437\u043d\u044b\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u043f\u043e\u0441\u0442\u043e\u0432.<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0432 \u043c\u043e\u043c\u0435\u043d\u0442 \u043f\u0435\u0440\u0435\u043b\u0438\u0441\u0442\u044b\u0432\u0430\u043d\u0438\u044f \u0434\u043e\u0431\u0430\u0432\u044f\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u0435 \u043f\u043e\u0441\u0442\u044b, \u0442\u043e \u043c\u044b \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0443\u0432\u0438\u0434\u0438\u043c \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0438 \u043d\u0430\u043f\u0440\u043e\u0442\u0438\u0432, \u043f\u0440\u043e\u043f\u0443\u0441\u0442\u0438\u043c \u0435\u0441\u043b\u0438 \u0431\u0443\u0434\u0435\u043c \u043b\u0438\u0441\u0442\u0430\u0442\u044c \u0432 \u043e\u0431\u0440\u0430\u0442\u043d\u0443\u044e \u0441\u0442\u043e\u0440\u043e\u043d\u0443.<\/p>\n<\/li>\n<\/ul>\n<h4>2. \u0411\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0439 \u0441\u043a\u0440\u043e\u043b\u043b\u0438\u043d\u0433<\/h4>\n<p>\u042d\u0442\u043e\u043c \u0441\u043f\u043e\u0441\u043e\u0431 \u0440\u0435\u0448\u0430\u0435\u0442 \u043f\u0435\u0440\u0432\u0443\u044e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443, \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u044c\u0441\u044f \u043c\u0435\u0436\u0434\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438. <\/p>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0438\u0434\u0435\u044f \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043f\u0440\u0438 \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u0438 \u043a\u043e\u043d\u0446\u0430 \u043f\u0440\u043e\u0448\u043b\u043e\u0439 \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u043e\u0432\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043a \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c.<\/p>\n<p>\u041f\u0440\u0438 \u0442\u0430\u043a\u043e\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 No3 \u043f\u0440\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0435\u0449\u0435 \u0431\u043e\u043b\u0435\u0435 \u044f\u0432\u043d\u043e, \u0435\u0441\u043b\u0438 \u0440\u0430\u043d\u044c\u0448\u0435 \u043c\u044b \u043d\u0435 \u043c\u043e\u0433\u043b\u0438 \u0443\u0432\u0438\u0434\u0435\u0442\u044c 2 \u043f\u043e\u0445\u043e\u0436\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0440\u044f\u0434\u043e\u043c, \u0442\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u044d\u0442\u043e \u0441\u0442\u0430\u043d\u0435\u0442 \u043e\u0431\u044b\u0447\u043d\u043e\u0439 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0435\u0439, \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0433\u0440\u044f\u0437\u043d\u044b\u043c \u0442\u0440\u044e\u043a\u043e\u043c \u0438 \u043e\u0442\u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u043c id \u043f\u0440\u044f\u043c\u043e \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435, \u043d\u043e \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u0441\u044f 40 \u043d\u043e\u0432\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0437\u0430 \u0440\u0430\u0437? \u041c\u044b \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u043c 3 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043a&nbsp;\u0441\u0435\u0440\u0432\u0435\u0440\u0443, \u0447\u0442\u043e\u0431\u044b \u0434\u043e\u0441\u0442\u0438\u0447\u044c&nbsp;\u043d\u043e\u0432\u044b\u0445 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432, \u0442.\u043a \u043f\u0440\u043e\u0448\u043b\u044b\u0435 \u0441\u043c\u0435\u0441\u0442\u044f\u0442\u0441\u044f \u043d\u0430 2 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b (\u043f\u0440\u0438 \u0443\u0441\u043b\u043e\u0432\u0438\u0438 \u0447\u0442\u043e \u043d\u0430 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 20 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432). \u042d\u0442\u043e \u043d\u0435 \u043c\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434! <\/p>\n<p>\u041a\u0430\u043a \u0440\u0435\u0448\u0430\u044e\u0442 \u044d\u0442\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u043b\u044e\u0434\u0438 \u0438\u0437 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0430:<\/p>\n<ul>\n<li>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u043c\u043d\u043e\u0439 \u0432\u044b\u0448\u0435 \u043f\u043e\u0434\u0445\u043e\u0434, \u044f \u043d\u0435 \u0438\u0441\u043a\u0430\u043b \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043d\u0438\u0435, \u043d\u043e \u044f \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0443\u0432\u0435\u0440\u0435\u043d \u0432 \u044d\u0442\u043e\u043c, \u0442.\u043a \u044d\u0442\u043e \u0441\u0430\u043c\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0439\u0442\u0438 \u043d\u0430 \u0443\u043c, \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0431\u044b\u0441\u0442\u0440\u043e\u0433\u043e \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438\u043b\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f mvp.<\/p>\n<\/li>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u044e\u0442 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u0435, \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044e\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u0430 \u0437\u0430\u0442\u0435\u043c \u0432\u044b\u0434\u0430\u044e\u0442 \u043f\u043e\u0440\u0446\u0438\u043e\u043d\u043d\u043e. \u0422\u0443\u0442 \u0441\u0440\u0430\u0437\u0443 \u043d\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442\u0441\u044f 2 \u043c\u0438\u043d\u0443\u0441\u0430.&nbsp;\u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u044d\u0442\u043e&nbsp;\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043b\u0438\u0448\u043d\u0435\u0439 \u043f\u0430\u043c\u044f\u0442\u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432 \u0432\u0441\u0435\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439.&nbsp;\u0412\u043e-\u0432\u0442\u043e\u0440\u044b\u0445, \u0431\u043e\u043b\u0435\u0435&nbsp;\u0441\u043b\u043e\u0436\u043d\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f, \u0442\u0440\u0435\u0431\u0443\u044e\u0449\u0430\u044f \u0438 \u043b\u043e\u0433\u0438\u043a\u0438 \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u0438 \u043b\u043e\u0433\u0438\u043a\u0438 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432. \u042f&nbsp;\u0443\u0432\u0435\u0440\u0435\u043d, \u0447\u0442\u043e&nbsp;\u0442\u0430\u043a\u0438\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u0440\u0435\u0448\u0438\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u0438\u0437\u043b\u0438\u0448\u043d\u0435\u0439 \u043f\u0430\u043c\u044f\u0442\u0438, \u043d\u043e \u043f\u0440\u043e\u0449\u0435 \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u043e\u0442 \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u0441\u0442\u0430\u043b\u0430, \u0434\u0430 \u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u044d\u0442\u043e \u043d\u0435 \u0440\u0435\u0448\u0430\u0435\u0442, \u0430 \u043b\u0438\u0448\u044c \u0443\u0441\u0443\u0433\u0443\u0431\u043b\u044f\u0435\u0442 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044e.<\/p>\n<\/li>\n<li>\n<p>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u044b \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0431\u043e\u043b\u0435\u0435 \u0438\u043b\u0438 \u043c\u0435\u043d\u0435\u0435 \u0438\u0437\u043e\u0431\u0440\u0435\u0442\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f, \u043d\u043e \u0442\u043e \u0447\u0442\u043e \u044f \u0445\u043e\u0447\u0443 \u0432\u0430\u043c \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0438\u0442\u044c \u044f \u043f\u043e\u043a\u0430 \u043d\u0435 \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u043b. \u0412 \u0441\u0432\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u043c\u043d\u0435 \u0431\u044b \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u043c\u043e\u0433\u043b\u0430 \u043f\u043e\u0434\u043e\u0431\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u0438 \u0440\u0435\u0448\u0438\u043b \u0435\u0451 \u0441\u043e\u0437\u0434\u0430\u0442\u044c. \u0414\u0443\u043c\u0430\u044e \u0447\u0442\u043e \u043b\u044e\u0434\u044f\u043c \u0441 \u043f\u043e\u0445\u043e\u0436\u0435\u0439 \u0437\u0430\u0434\u0430\u0447\u0435\u0439 \u043e\u043d\u0430 \u043e\u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0439!<\/p>\n<\/li>\n<\/ul>\n<h2>\u041c\u043e\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f<\/h2>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0438\u0434\u0435\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043d\u0430\u043c \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043a \u0431\u0430\u0437\u0435, \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043d\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u0438\u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0432 \u0437\u0430\u043f\u0440\u043e\u0441.<\/p>\n<h4>\u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u043a\u043e\u0434 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435<\/h4>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0435\u0448\u0438\u043c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u0441\u0451 \u043f\u0435\u0440\u0435\u0432\u0435\u0440\u043d\u0435\u043c.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044f\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0441\u0442\u0430\u043d\u0435\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439 \u043d\u043e\u043c\u0435\u0440 0, \u0430 \u043f\u0440\u0435\u0434\u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044f\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043d\u043e\u043c\u0435\u0440\u043e\u043c 1, \u0441\u043b\u043e\u0432\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 (page) \u0441\u044e\u0434\u0430 \u0443\u0436\u0435 \u043d\u0435 \u0432\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u0442.\u043a \u043c\u044b \u0441 \u0434\u0435\u0442\u0441\u0442\u0432\u0430 \u043f\u0440\u0438\u0432\u044b\u043a\u043b\u0438 \u0447\u0442\u043e \u0432 \u043a\u043d\u0438\u0436\u043a\u0430\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438\u0434\u0443\u0442 \u0441 \u043d\u0430\u0447\u0430\u043b\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0431\u043e\u043b\u0435\u0435 \u043d\u0435\u0439\u0442\u0440\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043b\u043e\u0432\u043e offset (\u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435).<\/p>\n<pre><code>LET count = 20 LET offset = ${offset}  FOR post IN posts \tSORT post.date ASC \/\/ \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043e\u0442\u0441\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0432\u0441\u0451 \u0432 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435 \tLIMIT offset, count \tRETURN post<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0441\u0442\u043e\u0432 \u043c\u044b \u0431\u044b \u043d\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438, GET &#171;\/?offset=0&#187; \u0432\u0441\u0435\u0433\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442.<\/p>\n<p>\u041f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u043f\u0435\u0440\u0432\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0441\u0442\u0430\u043b\u043e \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0441\u043b\u043e\u0436\u043d\u0435\u0435, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c \u043e\u0431\u0430 \u0432\u044b\u0448\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u0430, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u0441 \u0443\u0440\u043e\u0432\u043d\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043a \u0431\u0430\u0437\u0435 \u043d\u0430 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u0441\u0435\u0440\u0432\u0435\u0440\u0430 (\u044f\u0437\u044b\u043a nodejs):<\/p>\n<pre><code class=\"javascript\">async getPosts({offset}) {   const isOffset = offset !== undefined   if (isOffset &amp;&amp; isNaN(+offset)) throw new BadRequestException()  \tconst count = 20 \t\/\/ \u0421\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043a\u0440\u0430\u0442\u043d\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0447\u0442\u043e\u0431\u044b \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u043d\u0435 \u043f\u0435\u0440\u0435\u0441\u0435\u043a\u0430\u043b\u0438\u0441\u044c \tif (offset % count !== 0) throw new BadRequestException()  \tconst sort = isOffset ? ` \t\tSORT post.date DESC \t\tLIMIT ${+offset}, ${count} \t` : ` \t\tSORT post.date ASC \t\tLIMIT 0, ${count * 2} \/\/ \u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u0447\u0435\u043c \u043d\u0443\u0436\u043d\u043e \u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u043f\u0435\u0440\u0432\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430* \t`  \tconst q = { \t\tquery: ` \t\t\tFOR post IN posts \t\t\t${sort} \t\t\tRETURN post \t\t`, \t\tbindVars: {} \t}  \t\/\/ \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u043e\u0431\u0449\u0438\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u043d\u0430\u0439\u0434\u0435\u043d\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \tconst cursor = await this.db.query(q, {fullCount: true, count: isOffset}) \tconst fullCount = cursor.extra.stats.fullCount  \t\/*    \t*\u0415\u0441\u043b\u0438 \u043e\u0431\u0449\u0435\u0435 \u0447\u0438\u0441\u043b\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u0431\u0430\u0437\u0435 \u043d\u0435 \u043a\u0440\u0430\u0442\u043d\u043e count{20} \u0442\u043e \u0432 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u0435 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 2 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b [21-39] \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \t\t\u0412 \u0442\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0432\u0442\u043e\u0440\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0442.\u043a \u043e\u043d\u0430 \u0443\u0436\u0435 \u0432\u0445\u043e\u0434\u0438\u0442 \u0432 \u043f\u0435\u0440\u0432\u0443\u044e \t\t\u0415\u0441\u043b\u0438 \u043e\u0431\u0449\u0435\u0435 \u0447\u0438\u0441\u043b\u043e \u0434\u0435\u043b\u0438\u0442\u0441\u044f \u043d\u0430 20 \u0442\u043e \u0432 \u043f\u0435\u0440\u0432\u043e\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u0435 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 1-\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 c count{20} \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \t*\/    let data; \tif (isOffset) {     \/\/ \u043e\u0442\u0441\u0435\u043a\u0430\u0435\u043c \u043f\u043e\u043f\u044b\u0442\u043a\u0443 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0432\u0442\u043e\u0440\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0435\u0441\u043b\u0438 \u043e\u043d\u0430 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u0430 \u0432 \u043f\u0435\u0440\u0432\u0443\u044e \t\tconst allow = offset &lt;= fullCount - cursor.count - count \t\tif (!allow) throw new NotFoundException() \t\t\/\/ \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u043f\u043e\u0441\u0442\u0430\u043c, \u0442.\u043a \u0432 \u0437\u0430\u043f\u0440\u043e\u0441\u0435 \u043a \u0431\u0430\u0437\u0435 \u043c\u044b \u0432\u0441\u0451 \u043f\u0435\u0440\u0435\u0432\u0435\u0440\u043d\u0443\u043b\u0438  \t\tdata = (await cursor.all()).reverse() \t} else { \t\tconst all = await cursor.all() \t\tif (fullCount % count === 0) {       \/\/ \u043e\u0442\u0440\u0435\u0437\u0430\u0435\u043c \u043b\u0438\u0448\u043d\u0438\u0435 20 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u0430\u043a \u0442\u0443\u0442, \u0442\u0430\u043a \u0438 \u0432 \u0437\u0430\u043f\u0440\u043e\u0441\u0435 \u043a \u0431\u0434, \u0432\u043e\u043f\u0440\u043e\u0441 \u043b\u0438\u0448\u044c \u0432 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \t\t\tdata = all.slice(0, count)  \t\t} else {       \/* \u0422\u0443\u0442 \u043f\u043e\u0441\u043b\u043e\u0436\u043d\u0435\u0439, \u0435\u0441\u043b\u0438 \u0440\u0430\u043d\u0435\u0435 \u043c\u044b \u043c\u043e\u0433\u043b\u0438 \u0438\u043c\u0435\u0442\u044c \u043d\u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 0-20 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432,       \u0442\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u0442\u0430\u043c \u043d\u0430\u043c \u0432\u0441\u0435\u0433\u0434\u0430 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f 20 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0447\u0443 \u043d\u0443\u0436\u043d\u043e \u043a\u043e\u043c\u043f\u0435\u043d\u0441\u0438\u0440\u043e\u0432\u0430\u0442\u044c,       \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430 \u043f\u0435\u0440\u0432\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 0-20 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043a \u0438\u043c\u0435\u044e\u0449\u0438\u043c\u0441\u044f,       \u0432 \u0437\u0430\u043f\u0440\u043e\u0441\u0435 \u043a \u0431\u0434 \u0434\u043b\u044f \u043f\u0435\u0440\u0432\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043c\u044b \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0441 \u0437\u0430\u043f\u0430\u0441\u043e\u043c 40 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432       \u0438 \u0437\u0430\u0442\u0435\u043c \u0437\u0434\u0435\u0441\u044c \u043e\u0442\u0440\u0435\u0437\u0430\u0435\u043c \u043b\u0438\u0448\u043d\u0438\u0435       *\/ \t\t\tconst pagesCountUp = Math.ceil(fullCount \/ count) \t\t\tconst resultCount = fullCount - pagesCountUp * count + count * 2 \t\t\tdata = all.slice(0, resultCount) \t\t} \t}  \tif (!data.length) throw new NotFoundException()  \treturn { fullCount, count: data.length, data } }<\/code><\/pre>\n<p><strong>\u0427\u0435\u0433\u043e \u043c\u044b \u044d\u0442\u0438\u043c \u0434\u043e\u0431\u0438\u043b\u0438\u0441\u044c:<\/strong><\/p>\n<ul>\n<li>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u043a\u0440\u044b\u0442\u0438\u044f id \u043f\u043e\u0441\u043b\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u043e\u0432\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441\u0442\u0430\u043b\u0438 \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b.<\/p>\n<\/li>\n<li>\n<p>\u0417\u0430\u043f\u0440\u043e\u0441\u044b \u0442\u0435\u043f\u0435\u0440\u044c \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u044b \u0438 \u043b\u0435\u0433\u043a\u043e \u043f\u043e\u0434\u0434\u0430\u044e\u0442\u0441\u044f \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e, \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c \u043f\u043b\u0430\u0432\u0430\u044e\u0449\u0438\u043c \u043f\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u0438\u0445 id \u043e\u0441\u0442\u0430\u043b\u0441\u044f \u0437\u0430\u043f\u0440\u043e\u0441 \u0431\u0435\u0437 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 offset.<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u0448 \u043a\u043e\u0434 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442(.<\/p>\n<\/li>\n<\/ul>\n<p>\u041c\u0438\u043d\u0443\u0441\u044b \u043c\u043e\u0435\u0433\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u0430:<\/p>\n<ul>\n<li>\n<p>\u0412\u043e\u043f\u0440\u043e\u0441 \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u0438 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0438 \u0432\u0441\u0435 \u0435\u0449\u0451 \u043e\u0442\u043a\u0440\u044b\u0442, \u044d\u0442\u043e \u043d\u0435 \u0447\u0430\u0441\u0442\u0430\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0442\u044c \u043a\u044d\u0448, \u043b\u0438\u0431\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c null \u0432\u043c\u0435\u0441\u0442\u043e \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u044d\u0442\u043e \u043d\u0435 \u043f\u043b\u043e\u0445\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435, \u0442.\u043a. \u0437\u0430\u0447\u0430\u0441\u0442\u0443\u044e \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043d\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442, \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043b\u0438\u0448\u044c \u043f\u043e\u043c\u0435\u0447\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u0443\u0434\u0430\u043b\u0435\u043d\u043d\u044b\u0439, \u0435\u0441\u043b\u0438 \u0442\u0430\u043a\u0438\u0445 &#171;null-\u0437\u043e\u043c\u0431\u0438&#187; \u0441\u0442\u0430\u043d\u0435\u0442 \u043c\u043d\u043e\u0433\u043e, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u0432\u0441\u0435 null-\u0437\u043e\u043c\u0431\u0438 \u0438\u0437 \u0432\u044b\u0434\u0430\u0447\u0438 \u0438 \u0441\u0431\u0440\u043e\u0441\u0438\u0442\u044c \u043a\u044d\u0448 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432.<\/p>\n<\/li>\n<\/ul>\n<h4>\u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u043a\u043e\u0434 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435<\/h4>\n<p>\u0417\u0430\u043e\u0434\u043d\u043e \u044f \u043f\u043e\u043a\u0430\u0436\u0443 \u043a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u0443\u044e \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0443 \u0438\u0437 \u043f\u0443\u043d\u043a\u0442\u0430 \u21162.<\/p>\n<pre><code class=\"xml\">&lt;template&gt; \t&lt;div&gt; \t\t&lt;div ref='posts'&gt; \t\t\t&lt;template v-for=\"post in posts\"&gt; \t\t\t\t&lt;div :key=\"post.id\" style=\"height: 200px\"&gt; &lt;!-- \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432\u044b\u0441\u043e\u0442\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443, \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e \u0445\u043e\u0440\u043e\u0448\u043e\t--&gt; \t\t\t\t\t{{ item.title }} \t\t\t\t&lt;\/div&gt; \t\t\t&lt;\/template&gt; \t\t&lt;\/div&gt; \t\t&lt;div&gt; &lt;!-- \u0443\u0431\u0438\u0440\u0430\u0435\u043c <\/code><\/pre>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-322115","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/322115","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=322115"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/322115\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=322115"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=322115"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=322115"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}