実践演習：Vue3+Django4 フルスタック開発演習-Vue.js-php.cn

実践演習：Vue3+Django4 フルスタック開発演習

WBOY

リリース： 2023-09-11 15:42:38

オリジナル

1425 人が閲覧しました

実践演習：Vue3+Django4 フルスタック開発演習

実践ドリル: Vue3 Django4 フルスタック開発演習

インターネットの急速な発展に伴い、フロントエンドとバックエンドを分離する開発モデルが主流になりました。現代のWeb開発の主流。 Vue と Django は 2 つの人気のある開発フレームワークとして、フロントエンドとバックエンドの開発で重要な役割を果たします。この記事では、フルスタック開発に Vue3 と Django4 を使用する方法を紹介し、実際の例を通じてその実践的なプロセスを示します。

1. プロジェクト計画

開発を始める前に、まずプロジェクト計画を行う必要があります。ユーザーがログインし、タスクを作成し、タスクリストを表示し、タスクのステータスを更新できるシンプルなタスク管理システムを作成します。このシステムは、フロントエンドフレームワークとして Vue3、バックエンドフレームワークとして Django4 を使用し、フロントエンドとバックエンドの通信に API を使用します。

2. フロントエンド開発

Vue3 プロジェクトの作成
まず、Vue CLI を使用して新しい Vue3 プロジェクトを作成します。ターミナルで次のコマンドを実行します。
```
vue create frontend
```
ログイン後にコピー
プロンプトに従って必要な構成項目を選択し、プロジェクトが作成されるまで待ちます。

ルーティングとページコンポーネントの設定
src ディレクトリに router.js ファイルを作成し、ルーティングを設定します。ログインページ、タスクリストページ、タスク詳細ページの 3 つのページがあります。 router.js に次のコードを追加します。

import { createRouter, createWebHistory } from 'vue-router'
import Login from './views/Login.vue'
import TaskList from './views/TaskList.vue'
import TaskDetail from './views/TaskDetail.vue'

const routes = [
  {
 path: '/login',
 name: 'Login',
 component: Login
  },
  {
 path: '/taskList',
 name: 'TaskList',
 component: TaskList
  },
  {
 path: '/taskDetail/:id',
 name: 'TaskDetail',
 component: TaskDetail
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

ログイン後にコピー

ページコンポーネントの作成
src/views ディレクトリに Login.vue、## を作成します。 #TaskList.vue および TaskDetail.vue の 3 つのページコンポーネントと、関連する HTML およびロジックを記述します。特定のコードはここには示されていません。読者は必要に応じて関連するコンポーネントを自分で作成できます。
API リクエストを送信するための
api.js ファイルを src ディレクトリに作成します。ここでは、Axios ライブラリを使用して HTTP リクエストを送信します。特定の API リクエストコードは、バックエンド API の設計に従って記述できます。
src ディレクトリに
store.js ファイルを作成し、Vuex を構成します。ユーザー情報とタスクリストのデータをストアに保存し、ミューテーションやアクションを通じてこのデータを変更および取得します。

この時点で、フロントエンドの開発作業は完了です。

npm runserve コマンドを実行して開発サーバーを起動し、ブラウザで http://localhost:8080 にアクセスしてページを表示できます。

3. バックエンド開発

Django4 プロジェクトの作成
ターミナルで次のコマンドを実行して、新しい Django4 プロジェクトを作成します:
```
django-admin startproject backend
```
ログイン後にコピー
アプリケーションの作成
プロジェクトディレクトリに移動し、次のコマンドを実行して新しいアプリケーションを作成します。
```
cd backend
python manage.py startapp tasks
```
ログイン後にコピー
データベースとモデルを設定します
プロジェクト設定 .py でデータベース情報を構成し、タスクアプリケーションの models.py で必要なモデルを作成します。たとえば、タスクモデルは次のように定義できます。
```
from django.db import models

class Task(models.Model):
 title = models.CharField(max_length=200)
 description = models.TextField()
 status = models.CharField(max_length=20)
 created_at = models.DateTimeField(auto_now_add=True)
 updated_at = models.DateTimeField(auto_now=True)
```
ログイン後にコピー
タスクアプリケーションの views.py に API ビューを作成し、関連するルートを定義します。 Django の REST フレームワークを使用すると、API ビューとルートを簡単に作成できます。
フロントエンドとバックエンドは異なるドメイン名またはポートで実行されるため、クロスドメインリソース共有 (CORS) を構成する必要があります。クロスドメインリクエストは、settings.py を設定することで実装できます。

4. フロントエンドとバックエンドの統合

バックエンドサーバーの実行
ターミナルで次のコマンドを実行して、 Django 開発サーバー:
```
python manage.py runserver
```
ログイン後にコピー
フロントエンド
api.js ファイルで API リクエストのベース URL を構成します。バックエンドサーバーのアドレスとポートを指します。
実際のニーズに応じて、フロントエンド
router.js ファイルでルーティングを構成します。

これで、フロントエンドとバックエンドの統合作業が完了しました。フロントエンドの URL にアクセスすることで、アプリケーションの機能をテストし、バックエンドと通信できます。

5. 概要

この記事では、フルスタック開発に Vue3 と Django4 を使用する方法を紹介し、実際の例を通じてその実践的なプロセスを示します。フロントエンドとバックエンドの分離開発モデルにより、強力な Web アプリケーションをより効率的に開発および保守できます。この記事が初心者にインスピレーションを与え、実際の開発に役立つことを願っています。不備がある場合は、修正してください。

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