From 111115b9735fa2315a1837b42b475734a629b28f Mon Sep 17 00:00:00 2001
From: Aleksandr Dergunov <dergunovs@mail.ru>
Date: Tue, 16 Mar 2021 17:55:49 +0300
Subject: [PATCH] =?UTF-8?q?=D0=B8=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=B8?=
 =?UTF-8?q?=D0=BB=20=D0=BA=D0=BE=D0=BC=D0=BC=D0=B5=D0=BD=D1=82=D0=B0=D1=80?=
 =?UTF-8?q?=D0=B8=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .editorconfig            | 13 ++++++
 .gitignore               | 85 +---------------------------------------
 .prettierrc              |  5 +++
 components/PageForm.vue  | 13 +++---
 components/TheHeader.vue |  6 ---
 jsconfig.json            | 12 ++++++
 pages/index.vue          |  5 +--
 pages/page/_url.vue      |  6 ++-
 readme.md                |  1 -
 server/index.js          |  6 +--
 server/model/page.js     |  4 +-
 11 files changed, 48 insertions(+), 108 deletions(-)
 create mode 100644 .editorconfig
 create mode 100644 .prettierrc
 create mode 100644 jsconfig.json

diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..5d12634
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/.gitignore b/.gitignore
index 37f7608..b18c99a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,87 +1,4 @@
-.editorconfig
-.prettierrc
-jsconfig.json
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# TypeScript v1 declaration files
-typings/
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
 .env
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-
-# nuxt.js build output
 .nuxt
-
-# Nuxt generate
+node_modules/
 dist
-
-# vuepress build output
-.vuepress/dist
-
-# Serverless directories
-.serverless
-
-# IDE / Editor
-.idea
-.editorconfig
-
-# Service worker
-sw.*
-
-# Mac OSX
-.DS_Store
-
-# Vim swap files
-*.swp
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..5016f7d
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,5 @@
+{
+  "semi": true,
+  "singleQuote": false,
+  "printWidth": 120
+}
diff --git a/components/PageForm.vue b/components/PageForm.vue
index 95c15a2..bfc5c10 100644
--- a/components/PageForm.vue
+++ b/components/PageForm.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="form">
     <div class="form-element">
-      <label for="url">Адрес страницы Url</label>
+      <label for="url">Адрес страницы URL</label>
       <input type="text" v-model="page.url" id="url" />
     </div>
     <div class="form-element">
