Notitle프로젝트 - begin

jkky98·2024년 2월 7일

Project

목록 보기

12/21

연습삼아 백엔드의 기본요구사항인 CRUD 게시판 만들기를 진행해보려고 한다. 이전 프로젝트에서 진행했던 vue.js, django, mysql database를 모두 생성하고 진행한다. 프로젝트 첫 시작과정은 생략한다.

mysql 데이터베이스의 생성을 완료했다면, 테이블 생성을 위해 django와 연결을 시도한다. 서버 폴더안에 setting.py에서 DATABASES객체를 수정해주도록 한다.

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'board',
        'USER' : 'root',
        'PASSWORD' : 'password',
        'HOST' : '127.0.0.1',
        'PORT' : '3306',
    }
}

이렇게 하고 makemigrations와 migrate를 진행한다. 그렇게 되면 board라는 데이터베이스에 테이블들이 마구 추가되는 것을 볼 수 있다.

Django의 마이그레이션
Django 프레임워크는 Model을 지원한다. 이것은 데이터베이스와 백엔드간의 소통을 쉽게하는 장점이 있다. Model은 DB의 구조를 정의하며, 데이터를 검증하고 가공하며 다루게 된다. 이러한 프레임워크 사용이전에 우리는 mysql의 언어를 통해 데이터를 한정적으로 다룰 수 있었으나, django 프레임워크를 통해 쉽게 데이터베이스와 백엔드간의 일관성을 유지하고 데이터를 프레임워크내에서 쉽게 다룰 수 있다. 만약 모델이 변화한다면 makemigrations를 시행했을 때 모델이 변화했으니 데이터베이스가 변화해야한다는 migration파일이 만들어진다. 이것을 migrate라는 명령을 통해 확정적용시킨다. makemigration-migrate는 DB의 구조에 대한 변화가 존재가 필요할 때 시행한다.

백엔드는 두고 일단 프론트엔드에서 로그인 페이지부터 우선 만들어보도록 하자. 디자인을 위해 Vuetify를 적용하기 위해 몇 가지 작업을 하도록 한다.

//terminal//
vue add vuetify
//작업 경로에서, vuetify3 cli선택//

잘 적용된 것으로 보인다. 초기 페이지만 냅두고 about경로를 라우터 파일에서 제거시키고 HelloWorld컴포넌트도 login으로 바꾼다. 그리고 Vuetify3 홈페이지에서 컴포넌트를 잘 참고해서 로그인 화면단을 템플릿에 구성해본다.

<template>
  <v-app id="app">
    <v-main>
      <v-container
        style="position: relative; top: 20%; margin-left: 30%"
        class="text-xs-center"
      >
        <v-layout row wrap class="text-xs-center">
          <v-flex>
            <v-card flat class="mx-auto" max-width="800">
              <v-row style="margin-top: 60px">
                <v-col>
                  <v-form style="width: 400px; height: 300px">
                    <div class="mx-3">
                      <v-icon icon="md:home"></v-icon>
                      userId
                      <div class="mx-1">
                        <v-text-field
                          placeholder="userId"
                          v-model="userId"
                          required
                        ></v-text-field>
                      </div>
                    </div>
                    <div class="mx-3">
                      <v-icon color="black" size="30px">lock</v-icon>
                      userPassword
                      <div class="mx-1">
                        <v-text-field
                          placeholder="userPassword"
                          type="password"
                          v-model="userPassword"
                          required
                        ></v-text-field>
                      </div>
                    </div>

                    <v-btn color="#2c4f91" dark large block @click="loginSubmit"
                      >Login</v-btn
                    >
                  </v-form>
                  <v-form style="width: 400px; height: 300px">
                    <v-btn color="#3FB17D" dark large block @click="goToSignUp"
                      >Sign Up</v-btn
                    >
                  </v-form>
                </v-col>
              </v-row>
            </v-card>
          </v-flex>
        </v-layout>
      </v-container>
    </v-main>
  </v-app>
</template>

<script>
export default {
  name: "LoginPage",
  data() {
    return {
      userId: null,
      userPassword: null,
    };
  },
  methods: {
    loginSubmit() {
      this.$store.dispatch("login", {
        userId: this.userId,
        userPassword: this.userPassword,
      });
    },
    goToSignUp() {},
  },
};
</script>