徹底的な学習: Vue3+Django4 フルスタック開発例-Vue.js-php.cn

徹底的な学習: Vue3+Django4 フルスタック開発例

WBOY

リリース： 2023-09-09 19:13:41

オリジナル

1324 人が閲覧しました

徹底的な学習: Vue3+Django4 フルスタック開発例

詳細な調査: Vue3 Django4 フルスタック開発の例

概要:
Web アプリケーションの開発が急速に進むにつれて、フルスタック開発は重要なものになりました。熱い話題。 Vue と Django は、人気のあるフロントエンドおよびバックエンドフレームワークとして、フルスタック開発で広く使用されています。この記事では、最新バージョンの Vue3 と Django4 をフルスタック開発に使用する方法を紹介し、その強力な機能と柔軟な拡張性を実際の例を使用して実証します。

環境セットアップ:
まず、Python、Node.js、および Vue CLI が正しくインストールされていることを確認する必要があります。次のコマンドを使用してインストールできます:
Python のインストール: https://www.python.org/downloads/
Node.js のインストール: https://nodejs.org/
Vue CLI のインストール: npm install -g @vue/cli
Django プロジェクトの作成:
まず、新しい Django プロジェクトを作成する必要があります。コマンドラインを開き、次のコマンドを使用してプロジェクトを作成します:
```
django-admin startproject myproject
```
ログイン後にコピー
Django アプリケーションを作成します:
次に、Django アプリケーションを作成する必要があります。プロジェクトディレクトリを入力し、次のコマンドを使用してアプリケーションを作成します:
```
cd myproject
python manage.py startapp myapp
```
ログイン後にコピー
Django ルーティングの構成:
myproject/myproject/urls.py ファイルで、Django のルートルートと myapp を構成します。サブルート:
```
from django.urls import path, include

urlpatterns = [
 path('api/', include('myapp.urls')),
]
```
ログイン後にコピー

Django ビューの作成:
myapp/views.py ファイルで、Django のビュー関数を作成します:

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

def hello(request):
 return JsonResponse({'message': 'Hello, World!'})

ログイン後にコピー

Django ルーティングの構成:
myapp/urls.py ファイルで、myapp のルーティングを構成します:
```
from django.urls import path

from . import views

urlpatterns = [
 path('hello/', views.hello),
]
```
ログイン後にコピー
Django サーバーを起動します:
次のコマンドを使用して起動しますDjango 開発サーバー :
```
python manage.py runserver
```
ログイン後にコピー
http://localhost:8000/api/hello/ にアクセスすると、返された JSON データを確認できるはずです。
Vue プロジェクトの作成:
次に、新しい Vue プロジェクトを作成する必要があります。コマンドラインを開き、次のコマンドを使用してプロジェクトを作成します:
```
vue create myvueapp
```
ログイン後にコピー
注: プロジェクトを作成するときは、デフォルトのプリセット構成を選択するか、独自のニーズに応じて構成します。
Vue 開発サーバーエージェントを構成します。
Vue プロジェクトのルートディレクトリで、vue.config.js ファイルを見つけます (ない場合は、新しいファイルを作成してください)。次の構成を追加します:
```
module.exports = {
 devServer: {
     proxy: {
         '/api': {
             target: 'http://localhost:8000',
             ws: true,
             changeOrigin: true
         }
     }
 }
}
```
ログイン後にコピー

Vue コンポーネントの作成:
Vue プロジェクトの src ディレクトリで、App.vue ファイルを見つけて、その内容を次のコードに置き換えます。

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

<script>
export default {
  data() {
 return {
   message: ""
 };
  },
  mounted() {
 this.fetchData();
  },
  methods: {
 fetchData() {
   fetch("/api/hello/")
     .then(response => response.json())
     .then(data => {
       this.message = data.message;
     })
     .catch(err => {
       console.log(err);
     });
 }
  }
};
</script>

ログイン後にコピー

Vue 開発サーバーを起動します:
次のコマンドを使用して Vue 開発サーバーを起動します:
```
cd myvueapp
npm run serve
```
ログイン後にコピー
http://localhost:8080 にアクセスすると、 Django API から取得したデータを確認できるはずです。

これまでのところ、Vue3 Django4 のフルスタック開発サンプルは正常に完了しました。この例を通じて、開発環境をセットアップする方法、Django プロジェクトと Vue プロジェクトを作成する方法、ルーティングを構成する方法、ビューとコンポーネントを作成する方法、AJAX を介してバックエンド API からデータを取得する方法を学びました。

概要:
この記事の学習を通じて、Vue3 と Django4 のフルスタック開発を深く理解し、実践的なケースを実践しました。フルスタック開発により、柔軟性と効率が向上し、フロントエンドとバックエンドの両方のニーズに同時に対応できるようになります。この例を通じて読者の皆様が Vue3 Django4 のフルスタック開発について理解を深め、これらの知識と技術を実際のプロジェクトに適用できることを願っています。

以上が徹底的な学習: Vue3+Django4 フルスタック開発例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。