(국비교육) 84 - Vuetify + STS 다운 +

■ vuetify

 

 

vuetify를 설치한다. 

 

https://vuetifyjs.com/en/getting-started/installation/

Get started with Vuetify 3 — Vuetify

 

 

main.js 에 vuetify 넣어주기 

 

 

하단의 깃허브 버튼 클릭

 

<template>
  <v-app id="inspire">
    <v-navigation-drawer v-model="drawer">
      <!--  -->
    </v-navigation-drawer>

    <v-app-bar>
      <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>

      <v-app-bar-title>Application</v-app-bar-title>
    </v-app-bar>

    <v-main>
      <!--  -->
    </v-main>
  </v-app>
</template>

<script setup>
  import { ref } from 'vue'

  const drawer = ref(null)
</script>

<script>
  export default {
    data: () => ({ drawer: null }),
  }
</script>

 

코드복사하여 App.vue 에 붙여넣기

 

 

vue add vuetify -> yes -> 맨 마지막 선택

 

<template>
  <v-app id="inspire">
    <v-navigation-drawer v-model="drawer">
      <!--  -->
    </v-navigation-drawer>

    <v-app-bar>
      <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>

      <v-app-bar-title>Application</v-app-bar-title>
    </v-app-bar>

    <v-main>
      <!--  -->
    </v-main>
  </v-app>
</template>

<script setup>
  import { ref } from 'vue'

  const drawer = ref(null)
</script>

<script>
  export default {
    data: () => ({ drawer: null }),
  }
</script>

app.vue 에 코드 복사

 

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import axios from "axios";
import store from "./store/store";
import vuetify from "./plugins/vuetify";
import { loadFonts } from "./plugins/webfontloader";
const app = createApp(App);
app.config.globalProperties.$axios = axios;
app.config.globalProperties.$server = "http://localhost:80/api";
app.config.globalProperties.$store = store;
loadFonts();
app.use(router);
app.use(vuetify);
app.use(router);
app.use(store).mount("#app");

 

main.js 복사 후 서버 재기동

 

 

화면과 같이 기본 창이 뜬다. 

 

 

app-bar 색깔도 변경 가능하다. 

 

 

router-view 를 통해 이전에 router index.js 에 찍어준 내용을 불러온다.

화면과 같이 뜨게 된다.

 

 

router-link to 가 a 태그와 똑같다.

mdi icon으로 꾸며줄 수 있다.

 

https://pictogrammers.github.io/@mdi/font/2.0.46/

Material Design Icons

 

https://pictogrammers.com/library/mdi/

Material Design Icons - Icon Library - Pictogrammers

 

 

따라서 a태그로 효과를 주면 먹힌다. 

 

 

로그인 페이지도 만들어준다. 

<template>
    <v-container fill-height style="400px;">
      <v-layout
        align-center
        row
        wrap
        style="margin: 0 auto; width: 400px; height: auto"
      >
        <v-flex x12>
          <v-card>
            <v-toolbar flat>
              <v-toolbar-title> LOGIN </v-toolbar-title>
            </v-toolbar>
            <div class="pa-3">
              <div v-if="idInputCheck" class="idInputCheck">
                ID에 한글과 공백을 사용할 수 없습니다. 5글자 이상입니다.
              </div>
              <v-text-field
                v-model="userId"
                label="ID를 입력하세요."
              ></v-text-field>
              <div v-if="pwInputCheck" class="pwInputCheck">
                암호는 5글자 이상입니다.
              </div>
              <v-text-field
                type="password"
                v-model="userPassword"
                label="암호를 입력하세요."
              ></v-text-field>
              <v-btn class="btn" @click="loginSubmit">login</v-btn>
              <br />
              {{ error }}
            </div>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>
  </template>
  
  <script>
  export default {
    data() {
      return {
        userId: null,
        userPassword: null,
        error: "",
        userInfo: {
          m_name: this.$store.getters.getUserName,
          m_id: this.$store.getters.getUserId,
          token: this.$store.getters.getToken,
        },
        idInputCheck: false,
        pwInputCheck: false,
      };
    },
    // Vue 인스턴스의 데이터 변경을 관찰 / 반응
    watch: {
      userId(val) {
        const reg = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/;
        //this.error = reg.exec(val);
        if (reg.exec(val) != null || val.search(/\s/) != -1 || val.length < 5) {
          this.userId = this.userId.slice(0, -1);
          this.idInputCheck = true;
        } else {
          this.idInputCheck = false;
        }
      },
      userPassword(val) {
        if (val.length < 5) {
          this.pwInputCheck = true;
        } else {
          this.pwInputCheck = false;
        }
      },
    },
    methods: {
      loginSubmit() {
        if (this.userId.length > 5 && this.userPassword.length > 5) {
          let login = {};
          (login.userId = this.userId), (login.userPassword = this.userPassword);
          try {
            this.$axios
              .post(this.$server + "/login", JSON.stringify(login), {
                headers: { "Content-Type": `application/json` },
              })
              .then((res) => {
                if (res.status === 200) {
                  if (res.data.count == 1) {
                    (this.userInfo.m_name = res.data.m_name),
                      (this.userInfo.m_id = login.userId),
                      (this.userInfo.token = res.data.token),
                      this.$store.commit("setUser", this.userInfo);
                    this.$router.push("/boardList");
                  } else {
                    this.error = "로그인 할 수 없습니다. 올바른 아이디와 암호를 입력하세요.";
                  }
                }
              });
          } catch (error) {
            this.error = "로그인 할 수 없습니다. 관리자에게 문의하세요.";
          }
        } else {
          this.error = "올바른 정보를 입력하세요.";
        }
      },
    },
  };
  </script>
  
  <style>
  .v-field__input {
    width: 400px;
  }
  .idInputCheck,
  .pwInputCheck {
    color: red;
  }
  </style>

■ spring 다운로드