337p粉嫩大胆色噜噜噜,日本欧美一区二区三区在线观看,欧美成人观看

基礎(chǔ)到實戰(zhàn)：Vue3+Django4全棧開發(fā)入門篇

概述：
全棧開發(fā)是指一個開發(fā)者可以同時處理前端和后端的工作，這在現(xiàn)代的Web開發(fā)中變得越來越重要。本文將介紹如何使用Vue3和Django4進(jìn)行全棧開發(fā)，并提供一些代碼示例來幫助讀者入門。

安裝和配置Vue3
首先，我們需要安裝Vue CLI來創(chuàng)建和管理我們的Vue項目。在命令行中運行以下命令來安裝Vue CLI:

npm install -g @vue/cli

登錄后復(fù)制

安裝完成后，使用以下命令創(chuàng)建新的Vue項目:

vue create my-project

登錄后復(fù)制

根據(jù)提示進(jìn)行選擇，選擇默認(rèn)選項即可。

創(chuàng)建Vue組件
在Vue項目中，我們可以使用組件來構(gòu)建用戶界面。在Vue項目的src目錄中，創(chuàng)建一個名為”components”的文件夾，并在其中創(chuàng)建一個名為”HelloWorld.vue”的文件。在該文件中，我們可以編寫我們的組件代碼，例如:

<template>
  <div>
 <h1>{{ message }}</h1>
 <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  data() {
 return {
   message: 'Hello World!'
 }
  },
  methods: {
 changeMessage() {
   this.message = 'New Message!'
 }
  }
}
</script>

登錄后復(fù)制

這是一個簡單的組件，包含一個標(biāo)題和一個按鈕，可以在點擊按鈕時改變標(biāo)題的內(nèi)容。

配置Django4
接下來，我們需要安裝Django并創(chuàng)建一個新的Django項目。在命令行中運行以下命令來安裝Django:

pip install django==4.0.0

登錄后復(fù)制

安裝完成后，使用以下命令創(chuàng)建新的Django項目:

django-admin startproject myproject

登錄后復(fù)制

這將在當(dāng)前目錄下創(chuàng)建一個名為”myproject”的新Django項目。

創(chuàng)建Django視圖和URL
在Django項目的根目錄下，打開settings.py文件，并將以下內(nèi)容添加到INSTALLED_APPS設(shè)置中:

INSTALLED_APPS = [
 ...
 'rest_framework',
 'myapp',  // myapp是我們將要創(chuàng)建的應(yīng)用的名稱，根據(jù)需要修改
 ...
]

登錄后復(fù)制

然后，在settings.py文件的最后添加以下內(nèi)容:

REST_FRAMEWORK = {
 'DEFAULT_PERMISSION_CLASSES': [
     'rest_framework.permissions.AllowAny',
 ]
}

登錄后復(fù)制

這將配置Django使用REST框架來創(chuàng)建API。

接下來，在Django項目的根目錄下創(chuàng)建一個名為”myapp”的應(yīng)用:

python manage.py startapp myapp

登錄后復(fù)制

在myapp目錄下，打開views.py文件，并添加以下內(nèi)容:

from rest_framework.decorators import api_view
from rest_framework.response import Response

@api_view(['GET'])
def hello_world(request):
    return Response({'message': 'Hello World!'})

登錄后復(fù)制

這是一個簡單的視圖函數(shù)，當(dāng)我們訪問該URL時，將返回一個包含”Hello World!”的JSON響應(yīng)。

接下來，在myproject目錄下，打開urls.py文件，并添加以下內(nèi)容:

from django.urls import path
from myapp.views import hello_world

urlpatterns = [
    path('api/hello/', hello_world),
]

登錄后復(fù)制

這將將我們的視圖函數(shù)與URL路徑’/api/hello/’進(jìn)行關(guān)聯(lián)。

在Vue項目的根目錄下，打開”main.js”文件，并添加以下內(nèi)容:

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

const app = createApp(App)
app.config.globalProperties.$http = axios
app.mount('#app')

登錄后復(fù)制

這將全局配置Vue應(yīng)用使用axios作為HTTP客戶端。

在Vue項目的根目錄下，打開”App.vue”文件，并添加以下內(nèi)容:

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="getMessage">Get Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    getMessage() {
      this.$http.get('http://localhost:8000/api/hello/')
        .then(response => {
          this.message = response.data.message
        })
        .catch(error => {
          console.error(error)
        })
    }
  }
}
</script>

登錄后復(fù)制

這將在點擊按鈕時向Django的視圖發(fā)送請求，并將返回的消息顯示在頁面上。

現(xiàn)在，我們已經(jīng)完成了所有配置。在Vue項目的根目錄下，運行以下命令來啟動Vue開發(fā)服務(wù)器: