Django, MongoDB, Vue.js를 이용한 세션 테스트 페이지 구현

 

아래는 Django, MongoDB, Vue.js를 이용해 세션 테스트 기능을 제공하는 간단한 애플리케이션 구현 가이드입니다.

---

1. 프로젝트 설정

1.1. 필수 라이브러리 설치

pip install django pymongo djongo djangorestframework
npm install vue@next vue-cli

---

2. Django 설정

2.1. 프로젝트 생성

django-admin startproject SessionTest
cd SessionTest
django-admin startapp users

2.2. settings.py 수정

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'users',  # 사용자 앱 추가
]

DATABASES = {
    'default': {
        'ENGINE': 'djongo',
        'NAME': 'session_test',  # MongoDB 데이터베이스 이름
    }
}

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

---

2.3. urls.py 설정

from django.contrib import admin
from django.urls import path, include
from users.views import SessionView

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/session/', SessionView.as_view()),  # 세션 테스트 API
]

---

2.4. users/views.py 구현

from django.http import JsonResponse
from rest_framework.views import APIView

class SessionView(APIView):
    def get(self, request):
        session_data = request.session.get('test', '세션이 설정되지 않았습니다.')
        return JsonResponse({'message': session_data})

    def post(self, request):
        request.session['test'] = request.data.get('test', '기본 세션 값입니다.')
        return JsonResponse({'message': '세션이 설정되었습니다.'})

---

3. MongoDB 연결

MongoDB 서버가 실행 중인지 확인 후, 데이터베이스 이름이 session_test인지 확인하세요.

---

4. Vue.js 설정

4.1. Vue.js 프로젝트 생성

vue create session-test-vue
cd session-test-vue

4.2. Vue.js 컴포넌트 작성

src/components/SessionTest.vue:

<template>
  <div>
    <h1>Session Test</h1>
    <div>
      <input v-model="sessionInput" placeholder="Enter session value" />
      <button @click="setSession">Set Session</button>
    </div>
    <div>
      <button @click="getSession">Get Session</button>
      <p>Session Value: {{ sessionValue }}</p>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      sessionInput: '',
      sessionValue: '',
    };
  },
  methods: {
    async setSession() {
      try {
        await axios.post('http://127.0.0.1:8000/api/session/', {
          test: this.sessionInput,
        });
        alert('Session set successfully!');
      } catch (error) {
        console.error(error);
      }
    },
    async getSession() {
      try {
        const response = await axios.get('http://127.0.0.1:8000/api/session/');
        this.sessionValue = response.data.message;
      } catch (error) {
        console.error(error);
      }
    },
  },
};
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

---

4.3. Vue.js 실행

npm run serve

---

5. Django 서버 실행

python manage.py runserver

---

6. 테스트

1. Django 서버가 http://127.0.0.1:8000에서 실행되고 있는지 확인합니다.
2. Vue.js 앱이 http://localhost:8080에서 실행되고 있는지 확인합니다.
3. Vue.js 애플리케이션에서 세션 값을 설정하고 가져오는 작업을 테스트합니다.

---

이 프로젝트는 Django의 세션 관리와 MongoDB 데이터베이스를 활용해 Vue.js를 통해 클라이언트와 데이터를 주고받는 간단한 예제입니다. 추가적으로 사용자 인증이나 고급 세션 관리 기능을 구현할 수 있습니다.