ホームページ > 記事 > ウェブフロントエンド > ゼロから始める: Vue3+Django4 新技術プロジェクト
ゼロから始める: Vue3 Django4 新しいテクノロジー プロジェクト
はじめに:
今日の急速に発展するテクノロジー分野では、フルスタック開発がトレンドになっています。フロントエンドおよびバックエンド開発用の人気フレームワークとして、Vue と Django は幅広いアプリケーション バックグラウンドを備えているだけでなく、最新バージョンではより興味深く強力な機能ももたらします。この記事では、Vue3 と Django4 を使用して新しいテクノロジー プロジェクトを構築する方法を紹介し、コード例を通じてその威力を実証します。
1. プロジェクトの計画と準備
開始する前に、プロジェクトを計画し、準備する必要があります。まず、Node.js、Python、および Django 開発環境がインストールされていることを確認する必要があります。次に、次のコマンドを使用して Vue CLI をインストールすることで、新しい Vue プロジェクトを作成できます。
npm install -g @vue/cli vue create my-project cd my-project
次に、Django プロジェクトを作成する準備が整いました。次のコマンドを使用して Django をインストールします:
pip install Django
次に、次のコマンドを使用して新しい Django プロジェクトを作成できます:
django-admin startproject myproject cd myproject
2. フロントエンド開発: Vue3
<script setup></script>
構文を使用してコンポーネントを作成できます。簡単な例を次に示します。 <template> <div> <h1>{{ message }}</h1> <p>{{ description }}</p> </div> </template> <script setup> import { ref } from 'vue' const message = ref('Hello, Vue3') const description = ref('This is a demo project') </script>
<template> <div> <my-component></my-component> </div> </template> <script setup> import MyComponent from '@/components/MyComponent.vue' </script>
3. バックエンド開発: Django4
from django.http import JsonResponse def my_view(request): data = { 'message': 'Hello, Django4', 'description': 'This is a demo project' } return JsonResponse(data)
from django.urls import path from .views import my_view urlpatterns = [ path('my-view/', my_view, name='my-view'), ]
4. フロントエンドとバックエンドを接続します: API インターフェイス
フロントエンドとバックエンドの準備ができたら、それらを接続する必要があります。 API インターフェースを介して。 Vue3 では、axios ライブラリを使用して HTTP リクエストを送信できます。以下に例を示します。
import axios from 'axios' axios.get('/api/my-view/') .then(response => { console.log(response.data) }) .catch(error => { console.error(error) })
Django では、Django REST フレームワークを使用して API インターフェイスを作成および管理できます。以下は例です:
from rest_framework.decorators import api_view from rest_framework.response import Response @api_view(['GET']) def my_view(request): data = { 'message': 'Hello, Django4', 'description': 'This is a demo project' } return Response(data)
5. プロジェクトのデプロイメントとテスト
開発が完了し、テストに合格したら、プロジェクトをデプロイできます。フロントエンド デプロイメントの場合、Vue CLI の build コマンドを使用して静的ファイルを生成し、それらをサーバーにデプロイできます。バックエンドのデプロイの場合、Django の runserver コマンドを使用してサーバーを起動できます。 Nginx を Web サーバーとして使用して、フロントエンドおよびバックエンドのリクエストをリバースプロキシすることもできます。
6. 概要
Vue3 と Django4 を使用すると、強力なフルスタック テクノロジ プロジェクトを簡単に構築できます。 Vue3 のコンポーネント化と応答性の高いプログラミング モデルにより、フロントエンド開発がより効率的かつエレガントになります。 Django4 のビュー、URL ルーティング、API インターフェイスにより、バックエンド開発がよりシンプルかつ柔軟になります。この記事が、Vue3 と Django4 のテクノロジを学習し、習得するのに役立つことを願っています。
コードサンプル:
参考リンク:
注: この記事は Django 4.x で書かれた Vue CLI 4.x に基づいていますが、一部の例は実際の条件に応じて調整する必要がある場合があります。
以上がゼロから始める: Vue3+Django4 新技術プロジェクトの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。