20231010 _[86일차]_01. Vue _vuetify 활용

( pdf 7차 참고 )

 

Vuetify : Vue에서 사용할 수 있는 Bootstrap 

설치부터 하자 

vs code 터미널에서 설치명령

> npm install --save vuetify   ( pdf에는 npm 대신 vue라고 잘못 써져있다**)

---

Get started with Vuetify 3 — Vuetify (vuetifyjs.com)

Get started with Vuetify 3 — Vuetify

---

main.js 에 vuetify import 추가

이렇게 하면 err가 난다. import 문 다시 수정.

 

---

vuetifyjs.com

Vuetify — A Vue Component Framework

---

components에 보면 쓸수있는 것들이 많다.

 

위로 들어가보면 여러가지 예시들이 있는데 그중에 Baseline선택

아래쪽에 깃 클릭하면 코드가 나온다.

이 코드로 App.vue 에 적용

터미널에서 vuetify 실행이 안되니 cmd에서 실행시켜준다.

해당 프로젝트 폴더까지 이동해서 

> vue add vuetify

(npm install이 아니라 vue add로 플러그인 형태로 설치?)

이렇게 했더니 main.js가 아래처럼 자동으로 변경된다.

수정전

다시 pdf 에 있는대로 변경해준다.

수정후

 

App.vue 도 이렇게 변경된다.

수정전

pdf에 있는대로 수정

수정후

그러면 브라우저에는 이렇게 뜬다.

 

서버 다시 구동해보면

<template>

  <v-app id="inspire">

    <v-navigation-drawer v-model="drawer">

      <!-- 메뉴 -->

    </v-navigation-drawer>

    <v-app-bar color="primary">

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

      <v-app-bar-title>phyho</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>

적용된 메뉴상단바가 잘 뜬다.

 

 

v-footer도 넣어봤다.

 

<router-view> 추가해줬더니

서버에서 불러온 데이터가 (index 화면) 잘 뜬다.

메뉴바 넣어주면

    <v-app-bar color="primary">

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

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

      <v-btn variant="text" prepend-icon="mdi-format-list-bulleted-square"><router-link to="/boardList">BOARD</router-link></v-btn>

      <v-btn variant="text" prepend-icon="mdi-home"><router-link to="/">HOME</router-link></v-btn>

      <v-btn variant="text" prepend-icon="mdi-power"><router-link to="/login">LOGIN</router-link></v-btn>

    </v-app-bar>

이렇게 메뉴들이 생기고 클릭해봐도 잘 이동한다.

 

아래처럼 a태그에 스타일을 적용해주면 메뉴바에 적용이 되는걸 볼 수 있는데 

실제 a태그를 사용한 건 아니지만 router-link to 가 내부적으로 HTML의 <a> 태그를 렌더링 하기 때문에 스타일 적용이 되는거다.

<style scoped>

a{

  text-decoration: none;

  color: white;

}

</style>

아래처럼 메뉴바 글씨 흰색 적용

 

메뉴바의 아이콘들은 아래에서 찾아오자.

---

Material Design Icons (pictogrammers.github.io)

Material Design Icons

---

 

  <v-navigation-drawer v-model="drawer">

      <!-- 메뉴 -->

      메뉴<br>

      메뉴<br>

      메뉴<br>

      메뉴<br>

      메뉴<br>

    </v-navigation-drawer>

위의 코드는 아래의 햄버거 메뉴를 클릭하면 뜨는 메뉴들이다.

햄버거 메뉴바 클릭하면 아래처럼 뜬다.

---

다시 로그인 페이지 수정해보자.

 

input창 대신에 v-text-field 를 사용해주고, v-model로 연결해줬다.

<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>

* input 태그 대신 v-text-field 사용할때의 장점 

Vue.js와 통합 ( Vue의 데이터 바인딩 및 상태 관리 기능과 함께 사용 )

v-model 디렉티브를 사용하여 데이터와 양방향 데이터 바인딩을 쉽게 설정

내장된 유효성 검사 및 오류 처리 기능을 제공

다양한 옵션과 스타일링 설정을 제공

 

로그인창이 아래처럼 뜬다.

 

 

.

---

 

이클립스, 스프링 없으면 다시 다운로드

JDK 다시 다운로드

원래 있던건 삭제해줬다.

https://github.com/ojdkbuild/ojdkbuild

GitHub - ojdkbuild/ojdkbuild: Community builds using source code from OpenJDK project

 

여기에서 아래꺼 다운로드만 ! ( 재시작 이후에  설치예정)

파일 클릭하면 자동으로 다운로드 되면서

아래폴더 생성되는데 c드라이브로 이동시켜줬다.

재부팅 후에 

설치완료되면 cmd에서 java version확인했을 때 아래처럼 뜬다.

 

Eclipse 실행하고 sts4 설치해줬다.