Vue, back edited,added

frontend/src/assets/css/catalog.css

@@ -27,7 +27,6 @@ h1, h2, h3, h4, h5, h6 {
     width: 100%;
 }
 
-
 /* Container */
 .container {
     width: 100%;
@@ -35,150 +34,6 @@ h1, h2, h3, h4, h5, h6 {
     margin: 0 auto;
 }
 
-
-/* Header */
-
-.header {
-    width: 100%;
-
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 1000;
-}
-
-.header__table {
-    width: 1052px;
-    height: 100px;
-    border: 2px solid white;
-    margin: 50px auto 0;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-
-    color: white;
-    
-}
-
-.header__image {
-    width: 140px;
-    height: 96px;
-    margin: 0 auto;
-    
-    background: url("@/assets/images/metr.svg") center
-    no-repeat;
-    background-size: cover;
-    border-right: 2px solid white;
-}
-
-.header__block {
-    width: 145px;
-    height: 96px;
-    margin: 0 auto;
-    border-right: 2px solid white;
-}
-
-.header__search {
-    width: 426px;
-    height: 96px;
-    margin: 0 auto;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-
-    border-right: 2px solid white;
-}
-
-.search {
-    width: 340px;
-    height: 40px;
-    padding-top: 25px;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-}
-
-.search__block {
-    width: 300px;
-    height: 40px;
-    margin: 0;
-    padding-top: 20px;
-
-    background: white;
-    border: 1px solid black;
-}
-
-.search__img {
-    width: 40px;
-    height: 40px;
-    margin: 0;
-    padding-top: 2px;
-}
-
-.header__contacts {
-    width: 46px;
-    height: 96px;
-    margin: 0 auto;
-    display: flex;
-    flex-direction: column;
-}
-
-.header__contacts__imgtop {
-    width: 48px;
-    height: 48px;
-    padding-top: 5px;
-    border-bottom: 2px solid white;
-}
-
-.header__contacts__img {
-    width: 48px;
-    height: 48px;
-    padding-top: 5px;
-}
-
-.header__block__content {
-    width: 70px;
-    height: 20px;
-    margin: 0 auto;
-    padding-top: 35px;
-}
-
-.header__block__contenttop {
-    width: 145px;
-    height: 48px;
-    margin: 0 auto;
-    border-bottom: 2px solid white;
-}
-
-.header__block__contentbott {
-    width: 145px;
-    height: 48px;
-}
-
-.nav__link {
-    text-decoration: none;
-    color: white;
-    font-size: 15px;
-    
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    padding-top: 10px;
-}
-
-.nav__link_tomsk {
-    text-decoration: none;
-    color: white;
-    font-size: 15px;
-    
-}
-
-.nav__link:hover, .nav__link_tomsk:hover {
-    color: #389EEB;
-    transition: color .2s linear;
-}
-
 /* Intro */
 .intro {
     width: 100%;

frontend/src/assets/css/offer.css

@@ -35,150 +35,6 @@ h1, h2, h3, h4, h5, h6 {
     margin: 0 auto;
 }
 
-
-/* Header */
-
-.header {
-    width: 100%;
-
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 1000;
-}
-
-.header__table {
-    width: 1052px;
-    height: 100px;
-    border: 2px solid white;
-    margin: 50px auto 0;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-
-    color: white;
-    
-}
-
-.header__image {
-    width: 140px;
-    height: 96px;
-    margin: 0 auto;
-    
-    background: url("../../../raw/assets/images/metr.svg") center
-    no-repeat;
-    background-size: cover;
-    border-right: 2px solid white;
-}
-
-.header__block {
-    width: 145px;
-    height: 96px;
-    margin: 0 auto;
-    border-right: 2px solid white;
-}
-
-.header__search {
-    width: 426px;
-    height: 96px;
-    margin: 0 auto;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-
-    border-right: 2px solid white;
-}
-
-.search {
-    width: 340px;
-    height: 40px;
-    padding-top: 25px;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-}
-
-.search__block {
-    width: 300px;
-    height: 40px;
-    margin: 0;
-    padding-top: 20px;
-
-    background: white;
-    border: 1px solid black;
-}
-
-.search__img {
-    width: 40px;
-    height: 40px;
-    margin: 0;
-    padding-top: 2px;
-}
-
-.header__contacts {
-    width: 46px;
-    height: 96px;
-    margin: 0 auto;
-    display: flex;
-    flex-direction: column;
-}
-
-.header__contacts__imgtop {
-    width: 48px;
-    height: 48px;
-    padding-top: 5px;
-    border-bottom: 2px solid white;
-}
-
-.header__contacts__img {
-    width: 48px;
-    height: 48px;
-    padding-top: 5px;
-}
-
-.header__block__content {
-    width: 70px;
-    height: 20px;
-    margin: 0 auto;
-    padding-top: 35px;
-}
-
-.header__block__contenttop {
-    width: 145px;
-    height: 48px;
-    margin: 0 auto;
-    border-bottom: 2px solid white;
-}
-
-.header__block__contentbott {
-    width: 145px;
-    height: 48px;
-}
-
-.nav__link {
-    text-decoration: none;
-    color: white;
-    font-size: 15px;
-    
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    padding-top: 10px;
-}
-
-.nav__link_tomsk {
-    text-decoration: none;
-    color: white;
-    font-size: 15px;
-    
-}
-
-.nav__link:hover, .nav__link_tomsk:hover {
-    color: #389EEB;
-    transition: color .2s linear;
-}
-
 /* Intro */
 .intro {
     width: 100%;

frontend/src/assets/css/profile.css

@@ -35,150 +35,6 @@ h1, h2, h3, h4, h5, h6 {
     margin: 0 auto;
 }
 
-
-/* Header */
-
-.header {
-    width: 100%;
-
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 1000;
-}
-
-.header__table {
-    width: 1052px;
-    height: 100px;
-    border: 2px solid white;
-    margin: 50px auto 0;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-
-    color: white;
-    
-}
-
-.header__image {
-    width: 140px;
-    height: 96px;
-    margin: 0 auto;
-    
-    background: url("@/assets/images/metr.svg") center
-    no-repeat;
-    background-size: cover;
-    border-right: 2px solid white;
-}
-
-.header__block {
-    width: 145px;
-    height: 96px;
-    margin: 0 auto;
-    border-right: 2px solid white;
-}
-
-.header__search {
-    width: 426px;
-    height: 96px;
-    margin: 0 auto;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-
-    border-right: 2px solid white;
-}
-
-.search {
-    width: 340px;
-    height: 40px;
-    padding-top: 25px;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-}
-
-.search__block {
-    width: 300px;
-    height: 40px;
-    margin: 0;
-    padding-top: 20px;
-
-    background: white;
-    border: 1px solid black;
-}
-
-.search__img {
-    width: 40px;
-    height: 40px;
-    margin: 0;
-    padding-top: 2px;
-}
-
-.header__contacts {
-    width: 46px;
-    height: 96px;
-    margin: 0 auto;
-    display: flex;
-    flex-direction: column;
-}
-
-.header__contacts__imgtop {
-    width: 48px;
-    height: 48px;
-    padding-top: 5px;
-    border-bottom: 2px solid white;
-}
-
-.header__contacts__img {
-    width: 48px;
-    height: 48px;
-    padding-top: 5px;
-}
-
-.header__block__content {
-    width: 70px;
-    height: 20px;
-    margin: 0 auto;
-    padding-top: 35px;
-}
-
-.header__block__contenttop {
-    width: 145px;
-    height: 48px;
-    margin: 0 auto;
-    border-bottom: 2px solid white;
-}
-
-.header__block__contentbott {
-    width: 145px;
-    height: 48px;
-}
-
-.nav__link {
-    text-decoration: none;
-    color: white;
-    font-size: 15px;
-    
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    padding-top: 10px;
-}
-
-.nav__link_tomsk {
-    text-decoration: none;
-    color: white;
-    font-size: 15px;
-    
-}
-
-.nav__link:hover, .nav__link_tomsk:hover {
-    color: #389EEB;
-    transition: color .2s linear;
-}
-
 /* Intro */
 .intro {
     width: 100%;

frontend/src/assets/css/style.css

@@ -35,150 +35,6 @@ h1, h2, h3, h4, h5, h6 {
     margin: 0 auto;
 }
 
-
-/* Header */
-
-.header {
-    width: 100%;
-
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 1000;
-}
-
-.header__table {
-    width: 1052px;
-    height: 100px;
-    border: 2px solid white;
-    margin: 50px auto 0;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-
-    color: white;
-    
-}
-
-.header__image {
-    width: 140px;
-    height: 96px;
-    margin: 0 auto;
-    
-    background: url("../images/metr.svg") center
-    no-repeat;
-    background-size: cover;
-    border-right: 2px solid white;
-}
-
-.header__block {
-    width: 145px;
-    height: 96px;
-    margin: 0 auto;
-    border-right: 2px solid white;
-}
-
-.header__search {
-    width: 426px;
-    height: 96px;
-    margin: 0 auto;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-
-    border-right: 2px solid white;
-}
-
-.search {
-    width: 340px;
-    height: 40px;
-    padding-top: 25px;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-}
-
-.search__block {
-    width: 300px;
-    height: 40px;
-    margin: 0;
-    padding-top: 20px;
-
-    background: white;
-    border: 1px solid black;
-}
-
-.search__img {
-    width: 40px;
-    height: 40px;
-    margin: 0;
-    padding-top: 2px;
-}
-
-.header__contacts {
-    width: 46px;
-    height: 96px;
-    margin: 0 auto;
-    display: flex;
-    flex-direction: column;
-}
-
-.header__contacts__imgtop {
-    width: 48px;
-    height: 48px;
-    padding-top: 5px;
-    border-bottom: 2px solid white;
-}
-
-.header__contacts__img {
-    width: 48px;
-    height: 48px;
-    padding-top: 5px;
-}
-
-.header__block__content {
-    width: 70px;
-    height: 20px;
-    margin: 0 auto;
-    padding-top: 35px;
-}
-
-.header__block__contenttop {
-    width: 145px;
-    height: 48px;
-    margin: 0 auto;
-    border-bottom: 2px solid white;
-}
-
-.header__block__contentbott {
-    width: 145px;
-    height: 48px;
-}
-
-.nav__link {
-    text-decoration: none;
-    color: white;
-    font-size: 15px;
-    
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    padding-top: 10px;
-}
-
-.nav__link_tomsk {
-    text-decoration: none;
-    color: white;
-    font-size: 15px;
-    
-}
-
-.nav__link:hover, .nav__link_tomsk:hover {
-    color: #389EEB;
-    transition: color .2s linear;
-}
-
 /* Intro */
 .intro {
     width: 100%;

frontend/src/components/ProfileAbout.vue

@@ -7,14 +7,26 @@
       <img src="@/assets/images/1.1.jpg" alt="">
     </div>
     <div class="about_describtions">
-      <h3>Занимаюсь продажей квартир более 10 лет.</h3>
+      <h4>Имя Фамилия: </h4><h3>{{ name }}</h3>
+      <h4>Почта: </h4><h3>{{ user.email }}</h3>
+      <h4>Телефон: </h4><h3>{{ user.phone || 'Не указано' }}</h3>
     </div>
   </div>
 </template>
 
 <script>
+import {mapGetters} from "vuex";
+
 export default {
-  name: "ProfileAbout"
+  name: "ProfileAbout",
+  computed: {
+    ...mapGetters({ user: 'user' }),
+    name() {
+      return this.user.last_name && this.user.first_name && this.user.middle_name
+          ? `${this.user.last_name} ${this.user.first_name} ${this.user.middle_name}`
+          : 'Не указано';
+    }
+  }
 }
 </script>
 

frontend/src/components/ProfileAddOffer.vue

@@ -50,12 +50,51 @@
         <input type="text" size="40" v-model.trim="offer.description">
       </div>
     </div>
+    <button @click="addOffer">Отправить</button>
   </div>
 </template>
 
 <script>
+import offerService from "@/services/offer";
+
 export default {
-  name: "ProfileAbout"
+  name: "ProfileAbout",
+  data() {
+    return this.initialState()
+  },
+  methods: {
+    async addOffer() {
+      const data = { ...this.offer };
+
+      data.user_id = this.$store.getters.user.id;
+
+      offerService
+          .add(data)
+          .then(() =>  this.reset())
+          .catch(() => alert('Ошибка!'));
+    },
+    initialState() {
+      return {
+        offer: {
+          name: '',
+          type: 'Flat',
+          location: '',
+          price: '',
+          rooms: 1,
+          space: '',
+          description: '',
+          is_group: 1,
+        },
+        files: [],
+      }
+    },
+    reset() {
+      Object.assign(this.$data, this.initialState());
+    },
+    previewFiles(event) {
+      this.files.push(event.target.files[0]);
+    },
+  }
 }
 </script>
 

frontend/src/components/TheHeader.vue

@@ -0,0 +1,225 @@
+<template>
+  <header class="header">
+    <div class="container">
+      <div class="header__table">
+        <router-link to="/" class="nav__link_logo" href="#">
+          <div class="header__image">
+          </div>
+        </router-link>
+        <div class="header__block">
+          <div class="header__block__content">
+            <img src="@/assets/images/location.svg" alt="">
+            <a class="nav__link_tomsk" href="#">Томск</a>
+          </div>
+        </div>
+        <div class="header__block">
+          <div class="header__block__contenttop">
+            <router-link to="/catalog" class="nav__link" href="#">каталог</router-link>
+          </div>
+          <div class="header__block__contentdown">
+            <a class="nav__link" href="#">блог</a>
+          </div>
+        </div>
+        <div class="header__block">
+          <div class="header__block__contenttop">
+            <a class="nav__link" href="#">контакты</a>
+          </div>
+          <div class="header__block__contentdown">
+            <a class="nav__link" href="#">помощь</a>
+          </div>
+        </div>
+        <div class="header__search">
+          <div class="search">
+            <div class="search__block">
+
+            </div>
+            <div class="search__img">
+              <a class="nav__link" href="#">
+                <img src="@/assets/images/search.jpg" alt="">
+              </a>
+            </div>
+          </div>
+        </div>
+        <div class="header__contacts">
+          <div class="header__contacts__imgtop">
+            <a class="nav__link" href="#">
+              <img src="@/assets/images/tell.jpg" alt="">
+            </a>
+          </div>
+          <div class="header__contacts__img">
+            <router-link to="/auth" class="nav__link" href="#" id="user">
+              <img src="@/assets/images/user.jpg" alt="">
+            </router-link>
+          </div>
+        </div>
+      </div>
+    </div>
+  </header>
+</template>
+
+<script>
+export default {
+  name: "TheHeader"
+}
+</script>
+
+<style scoped>
+/* Container */
+.container {
+  width: 100%;
+  max-width: 1920px;
+  margin: 0 auto;
+}
+/* Header */
+
+.header {
+  width: 100%;
+
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+}
+
+.header__table {
+  width: 1052px;
+  height: 100px;
+  border: 2px solid white;
+  margin: 50px auto 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+
+  color: white;
+
+}
+
+.header__image {
+  width: 140px;
+  height: 96px;
+  margin: 0 auto;
+
+  background: url("@/assets/images/metr_header.svg") center
+  no-repeat;
+  background-size: cover;
+  border-right: 2px solid white;
+}
+
+.header__block {
+  width: 145px;
+  height: 96px;
+  margin: 0 auto;
+  border-right: 2px solid white;
+}
+
+.header__search {
+  width: 426px;
+  height: 96px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+
+  border-right: 2px solid white;
+}
+
+.search {
+  width: 340px;
+  height: 40px;
+  padding-top: 25px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.search__block {
+  width: 300px;
+  height: 40px;
+  margin: 0;
+  padding-top: 20px;
+
+  background: white;
+  border: 1px solid black;
+}
+
+.search__img {
+  width: 40px;
+  height: 40px;
+  margin: 0;
+  padding-top: 2px;
+}
+
+.header__contacts {
+  width: 46px;
+  height: 96px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.header__contacts__imgtop {
+  width: 48px;
+  height: 48px;
+  padding-top: 5px;
+  border-bottom: 2px solid white;
+}
+
+.header__contacts__img {
+  width: 48px;
+  height: 48px;
+  padding-top: 5px;
+}
+
+.header__block__content {
+  width: 70px;
+  height: 20px;
+  margin: 0 auto;
+  padding-top: 35px;
+}
+
+.header__block__contenttop {
+  width: 145px;
+  height: 48px;
+  margin: 0 auto;
+  border-bottom: 2px solid white;
+}
+
+.header__block__contentbott {
+  width: 145px;
+  height: 48px;
+}
+
+.nav__link{
+  text-decoration: none;
+  color: white;
+  font-size: 15px;
+
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  padding-top: 10px;
+}
+
+.nav__link_logo{
+  text-decoration: none;
+  color: white;
+  font-size: 15px;
+
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.nav__link_tomsk {
+  text-decoration: none;
+  color: white;
+  font-size: 15px;
+
+}
+
+.nav__link:hover, .nav__link_tomsk:hover {
+  color: #389EEB;
+  transition: color .2s linear;
+}
+</style>

frontend/src/services/api.js

@@ -1,6 +1,21 @@
 import axios from 'axios';
 
-export default axios.create({
+const instance = axios.create({
     baseURL: 'http://tusur.tk:9080/api',
     withCredentials: true,
 });
+
+instance.interceptors.request.use(function (config) {
+    const savedUser = JSON.parse(localStorage.getItem('auth')) || null;
+    if (savedUser === null)
+        return config;
+
+    const token = savedUser.data.token;
+    config.headers.Authorization = `Bearer ${token}`;
+
+    return config;
+}, function (error) {
+    return Promise.reject(error);
+});
+
+export default instance;

frontend/src/services/offer.js

@@ -0,0 +1,10 @@
+import api from "@/services/api";
+
+export const OfferService = {
+    async add(data) {
+        const resp = await api.post('/offers', data);
+        return resp;
+    },
+};
+
+export default OfferService;

frontend/src/store/modules/auth.js

@@ -8,6 +8,11 @@ export const state = {
 };
 
 export const actions = {
+    async registration({ commit }, { email, password }) {
+        const { data: user } = await authService.registration(email, password);
+        commit('SET_USER', user.data);
+        commit('SET_TOKEN', user.token);
+    },
     async login({ commit }, { email, password }) {
         const { data: user } = await authService.login(email, password);
         commit('SET_USER', user.data);

frontend/src/views/AuthView.vue

@@ -52,7 +52,9 @@ export default {
       });
     },
     registration() {
-
+      this.$store.dispatch('registration', this.credentials).then(() => {
+        this.$router.push('/profile');
+      });
     },
     auth() {
       if (this.authForm)
@@ -60,6 +62,10 @@ export default {
       else
         this.registration();
     }
+  },
+  mounted() {
+    if (this.$store.getters.userAuthenticated)
+      this.$router.push('/profile');
   }
 }
 </script>>

frontend/src/views/CatalogView.vue

@@ -1,60 +1,5 @@
 <template>
-  <header class="header">
+  <the-header></the-header>
-    <div class="container">
-      <div class="header__table">
-        <div class="header__image">
-          <router-link to="/" class="nav__link" href="#">
-          </router-link>
-        </div>
-        <div class="header__block">
-          <div class="header__block__content">
-            <img src="~@/assets/images/location.png" alt="">
-            <a class="nav__link_tomsk" href="#">Томск</a>
-          </div>
-        </div>
-        <div class="header__block">
-          <div class="header__block__contenttop">
-            <a class="nav__link" href="#">каталог</a>
-          </div>
-          <div class="header__block__contentdown">
-            <a class="nav__link" href="#">блог</a>
-          </div>
-        </div>
-        <div class="header__block">
-          <div class="header__block__contenttop">
-            <a class="nav__link" href="#">контакты</a>
-          </div>
-          <div class="header__block__contentdown">
-            <a class="nav__link" href="#">помощь</a>
-          </div>
-        </div>
-        <div class="header__search">
-          <div class="search">
-            <div class="search__block">
-
-            </div>
-            <div class="search__img">
-              <a class="nav__link" href="#">
-                <img src="@/assets/images/search.jpg" alt="">
-              </a>
-            </div>
-          </div>
-        </div>
-        <div class="header__contacts">
-          <div class="header__contacts__imgtop">
-            <a class="nav__link" href="#">
-              <img src="@/assets/images/tell.jpg" alt="">
-            </a>
-          </div>
-          <div class="header__contacts__img">
-            <router-link to="/auth" class="nav__link" href="#" id="user">
-              <img src="@/assets/images/user.jpg" alt="">
-            </router-link>
-          </div>
-        </div>
-      </div>
-    </div>
-  </header>
 
   <section class="suggestions">
     <div class="suggestions__title">
@@ -137,8 +82,20 @@
 </template>
 
 <script>
+import TheHeader from "../components/TheHeader.vue";
+import TheFooter from "@/components/TheFooter.vue";
+
 export default {
-  name: "CatalogView"
+  name: "CatalogView",
+  components: {TheHeader, TheFooter},
+  data ()  {
+    return { offers: [] }
+  },
+  async mounted() {
+    const requests = await fetch('http://tusur.tk:9080/api/offers');
+    const offers = await requests.json();
+    this.offers = offers.data;
+  }
 }
 </script>
 

frontend/src/views/MainView.vue

@@ -1,58 +1,5 @@
 <template>
-    <header class="header">
+  <the-header></the-header>
-        <div class="container">
-            <div class="header__table">
-                <div class="header__image"></div>
-                <div class="header__block">
-                    <div class="header__block__content">
-                        <img src="@/assets/images/location.png" alt="">
-                        <a class="nav__link_tomsk" href="#"> Томск</a>
-                    </div>
-                </div>
-                <div class="header__block">
-                    <div class="header__block__contenttop">
-                      <router-link to="/catalog" class="nav__link" href="#" id="catalog">
-                          каталог
-                      </router-link>
-                    </div>
-
-                    <div class="header__block__contentdown">
-                        <a class="nav__link" href="#">блог</a>
-                    </div>
-                </div>
-                <div class="header__block">
-                    <div class="header__block__contenttop">
-                        <a class="nav__link" href="#">контакты</a>
-                    </div>
-                    <div class="header__block__contentdown">
-                        <a class="nav__link" href="#">помощь</a>
-                    </div>
-                </div>
-                <div class="header__search">
-                    <div class="search">
-                        <input class="search__block">
-                        <div class="search__img">
-                            <a class="nav__link" href="#">
-                                <img src="@/assets/images/search.jpg" alt="">
-                            </a>
-                        </div>
-                    </div>
-                </div>
-                <div class="header__contacts">
-                    <div class="header__contacts__imgtop">
-                        <a class="nav__link" href="#">
-                            <img src="@/assets/images/tell.jpg" alt="">
-                        </a>
-                    </div>
-                    <div class="header__contacts__img">
-                        <router-link to="/auth" class="nav__link" href="#" id="user">
-                            <img src="@/assets/images/user.jpg" alt="">
-                        </router-link>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </header>
 
     <div class="intro">
             <div class="container">
@@ -111,7 +58,12 @@
 </template>
 
 <script>
+import TheHeader from "@/components/TheHeader.vue";
+import TheFooter from "@/components/TheFooter.vue";
+
+
 export default {
+  components: {TheHeader, TheFooter},
   data ()  {
     return { offers: [] }
   },

frontend/src/views/OfferView.vue

@@ -1,61 +1,5 @@
 <template>
-  <header class="header">
+  <the-header></the-header>
-    <div class="container">
-      <div class="header__table">
-        <div class="header__image">
-          <router-link to="/" class="nav__link" href="#">
-          </router-link>
-        </div>
-        <div class="header__block">
-          <div class="header__block__content">
-            <img src="@/assets/images/location.png" alt="">
-            <a class="nav__link_tomsk" href="#">Томск</a>
-          </div>
-        </div>
-        <div class="header__block">
-          <div class="header__block__contenttop">
-            <router-link to="/catalog" class="nav__link" href="#">каталог</router-link>
-          </div>
-          <div class="header__block__contentdown">
-            <a class="nav__link" href="#">блог</a>
-          </div>
-        </div>
-        <div class="header__block">
-          <div class="header__block__contenttop">
-            <a class="nav__link" href="#">контакты</a>
-          </div>
-          <div class="header__block__contentdown">
-            <a class="nav__link" href="#">помощь</a>
-          </div>
-        </div>
-        <div class="header__search">
-          <div class="search">
-            <div class="search__block">
-
-            </div>
-            <div class="search__img">
-              <a class="nav__link" href="#">
-                <img src="@/assets/images/search.jpg" alt="">
-              </a>
-            </div>
-          </div>
-        </div>
-        <div class="header__contacts">
-          <div class="header__contacts__imgtop">
-            <a class="nav__link" href="#">
-              <img src="@/assets/images/tell.jpg" alt="">
-            </a>
-          </div>
-          <div class="header__contacts__img">
-            <router-link to="/auth" class="nav__link" href="#" id="user">
-              <img src="@/assets/images/user.jpg" alt="">
-            </router-link>
-          </div>
-        </div>
-      </div>
-    </div>
-  </header>
-
   <div class="intro">
     <div class="main">
       <div class="adv__info">

frontend/src/views/ProfileView.vue

@@ -1,61 +1,5 @@
 <template>
-  <header class="header">
+  <the-header></the-header>
-    <div class="container">
-      <div class="header__table">
-        <div class="header__image">
-          <router-link to="/" class="nav__link" href="#">
-          </router-link>
-        </div>
-        <div class="header__block">
-          <div class="header__block__content">
-            <img src="@/assets/images/location.png" alt="">
-            <a class="nav__link_tomsk" href="#">Томск</a>
-          </div>
-        </div>
-        <div class="header__block">
-          <div class="header__block__contenttop">
-            <router-link to="/catalog" class="nav__link" href="#">каталог</router-link>
-          </div>
-          <div class="header__block__contentdown">
-            <a class="nav__link" href="#">блог</a>
-          </div>
-        </div>
-        <div class="header__block">
-          <div class="header__block__contenttop">
-            <a class="nav__link" href="#">контакты</a>
-          </div>
-          <div class="header__block__contentdown">
-            <a class="nav__link" href="#">помощь</a>
-          </div>
-        </div>
-        <div class="header__search">
-          <div class="search">
-            <div class="search__block">
-
-            </div>
-            <div class="search__img">
-              <a class="nav__link" href="#">
-                <img src="@/assets/images/search.jpg" alt="">
-              </a>
-            </div>
-          </div>
-        </div>
-        <div class="header__contacts">
-          <div class="header__contacts__imgtop">
-            <a class="nav__link" href="#">
-              <img src="@/assets/images/tell.jpg" alt="">
-            </a>
-          </div>
-          <div class="header__contacts__img">
-            <a class="nav__link" href="#">
-              <img src="@/assets/images/user.jpg" alt="">
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-  </header>
-
   <div class="intro">
     <div class="main">
       <div class="user__info">
@@ -63,7 +7,7 @@
 <!--          <img src="@/assets/images/1.1.jpg" alt="">-->
         </div>
         <div class="username">
-          <h3>Виктория</h3>
+          <h3>{{ name }}</h3>
         </div>
         <rating-stars></rating-stars>
         <div class="user__hrefs">