Membina aplikasi tindanan penuh: Panduan pembangunan projek Vue3+Django4

Membina aplikasi tindanan penuh: Panduan pembangunan projek Vue3+Django4

Dalam era Internet hari ini, pembangunan tindanan penuh telah menjadi bidang yang semakin membimbangkan. Pembangun tindanan penuh bukan sahaja mahir dalam teknologi bahagian hadapan, tetapi juga biasa dengan pembangunan bahagian belakang. Artikel ini akan memperkenalkan cara menggunakan Vue3 dan Django4 untuk membina aplikasi tindanan penuh, dan menyediakan beberapa contoh kod untuk membantu pembaca bermula dengan cepat.

Pertama, mari kita perkenalkan secara ringkas Vue3 dan Django4.

Vue3 ialah versi terbaharu rangka kerja Vue.js Ia mempunyai kelajuan pemaparan yang lebih pantas, saiz yang lebih kecil dan pengalaman pembangunan yang lebih baik. Vue3 memperkenalkan API Komposisi supaya logik komponen boleh lebih teratur dan digunakan semula. Pada masa yang sama, Vue3 juga menyediakan sokongan TypeScript yang lebih baik, menjadikan kod lebih teguh dan boleh diselenggara.

Django4 ialah rangka kerja web lanjutan yang ditulis dalam bahasa Python Ia mengikut corak reka bentuk MTV (model-template-view) dan menyediakan operasi pangkalan data dan fungsi pengurusan penghalaan. Ciri-ciri Django4 termasuk kebolehskalaan yang baik, keselamatan yang tinggi, dan pelbagai alat pembangunan dan pemalam.

Di bawah, kami akan memperkenalkan cara menggunakan Vue3 dan Django4 untuk membina aplikasi tindanan penuh yang mudah. Aplikasi timbunan penuh kami akan melaksanakan sistem pengurusan pengguna, termasuk pendaftaran pengguna, log masuk dan fungsi pengurusan maklumat peribadi.

Pertama, kita perlu mencipta projek Django dan menyediakan pangkalan data. Andaikan bahawa projek kami dinamakan "UserManagement" dan pangkalan data menggunakan MySQL. Anda boleh melaksanakan arahan berikut untuk mencipta dan menyediakan:

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

Seterusnya, kita perlu mencipta aplikasi Django untuk mengendalikan logik berkaitan pengguna. Anda boleh melaksanakan arahan berikut untuk mencipta aplikasi bernama "pengguna":

$ python manage.py startapp user

Selepas mencipta aplikasi, kami perlu mendaftarkan aplikasi dalam fail konfigurasi Django. Buka fail UserManagement/settings.py dan tambahkan nama aplikasi pada senarai INSTALLED_APPS: 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/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')

在上面的代码中，我们定义了三个视图函数：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')

然后，在src目录下创建一个名为App.vue的文件，添加以下代码：

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

<script>
export default {
}
</script>

以上的代码定义了一个根组件，它包含了一个名为router-view的组件，用于显示不同的页面。

接下来，我们需要使用Vue Router来管理前端路由。执行以下命令来安装Vue Router：

$ npm install vue-router@4

然后，在src目录下创建一个名为router.js的文件，添加以下代码：

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文件，分别用于处理用户注册、登录和个人信息管理页面的逻辑。

在具体的视图组件中，我们可以使用Axios来发送HTTP请求到后端API。执行以下命令来安装Axios：

$ npm install axios

在具体的视图组件中，可以使用以下代码发送POST请求到后端API：

import axios from 'axios'

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

以上的代码发送了一个用户注册的请求，并在控制台中打印出返回的消息。

最后，我们需要将Vue应用实例和路由器挂载到DOM元素上。在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插件，并使用app.mount('#app')来将Vue应用实例挂载到名为apprrreee

Kemudian, kita perlu mencipta model data berkaitan pengguna. Dalam fail user/models.py, tentukan model bernama User, termasuk nama pengguna, kata laluan dan medan lain:

rrreee

Seterusnya, kita perlu mencipta paparan berkaitan pengguna. Dalam fail user/views.py, tambahkan kod berikut: 🎜rrreee🎜Dalam kod di atas, kami mentakrifkan tiga fungsi paparan: register digunakan untuk mengendalikan Logik pendaftaran pengguna , log masuk digunakan untuk memproses logik log masuk pengguna, dan profil digunakan untuk memproses logik pengurusan maklumat peribadi pengguna. 🎜🎜Seterusnya, kita perlu mencipta beberapa komponen Vue untuk mengendalikan logik bahagian hadapan. Dalam Vue3, kita boleh menggunakan fungsi createApp untuk membuat contoh aplikasi dan menggunakan fungsi setup untuk mentakrifkan logik komponen. Dalam fail main.js, tambahkan kod berikut: 🎜rrreee🎜Kemudian, buat fail bernama App.vue dalam direktori src , tambah kod berikut: 🎜rrreee🎜Kod di atas mentakrifkan komponen root, yang mengandungi komponen bernama router-view untuk memaparkan halaman yang berbeza. 🎜🎜Seterusnya, kita perlu menggunakan Penghala Vue untuk menguruskan penghalaan bahagian hadapan. Jalankan arahan berikut untuk memasang Penghala Vue: 🎜rrreee🎜 Kemudian, cipta fail bernama router.js dalam direktori src dan tambahkan kod berikut: 🎜rrreee🎜Seterusnya , kita perlu mencipta beberapa komponen paparan untuk mengendalikan logik halaman tertentu. Dalam direktori src/views, buat fail Register.vue, Login.vue dan Profile.vue. Digunakan untuk memproses logik pendaftaran pengguna, log masuk dan halaman pengurusan maklumat peribadi masing-masing. 🎜🎜Dalam komponen paparan khusus, kami boleh menggunakan Axios untuk menghantar permintaan HTTP ke API bahagian belakang. Jalankan arahan berikut untuk memasang Axios: 🎜rrreee🎜Dalam komponen paparan khusus, anda boleh menggunakan kod berikut untuk menghantar permintaan POST ke API bahagian belakang: 🎜rrreee🎜Kod di atas menghantar permintaan pendaftaran pengguna dan mencetak pulangan dalam berita konsol. 🎜🎜Akhir sekali, kita perlu memasang contoh aplikasi Vue dan penghala pada elemen DOM. Dalam fail main.js, ubah suainya seperti berikut: 🎜rrreee🎜Dalam kod di atas, kami menggunakan app.use(router) untuk memasang pemalam Vue Router , dan gunakan app.mount('#app') untuk melekapkan contoh aplikasi Vue pada elemen DOM bernama app. 🎜🎜Di atas adalah langkah umum untuk membina aplikasi tindanan penuh menggunakan Vue3 dan Django4. Pembaca boleh menambah baik dan mengoptimumkan lagi aplikasi ini mengikut keperluan dan pilihan mereka sendiri. Saya harap artikel ini dapat membantu pembaca memulakan pembangunan tindanan penuh dengan cepat. 🎜

Atas ialah kandungan terperinci Membina aplikasi tindanan penuh: Panduan pembangunan projek Vue3+Django4. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!