ステップバイステップ: Vue3+Django4 フルスタック プロジェクトの実装手順

ステップバイステップ: Vue3 Django4 フルスタック プロジェクトの実装手順

Web 開発の継続的な発展に伴い、フルスタック開発が徐々にトレンドになってきました。 Vue と Django は、フロントエンドおよびバックエンド開発で最も人気のあるテクノロジー スタックの 1 つであり、その組み合わせも非常に強力です。この記事では、Vue3 と Django4 を使用してフルスタック プロジェクトを実装する方法をステップごとに紹介します。

1. 準備
   まず、Node.js と Python、および対応するパッケージ マネージャー npm と pip をローカルにインストールする必要があります。同時に、VS Code などの統合開発環境 (IDE) も必要です。

2. Django プロジェクトの作成
   ターミナルを開き、プロジェクトを作成するディレクトリを入力し、次のコマンドを実行して Django プロジェクトを作成します:

   django-admin startproject myproject

3. Django アプリケーションの作成
   プロジェクト ディレクトリに移動し、次のコマンドを実行して Django アプリケーションを作成します。

   cd myproject
   python3 manage.py startapp myapp

4. Django データベースの構成
   settings.py ファイルを開きます。 SQLite などを使用してデータベース情報を構成します。

   DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
   }

5. データベース モデルの作成
   models.py ファイルでデータベース モデルを定義します。たとえば、ユーザー モデルを作成します。

   from django.db import models
   
   class User(models.Model):
    name = models.CharField(max_length=100)
    email = models.EmailField()
    password = models.CharField(max_length=100)

6. データベース移行の実行
   次のコマンドを実行してデータベース移行を実行します:

   python3 manage.py makemigrations
   python3 manage.py migrate

7. Django ビューの作成
   Django ビュー関数を views.py ファイルに記述します。たとえば、すべてのユーザーを取得するビュー関数を作成します。

   from django.shortcuts import render
   from django.http import JsonResponse
   from .models import User
   
   def get_users(request):
    users = User.objects.all()
    data = [{'name': user.name, 'email': user.email} for user in users]
    return JsonResponse({'users': data})

8. Vue プロジェクトの作成
   ターミナルで、Vue プロジェクトを作成するディレクトリを入力し、実行します。次のコマンドを使用して Vue プロジェクトを作成します:

   vue create myproject

9. Vue プロキシの構成
   myproject/vue.config.js ファイルで Vue プロキシを構成し、リクエストを Django バックエンドにプロキシします。

   module.exports = {
     devServer: {
    proxy: {
      '^/api': {
        target: 'http://localhost:8000',
        changeOrigin: true
      }
    }
     }
   }

10. Vue コンポーネントの作成
    ユーザー リストを表示するために src/views ディレクトリに Users.vue コンポーネントを作成します:

    <template>
      <div>
     <ul>
       <li v-for="user in users" :key="user.name">
         {{ user.name }} - {{ user.email }}
       </li>
     </ul>
      </div>
    </template>
    
    <script>
    export default {
      data() {
     return {
       users: []
     }
      },
      created() {
     this.getUsers()
      },
      methods: {
     getUsers() {
       axios.get('/api/users')
         .then(response => {
           this.users = response.data.users
         })
     }
      }
    }
    </script>

11. Vue のルーティングを構成する
    src/router/index.js ファイルで Vue のルーティングを構成し、Users.vue コンポーネントをルートとして使用します:

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    import Users from '../views/Users.vue'
    
    Vue.use(VueRouter)
    
    const routes = [
      {
     path: '/',
     name: 'Users',
     component: Users
      }
    ]
    
    const router = new VueRouter({
      mode: 'history',
      base: process.env.BASE_URL,
      routes
    })
    
    export default router

12. プロジェクトを実行します
    At Django と Vue のそれぞれのルート ディレクトリで次のコマンドを実行してプロジェクトを実行します。

    python3 manage.py runserver
    npm run serve

これで、ブラウザで http://localhost:8080 にアクセスして、フルスタックプロジェクト。 Users コンポーネントは Django バックエンドからデータを取得し、ページに表示します。

概要:
上記の手順により、Vue3 と Django4 を使用したフルスタック プロジェクトを正常に実装できました。フロントエンドとバックエンドの開発を統合することで、強力な Web アプリケーションをより効率的に開発できます。この記事が役に立ち、Vue と Django のフルスタック開発プロセスをよりよく理解できるようになれば幸いです。

以上がステップバイステップ: Vue3+Django4 フルスタック プロジェクトの実装手順の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。