フルスタック アプリケーションの構築: Vue3+Django4 プロジェクト開発ガイド

フルスタック アプリケーションの構築: Vue3 Django4 プロジェクト開発ガイド

今日のインターネット時代において、フルスタック開発はますます関心が高まっている分野になっています。フルスタック開発者は、フロントエンド テクノロジーに精通しているだけでなく、バ​​ックエンド開発にも精通しています。この記事では、Vue3 と Django4 を使用してフルスタック アプリケーションを構築する方法を紹介し、読者がすぐに始められるようにいくつかのコード例を示します。

まず、Vue3とDjango4について簡単に紹介します。

Vue3 は Vue.js フレームワークの最新バージョンで、レンダリング速度が速く、サイズが小さく、開発エクスペリエンスが優れています。 Vue3 では、コンポーネントのロジックをより適切に整理して再利用できるように、Composition API を導入しています。同時に、Vue3 はより優れた TypeScript サポートも提供し、コードをより堅牢で保守しやすくしています。

Django4 は Python 言語で書かれた高度な Web フレームワークであり、MTV (モデル-テンプレート-ビュー) 設計パターンに従い、強力なデータベース操作およびルーティング管理機能を提供します。 Django4 の特徴としては、優れた拡張性、高いセキュリティ、豊富な開発ツールとプラグインが挙げられます。

以下では、Vue3 と Django4 を使用して簡単なフルスタック アプリケーションを構築する方法を紹介します。当社のフルスタックアプリケーションは、ユーザー登録、ログイン、個人情報管理機能を含むユーザー管理システムを実装します。

まず、Django プロジェクトを作成し、データベースをセットアップする必要があります。プロジェクトの名前が「UserManagement」で、データベースが MySQL を使用しているとします。次のコマンドを実行して作成および設定できます。

$ django-admin startproject UserManagement
$ cd UserManagement
$ python manage.py migrate

次に、ユーザー関連のロジックを処理する Django アプリケーションを作成する必要があります。次のコマンドを実行して、「user」という名前のアプリケーションを作成できます:

$ python manage.py startapp user

アプリケーションを作成した後、アプリケーションを Django 構成ファイルに登録する必要があります。 UserManagement/settings.py ファイルを開き、アプリケーション名を INSTALLED_APPS リストに追加します。

INSTALLED_APPS = [
    ...
    'user',
    ...
]

次に、ユーザー関連のデータ モデルを作成する必要があります。 user/models.py ファイルで、ユーザー名、パスワード、その他のフィールドを含む User という名前のモデルを定義します。

from django.db import models

class User(models.Model):
    username = models.CharField(max_length=120)
    password = models.CharField(max_length=120)

次に、User-関連するビュー。 user/views.py ファイルに、次のコードを追加します。

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

def register(request):
    if request.method == 'POST':
        username = request.POST.get('username')
        password = request.POST.get('password')

        # 在这里进行用户注册逻辑

        return JsonResponse({'message': '注册成功'})
    else:
        return render(request, 'register.html')

def login(request):
    if request.method == 'POST':
        username = request.POST.get('username')
        password = request.POST.get('password')

        # 在这里进行用户登录逻辑

        return JsonResponse({'message': '登录成功'})
    else:
        return render(request, 'login.html')

def profile(request):
    # 在这里进行用户个人信息管理逻辑

    return render(request, 'profile.html')

上記のコードでは、3 つのビュー関数を定義します。 ユーザー登録ロジックを処理するための register , loginはユーザーのログインロジックの処理に使用され、profileはユーザーの個人情報管理ロジックの処理に使用されます。

次に、フロントエンド ロジックを処理するためにいくつかの Vue コンポーネントを作成する必要があります。 Vue3 では、createApp 関数を使用してアプリケーション インスタンスを作成し、setup 関数を使用してコンポーネントのロジックを定義できます。 main.js ファイルに次のコードを追加します。

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.mount('#app')

次に、App.vue という名前のファイルを src ディレクトリに作成します。ファイルに次のコードを追加します。

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
}
</script>

上記のコードは、さまざまなページを表示するために使用される router-view という名前のコンポーネントを含むルート コンポーネントを定義します。

次に、Vue Router を使用してフロントエンド ルーティングを管理する必要があります。次のコマンドを実行して Vue Router をインストールします:

$ npm install vue-router@4

次に、router.js という名前のファイルを src ディレクトリに作成し、次のコードを追加します。

import { createRouter, createWebHistory } from 'vue-router'
import Register from './views/Register.vue'
import Login from './views/Login.vue'
import Profile from './views/Profile.vue'

const routes = [
  { path: '/register', component: Register },
  { path: '/login', component: Login },
  { path: '/profile', component: Profile },
]

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

export default router

src/views ディレクトリに、処理用の Register.vue、Login.vue、および Profile.vue ファイルをそれぞれ作成します。ユーザー登録、ログイン、個人情報管理ページ。

$ npm install axios

import axios from 'axios'

axios.post('/api/register', {
  username: 'Alice',
  password: '123456'
})
.then(response => {
  console.log(response.data.message)
})
.catch(error => {
  console.error(error)
})

main.js ファイルで、次のように変更します。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')

app.use(router) を使用して Vue Router プラグをインストールします。 -in、app.mount('#app') を使用して、Vue アプリケーション インスタンスを app という名前の DOM 要素にマウントします。

以上がフルスタック アプリケーションの構築: Vue3+Django4 プロジェクト開発ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。