Rumah > Artikel > hujung hadapan web > Langkah demi langkah: Langkah pelaksanaan projek tindanan penuh Vue3+Django4
Langkah demi langkah: Langkah pelaksanaan projek tindanan penuh Vue3+Django4
Dengan pembangunan berterusan pembangunan web, pembangunan tindanan penuh secara beransur-ansur menjadi trend. Vue dan Django ialah salah satu susunan teknologi paling popular dalam pembangunan bahagian hadapan dan belakang, dan gabungan mereka juga sangat berkuasa. Dalam artikel ini, kami akan memperkenalkan langkah demi langkah bagaimana untuk melaksanakan projek tindanan penuh menggunakan Vue3 dan Django4.
Buat projek Django
Buka terminal, masukkan direktori tempat anda ingin mencipta projek, laksanakan arahan berikut untuk mencipta projek Django:
django-admin startproject myproject
Buat aplikasi Django
Masukkan direktori projek, laksanakan arahan berikut untuk mencipta aplikasi Django:
cd myproject python3 manage.py startapp myapp
Konfigurasi pangkalan data Django
Buka fail settings.py dan konfigurasikan maklumat pangkalan data, seperti menggunakan SQLite:
DATABASES = { 'default': { 'ENGINE': 'django.db.backends.sqlite3', 'NAME': BASE_DIR / 'db.sqlite3', } }
Buat model pangkalan data
Tentukan model pangkalan data anda dalam fail models.py. Sebagai contoh, kami mencipta model Pengguna:
from django.db import models class User(models.Model): name = models.CharField(max_length=100) email = models.EmailField() password = models.CharField(max_length=100)
Lakukan pemindahan pangkalan data
Jalankan arahan berikut untuk melaksanakan pemindahan pangkalan data:
python3 manage.py makemigrations python3 manage.py migrate
Buat paparan Django
Tulis fungsi paparan Django anda dalam fail views.py. Sebagai contoh, kami mencipta fungsi pandangan untuk mendapatkan semua pengguna:
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})
Buat projek Vue
vue create myproject
Konfigurasi proksi Vue
module.exports = { devServer: { proxy: { '^/api': { target: 'http://localhost:8000', changeOrigin: true } } } }
Buat komponen 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>
Konfigurasi penghalaan 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
Jalankan projek
python3 manage.py runserver npm run serve
Ringkasan:
Atas ialah kandungan terperinci Langkah demi langkah: Langkah pelaksanaan projek tindanan penuh Vue3+Django4. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!