ステップバイステップ: Vue3+Django4 フルスタックプロジェクトの実装手順-Vue.js-php.cn

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

WBOY

リリース： 2023-09-10 15:12:11

オリジナル

1352 人が閲覧しました

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

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

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

準備
まず、Node.js と Python、および対応するパッケージマネージャー npm と pip をローカルにインストールする必要があります。同時に、VS Code などの統合開発環境 (IDE) も必要です。
Django プロジェクトの作成
ターミナルを開き、プロジェクトを作成するディレクトリを入力し、次のコマンドを実行して Django プロジェクトを作成します:
```
django-admin startproject myproject
```
ログイン後にコピー
Django アプリケーションの作成
プロジェクトディレクトリに移動し、次のコマンドを実行して Django アプリケーションを作成します。
```
cd myproject
python3 manage.py startapp myapp
```
ログイン後にコピー
Django データベースの構成
settings.py ファイルを開きます。 SQLite などを使用してデータベース情報を構成します。
```
DATABASES = {
 'default': {
     'ENGINE': 'django.db.backends.sqlite3',
     'NAME': BASE_DIR / 'db.sqlite3',
 }
}
```
ログイン後にコピー
データベースモデルの作成
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)
```
ログイン後にコピー
データベース移行の実行
次のコマンドを実行してデータベース移行を実行します:
```
python3 manage.py makemigrations
python3 manage.py migrate
```
ログイン後にコピー

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})

ログイン後にコピー

Vue プロジェクトの作成
ターミナルで、Vue プロジェクトを作成するディレクトリを入力し、実行します。次のコマンドを使用して Vue プロジェクトを作成します:
```
vue create myproject
```
ログイン後にコピー
Vue プロキシの構成
myproject/vue.config.js ファイルで Vue プロキシを構成し、リクエストを Django バックエンドにプロキシします。
```
module.exports = {
  devServer: {
 proxy: {
   '^/api': {
     target: 'http://localhost:8000',
     changeOrigin: true
   }
 }
  }
}
```
ログイン後にコピー

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>

ログイン後にコピー

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

ログイン後にコピー

プロジェクトを実行します
At Django と Vue のそれぞれのルートディレクトリで次のコマンドを実行してプロジェクトを実行します。
```
python3 manage.py runserver
npm run serve
```
ログイン後にコピー

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

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

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