クイックスタート: Vue3+Django4 フルスタック開発入門ガイド-Vue.js-php.cn

クイックスタート: Vue3+Django4 フルスタック開発入門ガイド

PHPz

リリース： 2023-09-08 09:38:04

オリジナル

1095 人が閲覧しました

クイックスタート: Vue3+Django4 フルスタック開発入門ガイド

クイックスタート: Vue3 Django4 フルスタック開発入門ガイド

インターネットの急速な発展に伴い、フルスタック開発は最も注目されているテクノロジの 1 つになりました。近年のトレンド。フルスタック開発では、フロントエンドとバックエンドのフレームワークを組み合わせて開発するのが一般的です。この記事は、Vue3 Django4 フルスタック開発の世界へ導き、初心者向けの入門ガイドを提供します。

Vue3 は Vue.js フレームワークの最新バージョンで、より高いパフォーマンス、優れた開発エクスペリエンス、およびより多くの新機能を備えています。 Django は、豊富な機能と拡張性を提供する高度な Python Web フレームワークです。これらを組み合わせることで、強力で最新の Web アプリケーションが作成されます。

始める前に、Node.js、Vue CLI、Python が正しくインストールされていることを確認してください。インストールが完了したら、プロジェクトの作成を開始できます。まず、Vue CLI を使用して Vue3 プロジェクトを作成し、ターミナルを開いて次のコマンドを実行します。

vue create myproject

ログイン後にコピー

作成プロセス中に、Vue ルーターを提供する Vue3 プリセットオプションの使用を選択できます。および Vuex 既製の構成。作成が完了したら、プロジェクトディレクトリに入り、Vue と Django の依存関係パッケージをインストールします。

cd myproject
npm install vue@next
pip install Django

ログイン後にコピー

次に、プロジェクト内に Django アプリケーションを作成し、次のコマンドを使用して作成する必要があります。

django-admin startproject backend
cd backend
python manage.py startapp api

ログイン後にコピー

作成が完了したら、コードの記述を開始できます。まず、Vue の静的ファイルパスを Django の settings.py ファイルに追加し、STATIC_URL を見つけてその下に次のコードを追加する必要があります:

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'frontend/dist'),
]

ログイン後にコピー

次に、Vue へのリクエストを処理するための新しい urls.py ファイルを作成します。フロントエンド。このファイルは api ディレクトリにあります。次のコードを記述します:

from django.urls import path
from . import views

urlpatterns = [
    path('api/', views.api),
]

ログイン後にコピー

次に、Vue フロントエンドからのリクエストを処理するためのロジックコードを views.py ファイルに記述します。次のコードを記述します。

from django.shortcuts import render
from django.http import JsonResponse

def api(request):
    data = {
        'message': 'Hello from Django API!'
    }
    return JsonResponse(data)

ログイン後にコピー

この単純な例では、単純なメッセージを含む JSON 応答を返すだけです。実際のアプリケーションでは、さまざまなリクエストを処理するために、より複雑なロジックを作成できます。

次に、Vue を使用してフロントエンドコードを記述する必要があります。プロジェクトディレクトリに移動し、Vue Router と Axios をインストールします。

cd frontend
npm install vue-router@next axios

ログイン後にコピー

次に、src/router/index.js ファイルを開いて次のコードを追加します。

import { createWebHistory, createRouter } from 'vue-router'
import Home from '../views/Home.vue'
import API from '../views/API.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/api',
    name: 'API',
    component: API
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

ログイン後にコピー

この例では、次のように定義します。 2 つのルート: 「/」はホームコンポーネントに対応し、「/api」は API コンポーネントに対応します。次に、src/views ディレクトリに Home.vue コンポーネントと API.vue コンポーネントを作成します。ここでは単にテキスト情報を表示するだけです。

これで、API.vue コンポーネントでリクエストを送信して、Django API からデータを取得できるようになります。次のコードを使用して、元のコンテンツを置き換えます。

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

<script>
import axios from 'axios'

export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    axios.get('/api/')
      .then(response => {
        this.message = response.data.message
      })
      .catch(error => {
        console.error(error)
      })
  }
}
</script>

ログイン後にコピー

この例では、コンポーネントのマウントされたフック関数で GET リクエストを送信し、Django API によって返されたデータを取得し、そのデータをページが優れています。

これで、Vue3 と Django4 を使用した基本的なフルスタックアプリケーションが完成しました。次のコマンドを実行して開発サーバーを起動できます: