Django と Vue.js で構築された SPA の例

近年、SPA (シングル ページ アプリケーション) が Web 開発の人気モデルになっています。従来のマルチページ アプリケーションと比較して、SPA は高速かつスムーズであり、開発者にとっても使いやすく便利です。この記事では、Django と Vue.js に基づいて構築された SPA の例を共有し、参考とインスピレーションを提供したいと考えています。

Django は、強力なバックエンド開発機能を備えたよく知られた Python Web フレームワークです。 Vue.js は、開発者が DOM 操作によって引き起こされるパフォーマンスの問題を回避しながら、UI インタラクションを迅速に構築できる軽量の JavaScript フロントエンド フレームワークです。これら 2 つのフレームワークを組み合わせることで、強力でユーザーフレンドリーな 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

ここでは 2 つのビューを作成しました。1 つはすべての記事のリストを表示する PostList ビューで、もう 1 つはすべての記事のリストを表示するための PostList ビューです。単一の記事の詳細の PostDetail ビューを表示するためのものです。ここでは、「serializers.py」という名前のファイルを導入していることに注意してください。このファイルには、モデル インスタンスを JSON 形式に変換するために使用される、定義した Post モデルのシリアライザーが含まれています。

ステップ 2: Vue.js フロントエンドを構築する

バックエンドを使用して、フロントエンドの構築を開始できます。新しい Vue.js プロジェクトを作成し、必要な依存関係をいくつか追加します。

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

ここでは Vue Router と Vuex を使用します。Vue Router はルーティング管理に使用され、Vuex は状態管理に使用されます。

次に、記事一覧を表示するための「Post」コンポーネントを新規作成します。 「components」ディレクトリに「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 はより優れたユーザー エクスペリエンスを提供でき、保守と開発が容易です。この例があなたに参考やインスピレーションを与えることができれば幸いです。そして、あなたが Web 開発への道をさらに前進できることを願っています。

以上がDjango と Vue.js で構築された SPA の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。