マスターコアテクノロジー: Vue3+Django4 フルスタック開発-Vue.js-php.cn

マスターコアテクノロジー: Vue3+Django4 フルスタック開発

王林

リリース： 2023-09-08 13:12:24

オリジナル

1250 人が閲覧しました

マスターコアテクノロジー: Vue3+Django4 フルスタック開発

マスターコアテクノロジー: Vue3 Django4 フルスタック開発

現代のソフトウェア開発では、フルスタック開発がますます注目を集めています。フルスタック開発エンジニアは、フロントエンド開発、バックエンド開発とデータベース運用などの業務を同時に行うことができます。この記事では、2 つの人気のある開発フレームワークである Vue3 と Django4 をフルスタック開発に使用する方法を検討し、いくつかのコード例を示します。

はじめに

Vue3 は、開発者に優れたパフォーマンスと保守性を提供する最新の Vue.js バージョンです。 Django4 は、Python 言語の人気のあるバックエンドフレームワークであり、強力なデータベース操作と Web 開発機能を提供します。 Vue3 と Django4 を組み合わせることで、効率的で柔軟かつスケーラブルなフルスタックアプリケーションを実装できます。

フロントエンド開発: Vue3

まず、Vue3 プロジェクトをセットアップする必要があります。次のコマンドを使用して、新しい Vue3 プロジェクトを作成します。

vue create vue3-django4-full-stack

ログイン後にコピー

次に、Vue コンポーネントを作成して、フロントエンド開発を開始できます。 Vue3 では、コンポーネントの記述方法が若干変更されました。簡単な例を次に示します。

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue3!'
    }
  }
}
</script>

ログイン後にコピー

この例では、Vue コンポーネントを定義し、data オプションを使用して message 変数を定義します。次に、テンプレート内でこの変数を参照してメッセージを表示します。

バックエンド開発: Django4

次に、Django4 プロジェクトをセットアップする必要があります。次のコマンドを使用して、新しい Django4 プロジェクトを作成します:

django-admin startproject django4_full_stack

ログイン後にコピー

次に、Django アプリケーションを作成し、バックエンド開発を開始する必要があります。次のコマンドを使用して、新しい Django アプリケーションを作成します。

cd django4_full_stack
python manage.py startapp backend

ログイン後にコピー

次に、backend ディレクトリに views.py ファイルを作成し、次のコード例を追加します。 #

from django.http import JsonResponse

def hello_vue(request):
    message = "Hello, Django4!"
    return JsonResponse({'message': message})

ログイン後にコピー

この例では、API リクエストを処理し、メッセージを含む JSON レスポンスを返すビュー関数

hello_vue を定義します。

次に、フロントエンドコンポーネントでバックエンド API を呼び出す必要があります。 Vue3 では、

axios ライブラリを使用して HTTP リクエストを送信できます。 Vue コンポーネントでは、次のコードを使用してバックエンド API を呼び出すことができます:

import axios from 'axios';

export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    axios.get('http://localhost:8000/api/hello_vue')
      .then(response => {
        this.message = response.data.message;
      })
      .catch(error => {
        console.log(error);
      });
  }
}

ログイン後にコピー

この例では、

axios.get メソッドを使用して GET リクエストを に送信します。 http://localhost:8000/api/hello_vue アドレスを指定し、正常に応答したときに返されたメッセージを message 変数に割り当てます。

これで、フロントエンドとバックエンドの開発が完了し、フロントエンドとバックエンド間の単純な API 対話が確立されました。バックエンド。次に、フロントエンドとバックエンドの開発サーバーを起動する必要があります。 1 つのターミナルウィンドウで、次のコマンドを使用して Vue3 開発サーバーを実行します:

cd vue3-django4-full-stack
npm run serve

ログイン後にコピー

別のターミナルウィンドウで、次のコマンドを使用して Django4 開発サーバーを実行します:

cd django4_full_stack
python manage.py runserver

ログイン後にコピー

これで、# にアクセスできるようになります。 ##http://localhost:8080

をクリックして、フロントエンドコンポーネントに表示されるメッセージを確認します。概要

この記事では、フルスタック開発に Vue3 と Django4 を使用する方法を紹介し、いくつかのコード例を示します。 2 つの人気のある開発フレームワークである Vue3 と Django4 を学習することで、効率的で柔軟かつスケーラブルなフルスタックアプリケーションを構築できます。この記事が、これら 2 つの主要なテクノロジを習得し、フルスタック開発で役割を果たすのに役立つことを願っています。

以上がマスターコアテクノロジー: Vue3+Django4 フルスタック開発の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。