프로젝트_2 Vue Login Page

Vue 로그인 페이지를 만들어보겠습니다.

 

style 을 scss 를 사용하기 위해서 필요한 모듈인

 

sass-loader 를 설치해야합니다.

 

 

npm install --save sass-loader

 

 

설치하면 scss를 컴파일 할 수 있습니다.

 

구조는 다음과 같이 만들겁니다.

 

 

Templete

<div id="Login">
  <section>
    <article id="login_container">
      <div class="form_area">
        <form id="login_form">
        <div class="label">
        	로그인
        </div>
        <div>
          <input id="user_id" class="login_input" type="text" placeholder="ID" />
          <input id="user_pwd" class="login_input" type="password" placeholder="Password" />
        </div>
        <button class="btn_small" type="button">회원가입</button>
        <div>
        	<button id="login_btn" class="btn" type="submit">로그인</button>
        </div>
        </form>
      </div>
	</article>
    <article id="register_container">
      <div class="register_box">
        <form id="register_form">
          <div class="label">회원가입</div>
          <div>
            <input id="register_id" class="login_input" type="text" placeholder="ID" />
            <input id="register_pwd" class="login_input" type="password" placeholder="Password" />
            <select id="user_role">
              <option value="Admin">Admin</option>
              <option value="User">User</option>
            </select>
            <button class="btn_small" type="button">취소</button>
          </div>
          <div>
          <button class="btn" type="submit">회원가입</button>
          </div>
        </form>
      </div>
    </article>
  </section>
</div>

템플릿에서 보실점은 form 에

v-on:submit.prevent="loginSubmit" 입니다.

 

form 안에있는 button type="submit" 인 버튼을 누르면 loginSubmit 함수를 실행하라는 의미입니다.

user_id와 user_pwd는 v-model로 설정해주어 나중에 로그인할 때 사용할 것입니다.

v-if 로 회원가입버튼을 누르면 로그인 article이 안보이게 해줍니다.

 

 

Javascript

 

 

export default {
  data() {
    return {
      user_id: "",
      user_pwd: "",
      isLogin: true,
      isRegister: false,
      register_id: "",
      register_pwd: "",
      register_role: "Admin"
    };
  },
  methods: {
    loginSubmit: function() {
      console.log("로그인");
      this.$router.push("/");
    },
    login: function() {
      this.isLogin = true;
      this.isRegister = false;
    },
    register: function() {
      this.isLogin = false;
      this.isRegister = true;
    },
    registerSubmit: function() {
      console.log("회원가입 완료");
      this.login();
    },
    registBtn: function() {
      console.log("회원가입");
      this.register();
    },
    cancelBtn: function() {
      this.login();
    }
  }
};

 

 

지금은 아무 기능없지만 로그인하면 Home 으로 갈수 있게 합니다.