近年、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>{{ 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>{{ 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 サイトの他の関連記事を参照してください。