@@ -29,11 +29,9 @@
 
 <script>
 export default {
-  name: "PageForm",
-
   // Это переиспользуемый компонент с формой для создания/редактирования/удаления страницы.
   // В зависимости от поступаемых пропсов меняется отображение кнопок.
-  // При редактировании данных в пропсах передаётся контент конкретной страницы.
+  // Если компонент используется для редактирования текущей страницы, то в него передаются её данные.
   props: { page: { type: Object, default: () => ({}) }, action: { type: String } },
 
   // Нам потребуется текущий URL страницы, которые не будет связан с input формы.
@@ -48,15 +46,20 @@ export default {
       this.$axios
         .post(`/api/page`, this.page)
         .then(() => {
+          // После успешного создания новой страницы происходит перенаправление на неё.
           this.$router.push(`/page/${this.page.url}`);
         })
-        .catch((err) => console.log(err.response.data.message));
+        .catch((err) => {
+          // Если страница не создана, то в консоль выводим ошибку из бэкенда.
+          console.log(err.response.data.message);
+        });
     },
     updatePage() {
       // При обновлении текущей страницы нужен исходный URL для запроса в API.
       this.$axios
         .patch(`/api/page/${this.currentUrl}`, this.page)
         .then(() => {
+          // После обновления контента происходит перенаправление на страницу со списком страниц.
           this.$router.push(`/page`);
         })
         .catch((err) => console.log(err.response.data.message));
diff --git a/components/TheHeader.vue b/components/TheHeader.vue
index 174f44c..775a2aa 100644
--- a/components/TheHeader.vue
+++ b/components/TheHeader.vue
@@ -9,12 +9,6 @@
   </header>
 </template>
 
-<script>
-export default {
-  name: "TheHeader",
-};
-</script>
-
 <style>
 header {
   display: flex;
diff --git a/jsconfig.json b/jsconfig.json
new file mode 100644
index 0000000..29037a6
--- /dev/null
+++ b/jsconfig.json
@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./*"],
+      "@/*": ["./*"],
+      "~~/*": ["./*"],
+      "@@/*": ["./*"]
+    }
+  },
+  "exclude": ["node_modules", ".nuxt", "dist"]
+}
diff --git a/pages/index.vue b/pages/index.vue
index a145d3a..b61d609 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -2,10 +2,7 @@
   <main>
     <h1>Контент главной страницы</h1>
 
-    <div class="content">
-      <p>Шаблон связки Nuxt + Express.</p>
-      <p>База MognoDB, ORM Mongoose.</p>
-    </div>
+    <p>Базовый шаблон для работы Nuxt в качестве middleware для Express.</p>
   </main>
 </template>
 
diff --git a/pages/page/_url.vue b/pages/page/_url.vue
index 6f135af..e786663 100644
--- a/pages/page/_url.vue
+++ b/pages/page/_url.vue
@@ -4,7 +4,7 @@
     <div v-html="page.content"></div>
 
     <button @click="showPageForm = true">Редактировать</button>
-    <PageForm v-if="showPageForm" :page="page" action="update" />
+    <LazyPageForm v-if="showPageForm" :page="page" action="update" />
   </main>
 </template>
 
@@ -20,7 +20,9 @@ export default {
     return {
       page: { url: "", h1: "", title: "", description: "", content: "" },
 
-      // При нажатии на кнопку "Редактировать" показывается форма. По-умолчанию она скрыта.
+      // При нажатии на кнопку "Редактировать" показывается форма. По-умолчанию её нет в DOM.
+      // На этой странице форма подключена асинхронно, то есть её нет в чанке этой страницы.
+      // Код асинхронных компонентов Nuxt при сборке вырезает в отдельные js и css файлы.
       showPageForm: false,
     };
   },
diff --git a/readme.md b/readme.md
index 53f4971..9d4700d 100644
--- a/readme.md
+++ b/readme.md
@@ -1,7 +1,6 @@
 # Nuxt-Express
 
 Базовый шаблон для работы Nuxt в качестве middleware для Express.
-Приложение работает в едином процессе.
 
 ### Используемые технологии
 
diff --git a/server/index.js b/server/index.js
index 5c49cb7..c4b9e78 100644
--- a/server/index.js
+++ b/server/index.js
@@ -1,5 +1,3 @@
-// Основной файл запуска приложения.
-
 require("dotenv").config();
 
 // Подключаем бэкенд на Express.
@@ -7,8 +5,8 @@ const express = require("express");
 const app = express();
 app.use(express.json());
 
-// Подключаем Mongoose и делаем коннект к базе.
-// Прописывает стандартные настройки Mongoose.
+// Подключаем Mongoose и делаем коннект к базе данных.
+// Прописываем стандартные настройки Mongoose.
 const mongoose = require("mongoose");
 mongoose.Schema.Types.Boolean.convertToFalse.add("");
 mongoose.connect(`mongodb://localhost/${process.env.DATABASE}`, {
diff --git a/server/model/page.js b/server/model/page.js
index 5b2e28c..5eea26d 100644
--- a/server/model/page.js
+++ b/server/model/page.js
@@ -4,7 +4,7 @@ const pageSchema = new mongoose.Schema({
   // Описываем модель Page. То есть из чего состоит динамическая страница сайта.
 
   url: {
-    // Адрес страницы является строкой. Он обязателен и должен быть уникальным.
+    // Например, адрес страницы является строкой. Он обязателен и должен быть уникальным.
     type: String,
     unique: true,
     required: true,
@@ -28,7 +28,7 @@ const pageSchema = new mongoose.Schema({
     required: true,
   },
   createdDate: {
-    // У каждой страницы автоматически создаётся дата создания.
+    // У каждой страницы автоматически сохраняется дата создания.
     type: Date,
     default: Date.now,
   },