+Vue +edited backend

2026-03-20 02:44:42 +00:00 · 2022-05-29 20:29:49 +07:00
parent eaca99aaf1
commit 140207d481
9 changed files with 265 additions and 13 deletions
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,8 +8,10 @@
      "name": "metr",
      "version": "0.0.0",
      "dependencies": {
+        "axios": "^0.27.2",
        "vue": "^3.2.33",
-        "vue-router": "^4.0.14"
+        "vue-router": "^4.0.14",
+        "vuex": "^4.0.2"
      },
      "devDependencies": {
        "@vitejs/plugin-vue": "^2.3.1",
@@ -147,11 +149,44 @@
      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.33.tgz",
      "integrity": "sha512-UBc1Pg1T3yZ97vsA2ueER0F6GbJebLHYlEi4ou1H5YL4KWvMOOWwpYo9/QpWq93wxKG6Wo13IY74Hcn/f7c7Bg=="
    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
+    "node_modules/axios": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
+      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "dependencies": {
+        "follow-redirects": "^1.14.9",
+        "form-data": "^4.0.0"
+      }
+    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
    "node_modules/csstype": {
      "version": "2.6.20",
      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz",
      "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
    "node_modules/esbuild": {
      "version": "0.14.39",
      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.14.39.tgz",
@@ -512,6 +547,38 @@
      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
    },
+    "node_modules/follow-redirects": {
+      "version": "1.15.1",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.1.tgz",
+      "integrity": "sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
    "node_modules/fsevents": {
      "version": "2.3.2",
      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
@@ -564,6 +631,25 @@
        "sourcemap-codec": "^1.4.8"
      }
    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
    "node_modules/nanoid": {
      "version": "3.3.4",
      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
@@ -736,6 +822,17 @@
      "peerDependencies": {
        "vue": "^3.2.0"
      }
+    },
+    "node_modules/vuex": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.2.tgz",
+      "integrity": "sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.0.0-beta.11"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.2"
+      }
    }
  },
  "dependencies": {
@@ -855,11 +952,38 @@
      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.33.tgz",
      "integrity": "sha512-UBc1Pg1T3yZ97vsA2ueER0F6GbJebLHYlEi4ou1H5YL4KWvMOOWwpYo9/QpWq93wxKG6Wo13IY74Hcn/f7c7Bg=="
    },
+    "asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
+    "axios": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
+      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "requires": {
+        "follow-redirects": "^1.14.9",
+        "form-data": "^4.0.0"
+      }
+    },
+    "combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "requires": {
+        "delayed-stream": "~1.0.0"
+      }
+    },
    "csstype": {
      "version": "2.6.20",
      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz",
      "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
    },
+    "delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
+    },
    "esbuild": {
      "version": "0.14.39",
      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.14.39.tgz",
@@ -1033,6 +1157,21 @@
      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
    },
+    "follow-redirects": {
+      "version": "1.15.1",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.1.tgz",
+      "integrity": "sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA=="
+    },
+    "form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "requires": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      }
+    },
    "fsevents": {
      "version": "2.3.2",
      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
@@ -1072,6 +1211,19 @@
        "sourcemap-codec": "^1.4.8"
      }
    },
