ゼロから始める: 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

1. Vue コンポーネントを作成する
   Vue3 では、<script setup></script> 構文を使用してコンポーネントを作成できます。簡単な例を次に示します。

<template>
  <div>
    <h1 id="message">{{ 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>

2. コンポーネントの導入
   メイン アプリケーションで、Vue コンポーネントを導入し、それを DOM にレンダリングできます。以下は例です:

<template>
  <div>
    <my-component></my-component>
  </div>
</template>

<script setup>
import MyComponent from '@/components/MyComponent.vue'
</script>

3. バックエンド開発: Django4

1. Django ビューの作成
   Django では、ビューを使用して HTTP リクエストを処理できます。そして応答を返します。簡単な例を次に示します。

from django.http import JsonResponse

def my_view(request):
    data = {
        'message': 'Hello, Django4',
        'description': 'This is a demo project'
    }
    return JsonResponse(data)

2. URL ルーティングの構成
   Django では、URL ルーティングを通じてリクエストを対応するビューにマップできます。以下は例です:

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 のテクノロジを学習し、習得するのに役立つことを願っています。

コードサンプル:

• Vue コンポーネントの例
• Django ビューの例
• フロントエンドとバックエンドの接続例
• プロジェクトのデプロイとテストの例

参考リンク:

• Vue 公式ドキュメント: https://v3.vuejs.org/
• Django 公式ドキュメント: https:// docs.djangoproject.com/
• Django REST Framework 公式ドキュメント: https://www.django-rest-framework.org/

注: この記事は Django 4.x で書かれた Vue CLI 4.x に基づいていますが、一部の例は実際の条件に応じて調整する必要がある場合があります。

以上がゼロから始める: Vue3+Django4 新技術プロジェクトの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。