Django 및 Vue.js로 구축된 SPA 예제

최근에는 SPA(Single Page Application)가 웹 개발의 인기 모델이 되었습니다. 기존의 다중 페이지 애플리케이션에 비해 SPA는 더 빠르고 원활하며 개발자에게도 더 친숙하고 편리합니다. 이 기사에서는 Django와 Vue.js를 기반으로 구축된 SPA 예제를 공유하여 여러분에게 참고 자료와 영감을 제공할 것입니다.

Django는 강력한 백엔드 개발 기능을 갖춘 잘 알려진 Python 웹 프레임워크입니다. Vue.js는 개발자가 DOM 작업으로 인한 성능 문제를 피하면서 UI 상호 작용을 신속하게 구축하는 데 도움을 줄 수 있는 경량 JavaScript 프런트 엔드 프레임워크입니다. 이 두 프레임워크를 결합하면 강력하고 사용자 친화적인 SPA 애플리케이션을 구축할 수 있습니다.

구체적인 구현 과정을 살펴보겠습니다.

1단계: Django 백엔드 구축

먼저 Django를 사용하여 백엔드 프로젝트를 생성해야 합니다. Django의 자체 명령줄 도구를 사용하여 다음과 같은 새 프로젝트를 만들 수 있습니다.

$ django-admin startproject myproject

그런 다음 Django의 모델 정의 기능을 사용하여 필요한 데이터 구조를 정의할 수 있습니다. 예를 들어, 블로그 애플리케이션을 개발하려는 경우 "Blog"라는 애플리케이션을 만들고 "Post"라는 모델을 정의할 수 있습니다.

# blog/models.py
from django.db import models

class Post(models.Model):
    title = models.CharField(max_length=200)
    content = models.TextField()
    pub_date = models.DateTimeField(auto_now_add=True)

이 모델은 제목, 콘텐츠 및 게시 날짜 3개 필드를 포함하여 블로그 게시물을 나타냅니다.

프런트 엔드 호출을 용이하게 하려면 이 모델에 대한 RESTful API 인터페이스도 만들어야 합니다. Django의 DRF(Django Rest Framework) 플러그인을 사용하여 표준 RESTful 보기를 만들 수 있습니다.

# blog/views.py
from rest_framework import generics
from .models import Post
from .serializers import PostSerializer

class PostList(generics.ListCreateAPIView):
    queryset = Post.objects.all()
    serializer_class = PostSerializer

class PostDetail(generics.RetrieveUpdateDestroyAPIView):
    queryset = Post.objects.all()
    serializer_class = PostSerializer

여기서는 두 개의 보기를 만들었습니다. 하나는 모든 기사 목록을 표시하는 PostList 보기이고 다른 하나는 단일 기사 PostDetail 보기의 세부정보입니다. 여기에는 모델 인스턴스를 JSON 형식으로 변환하는 데 사용되는 우리가 정의한 Post 모델의 직렬 변환기가 포함된 "serializers.py"라는 파일이 도입되었습니다.

2단계: Vue.js 프런트엔드 구축

백엔드가 준비되면 프런트엔드 구축을 시작할 수 있습니다. 새로운 Vue.js 프로젝트를 생성하고 몇 가지 필요한 종속성을 추가합니다.

$ vue init webpack myapp
$ cd myapp
$ npm install --save axios vue-router vuex

여기에서는 Vue Router와 Vuex를 사용하고 Vue Router는 라우팅 관리에 사용되고 Vuex는 상태 관리에 사용됩니다.

다음으로 기사 목록을 표시하는 새로운 "게시물" 구성 요소를 만듭니다. "comComponents" 디렉토리에 "PostList.vue"라는 파일을 생성할 수 있습니다:

<!-- PostList.vue -->
<template>
  <div>
    <div v-for="post in posts" :key="post.id">
      <h3 id="post-title">{{ post.title }}</h3>
      <p>{{ post.content }}</p>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      posts: [],
    };
  },
  created() {
    axios
      .get('/api/posts/')
      .then(response => {
        this.posts = response.data;
      })
      .catch(error => {
        console.log(error);
      });
  },
};
</script>

이 코드는 기사 목록 표시를 나타내며 Axios를 통해 백엔드 API에서 데이터를 가져옵니다.

다음으로 사용자가 컴포넌트에 접근할 수 있도록 라우팅 규칙을 설정해야 합니다. 라우팅 규칙은 "router" 디렉터리 아래의 "index.js" 파일에 추가할 수 있습니다.

import Vue from 'vue';
import Router from 'vue-router';
import PostList from '@/components/PostList';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'PostList',
      component: PostList,
    },
  ],
});

여기에서는 "/" 경로를 "PostList" 구성 요소에 매핑합니다.

3단계: 상태 관리에 Vuex 사용

마지막으로 구현해야 할 기능은 상태 관리입니다. 백엔드 API에서 얻은 데이터를 Vuex에 저장하고 필요할 때 표시해야 합니다. 이를 위해 먼저 Vuex 스토어를 생성해야 합니다.

// store.js
import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    posts: [],
  },
  mutations: {
    SET_POSTS(state, posts) {
      state.posts = posts;
    },
  },
  actions: {
    fetchPosts({ commit }) {
      return axios.get('/api/posts/').then(({ data }) => {
        commit('SET_POSTS', data);
      });
    },
  },
});

여기서 "posts"라는 상태 속성을 생성하고 "SET_POSTS" 작업을 정의하여 속성을 업데이트합니다.

다음으로 데이터 수집 및 상태 업데이트를 위해 PostList 컴포넌트를 Vuex 스토어에 연결해야 합니다.

<!-- PostList.vue -->
<template>
  <div>
    <div v-for="post in posts" :key="post.id">
      <h3 id="post-title">{{ post.title }}</h3>
      <p>{{ post.content }}</p>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: mapState(['posts']),
  created() {
    this.fetchPosts();
  },
  methods: mapActions(['fetchPosts']),
};
</script>

여기서 Vuex에서 제공하는 보조 함수 "mapState" 및 "mapActions"를 사용하여 Vuex 상태 및 작업을 컴포넌트에 매핑합니다. 가운데. 구성 요소가 생성되면 API에서 데이터를 가져오고 "fetchPosts" 메서드를 통해 상태를 업데이트합니다.

이 시점에서 우리는 Django와 Vue.js의 통합을 완료하고 완전한 SPA 애플리케이션을 구축했습니다. 애플리케이션을 실행하고 "/" 경로에 접근하면 기사 목록 표시 효과를 확인할 수 있습니다.

요약

이 글에서는 Django와 Vue.js를 사용하여 SPA 애플리케이션을 구축하는 과정을 소개합니다. 기존의 다중 페이지 애플리케이션과 비교하여 SPA는 더 나은 사용자 경험을 제공할 수 있으며 유지 관리 및 개발이 더 쉽습니다. 이 예가 여러분에게 참고와 영감을 줄 수 있기를 바라며, 여러분이 웹 개발의 길로 더욱 더 나아가길 바랍니다!

위 내용은 Django 및 Vue.js로 구축된 SPA 예제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!