небольшой рефакторинг + обновил зависимости

dergunovs · Jul 19, 2021 · 770efe1 · 770efe1
1 parent d15c500
commit 770efe1
Show file tree

Hide file tree

Showing 8 changed files with 2,687 additions and 2,465 deletions.
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -14,7 +14,42 @@ main {
 }
 
 button {
-  margin-top: 16px;
   padding: 8px;
   cursor: pointer;
 }
+
+header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #eee;
+  padding: 20px;
+}
+
+nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+nav a {
+  margin-right: 8px;
+}
+
+.form {
+  width: 600px;
+}
+
+.form-element {
+  display: flex;
+  flex-direction: column;
+  margin: 16px 0;
+}
+
+.form-element input,
+.form-element textarea {
+  margin-top: 4px;
+  padding: 8px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
diff --git a/components/PageForm.vue b/components/PageForm.vue
@@ -1,24 +1,8 @@
 <template>
   <div class="form">
-    <div class="form-element">
-      <label for="url">Адрес страницы URL</label>
-      <input type="text" v-model="page.url" id="url" />
-    </div>
-    <div class="form-element">
-      <label for="h1">Заголовок H1</label>
-      <input type="text" v-model="page.h1" id="h1" />
-    </div>
-    <div class="form-element">
-      <label for="title">Title страницы</label>
-      <input type="text" v-model="page.title" id="title" />
-    </div>
-    <div class="form-element">
-      <label for="description">Мета-тег Description</label>
-      <input type="description" v-model="page.description" id="description" />
-    </div>
-    <div class="form-element">
-      <label for="content">Контент страницы</label>
-      <textarea v-model="page.content" id="content" rows="4"></textarea>
+    <div v-for="element in form" :key="element.name" class="form-element">
+      <label :for="element.name">{{ element.label }}</label>
+      <input type="text" v-model="pageToEdit[element.name]" :id="element.name" />
     </div>
 
     <button v-if="this.action === 'create'" @click="createPage">Создать страницу</button>
@@ -37,66 +21,50 @@ export default {
   // Нам потребуется текущий URL страницы, которые не будет связан с input формы.
   data() {
     return {
-      currentUrl: "",
+      pageToEdit: {},
+      form: [
+        { name: "url", label: "Адрес страницы URL" },
+        { name: "h1", label: "Заголовок H1" },
+        { name: "title", label: "Title страницы" },
+        { name: "description", label: "Мета-тег Description" },
+        { name: "content", label: "Контент страницы" },
+      ],
     };
   },
   methods: {
-    createPage() {
-      // Создаём новую страницу.
-      this.$axios
-        .post(`/api/page`, this.page)
-        .then(() => {
-          // После успешного создания новой страницы происходит перенаправление на неё.
-          this.$router.push(`/page/${this.page.url}`);
-        })
-        .catch((err) => {
-          // Если страница не создана, то в консоль выводим ошибку из бэкенда.
-          console.log(err.response.data.message);
-        });
+    async createPage() {
+      try {
+        // Создаём новую страницу.
+        await this.$axios.post(`/api/page`, this.pageToEdit);
+        this.$router.push(`/page/${this.pageToEdit.url}`);
+      } 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));
+    async updatePage() {
+      try {
+        // При обновлении текущей страницы нужен исходный URL для запроса в API.
+        await this.$axios.patch(`/api/page/${this.page.url}`, this.pageToEdit);
+        // После обновления контента происходит перенаправление на страницу со списком страниц.
+        this.$router.push(`/page`);
+      } catch (err) {
+        console.log(err.response.data.message);
+      }
     },
-    deletePage() {
-      // При удалении страницы также используем текущий URL, а не изменяемый URL в форме.
-      this.$axios
-        .delete(`/api/page/${this.currentUrl}`)
-        .then(() => {
-          this.$router.push(`/page`);
-        })
-        .catch((err) => console.log(err.response.data.message));
+    async deletePage() {
+      try {
+        // При удалении страницы также используем текущий URL, а не изменяемый URL в форме.
+        await this.$axios.delete(`/api/page/${this.page.url}`);
+        this.$router.push(`/page`);
+      } catch (err) {
+        console.log(err.response.data.message);
+      }
     },
   },
-  mounted() {
-    // Сохраняем текущий URL на стадии mount компонента.
-    this.currentUrl = this.page.url;
+  beforeMount() {
+    // Делаем информацию о странице редактируемой.
+    Object.assign(this.pageToEdit, this.page);
   },
 };
 </script>
-
-<style>
-.form {
-  width: 600px;
-}
-
-.form-element {
-  display: flex;
-  flex-direction: column;
-  margin-top: 16px;
-}
-
-.form-element input,
-.form-element textarea {
-  margin-top: 4px;
-  padding: 8px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-}
-</style>
diff --git a/components/TheHeader.vue b/components/TheHeader.vue
@@ -8,12 +8,3 @@
     </nav>
   </header>
 </template>
-
-<style>
-header {
-  display: flex;
-  justify-content: space-between;
-  background-color: #eee;
-  padding: 20px;
-}
-</style>
diff --git a/layouts/error.vue b/layouts/error.vue
@@ -7,7 +7,7 @@
 
 <script>
 export default {
-  // Шаблон страницы с клиентской ошибкой.
+  // Шаблон страницы с ошибкой.
   props: ["error"],
   layout: "default",
 };

diff --git a/nuxt.config.js b/nuxt.config.js
@@ -44,15 +44,11 @@ module.exports = {
   //Подключаем общий файл со стилями.
   css: ["@/assets/css/main.css"],
 
-  //Подключаем proxy от axios и прописывам базовый URL для пути /api/
-  axios: { proxy: true },
-  proxy: { "/api/": process.env.BASE_URL },
+  //Прописываем путь к бэку для axios
+  axios: { baseURL: process.env.BASE_URL },
 
   build: {
     // Просим стили вырезать в отдельные файлы. Иначе css будет inline.
     extractCSS: true,
-    babel: {
-      plugins: [["@babel/plugin-proposal-private-methods", { loose: true }]],
-    },
   },
 };