{"id":411151,"date":"2024-06-29T21:48:12","date_gmt":"2024-06-29T21:48:12","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=411151"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=411151","title":{"rendered":"<span>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e SPA \u043d\u0430 VueJs \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c CMS Strapi<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<h2>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/h2>\n<p>\u0414\u0430\u043d\u043d\u043e\u0435 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043e \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043e\u043f\u044b\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u044b\u043b \u043f\u043e\u043b\u0443\u0447\u0435\u043d \u0438\u0437 \u043a\u043d\u0438\u0433 \u0438 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438. \u0412\u0430\u0448\u0435\u043c\u0443 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u044e \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043e 2 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0432 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0435 \u0441\u0430\u0439\u0442\u043e\u0432 \u043d\u0430 Vue.js (\u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c backend \u0441\u0438\u0441\u0442\u0435\u043c \u0438 \u0431\u0435\u0437).\u00a0<\/p>\n<p>\u0412 \u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0431\u0443\u0434\u0435\u0442 \u0438\u0437\u043b\u043e\u0436\u0435\u043d\u0430 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f \u043f\u043e \u044d\u043a\u0441\u043f\u0440\u0435\u0441\u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0441\u0430\u0439\u0442\u0430 &#8212; \u0433\u0430\u043b\u0435\u0440\u0435\u0438 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u044b\u0445 JSON \u0444\u0430\u0439\u043b\u043e\u0432 \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0441\u0430\u0439\u0442\u0430.\u00a0<\/p>\n<p>\u0412\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442, \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043e\u043f\u0435\u043d \u0441\u043e\u0440\u0441 CMS \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0441\u0430\u0439\u0442\u0430. \u0412\u0435\u0441\u044c \u043a\u043e\u0434 \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u0432 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0435 javascript\/hml\/css \u0438 bash.<\/p>\n<h2>\u0427\u0430\u0441\u0442\u044c 1. \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u0430\u0439\u0442 <\/h2>\n<p><strong>\u0414\u043b\u044f \u0431\u044b\u0441\u0442\u0440\u043e\u0439 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 Vue.js \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 <\/strong><a href=\"https:\/\/vitejs.dev\/\" rel=\"noopener noreferrer nofollow\"><strong><u>Vite<\/u><\/strong><\/a><strong>.\u00a0<\/strong><\/p>\n<p><code>npm create vite@latest<\/code><\/p>\n<p>\u0438\u043b\u0438<\/p>\n<p><code>yarn create vite<\/code><\/p>\n<p><strong>\u0414\u0430\u043b\u0435\u0435 \u0441\u043b\u0435\u0434\u0443\u0435\u043c \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0430\u043c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0449\u0438\u043a\u0430:<\/strong><\/p>\n<p><code>\u2714 Project name: \u2026 vue_simple<\/code><\/p>\n<p><code>\u2714 Select a framework: \u203a Vue<\/code><\/p>\n<p><code>\u2714 Select a variant: \u203a JavaScript<\/code><\/p>\n<p><strong>\u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/strong><\/p>\n<p>cd vue-simple<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/da5\/6e0\/62a\/da56e062a522b1730d39790fe6c5047b.png\" alt=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u0441\u043f\u0438\u0441\u043a\u0430 \u0444\u0430\u0439\u043b\u043e\u0432 \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u043f\u043e\u0441\u043b\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u0430\" title=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u0441\u043f\u0438\u0441\u043a\u0430 \u0444\u0430\u0439\u043b\u043e\u0432 \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u043f\u043e\u0441\u043b\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u0430\" width=\"1414\" height=\"1116\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/da5\/6e0\/62a\/da56e062a522b1730d39790fe6c5047b.png\"\/><\/p>\n<div><figcaption><strong>\u041f\u0440\u0438\u043c\u0435\u0440 \u0441\u043f\u0438\u0441\u043a\u0430 \u0444\u0430\u0439\u043b\u043e\u0432 \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u043f\u043e\u0441\u043b\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u0430<\/strong><\/figcaption><\/div>\n<\/figure>\n<p><strong>\u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438\u00a0<\/strong><\/p>\n<p><code>npm install<\/code><\/p>\n<p><strong>\u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438<\/strong><\/p>\n<p><code>npm run dev<\/code><\/p>\n<p>\u0412 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e\u0431 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u0435\u0440\u0432\u0435\u0440\u0430 node js<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/ea9\/b13\/e46\/ea9b13e460b7ed1b581be65136fc0111.png\" alt=\"\u0423\u0441\u043f\u0435\u0448\u043d\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u043a Vue \u0432 dev \u0440\u0435\u0436\u0438\u043c\u0435\" title=\"\u0423\u0441\u043f\u0435\u0448\u043d\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u043a Vue \u0432 dev \u0440\u0435\u0436\u0438\u043c\u0435\" width=\"1184\" height=\"500\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ea9\/b13\/e46\/ea9b13e460b7ed1b581be65136fc0111.png\"\/><\/p>\n<div><figcaption>\u0423\u0441\u043f\u0435\u0448\u043d\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u043a Vue \u0432 dev \u0440\u0435\u0436\u0438\u043c\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u043e \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u043c\u0443 \u0430\u0434\u0440\u0435\u0441\u0443:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/3eb\/d82\/e17\/3ebd82e1716d367fc70057c7bce43b07.png\" alt=\"\u0421\u0442\u0430\u0440\u0442\u043e\u0432\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435\" title=\"\u0421\u0442\u0430\u0440\u0442\u043e\u0432\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435\" width=\"1600\" height=\"961\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/3eb\/d82\/e17\/3ebd82e1716d367fc70057c7bce43b07.png\"\/><\/p>\n<div><figcaption>\u0421\u0442\u0430\u0440\u0442\u043e\u0432\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u041e\u0442\u043b\u0438\u0447\u043d\u043e, \u0441 \u201cctrl+c\u201d \u0438 \u201cctrl+v\u201d \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438\u0441\u044c, \u0434\u0430\u043b\u0435\u0435 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u043f\u0440\u043e\u0434\u0443\u043c\u044b\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430\u0448\u0435\u0439 \u0431\u0443\u0434\u0443\u0449\u0435\u0439 \u0433\u0430\u043b\u0435\u0440\u0435\u0438. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 public \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e json, \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u043c \u0432\u043d\u0443\u0442\u0440\u0438 \u0444\u0430\u0439\u043b gallery_1.json<\/p>\n<p><code>mkdir public\/json<\/code><\/p>\n<p><code>touch public\/json\/gallery_1.json<\/code><\/p>\n<p>\u0414\u043b\u044f \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u0438\u044f, \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c 3 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430:<\/p>\n<ol>\n<li>\n<p>id &#8212; \u043f\u043e\u0440\u044f\u0434\u043a\u043e\u0432\u044b\u0439 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u043a\u0430\u0440\u0442\u0438\u043d\u044b<\/p>\n<\/li>\n<li>\n<p>name &#8212; \u043d\u0430\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u044b<\/p>\n<\/li>\n<li>\n<p>imgSrc &#8212; \u0438\u043c\u044f \u0444\u0430\u0439\u043b\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f <\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"json\">[     {         \"id\": 1,         \"name\": \"\u0418\u0432\u0430\u043d \u0413\u0440\u043e\u0437\u043d\u044b\u0439\",         \"imgSrc\": \"7cbed231a5d52ccbb1ee8a7c7bb753f2.jpg\"     },     {         \"id\": 2,         \"name\": \"\u041c\u0435\u0434\u043d\u044b\u0439 \u0432\u0441\u0430\u0434\u043d\u0438\u043a\",         \"imgSrc\": \"7cbed231a5d52ccbb1ee8a7c7bb753f2.jpg\"     },     {         \"id\": 3,         \"name\": \"\u0423\u0442\u0440\u043e \u0432 \u0441\u043e\u0441\u043d\u043e\u0432\u043e\u043c \u043b\u0435\u0441\u0443\",         \"imgSrc\": \"7cbed231a5d52ccbb1ee8a7c7bb753f2.jpg\"     },     {         \"id\": 4,         \"name\": \"\u0414\u0435\u0432\u044f\u0442\u044b\u0439 \u0432\u0430\u043b\",         \"imgSrc\": \"7cbed231a5d52ccbb1ee8a7c7bb753f2.jpg\"     },     {         \"id\": 5,         \"name\": \"\u0410\u043f\u043e\u0444\u0435\u043e\u0437 \u0432\u043e\u0439\u043d\u044b\",         \"imgSrc\": \"7cbed231a5d52ccbb1ee8a7c7bb753f2.jpg\"     },     {         \"id\": 6,         \"name\": \"\u0427\u0435\u0440\u043d\u044b\u0439 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\",         \"imgSrc\": \"7cbed231a5d52ccbb1ee8a7c7bb753f2.jpg\"     },     {         \"id\": 7,         \"name\": \"\u0413\u0440\u0430\u0447\u0438 \u043f\u0440\u0438\u043b\u0435\u0442\u0435\u043b\u0438\",         \"imgSrc\": \"7cbed231a5d52ccbb1ee8a7c7bb753f2.jpg\"     },     {         \"id\": 8,         \"name\": \"\u041f\u0430\u0440\u0438\u0436\u0441\u043a\u043e\u0435 \u043a\u0430\u0444\u0435\",         \"imgSrc\": \"7cbed231a5d52ccbb1ee8a7c7bb753f2.jpg\"     } ]<\/code><\/pre>\n<p>\u0414\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0432\u043d\u0443\u0442\u0440\u0438 Vue.js \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 <a href=\"https:\/\/vuex.vuejs.org\/\" rel=\"noopener noreferrer nofollow\"><u>Vuex<\/u><\/a>. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u043e.<\/p>\n<p><strong>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u0434\u043b\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439.\u00a0<\/strong><\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u043f\u0430\u043a\u0435\u0442 <\/p>\n<p><code>npm install vuex@next --save<\/code><\/p>\n<p>\u0438\u043b\u0438<\/p>\n<p><code>yarn add vuex@next --save<\/code><\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 main.js\u00a0<\/p>\n<pre><code class=\"javascript\">import { createStore } from 'vuex'<\/code><\/pre>\n<p>\u041c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u043e\u0434\u0430 \u0434\u043b\u044f Vuex \u0432 main.js (\u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043b\u0443\u0447\u0448\u0435 \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0442\u0438 \u0435\u0433\u043e \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0438\u0437 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e js \u0444\u0430\u0439\u043b\u0430) <\/p>\n<pre><code class=\"javascript\">const store = createStore({ state() {     return {         gallery: []     } }, mutations: {     load(state, data) {         state.gallery = data;     } }, actions: {     downloadGallery(context) {         return new Promise((resolve, reject) => {             axios.get(\"\/json\/gallery_1.json\").                 then((response) => {                     var array = response.data;                     context.commit(\"load\", array);                 }).catch((err=>{                     alert(err.message);                 }));         })     } } }) <\/code><\/pre>\n<p>\u0414\u0435\u0439\u0441\u0442\u0432\u0438\u0435 downloadGallery \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0438\u0437 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 App.vue. \u0412\u043d\u0443\u0442\u0440\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043c\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c GET \u0437\u0430\u043f\u0440\u043e\u0441 (\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f http \u043a\u043b\u0438\u0435\u043d\u0442 Axios), \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0445 \u0447\u0435\u0440\u0435\u0437 \u043c\u0443\u0442\u0430\u0446\u0438\u044e \u0432 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 Vuex.\u00a0 \u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u043e\u0448\u0438\u0431\u043a\u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u043e\u043f\u043e\u0432\u0435\u0449\u0435\u043d\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u0443\u044e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0444\u0443\u043d\u043a\u0446\u0438\u044e alert.\u00a0<\/p>\n<p>\u0412 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 App.vue \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438:<\/p>\n<pre><code class=\"javascript\">import {  onMounted } from \"vue\"; import { useStore } from \"vuex\"; import { reactive, computed } from \"vue\";<\/code><\/pre>\n<p>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435<\/p>\n<pre><code class=\"javascript\">const store = useStore();<\/code><\/pre>\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0431\u0443\u0434\u0435\u043c \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0441\u0442\u0430\u0442\u0443\u0441 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445:<\/p>\n<pre><code class=\"javascript\">const status = reactive({  \u00a0\u00a0downloaded:false   })<\/code><\/pre>\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/p>\n<pre><code class=\"javascript\">const h1 = reactive(\"\u041a\u0430\u0440\u0442\u0438\u043d\u043d\u0430\u044f \u0433\u0430\u043b\u0435\u0440\u0435\u044f\");<\/code><\/pre>\n<p>\u0412 \u0445\u0443\u043a\u0435 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 onMounted \u0438\u043d\u0438\u0446\u0438\u0438\u0440\u0443\u0435\u043c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435.<\/p>\n<pre><code class=\"javascript\">onMounted(() => { store .dispatch(\"downloadGallery\") .then(() => { console.log(\"\u0413\u0430\u043b\u0435\u0440\u0435\u044f \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u0430.\"); status.downloaded = true; }) .catch((err) => console.log(err)); });<\/code><\/pre>\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u043c computed \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e gallery, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c\u0441\u044f \u0433\u0430\u043b\u0435\u0440\u0435\u044f \u0438\u0437 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430<\/p>\n<pre><code class=\"javascript\">const gallery = computed(() => {   return store.state.gallery; });<\/code><\/pre>\n<p>\u0414\u0430\u043b\u0435\u0435, \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044e \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 Vue \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0448\u0430\u0431\u043b\u043e\u043d \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.\u00a0<\/p>\n<p>\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043a\u0430\u043a \u0435\u0441\u0442\u044c, \u0431\u0435\u0437 \u043a\u0430\u043a\u0438\u0445-\u043b\u0438\u0431\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439 \u043d\u0430\u0434 \u043d\u0438\u043c. \u042d\u043b\u0435\u043c\u0435\u043d\u0442 p (\u0430\u0431\u0437\u0430\u0446) \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0435\u0441\u043b\u0438 downloaded \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 true (\u0434\u043b\u044f \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u044f \u0442\u0430\u043a\u043e\u0433\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0430 v-if).<\/p>\n<p>\u0418\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0435 \u043a\u0430\u0440\u0442\u0438\u043d \u0432 \u0433\u0430\u043b\u0435\u0440\u0435\u0435, \u0442\u0430\u043a-\u0436\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438, \u043e\u0431\u0440\u0430\u0449\u0430\u044f\u0441\u044c \u043a \u0434\u043b\u0438\u043d\u0435 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0441 \u043a\u0430\u0440\u0442\u0438\u043d\u0430\u043c\u0438.<\/p>\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b v-for  \u0432 \u0446\u0438\u043a\u043b\u0435 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0441 \u043d\u0430\u0448\u0438\u043c\u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u0430\u043c\u0438, \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u044f \u043f\u0440\u043e\u0441\u0442\u0443\u044e \u0433\u0430\u043b\u0435\u0440\u0435\u044e. <\/p>\n<pre><code class=\"xml\">&lt;template>   {{ h1 }}   &lt;p v-if=\"status\" class=\"downloaded\">\u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435: {{ new Date() }}&lt;\/p> &lt;p>   \u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u0430\u0440\u0442\u0438\u043d \u0432 \u043d\u0430\u0448\u0435\u0439 \u0433\u0430\u043b\u0435\u0440\u0435\u0435: {{ gallery.length }}   &lt;ol> &lt;li v-for=\"item in gallery\" :key=\"item.id\">   &lt;span>&amp;nbsp{{ item.data.name }} &lt;\/span>   &lt;div>     &lt;img class=\"gallery-img\" :src=\"item.data.imgSrc\" :alt=\"item.data.name\">   &lt;\/div> &lt;\/li>   &lt;\/ol> &lt;\/p> &lt;\/template> <\/code><\/pre>\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0435\u0445\u0438\u0442\u0440\u044b\u0445 \u0441\u0442\u0438\u043b\u0435\u0439, \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u043c \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435.<\/p>\n<pre><code class=\"css\">&lt;style scoped> .downloaded{   font-size: 0.8em; }  ol {   display: flex;   flex-direction: column;   justify-content: space-evenly;   align-items: center; }  li{   text-align: center; }  .gallery-img{   width: 50%;   height: auto;   } &lt;\/style><\/code><\/pre>\n<details class=\"spoiler\">\n<summary>\u041f\u043e\u043b\u043d\u044b\u0439 \u043b\u0438\u0441\u0442\u0438\u043d\u0433 App.vue<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">&lt;script setup> import {  onMounted } from \"vue\"; import { useStore } from \"vuex\"; import { reactive, computed } from \"vue\";  const store = useStore();  const status = reactive({   downloaded:false })  const h1 = reactive(\"\u041a\u0430\u0440\u0442\u0438\u043d\u043d\u0430\u044f \u0433\u0430\u043b\u0435\u0440\u0435\u044f\");  onMounted(() => {     store .dispatch(\"downloadGallery\") .then(() => {   console.log(\"\u0413\u0430\u043b\u0435\u0440\u0435\u044f \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u0430.\");   status.downloaded=true; }) .catch((err) => console.log(err)); });  const gallery = computed(() => {   return store.state.gallery; }); &lt;\/script>  &lt;template>   {{ h1 }}   &lt;p v-if=\"status\" class=\"downloaded\">\u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435: {{ new Date() }}&lt;\/p> &lt;p>   \u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u0430\u0440\u0442\u0438\u043d \u0432 \u043d\u0430\u0448\u0435\u0439 \u0433\u0430\u043b\u0435\u0440\u0435\u0435: {{ gallery.length }}   &lt;ol> &lt;li v-for=\"item in gallery\" :key=\"item.id\">   &lt;span>&amp;nbsp{{ item.data.name }} &lt;\/span>   &lt;div>     &lt;img class=\"gallery-img\" :src=\"item.data.imgSrc\" :alt=\"item.data.name\">   &lt;\/div> &lt;\/li>   &lt;\/ol> &lt;\/p> &lt;\/template>  &lt;style scoped> .downloaded{   font-size: 0.8em; }  ol {   display: flex;   flex-direction: column;   justify-content: space-evenly;   align-items: center; }  li{   text-align: center; }  .gallery-img{   width: 50%;   height: auto;   } &lt;\/style> <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0411\u043e\u043b\u044c\u0448\u0435 \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0432 vue \u0448\u0430\u0431\u043b\u043e\u043d\u0435 \u043e\u0442 vite \u0432\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 &#8212; \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442 \u0432\u00a0 dev \u0440\u0435\u0436\u0438\u043c\u0435. \u0412\u0435\u0440\u043d\u0435\u043c\u0441\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440, \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442.<\/p>\n<p>\u041f\u0440\u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0437\u0430\u0433\u043b\u044f\u043d\u0435\u043c \u0432\u043e \u0432\u043a\u043b\u0430\u0434\u043a\u0443 \u201c\u0441\u0435\u0442\u044c\u201d \u0438 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u043c \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u044b\u0439 \u0437\u0430\u043f\u0440\u043e\u0441<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a49\/8d0\/29a\/a498d029a1d5cfd0863ca875db9315e9.png\" alt=\"\" title=\"\" width=\"1180\" height=\"1070\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/a49\/8d0\/29a\/a498d029a1d5cfd0863ca875db9315e9.png\"\/><\/figure>\n<p>\u0412\u043e \u0432\u043a\u043b\u0430\u0434\u043a\u0435 \u201c\u043a\u043e\u043d\u0441\u043e\u043b\u044c\u201d \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u043c \u0437\u0430\u043f\u0438\u0441\u044c \u043e\u0431 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0434\u0430\u043d\u043d\u044b\u0445<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/358\/f35\/b1e\/358f35b1ec0487be233409c5b535ef67.png\" alt=\"\" title=\"\" width=\"1182\" height=\"564\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/358\/f35\/b1e\/358f35b1ec0487be233409c5b535ef67.png\"\/><\/figure>\n<p>\u041d\u0443 \u0438 \u043d\u0430\u043a\u043e\u043d\u0435\u0446, \u0441\u0430\u043c\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 (\u043d\u0430\u0448 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 App.vue):<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/1bd\/551\/d4c\/1bd551d4cc164ef5c464536563b51210.png\" alt=\"\" title=\"\" width=\"1600\" height=\"855\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/1bd\/551\/d4c\/1bd551d4cc164ef5c464536563b51210.png\"\/><\/figure>\n<p>\u0412 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u043c (\u043d\u0435 \u043e\u0431\u0443\u0447\u0430\u044e\u0449\u0435\u043c) \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043d\u0430 Vue \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0440\u0430\u0437\u043d\u043e\u0441\u0438\u0442\u044c \u0432 \u0440\u0430\u0437\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u044d\u0442\u043e \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b SPA, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u044d\u0442\u043e \u043a\u0430\u043a\u0430\u044f-\u0442\u043e \u0435\u0433\u043e \u0434\u0435\u0442\u0430\u043b\u044c.\u00a0<\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 li \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, GalleryElement.Vue) \u0432 \u043f\u0430\u043f\u043a\u0435 components, \u0430 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0444\u0430\u0439\u043b \u0432 \u043f\u0430\u043f\u043a\u0435 pages (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, index.vue). <\/p>\n<h2>\u0427\u0430\u0441\u0442\u044c 2. \u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c CMS \u043a \u0433\u0430\u043b\u0435\u0440\u0435\u0435<\/h2>\n<p>\u0412 \u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438, \u043c\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0441\u0430\u0439\u0442 \u043d\u0430 Vue, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435 \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0432 json \u0444\u043e\u0440\u043c\u0430\u0442\u0435 \u0432\u043d\u0443\u0442\u0440. \u0427\u0435\u0440\u0435\u0437 \u043a\u0430\u043a\u043e\u0435-\u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043d\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442 \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0440\u0430\u0441\u0442\u0438, \u0438 \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0434\u043e\u0441\u0442\u0443\u043f \u0434\u043b\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0430 \u0438 \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0439 \u0444\u043e\u0440\u043c\u0430\u0442 \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f, \u0441\u0432\u044f\u0437\u0438 \u043c\u0435\u0436\u0434\u0443 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438 \u0438 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044f\u043c\u0438). \u0414\u043b\u044f \u0442\u0430\u043a\u0438\u0445 \u0446\u0435\u043b\u0435\u0439 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c CMS <a href=\"https:\/\/strapi.io\/\" rel=\"noopener noreferrer nofollow\"><u>Strapi<\/u><\/a>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0438\u043d\u0442\u0443\u0438\u0442\u0438\u0432\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u043d\u0443\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430, \u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0435\u0433\u043e \u0447\u0435\u0440\u0435\u0437 REST API.<\/p>\n<p>\u0414\u0430\u043d\u043d\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0445\u043e\u0440\u043e\u0448\u043e \u0437\u0430\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0430, \u0438\u043c\u0435\u0435\u0442 \u0445\u043e\u0440\u043e\u0448\u0435\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u043e \u043d\u0430 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u0430\u0445. \u0414\u043b\u044f \u0431\u044b\u0441\u0442\u0440\u043e\u0433\u043e \u0441\u0442\u0430\u0440\u0442\u0430, \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0435 <a href=\"https:\/\/docs.strapi.io\/dev-docs\/quick-start#_1-install-strapi-and-create-a-new-project\" rel=\"noopener noreferrer nofollow\"><u>\u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e<\/u><\/a>.<\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u0442\u043a\u0430<\/p>\n<p><code>mkdir gallery-cms<\/code><\/p>\n<p>\u0417\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 quickstart \u0432\u0435\u0440\u0441\u0438\u0438. \u041f\u043e-\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0431\u0430\u0437\u044b \u0434\u0430\u043d\u043d\u044b\u0445 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f Sqlite3.<\/p>\n<p><code>npx create-strapi-app@latest my-project --quickstart<\/code><\/p>\n<p><code>Need to install the following packages:<\/code><\/p>\n<p><code>\u00a0\u00a0create-strapi-app@latest<\/code><\/p>\n<p><code>Ok to proceed? (y) y<\/code><\/p>\n<p>\u0414\u043e\u0436\u0438\u0434\u0430\u0435\u043c\u0441\u044f \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438, \u0437\u0430\u043f\u0443\u0441\u043a \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/6fa\/9ec\/c24\/6fa9ecc24369728fd67be9b105bf15f9.png\" alt=\"\u042d\u043a\u0440\u0430\u043d \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0430 \u043f\u043e\u0441\u043b\u0435 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0433\u043e \u0441\u0442\u0430\u0440\u0442\u0430 Strapi \" title=\"\u042d\u043a\u0440\u0430\u043d \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0430 \u043f\u043e\u0441\u043b\u0435 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0433\u043e \u0441\u0442\u0430\u0440\u0442\u0430 Strapi \" width=\"1600\" height=\"764\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/6fa\/9ec\/c24\/6fa9ecc24369728fd67be9b105bf15f9.png\"\/><\/p>\n<div><figcaption>\u042d\u043a\u0440\u0430\u043d \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0430 \u043f\u043e\u0441\u043b\u0435 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0433\u043e \u0441\u0442\u0430\u0440\u0442\u0430 Strapi <\/figcaption><\/div>\n<\/figure>\n<p>\u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 <a href=\"http:\/\/localhost:1337\/\" rel=\"noopener noreferrer nofollow\"><u>http:\/\/localhost:1337\/<\/u><\/a> (\u043f\u043e\u0440\u0442 \u043f\u043e-\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e 1337, \u043f\u0440\u0438 \u0436\u0435\u043b\u0430\u043d\u0438\u0438 \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 config\/server.js ), \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043c \u0443\u0447\u0435\u0442\u043d\u0443\u044e \u0437\u0430\u043f\u0438\u0441\u044c \u0430\u0434\u043c\u0438\u043d\u0438\u0441\u0442\u0440\u0430\u0442\u043e\u0440\u0430.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/fed\/5a6\/dd5\/fed5a6dd50ecd43ce50cb685aef4c0e6.png\" alt=\"\" title=\"\" width=\"1600\" height=\"855\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/fed\/5a6\/dd5\/fed5a6dd50ecd43ce50cb685aef4c0e6.png\"\/><\/figure>\n<p>\u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u0432 \u0440\u0430\u0437\u0434\u0435\u043b \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044f\u043c\u0438 (\u0421ontent-Type Builder), \u0438 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044e \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0439 \u0433\u0430\u043b\u0435\u0440\u0435\u0438.\u00a0<\/p>\n<p>\u042f \u043d\u0435 \u0431\u0443\u0434\u0443 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u043f\u043e\u0448\u0430\u0433\u043e\u0432\u0443\u044e \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e \u043f\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0435 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438 \u0438 \u0441\u0430\u043c\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b, \u043d\u043e \u043e\u043f\u0438\u0448\u0443 \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u043c\u043e\u043c\u0435\u043d\u0442\u044b, \u0431\u0435\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u0443\u044e \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0443\u044e \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u043e\u0441\u0442\u0430\u0432\u043e\u043c \u0433\u0430\u043b\u0435\u0440\u0435\u0438 \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0435\u0435 \u0447\u0435\u0440\u0435\u0437 REST API.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/dcf\/4f2\/f9b\/dcf4f2f9b5421cdd22457608c4c8bbd6.png\" alt=\"\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438\" title=\"\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438\" width=\"1600\" height=\"855\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/dcf\/4f2\/f9b\/dcf4f2f9b5421cdd22457608c4c8bbd6.png\"\/><\/p>\n<div><figcaption>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438<\/figcaption><\/div>\n<\/figure>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043d\u0430\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0433\u0430\u043b\u0435\u0440\u0435\u0438 (\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e id \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u043e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438):<\/p>\n<ol>\n<li>\n<p>name &#8212; \u0422\u0435\u043a\u0441\u0442<\/p>\n<\/li>\n<li>\n<p>imgSrc &#8212; \u0422\u0435\u043a\u0441\u0442 (\u0412 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0435, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u0438\u043f \u201cMedia\u201d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u043c\u0435\u0434\u0438\u0430 \u0444\u0430\u0439\u043b\u044b \u0441 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \u043f\u0440\u044f\u043c\u043e \u0432 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 Strapi, \u0434\u0430\u043d\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e, \u0432\u044b\u0431\u0440\u0430\u0432 \u0442\u0438\u043f \u201cMedia\u201d \u0434\u043b\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 imgSrc)<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/54d\/4c0\/d21\/54d4c0d21ad2cac0240b0c2773cce14e.png\" alt=\"\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 name \" title=\"\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 name \" width=\"1600\" height=\"847\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/54d\/4c0\/d21\/54d4c0d21ad2cac0240b0c2773cce14e.png\"\/><\/p>\n<div><figcaption>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 name <\/figcaption><\/div>\n<\/figure>\n<p>\u0417\u0430\u043a\u0430\u043d\u0447\u0438\u0432\u0430\u0435\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443, \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e &#8212; \u0441\u0438\u0441\u0442\u0435\u043c\u0435 \u043f\u043e\u0441\u043b\u0435 \u0442\u0430\u043a\u0438\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c\u0441\u044f, \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u043d\u044f\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u0440\u0435\u043c\u044f.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/3d6\/58a\/5ae\/3d658a5aea5b5355496f643681da66e2.png\" alt=\"\" title=\"\" width=\"1600\" height=\"847\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/3d6\/58a\/5ae\/3d658a5aea5b5355496f643681da66e2.png\"\/><\/figure>\n<p>\u041f\u043e\u0441\u043b\u0435 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u043a\u0430, \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u0432 \u0440\u0430\u0437\u0434\u0435\u043b \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u043e\u043c, \u0438 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u0435\u0440\u0432\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0433\u0430\u043b\u0435\u0440\u0435\u0438. \u0422\u0430\u043a \u043a\u0430\u043a \u043c\u044b \u043d\u0435 \u0441\u0442\u0430\u043b\u0438 \u0442\u0438\u043f Media \u0434\u043b\u044f imgSrc, \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0432 \u043f\u043e\u043b\u0435 \u0430\u0434\u0440\u0435\u0441 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438, \u043a\u0430\u043a \u0432 json \u0444\u0430\u0439\u043b\u0435.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/379\/3fe\/92a\/3793fe92aa210181c96eddded06f09ef.png\" alt=\"\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0433\u0430\u043b\u0435\u0440\u0435\u0438\" title=\"\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0433\u0430\u043b\u0435\u0440\u0435\u0438\" width=\"1600\" height=\"847\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/379\/3fe\/92a\/3793fe92aa210181c96eddded06f09ef.png\"\/><\/p>\n<div><figcaption>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0433\u0430\u043b\u0435\u0440\u0435\u0438<\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u0435\u0440\u0435\u043d\u0435\u0441\u0435\u043c \u0441\u043f\u0438\u0441\u043e\u043a \u043a\u0430\u0440\u0442\u0438\u043d \u0438\u0437 json \u0444\u0430\u0439\u043b\u0430 \u0431\u0430\u0437\u0443 \u0434\u0430\u043d\u043d\u044b\u0445 Strapi:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/e1c\/754\/a80\/e1c754a80e455028bbd7726d86f5e231.png\" alt=\"\" title=\"\" width=\"1600\" height=\"855\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/e1c\/754\/a80\/e1c754a80e455028bbd7726d86f5e231.png\"\/><\/figure>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u044b \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u0447\u0435\u0440\u0435\u0437 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441, \u0435\u0441\u043b\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0430\u043a\u043e\u043f\u0438\u043b\u043e\u0441\u044c \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043c\u043d\u043e\u0433\u043e, \u0438 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u0442\u044c \u0438\u0445 \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u0441\u0443\u043c\u0430\u0441\u0448\u0435\u0441\u0442\u0432\u0438\u0435\u043c, \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f <a href=\"https:\/\/docs.strapi.io\/dev-docs\/api\/rest\" rel=\"noopener noreferrer nofollow\"><u>REST API<\/u><\/a> \u043c\u0435\u0442\u043e\u0434\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438, \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u043f\u043e\u0441\u043b\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438 gallery, \u043c\u044b \u0443\u0436\u0435 \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c GET \u0437\u0430\u043f\u0440\u043e\u0441\u044b, \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0438\u0437 \u0441\u0438\u0441\u0442\u0435\u043c\u044b.\u00a0<\/p>\n<p><code>curl --location 'http:\/\/localhost:1337\/api\/galleries'<\/code><\/p>\n<p>\u041f\u043e-\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0432\u0441\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u043e\u0433\u043e API \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u044b, \u0438\u0445 \u043d\u0430\u0434\u043e \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/303\/f17\/953\/303f179538e84b40fc55ac85e6e2ed86.png\" alt=\"\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a API\" title=\"\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a API\" width=\"1600\" height=\"855\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/303\/f17\/953\/303f179538e84b40fc55ac85e6e2ed86.png\"\/><\/p>\n<div><figcaption>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a API<\/figcaption><\/div>\n<\/figure>\n<\/li>\n<\/ol>\n<details class=\"spoiler\">\n<summary>\u0412 \u043e\u0442\u0432\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440 \u0432\u0435\u0440\u043d\u0435\u0442 \u043d\u0430\u043c \u0441\u043f\u0438\u0441\u043e\u043a \u043a\u0430\u0440\u0442\u0438\u043d \u0432 \u0433\u0430\u043b\u0435\u0440\u0435\u0435:<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">{ \"data\": [ { \"id\": 1, \"attributes\": { \"name\": \"\u0418\u0432\u0430\u043d \u0413\u0440\u043e\u0437\u043d\u044b\u0439\", \"imgSrc\": \"7cbed231a5d52ccbb1ee8a7c7bb753f2.jpg\", \"createdAt\": \"2023-03-15T21:48:57.486Z\", \"updatedAt\": \"2023-03-15T21:49:06.317Z\", \"publishedAt\": \"2023-03-15T21:49:06.315Z\" } }, { \"id\": 2, \"attributes\": { \"name\": \"\u041c\u0435\u0434\u043d\u044b\u0439 \u0432\u0441\u0430\u0434\u043d\u0438\u043a\", \"imgSrc\": \"7cbed231a5d52ccbb1ee8a7c7bb753f2.jpg\", \"createdAt\": \"2023-03-15T21:49:27.326Z\", \"updatedAt\": \"2023-03-15T21:49:27.867Z\", \"publishedAt\": \"2023-03-15T21:49:27.864Z\" } }, { \"id\": 3, \"attributes\": { \"name\": \"\u0423\u0442\u0440\u043e \u0432 \u0441\u043e\u0441\u043d\u043e\u0432\u043e\u043c \u043b\u0435\u0441\u0443\", \"imgSrc\": \"7cbed231a5d52ccbb1ee8a7c7bb753f2.jpg\", \"createdAt\": \"2023-03-15T21:49:41.684Z\", \"updatedAt\": \"2023-03-15T21:49:42.393Z\", \"publishedAt\": \"2023-03-15T21:49:42.391Z\" } }, { \"id\": 4, \"attributes\": { \"name\": \"\u0414\u0435\u0432\u044f\u0442\u044b\u0439 \u0432\u0430\u043b\", \"imgSrc\": \"7cbed231a5d52ccbb1ee8a7c7bb753f2.jpg\", \"createdAt\": \"2023-03-15T21:49:51.564Z\", \"updatedAt\": \"2023-03-15T21:49:52.311Z\", \"publishedAt\": \"2023-03-15T21:49:52.309Z\" } }, { \"id\": 5, \"attributes\": { \"name\": \"\u0410\u043f\u043e\u0444\u0435\u043e\u0437 \u0432\u043e\u0439\u043d\u044b\", \"imgSrc\": \"7cbed231a5d52ccbb1ee8a7c7bb753f2.jpg\", \"createdAt\": \"2023-03-15T21:50:02.978Z\", \"updatedAt\": \"2023-03-15T21:50:09.993Z\", \"publishedAt\": \"2023-03-15T21:50:09.990Z\" } }, { \"id\": 6, \"attributes\": { \"name\": \"\u0427\u0435\u0440\u043d\u044b\u0439 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\", \"imgSrc\": \"7cbed231a5d52ccbb1ee8a7c7bb753f2.jpg\", \"createdAt\": \"2023-03-15T21:50:21.597Z\", \"updatedAt\": \"2023-03-15T21:50:22.871Z\", \"publishedAt\": \"2023-03-15T21:50:22.868Z\" } }, { \"id\": 7, \"attributes\": { \"name\": \"\u0413\u0440\u0430\u0447\u0438 \u043f\u0440\u0438\u043b\u0435\u0442\u0435\u043b\u0438\", \"imgSrc\": \"7cbed231a5d52ccbb1ee8a7c7bb753f2.jpg\", \"createdAt\": \"2023-03-15T21:50:32.727Z\", \"updatedAt\": \"2023-03-15T21:50:33.433Z\", \"publishedAt\": \"2023-03-15T21:50:33.431Z\" } }, { \"id\": 8, \"attributes\": { \"name\": \"\u041f\u0430\u0440\u0438\u0436\u0441\u043a\u043e\u0435 \u043a\u0430\u0444\u0435\", \"imgSrc\": \"7cbed231a5d52ccbb1ee8a7c7bb753f2.jpg\", \"createdAt\": \"2023-03-15T21:50:42.297Z\", \"updatedAt\": \"2023-03-15T21:50:43.046Z\", \"publishedAt\": \"2023-03-15T21:50:43.043Z\" } } ], \"meta\": { \"pagination\": { \"page\": 1, \"pageSize\": 25, \"pageCount\": 1, \"total\": 8 } } }<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c, \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u043d\u0430\u0448\u0435\u043c Vue \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435.<\/p>\n<pre><code class=\"javascript\">actions: { downloadGallery(context) { return new Promise((resolve, reject) => { axios.get(\"http:\/\/localhost:1337\/api\/galleries\"). then((response) => { var array = response.data.data; context.commit(\"load\", array); resolve(); }).catch((err=>{ alert(err.message); reject(err.message); })); }) } }<\/code><\/pre>\n<p>\u0418\u0437\u043c\u0435\u043d\u0438\u043c \u0448\u0430\u0431\u043b\u043e\u043d, \u0442\u0430\u043a \u043a\u0430\u043a \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432-\u043a\u0430\u0440\u0442\u0438\u043d \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0430\u0441\u044c<\/p>\n<pre><code class=\"xml\">  &lt;ol> &lt;li v-for=\"item in gallery\" :key=\"item.id\">   &lt;span>&amp;nbsp{{ item.attributes.name }} &lt;\/span>   &lt;div>     &lt;img class=\"gallery-img\" :src=\"item.attributes.imgSrc\" :alt=\"item.attributes.name\">   &lt;\/div> &lt;\/li>   &lt;\/ol><\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u043c\u044b \u0437\u0430\u0445\u043e\u0442\u0438\u043c \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438, \u0442\u043e \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0441\u043a\u0440\u0438\u043f\u0442 \u043d\u0430 nodejs \u0438\u043b\u0438 \u043b\u044e\u0431\u043e\u043c \u0434\u0440\u0443\u0433\u043e\u043c \u042f\u041f, \u0434\u043b\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0447\u0435\u0440\u0435\u0437 API.<\/p>\n<details class=\"spoiler\">\n<summary>\u041f\u0440\u0438\u043c\u0435\u0440 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u0441\u043a\u0440\u0438\u043f\u0442\u0430 \u043d\u0430 nodejs \u0434\u043b\u044f \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 <\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">\/\/\u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 fs (filesystem) \u0434\u043b\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u043c \u0444\u0430\u0439\u043b\u0430\u043c var fs = require('fs');  \/\/\u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0434\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043a API const request = require('sync-request');  \/\/ \u043e\u043f\u0446\u0438\u0438 \u0434\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430  const options = {     hostname: 'http:\/\/localhost:1337',     path: '\/api\/galleries',     headers: {         'Content-Type': 'application\/json',         'Accept':'application\/json'     } };  \/\/ \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e readFile() \u0447\u0438\u0442\u0430\u0435\u043c \u0444\u0430\u0439\u043b fs.readFile('json\/gallery_1.json', 'utf-8', function (err, data) {      \/\/\u043f\u0430\u0440\u0441\u0438\u043c \u0441\u0442\u0440\u043e\u043a\u0443 \u0432 \u043e\u0431\u044a\u0435\u043a\u0442     var gallery = JSON.parse(data);      \/\/\u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0446\u0438\u043a\u043b \u0432\u044b\u0437\u043e\u0432\u043e\u0432 API      for (var i = 0; i &lt; gallery.length; i++) {          \/\/\u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430 \u0442\u0435\u043b\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u0430         var data = {             data: {                 name: gallery[i].name ,                 imgSrc: gallery[i].imgSrc             }         }                 \/\/\u0432\u044b\u0432\u043e\u0434\u0438\u043c \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u043d\u043e\u0435 \u0442\u0435\u043b\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c         console.log(data)                   \/\/\u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0434\u0430\u043d\u043d\u044b\u0445          var res = request('POST', options.hostname + options.path, {             json: data,             headers:options.headers         });           \/\/\u043f\u0430\u0440\u0441\u0438\u043c \u043e\u0442\u0432\u0435\u0442 \u043e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430          \/\/var res = JSON.parse(res.getBody('utf8'));          \/\/\u0432\u044b\u0432\u043e\u0434\u0438\u043c \u043e\u0442\u0432\u0435\u0442 \u043e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c         console.log(res.getBody('utf8'));     }  });<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0441\u043a\u0440\u0438\u043f\u0442\u0430, \u0432 \u043b\u043e\u0433\u0430\u0445 Strapi \u0432\u0438\u0434\u043d\u044b \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043d\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0434\u0430\u043d\u043d\u044b\u0445:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/e50\/dd7\/9c5\/e50dd79c59db785f1455cb92991762eb.png\" alt=\"\" title=\"\" width=\"1600\" height=\"427\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/e50\/dd7\/9c5\/e50dd79c59db785f1455cb92991762eb.png\"\/><\/figure>\n<p>\u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u0441\u044f \u043d\u0430 \u0441\u0430\u0439\u0442 \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u043e\u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0441\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0437\u0430\u043f\u0440\u043e\u0441 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d \u0443\u0441\u043f\u0435\u0448\u043d\u043e, \u0432\u0441\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u044f\u0442\u0441\u044f \u0442\u0430\u043a \u0436\u0435, \u043a\u0430\u043a \u043f\u0440\u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0438 \u0432 \u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/5c3\/b12\/9ce\/5c3b129ce5fb08b5a8351738b9b73602.png\" alt=\"\" title=\"\" width=\"1600\" height=\"650\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/5c3\/b12\/9ce\/5c3b129ce5fb08b5a8351738b9b73602.png\"\/><\/figure>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0438\u0437\u043c\u0435\u043d\u0438\u043c \u0430\u0434\u0440\u0435\u0441 \u043d\u0430 \u043d\u0435\u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u044b\u0439, \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043e\u0448\u0438\u0431\u043a\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a68\/c5b\/7a8\/a68c5b7a881d121937d0cce7966aef92.png\" alt=\"\" title=\"\" width=\"1600\" height=\"909\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/a68\/c5b\/7a8\/a68c5b7a881d121937d0cce7966aef92.png\"\/><\/figure>\n<h3>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h3>\n<p>Strapi \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u043d\u0435 \u0441\u0430\u043c\u044b\u0439 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0439 CMS \u0441\u0440\u0435\u0434\u0438 \u043f\u0440\u043e\u0447\u0438\u0445, \u043d\u043e \u043e\u043d \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442 \u0432 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435 \u0438 \u0438\u043c\u0435\u0435\u0442 \u043c\u043d\u043e\u0433\u043e \u043f\u0440\u0435\u0434\u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0431\u044b\u0441\u0442\u0440\u043e \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438 \u0432\u0441\u044e \u201c\u043f\u043e\u0434\u043a\u0430\u043f\u043e\u0442\u043d\u0443\u044e\u201d \u043c\u0430\u0433\u0438\u044e \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442 \u0441 \u0411\u0414 \u0438 REST API.\u00a0<\/p>\n<p>\u0412\u0430\u0440\u0438\u0430\u043d\u0442 \u0441\u0430\u0439\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u043b\u0438 \u0432 \u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438, \u0445\u043e\u0440\u043e\u0448\u043e \u043f\u043e\u0434\u043e\u0439\u0434\u0435\u0442 \u0434\u043b\u044f \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0445\u043e\u0441\u0442\u0438\u043d\u0433\u043e\u0432, \u0433\u0434\u0435 \u0443 \u0432\u043b\u0430\u0434\u0435\u043b\u044c\u0446\u0430 \u0445\u043e\u0441\u0442\u0438\u043d\u0433\u0430 \u043d\u0435\u0442 \u043d\u0438\u0447\u0435\u0433\u043e \u043a\u0440\u043e\u043c\u0435 ftp \u043f\u0430\u043f\u043a\u0438 \u0434\u043b\u044f \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0441\u0430\u0439\u0442\u043e\u0432. \u0412\u0442\u043e\u0440\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442, \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0431\u043e\u043b\u0435\u0435 \u043d\u0438\u0437\u043a\u043e\u0433\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u0435, \u043f\u043e \u0441\u0443\u0442\u0438 \u043f\u043e\u043b\u043d\u043e\u0433\u043e. \u041d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0430\u0445 VDS\/VPS \u0434\u0430\u043d\u043d\u0430\u044f \u0441\u0445\u0435\u043c\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043e\u0442\u043b\u0438\u0447\u043d\u043e, \u043d\u043e \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u043f\u043e <a href=\"https:\/\/docs.strapi.io\/dev-docs\/deployment\" rel=\"noopener noreferrer nofollow\"><u>\u0440\u0435\u0441\u0443\u0440\u0441\u0430\u043c<\/u><\/a>.\u00a0<\/p>\n<p>\u0422\u0430\u043a \u0436\u0435, \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 API \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043f\u043e \u0442\u043e\u043a\u0435\u043d\u0443 (\u043d\u0435 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0439) \u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043c\u0435\u0440\u044b \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u0438 (\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 http \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u043b\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u0430\u0434\u043c\u0438\u043d\u0438\u0441\u0442\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u0439 \u043f\u0430\u043d\u0435\u043b\u0438, \u043f\u043e\u043c\u0438\u043c\u043e \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 \u0441\u0430\u043c\u043e\u043c Strapi).\u00a0<\/p>\n<p>\u041a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043a\u043e\u0434 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c <a href=\"https:\/\/github.com\/GrigoriyMo\/vue-gallery\" rel=\"noopener noreferrer nofollow\"><u>\u0442\u0443\u0442<\/u><\/a>.<\/p>\n<p>\u0414\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430, \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 Vue \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <a href=\"https:\/\/github.com\/vuejs\/devtools\/releases\/tag\/v6.5.0\" rel=\"noopener noreferrer nofollow\"><u>\u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f<\/u><\/a> \u0434\u043b\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 VueDevtools\u00a0<\/p>\n<p>\u0421\u0445\u0435\u043c\u0430\u0442\u0438\u0447\u043d\u043e \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u043f\u043e \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044e \u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u043b\u044f Vue \u043c\u043e\u0436\u043d\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u043d\u0430 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0435\u0439.\u00a0<\/p>\n<p>\u0428\u0430\u0433 1 &#8212; Vue \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043b\u043e\u0441\u044c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435<\/p>\n<p>\u0428\u0430\u0433 2 &#8212; \u0412 \u0445\u0443\u043a\u0435 onMounted \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0433\u0430\u043b\u0435\u0440\u0435\u0438<\/p>\n<p>\u0428\u0430\u0433 3 &#8212; \u0412\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0437\u0430\u043f\u0440\u043e\u0441 \u0432 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430<\/p>\n<p>\u0428\u0430\u0433 4-5 &#8212; \u0420\u0430\u0431\u043e\u0442\u0430\u0435\u0442 Strapi (\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441, \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 \u0411\u0414) \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0438\u0445 \u043d\u0430 \u0441\u0430\u0439\u0442<\/p>\n<p>\u0428\u0430\u0433 6 &#8212; \u041f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0435<\/p>\n<p>\u0428\u0430\u0433 7 &#8212; \u041e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 html \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/ec5\/622\/07d\/ec562207d7b530fbb1ef795a8a59682b.png\" width=\"1086\" height=\"860\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ec5\/622\/07d\/ec562207d7b530fbb1ef795a8a59682b.png\"\/><\/figure>\n<p>\u0412 \u0437\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435, \u0434\u043b\u044f \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f, \u043a\u0430\u043a \u044d\u0442\u043e \u0432\u0441\u0435 \u0441\u0432\u044f\u0437\u0430\u043d\u043e \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439, \u043d\u0430\u0431\u0440\u043e\u0441\u0430\u043b \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u043d\u0443\u044e \u0441\u0445\u0435\u043c\u0443 \u0432 C4.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/f9d\/501\/679\/f9d5016792110a4ac125beae17185d66.png\" alt=\"\" title=\"\" width=\"961\" height=\"881\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f9d\/501\/679\/f9d5016792110a4ac125beae17185d66.png\"\/><\/figure>\n<p>\u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u0447\u0442\u0438\u0432\u043e \u0412\u0430\u043c \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u043b\u043e\u0441\u044c! \u0414\u0430\u043d\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f &#8212; \u044d\u0442\u043e \u043c\u043e\u044f \u043f\u0435\u0440\u0432\u0430\u044f \u0441\u0435\u0440\u044c\u0435\u0437\u043d\u0430\u044f \u043f\u043e\u043f\u044b\u0442\u043a\u0430 \u043d\u0430 \u0425\u0430\u0431\u0440\u0435. \u0411\u0443\u0434\u0443 \u0440\u0430\u0434 \u0412\u0430\u0448\u0438\u043c \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u043c \u0438 \u043a\u0440\u0438\u0442\u0438\u043a\u0435.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \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\/articles\/723676\/\"> https:\/\/habr.com\/ru\/articles\/723676\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<h2>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/h2>\n<p>\u0414\u0430\u043d\u043d\u043e\u0435 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043e \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043e\u043f\u044b\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u044b\u043b \u043f\u043e\u043b\u0443\u0447\u0435\u043d \u0438\u0437 \u043a\u043d\u0438\u0433 \u0438 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438. \u0412\u0430\u0448\u0435\u043c\u0443 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u044e \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043e 2 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0432 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0435 \u0441\u0430\u0439\u0442\u043e\u0432 \u043d\u0430 Vue.js (\u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c backend \u0441\u0438\u0441\u0442\u0435\u043c \u0438 \u0431\u0435\u0437).\u00a0<\/p>\n<p>\u0412 \u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0431\u0443\u0434\u0435\u0442 \u0438\u0437\u043b\u043e\u0436\u0435\u043d\u0430 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f \u043f\u043e \u044d\u043a\u0441\u043f\u0440\u0435\u0441\u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0441\u0430\u0439\u0442\u0430 &#8212; \u0433\u0430\u043b\u0435\u0440\u0435\u0438 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u044b\u0445 JSON \u0444\u0430\u0439\u043b\u043e\u0432 \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0441\u0430\u0439\u0442\u0430.\u00a0<\/p>\n<p>\u0412\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442, \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043e\u043f\u0435\u043d \u0441\u043e\u0440\u0441 CMS \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0441\u0430\u0439\u0442\u0430. \u0412\u0435\u0441\u044c \u043a\u043e\u0434 \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u0432 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0435 javascript\/hml\/css \u0438 bash.<\/p>\n<h2>\u0427\u0430\u0441\u0442\u044c 1. \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u0430\u0439\u0442 <\/h2>\n<p><strong>\u0414\u043b\u044f \u0431\u044b\u0441\u0442\u0440\u043e\u0439 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 Vue.js \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 <\/strong><a href=\"https:\/\/vitejs.dev\/\" rel=\"noopener noreferrer nofollow\"><strong><u>Vite<\/u><\/strong><\/a><strong>.\u00a0<\/strong><\/p>\n<p><code>npm create vite@latest<\/code><\/p>\n<p>\u0438\u043b\u0438<\/p>\n<p><code>yarn create vite<\/code><\/p>\n<p><strong>\u0414\u0430\u043b\u0435\u0435 \u0441\u043b\u0435\u0434\u0443\u0435\u043c \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0430\u043c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0449\u0438\u043a\u0430:<\/strong><\/p>\n<p><code>\u2714 Project name: \u2026 vue_simple<\/code><\/p>\n<p><code>\u2714 Select a framework: \u203a Vue<\/code><\/p>\n<p><code>\u2714 Select a variant: \u203a JavaScript<\/code><\/p>\n<p><strong>\u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/strong><\/p>\n<p>cd vue-simple<\/p>\n<figure class=\"full-width\">\n<div><figcaption><strong>\u041f\u0440\u0438\u043c\u0435\u0440 \u0441\u043f\u0438\u0441\u043a\u0430 \u0444\u0430\u0439\u043b\u043e\u0432 \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u043f\u043e\u0441\u043b\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u0430<\/strong><\/figcaption><\/div>\n<\/figure>\n<p><strong>\u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438\u00a0<\/strong><\/p>\n<p><code>npm install<\/code><\/p>\n<p><strong>\u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438<\/strong><\/p>\n<p><code>npm run dev<\/code><\/p>\n<p>\u0412 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e\u0431 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u0435\u0440\u0432\u0435\u0440\u0430 node js<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u0423\u0441\u043f\u0435\u0448\u043d\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u043a Vue \u0432 dev \u0440\u0435\u0436\u0438\u043c\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u043e \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u043c\u0443 \u0430\u0434\u0440\u0435\u0441\u0443:<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u0421\u0442\u0430\u0440\u0442\u043e\u0432\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u041e\u0442\u043b\u0438\u0447\u043d\u043e, \u0441 \u201cctrl+c\u201d \u0438 \u201cctrl+v\u201d \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438\u0441\u044c, \u0434\u0430\u043b\u0435\u0435 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u043f\u0440\u043e\u0434\u0443\u043c\u044b\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430\u0448\u0435\u0439 \u0431\u0443\u0434\u0443\u0449\u0435\u0439 \u0433\u0430\u043b\u0435\u0440\u0435\u0438. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 public \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e json, \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u043c \u0432\u043d\u0443\u0442\u0440\u0438 \u0444\u0430\u0439\u043b gallery_1.json<\/p>\n<p><code>mkdir public\/json<\/code><\/p>\n<p><code>touch public\/json\/gallery_1.json<\/code><\/p>\n<p>\u0414\u043b\u044f \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u0438\u044f, \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c 3 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430:<\/p>\n<ol>\n<li>\n<p>id &#8212; \u043f\u043e\u0440\u044f\u0434\u043a\u043e\u0432\u044b\u0439 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u043a\u0430\u0440\u0442\u0438\u043d\u044b<\/p>\n<\/li>\n<li>\n<p>name &#8212; \u043d\u0430\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u044b<\/p>\n<\/li>\n<li>\n<p>imgSrc &#8212; \u0438\u043c\u044f \u0444\u0430\u0439\u043b\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f <\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"json\">[     {         \"id\": 1,         \"name\": \"\u0418\u0432\u0430\u043d \u0413\u0440\u043e\u0437\u043d\u044b\u0439\",         \"imgSrc\": \"7cbed231a5d52ccbb1ee8a7c7bb753f2.jpg\"     },     {         \"id\": 2,         \"name\": \"\u041c\u0435\u0434\u043d\u044b\u0439 \u0432\u0441\u0430\u0434\u043d\u0438\u043a\",         \"imgSrc\": \"7cbed231a5d52ccbb1ee8a7c7bb753f2.jpg\"     },     {         \"id\": 3,         \"name\": \"\u0423\u0442\u0440\u043e \u0432 \u0441\u043e\u0441\u043d\u043e\u0432\u043e\u043c \u043b\u0435\u0441\u0443\",         \"imgSrc\": \"7cbed231a5d52ccbb1ee8a7c7bb753f2.jpg\"     },     {         \"id\": 4,         \"name\": \"\u0414\u0435\u0432\u044f\u0442\u044b\u0439 \u0432\u0430\u043b\",         \"imgSrc\": \"7cbed231a5d52ccbb1ee8a7c7bb753f2.jpg\"     },     {         \"id\": 5,         \"name\": \"\u0410\u043f\u043e\u0444\u0435\u043e\u0437 \u0432\u043e\u0439\u043d\u044b\",         \"imgSrc\": \"7cbed231a5d52ccbb1ee8a7c7bb753f2.jpg\"     },     {         \"id\": 6,         \"name\": \"\u0427\u0435\u0440\u043d\u044b\u0439 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\",         \"imgSrc\": \"7cbed231a5d52ccbb1ee8a7c7bb753f2.jpg\"     },     {         \"id\": 7,         \"name\": \"\u0413\u0440\u0430\u0447\u0438 \u043f\u0440\u0438\u043b\u0435\u0442\u0435\u043b\u0438\",         \"imgSrc\": \"7cbed231a5d52ccbb1ee8a7c7bb753f2.jpg\"     },     {         \"id\": 8,         \"name\": \"\u041f\u0430\u0440\u0438\u0436\u0441\u043a\u043e\u0435 \u043a\u0430\u0444\u0435\",         \"imgSrc\": \"7cbed231a5d52ccbb1ee8a7c7bb753f2.jpg\"     } ]<\/code><\/pre>\n<p>\u0414\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0432\u043d\u0443\u0442\u0440\u0438 Vue.js \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 <a href=\"https:\/\/vuex.vuejs.org\/\" rel=\"noopener noreferrer nofollow\"><u>Vuex<\/u><\/a>. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u043e.<\/p>\n<p><strong>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u0434\u043b\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439.\u00a0<\/strong><\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u043f\u0430\u043a\u0435\u0442 <\/p>\n<p><code>npm install vuex@next --save<\/code><\/p>\n<p>\u0438\u043b\u0438<\/p>\n<p><code>yarn add vuex@next --save<\/code><\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 main.js\u00a0<\/p>\n<pre><code class=\"javascript\">import { createStore } from 'vuex'<\/code><\/pre>\n<p>\u041c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u043e\u0434\u0430 \u0434\u043b\u044f Vuex \u0432 main.js (\u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043b\u0443\u0447\u0448\u0435 \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0442\u0438 \u0435\u0433\u043e \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0438\u0437 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e js \u0444\u0430\u0439\u043b\u0430) <\/p>\n<pre><code class=\"javascript\">const store = createStore({ state() {     return {         gallery: []     } }, mutations: {     load(state, data) {         state.gallery = data;     } }, actions: {     downloadGallery(context) {         return new Promise((resolve, reject) => {             axios.get(\"\/json\/gallery_1.json\").                 then((response) => {                     var array = response.data;                     context.commit(\"load\", array);                 }).catch((err=>{                     alert(err.message);                 }));         })     } } }) <\/code><\/pre>\n<p>\u0414\u0435\u0439\u0441\u0442\u0432\u0438\u0435 downloadGallery \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0438\u0437 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 App.vue. \u0412\u043d\u0443\u0442\u0440\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043c\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c GET \u0437\u0430\u043f\u0440\u043e\u0441 (\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f http \u043a\u043b\u0438\u0435\u043d\u0442 Axios), \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0445 \u0447\u0435\u0440\u0435\u0437 \u043c\u0443\u0442\u0430\u0446\u0438\u044e \u0432 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 Vuex.\u00a0 \u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u043e\u0448\u0438\u0431\u043a\u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u043e\u043f\u043e\u0432\u0435\u0449\u0435\u043d\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u0443\u044e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0444\u0443\u043d\u043a\u0446\u0438\u044e alert.\u00a0<\/p>\n<p>\u0412 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 App.vue \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438:<\/p>\n<pre><code class=\"javascript\">import {  onMounted } from \"vue\"; import { useStore } from \"vuex\"; import { reactive, computed } from \"vue\";<\/code><\/pre>\n<p>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435<\/p>\n<pre><code class=\"javascript\">const store = useStore();<\/code><\/pre>\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0431\u0443\u0434\u0435\u043c \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0441\u0442\u0430\u0442\u0443\u0441 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445:<\/p>\n<pre><code class=\"javascript\">const status = reactive({  \u00a0\u00a0downloaded:false   })<\/code><\/pre>\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/p>\n<pre><code class=\"javascript\">const h1 = reactive(\"\u041a\u0430\u0440\u0442\u0438\u043d\u043d\u0430\u044f \u0433\u0430\u043b\u0435\u0440\u0435\u044f\");<\/code><\/pre>\n<p>\u0412 \u0445\u0443\u043a\u0435 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 onMounted \u0438\u043d\u0438\u0446\u0438\u0438\u0440\u0443\u0435\u043c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435.<\/p>\n<pre><code class=\"javascript\">onMounted(() => { store .dispatch(\"downloadGallery\") .then(() => { console.log(\"\u0413\u0430\u043b\u0435\u0440\u0435\u044f \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u0430.\"); status.downloaded = true; }) .catch((err) => console.log(err)); });<\/code><\/pre>\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u043c computed \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e gallery, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c\u0441\u044f \u0433\u0430\u043b\u0435\u0440\u0435\u044f \u0438\u0437 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430<\/p>\n<pre><code class=\"javascript\">const gallery = computed(() => {   return store.state.gallery; });<\/code><\/pre>\n<p>\u0414\u0430\u043b\u0435\u0435, \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044e \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 Vue \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0448\u0430\u0431\u043b\u043e\u043d \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.\u00a0<\/p>\n<p>\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043a\u0430\u043a \u0435\u0441\u0442\u044c, \u0431\u0435\u0437 \u043a\u0430\u043a\u0438\u0445-\u043b\u0438\u0431\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439 \u043d\u0430\u0434 \u043d\u0438\u043c. \u042d\u043b\u0435\u043c\u0435\u043d\u0442 p (\u0430\u0431\u0437\u0430\u0446) \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0435\u0441\u043b\u0438 downloaded \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 true (\u0434\u043b\u044f \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u044f \u0442\u0430\u043a\u043e\u0433\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0430 v-if).<\/p>\n<p>\u0418\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0435 \u043a\u0430\u0440\u0442\u0438\u043d \u0432 \u0433\u0430\u043b\u0435\u0440\u0435\u0435, \u0442\u0430\u043a-\u0436\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438, \u043e\u0431\u0440\u0430\u0449\u0430\u044f\u0441\u044c \u043a \u0434\u043b\u0438\u043d\u0435 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0441 \u043a\u0430\u0440\u0442\u0438\u043d\u0430\u043c\u0438.<\/p>\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b v-for  \u0432 \u0446\u0438\u043a\u043b\u0435 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0441 \u043d\u0430\u0448\u0438\u043c\u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u0430\u043c\u0438, \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u044f \u043f\u0440\u043e\u0441\u0442\u0443\u044e \u0433\u0430\u043b\u0435\u0440\u0435\u044e. <\/p>\n<pre><code class=\"xml\">&lt;template>   {{ h1 }}   &lt;p v-if=\"status\" class=\"downloaded\">\u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435: {{ new Date() }}&lt;\/p> &lt;p>   \u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u0430\u0440\u0442\u0438\u043d \u0432 \u043d\u0430\u0448\u0435\u0439 \u0433\u0430\u043b\u0435\u0440\u0435\u0435: {{ gallery.length }}   &lt;ol> &lt;li v-for=\"item in gallery\" :key=\"item.id\">   &lt;span>&amp;nbsp{{ item.data.name }} &lt;\/span>   &lt;div>     &lt;img class=\"gallery-img\" :src=\"item.data.imgSrc\" :alt=\"item.data.name\">   &lt;\/div> &lt;\/li>   &lt;\/ol> &lt;\/p> &lt;\/template> <\/code><\/pre>\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0435\u0445\u0438\u0442\u0440\u044b\u0445 \u0441\u0442\u0438\u043b\u0435\u0439, \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u043c \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435.<\/p>\n<pre><code class=\"css\">&lt;style scoped> .downloaded{   font-size: 0.8em; }  ol {   display: flex;   flex-direction: column;   justify-content: space-evenly;   align-items: center; }  li{   text-align: center; }  .gallery-img{   width: 50%;   height: auto;   } &lt;\/style><\/code><\/pre>\n<details class=\"spoiler\">\n<summary>\u041f\u043e\u043b\u043d\u044b\u0439 \u043b\u0438\u0441\u0442\u0438\u043d\u0433 App.vue<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">&lt;script setup> import {  onMounted } from \"vue\"; import { useStore } from \"vuex\"; import { reactive, computed } from \"vue\";  const store = useStore();  const status = reactive({   downloaded:false })  const h1 = reactive(\"\u041a\u0430\u0440\u0442\u0438\u043d\u043d\u0430\u044f \u0433\u0430\u043b\u0435\u0440\u0435\u044f\");  onMounted(() => {     store .dispatch(\"downloadGallery\") .then(() => {   console.log(\"\u0413\u0430\u043b\u0435\u0440\u0435\u044f \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u0430.\");   status.downloaded=true; }) .catch((err) => console.log(err)); });  const gallery = computed(() => {   return store.state.gallery; }); &lt;\/script>  &lt;template>   {{ h1 }}   &lt;p v-if=\"status\" class=\"downloaded\">\u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435: {{ new Date() }}&lt;\/p> &lt;p>   \u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u0430\u0440\u0442\u0438\u043d \u0432 \u043d\u0430\u0448\u0435\u0439 \u0433\u0430\u043b\u0435\u0440\u0435\u0435: {{ gallery.length }}   &lt;ol> &lt;li v-for=\"item in gallery\" :key=\"item.id\">   &lt;span>&amp;nbsp{{ item.data.name }} &lt;\/span>   &lt;div>     &lt;img class=\"gallery-img\" :src=\"item.data.imgSrc\" :alt=\"item.data.name\">   &lt;\/div> &lt;\/li>   &lt;\/ol> &lt;\/p> &lt;\/template>  &lt;style scoped> .downloaded{   font-size: 0.8em; }  ol {   display: flex;   flex-direction: column;   justify-content: space-evenly;   align-items: center; }  li{   text-align: center; }  .gallery-img{   width: 50%;   height: auto;   } &lt;\/style> <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0411\u043e\u043b\u044c\u0448\u0435 \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0432 vue \u0448\u0430\u0431\u043b\u043e\u043d\u0435 \u043e\u0442 vite \u0432\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 &#8212; \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442 \u0432\u00a0 dev \u0440\u0435\u0436\u0438\u043c\u0435. \u0412\u0435\u0440\u043d\u0435\u043c\u0441\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440, \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442.<\/p>\n<p>\u041f\u0440\u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0437\u0430\u0433\u043b\u044f\u043d\u0435\u043c \u0432\u043e \u0432\u043a\u043b\u0430\u0434\u043a\u0443 \u201c\u0441\u0435\u0442\u044c\u201d \u0438 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u043c \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u044b\u0439 \u0437\u0430\u043f\u0440\u043e\u0441<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0412\u043e \u0432\u043a\u043b\u0430\u0434\u043a\u0435 \u201c\u043a\u043e\u043d\u0441\u043e\u043b\u044c\u201d \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u043c \u0437\u0430\u043f\u0438\u0441\u044c \u043e\u0431 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0434\u0430\u043d\u043d\u044b\u0445<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u041d\u0443 \u0438 \u043d\u0430\u043a\u043e\u043d\u0435\u0446, \u0441\u0430\u043c\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 (\u043d\u0430\u0448 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 App.vue):<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0412 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u043c (\u043d\u0435 \u043e\u0431\u0443\u0447\u0430\u044e\u0449\u0435\u043c) \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043d\u0430 Vue \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0440\u0430\u0437\u043d\u043e\u0441\u0438\u0442\u044c \u0432 \u0440\u0430\u0437\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u044d\u0442\u043e \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b SPA, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u044d\u0442\u043e \u043a\u0430\u043a\u0430\u044f-\u0442\u043e \u0435\u0433\u043e \u0434\u0435\u0442\u0430\u043b\u044c.\u00a0<\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 li \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, GalleryElement.Vue) \u0432 \u043f\u0430\u043f\u043a\u0435 components, \u0430 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0444\u0430\u0439\u043b \u0432 \u043f\u0430\u043f\u043a\u0435 pages (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, index.vue). <\/p>\n<h2>\u0427\u0430\u0441\u0442\u044c 2. \u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c CMS \u043a \u0433\u0430\u043b\u0435\u0440\u0435\u0435<\/h2>\n<p>\u0412 \u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438, \u043c\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0441\u0430\u0439\u0442 \u043d\u0430 Vue, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435 \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0432 json \u0444\u043e\u0440\u043c\u0430\u0442\u0435 \u0432\u043d\u0443\u0442\u0440. \u0427\u0435\u0440\u0435\u0437 \u043a\u0430\u043a\u043e\u0435-\u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043d\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442 \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0440\u0430\u0441\u0442\u0438, \u0438 \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0434\u043e\u0441\u0442\u0443\u043f \u0434\u043b\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0430 \u0438 \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0439 \u0444\u043e\u0440\u043c\u0430\u0442 \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f, \u0441\u0432\u044f\u0437\u0438 \u043c\u0435\u0436\u0434\u0443 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438 \u0438 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044f\u043c\u0438). \u0414\u043b\u044f \u0442\u0430\u043a\u0438\u0445 \u0446\u0435\u043b\u0435\u0439 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c CMS <a href=\"https:\/\/strapi.io\/\" rel=\"noopener noreferrer nofollow\"><u>Strapi<\/u><\/a>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0438\u043d\u0442\u0443\u0438\u0442\u0438\u0432\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u043d\u0443\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430, \u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0435\u0433\u043e \u0447\u0435\u0440\u0435\u0437 REST API.<\/p>\n<p>\u0414\u0430\u043d\u043d\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0445\u043e\u0440\u043e\u0448\u043e \u0437\u0430\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0430, \u0438\u043c\u0435\u0435\u0442 \u0445\u043e\u0440\u043e\u0448\u0435\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u043e \u043d\u0430 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u0430\u0445. \u0414\u043b\u044f \u0431\u044b\u0441\u0442\u0440\u043e\u0433\u043e \u0441\u0442\u0430\u0440\u0442\u0430, \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0435 <a href=\"https:\/\/docs.strapi.io\/dev-docs\/quick-start#_1-install-strapi-and-create-a-new-project\" rel=\"noopener noreferrer nofollow\"><u>\u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e<\/u><\/a>.<\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u0442\u043a\u0430<\/p>\n<p><code>mkdir gallery-cms<\/code><\/p>\n<p>\u0417\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 quickstart \u0432\u0435\u0440\u0441\u0438\u0438. \u041f\u043e-\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0431\u0430\u0437\u044b \u0434\u0430\u043d\u043d\u044b\u0445 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f Sqlite3.<\/p>\n<p><code>npx create-strapi-app@latest my-project --quickstart<\/code><\/p>\n<p><code>Need to install the following packages:<\/code><\/p>\n<p><code>\u00a0\u00a0create-strapi-app@latest<\/code><\/p>\n<p><code>Ok to proceed? (y) y<\/code><\/p>\n<p>\u0414\u043e\u0436\u0438\u0434\u0430\u0435\u043c\u0441\u044f \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438, \u0437\u0430\u043f\u0443\u0441\u043a \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438:<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u042d\u043a\u0440\u0430\u043d \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0430 \u043f\u043e\u0441\u043b\u0435 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0433\u043e \u0441\u0442\u0430\u0440\u0442\u0430 Strapi <\/figcaption><\/div>\n<\/figure>\n<p>\u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 <a href=\"http:\/\/localhost:1337\/\" rel=\"noopener noreferrer nofollow\"><u>http:\/\/localhost:1337\/<\/u><\/a> (\u043f\u043e\u0440\u0442 \u043f\u043e-\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e 1337, \u043f\u0440\u0438 \u0436\u0435\u043b\u0430\u043d\u0438\u0438 \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 config\/server.js ), \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043c \u0443\u0447\u0435\u0442\u043d\u0443\u044e \u0437\u0430\u043f\u0438\u0441\u044c \u0430\u0434\u043c\u0438\u043d\u0438\u0441\u0442\u0440\u0430\u0442\u043e\u0440\u0430.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u0432 \u0440\u0430\u0437\u0434\u0435\u043b \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044f\u043c\u0438 (\u0421ontent-Type Builder), \u0438 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044e \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0439 \u0433\u0430\u043b\u0435\u0440\u0435\u0438.\u00a0<\/p>\n<p>\u042f \u043d\u0435 \u0431\u0443\u0434\u0443 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u043f\u043e\u0448\u0430\u0433\u043e\u0432\u0443\u044e \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e \u043f\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0435 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438 \u0438 \u0441\u0430\u043c\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b, \u043d\u043e \u043e\u043f\u0438\u0448\u0443 \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u043c\u043e\u043c\u0435\u043d\u0442\u044b, \u0431\u0435\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u0443\u044e \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0443\u044e \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u043e\u0441\u0442\u0430\u0432\u043e\u043c \u0433\u0430\u043b\u0435\u0440\u0435\u0438 \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0435\u0435 \u0447\u0435\u0440\u0435\u0437 REST API.<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438<\/figcaption><\/div>\n<\/figure>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043d\u0430\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0433\u0430\u043b\u0435\u0440\u0435\u0438 (\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e id \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u043e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438):<\/p>\n<ol>\n<li>\n<p>name &#8212; \u0422\u0435\u043a\u0441\u0442<\/p>\n<\/li>\n<li>\n<p>imgSrc &#8212; \u0422\u0435\u043a\u0441\u0442 (\u0412 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0435, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u0438\u043f \u201cMedia\u201d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u043c\u0435\u0434\u0438\u0430 \u0444\u0430\u0439\u043b\u044b \u0441 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \u043f\u0440\u044f\u043c\u043e \u0432 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 Strapi, \u0434\u0430\u043d\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e, \u0432\u044b\u0431\u0440\u0430\u0432 \u0442\u0438\u043f \u201cMedia\u201d \u0434\u043b\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 imgSrc)<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 name <\/figcaption><\/div>\n<\/figure>\n<p>\u0417\u0430\u043a\u0430\u043d\u0447\u0438\u0432\u0430\u0435\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443, \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e &#8212; \u0441\u0438\u0441\u0442\u0435\u043c\u0435 \u043f\u043e\u0441\u043b\u0435 \u0442\u0430\u043a\u0438\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c\u0441\u044f, \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u043d\u044f\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u0440\u0435\u043c\u044f.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u041f\u043e\u0441\u043b\u0435<\/p>\n<\/li>\n<\/ol>\n<\/div>\n<\/div>\n<\/div>\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-411151","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/411151","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=411151"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/411151\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=411151"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=411151"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=411151"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}