一步一步：Vue3+Django4全端專案實作步驟-Vue.js-PHP中文網

一步一步：Vue3+Django4全端專案實作步驟

WBOY

發布： 2023-09-10 15:12:11

原創

1313 人瀏覽過

一步一步：Vue3+Django4全端專案實作步驟

一步一步：Vue3 Django4全端專案實現步驟

#隨著Web開發的不斷發展，全端開發逐漸成為了趨勢。 Vue和Django作為前後端開發中最受歡迎的技術堆疊之一，他們的組合也是十分強大的。在本文中，我們將一步一步介紹如何使用Vue3和Django4實作一個全端專案。

準備工作
首先，我們需要在本地安裝Node.js和Python，以及對應的套件管理器npm和pip。同時，我們也需要一個整合開發環境(IDE)，例如VS Code。
建立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檔案中定義你的資料庫模型。例如，我們建立一個User模型：

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視圖
在views.py檔中寫你的Django視圖函數。例如，我們建立一個取得所有使用者的視圖函數：

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

登入後複製