+    "mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
+    },
+    "mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "requires": {
+        "mime-db": "1.52.0"
+      }
+    },
    "nanoid": {
      "version": "3.3.4",
      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
@@ -1171,6 +1323,14 @@
      "requires": {
        "@vue/devtools-api": "^6.0.0"
      }
+    },
+    "vuex": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.2.tgz",
+      "integrity": "sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==",
+      "requires": {
+        "@vue/devtools-api": "^6.0.0-beta.11"
+      }
    }
  }
 }
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -7,8 +7,10 @@
    "preview": "vite preview --port 5050"
  },
  "dependencies": {
+    "axios": "^0.27.2",
    "vue": "^3.2.33",
-    "vue-router": "^4.0.14"
+    "vue-router": "^4.0.14",
+    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.3.1",
--- a/frontend/src/assets/images/offer4.png
+++ b/frontend/src/assets/images/offer4.png
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -0,0 +1,8 @@
+import { createStore } from 'vuex';
+import auth from '@/store/modules/auth';
+
+export default createStore({
+    modules: {
+        auth,
+    },
+});
--- a/frontend/src/store/modules/auth.js
+++ b/frontend/src/store/modules/auth.js
@@ -0,0 +1,51 @@
+import authService from '@/services/auth';
+
+const savedUser = JSON.parse(localStorage.getItem('auth'));
+
+export const state = {
+    user: savedUser?.data?.data ?? null,
+    token: savedUser?.data?.token ?? null,
+};
+
+export const actions = {
+    async login({ commit }, { email, password }) {
+        const { data: user } = await authService.login(email, password);
+        commit('SET_USER', user.data);
+        commit('SET_TOKEN', user.token);
+    },
+    async logout({ commit }) {
+        await authService.logout();
+        commit('SET_USER', null);
+        commit('SET_TOKEN', null);
+    },
+};
+
+export const mutations = {
+    SET_USER(state, user) {
+        state.user = user;
+    },
+    SET_TOKEN(state, token) {
+        state.token = token;
+    },
+};
+
+export const getters = {
+    user(state) {
+        return state.user;
+    },
+    username(state) {
+        return state.user && state.user.last_name && state.user.first_name
+            ? `${state.user.last_name} ${state.user.first_name}`
+            : null;
+    },
+    userAuthenticated(state) {
+        return state.user !== null && state.token !== null;
+    },
+};
+
+export default {
+    state,
+    actions,
+    mutations,
+    getters,
+};
--- a/frontend/src/views/AuthView.vue
+++ b/frontend/src/views/AuthView.vue
@@ -1,40 +1,65 @@
 <template>
    <div class="container">
    <div class="logo">
+      <router-link to="/" class="nav__link" href="#">
        <div class="logoMetr">
        </div>
+      </router-link>
    </div>
    <div class="title">
-        <h2> {{authForm? "Вход" : "Регистрация" }} Метр</h2>
+        <h2> {{authForm ? "Вход" : "Регистрация" }} Метр</h2>
    </div>
-    <form action="" method="get" class="form__example">
+    <form class="form__example">
      <div class="form__example">
        <label for="name"></label>
-        <input class="login" type="text" name="name" id="name" placeholder="Почта" required>
+        <input class="login" type="email" name="name" id="name" placeholder="Почта" required v-model.trim="credentials.email">
      </div>
      <div class="form__example">
        <label for="email"></label>
-        <input class="login" type="email" name="email" id="email" placeholder="Пароль" required>
+        <input class="login" type="password" name="email" id="email" placeholder="Пароль" required v-model.trim="credentials.password">
      </div>
      <div class="form__example">
-        <button class="form__input">
-        {{authForm? "Войти" : "Зарегистрироваться" }}
+        <button class="form__input" @click.prevent="auth">
+        {{ authForm ? "Войти" : "Зарегистрироваться" }}
        </button>
      </div>
    </form>
-    
    <div class="form__example">
        <button class="form__input" @click="authForm = false" v-if="authForm">
-        Зарегистрироваться
+          Зарегистрироваться
        </button>
      </div>
  </div>
 </template>

 <script>
+import { mapActions } from "vuex";
+
 export default {
  data ()  {
-    return { authForm: true }
+    return {
+      authForm: true,
+      credentials: {
+        email: '',
+        password: '',
+      }
+    }
+  },
+  methods: {
+    login() {
+      this.$store.dispatch('login', this.credentials).then(() => {
+        this.$router.push('/profile');
+      });
+    },
+    registration() {
+
+    },
+    auth() {
+      if (this.authForm)
+        this.login();
+      else
+        this.registration();
+    }
  }
 }
 </script>>
--- a/frontend/src/views/MainView.vue
+++ b/frontend/src/views/MainView.vue
@@ -6,7 +6,7 @@
                <div class="header__block">
                    <div class="header__block__content">
                        <img src="@/assets/images/location.png" alt="">
-                        <a class="nav__link_tomsk" href="#">Томск</a>
+                        <a class="nav__link_tomsk" href="#"> Томск</a>
                    </div>
                </div>
                <div class="header__block">
--- a/frontend/src/views/OfferView.vue
+++ b/frontend/src/views/OfferView.vue
@@ -81,7 +81,7 @@
            <div class="other__images">
              <a href="#"><img src="../assets/images/offer3.png" alt=""></a>
              <a href="#"><img src="../assets/images/offer2.png" alt=""></a>
-              <a href="#"><img src="@/assets/images/adv4.png" alt=""></a>
+              <a href="#"><img src="../assets/images/offer4.png" alt=""></a>
            </div>
          </div>
        </div>