実践する基本: Vue3+Django4 フルスタック開発を始める

実践する基本: Vue3 Django4 フルスタック開発の概要

概要:
フルスタック開発とは、開発者がフロントエンドとバックエンドを処理できることを意味します。 -作業を同時に終了すること、これは現代の Web 開発においてますます重要になってきています。この記事では、フルスタック開発に Vue3 と Django4 を使用する方法を紹介し、読者が開始するのに役立ついくつかのコード例を提供します。

1. Vue3 のインストールと構成
   まず、Vue プロジェクトを作成および管理するために Vue CLI をインストールする必要があります。コマンド ラインで次のコマンドを実行して Vue CLI をインストールします。

   npm install -g @vue/cli

   インストールが完了したら、次のコマンドを使用して新しい Vue プロジェクトを作成します。

   vue create my-project

   プロンプトに従って選択し、デフォルトのオプションを選択します。

2. Vue コンポーネントの作成
   Vue プロジェクトでは、コンポーネントを使用してユーザー インターフェイスを構築できます。 Vue プロジェクトの src ディレクトリに、「components」という名前のフォルダーと、その中に「HelloWorld.vue」という名前のファイルを作成します。このファイルには、次のようなコンポーネント コードを記述できます。

   <template>
     <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
     </div>
   </template>
   
   <script>
   export default {
     data() {
    return {
      message: 'Hello World!'
    }
     },
     methods: {
    changeMessage() {
      this.message = 'New Message!'
    }
     }
   }
   </script>

   これは、タイトルと、ボタンがクリックされたときにタイトルの内容を変更するボタンを含む単純なコンポーネントです。

3. Django4 の構成
   次に、Django をインストールし、新しい Django プロジェクトを作成する必要があります。コマンド ラインで次のコマンドを実行して Django をインストールします:

   pip install django==4.0.0

   インストールが完了したら、次のコマンドを使用して新しい Django プロジェクトを作成します:

   django-admin startproject myproject

   これにより、新しい Django プロジェクトが作成されます「myproject」という名前の現在のディレクトリにある新しい Django プロジェクト。

4. Django ビューと URL を作成する
   Django プロジェクトのルート ディレクトリで settings.py ファイルを開き、次の内容を INSTALLED_APPS 設定に追加します:

   INSTALLED_APPS = [
    ...
    'rest_framework',
    'myapp',  // myapp是我们将要创建的应用的名称，根据需要修改
    ...
   ]

   次に、settings.py ファイルの最後に次の行を追加します:

   REST_FRAMEWORK = {
    'DEFAULT_PERMISSION_CLASSES': [
        'rest_framework.permissions.AllowAny',
    ]
   }

   これにより、REST フレームワークを使用して API を作成するように Django が構成されます。

次に、Django プロジェクトのルート ディレクトリに「myapp」という名前のアプリケーションを作成します。

python manage.py startapp myapp

myapp ディレクトリで、views.py ファイルを開きます。以下を追加します:

from rest_framework.decorators import api_view
from rest_framework.response import Response

@api_view(['GET'])
def hello_world(request):
    return Response({'message': 'Hello World!'})

これは、URL にアクセスしたときに「Hello World!」を含む JSON 応答を返す単純なビュー関数です。

次に、myproject ディレクトリで urls.py ファイルを開いて次の内容を追加します。

from django.urls import path
from myapp.views import hello_world

urlpatterns = [
    path('api/hello/', hello_world),
]

これにより、ビュー関数が URL パス '/api/hello/' の関連付けに合わせられます。 。

5. プロジェクトの実行
   これで、Vue と Django の基本構成が完了しました。次に、Vue アプリケーションと Django プロジェクトを接続する必要があります。

Vue プロジェクトのルート ディレクトリで、「main.js」ファイルを開き、次のコンテンツを追加します。

import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'

const app = createApp(App)
app.config.globalProperties.$http = axios
app.mount('#app')

これにより、axios を使用するように Vue アプリケーションがグローバルに設定されます。 HTTP クライアント。

Vue プロジェクトのルート ディレクトリで、「App.vue」ファイルを開き、次のコンテンツを追加します。

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="getMessage">Get Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    getMessage() {
      this.$http.get('http://localhost:8000/api/hello/')
        .then(response => {
          this.message = response.data.message
        })
        .catch(error => {
          console.error(error)
        })
    }
  }
}
</script>

これにより、ボタンがクリックされたときにリクエストが Django のビューに送信され、ページにメッセージが表示されます。

これで、すべての設定が完了しました。 Vue プロジェクトのルート ディレクトリで次のコマンドを実行して Vue 開発サーバーを起動します:

npm run serve

Django プロジェクトのルート ディレクトリで次のコマンドを実行して Django 開発サーバーを起動します:

python manage.py runserver

次に、ブラウザで「http://localhost:8080」にアクセスすると、「Hello World!」ボタンを含むページが表示されます。ボタンをクリックすると、ページに「Hello World!」と表示されます。

これは、Vue3 と Django4 を使用したフルスタック開発の入門ガイドです。この記事のサンプル コードを使用すると、基本的な Vue および Django アプリケーションを構築し、それらを接続する方法を学ぶことができます。これがあなたのフルスタック開発の旅に役立つことを願っています。

以上が実践する基本: Vue3+Django4 フルスタック開発を始めるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。