"夏哉ke"：quangneng.com/5339/
Vue3+Django4全新技术实战全栈项目
随着互联网技术的快速发展，前端和后端技术的更新换代也日益加速。近年来，Vue3和Django4作为前端和后端技术的佼佼者，逐渐成为了许多企业和开发者首选的技术方案。本文将介绍如何使用Vue3和Django4搭建一个全栈项目，帮助读者快速掌握这两门技术。
1. 环境准备
1.1 安装Node.js
Vue3是一个基于JavaScript的前端框架，因此需要安装Node.js环境。访问Node.js官网（https://nodejs.org/）下载并安装最新版本。
1.2 安装Python3
Django4是一个基于Python的后端框架，因此需要安装Python3环境。访问Python官网（https://www.python.org/）下载并安装最新版本。
1.3 安装Vue CLI
Vue CLI是Vue官方提供的一个脚手架工具，用于快速生成Vue项目。在命令行中执行以下命令安装Vue CLI：
npm install -g @vue/cli
1.4 安装Django
在命令行中执行以下命令安装Django：
pip install django
2. 创建项目
2.1 创建Vue3项目
在命令行中执行以下命令创建一个名为vue3_project的Vue3项目：
vue create vue3_project
按照提示选择Vue3版本和其他配置项。
2.2 创建Django4项目
在命令行中执行以下命令创建一个名为django4_project的Django4项目：
django-admin startproject django4_project
进入项目目录，创建一个名为app的应用：
cd django4_project
python manage.py startapp app
3. 配置数据库
在django4_project/django4_project/settings.py中配置数据库连接信息，这里以MySQL为例：
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'your_database_name',
'USER': 'your_database_user',
'PASSWORD': 'your_database_password',
'HOST': 'your_database_host',
'PORT': 'your_database_port',
}
}
根据实际情况填写数据库连接信息。
4. 创建模型
在app/models.py中创建模型：
from django.db import models
class ExampleModel(models.Model):
name = models.CharField(max_length=100)
age = models.IntegerField()
执行以下命令生成数据库表：
python manage.py makemigrations
python manage.py migrate
5. 编写API
在app/views.py中编写一个简单的API：
from django.http import JsonResponse
from .models import ExampleModel
def example_api(request):
if request.method == 'GET':
examples = ExampleModel.objects.all()
data = [{'name': example.name, 'age': example.age} for example in examples]
return JsonResponse(data, safe=False)
在django4_project/urls.py中添加API路由：
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('api/', include('app.urls')),
]
在app/urls.py中添加具体的API路径：
from django.urls import path
from .views import example_api
urlpatterns = [
path('example/', example_api),
]
6. 编写Vue3组件
在vue3_project/src目录下创建一个名为ExampleComponent.vue的组件：
<template>
<div>
<h1>示例组件</h1>
<ul>
<li v-for="item in exampleData" :key="item.id">{{ item.name }} - {{ item.age }}</li>
</ul>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
exampleData: [],
};
},
created() {
this.fetchData();
},
methods: {
fetchData() {
axios.get('http://localhost:8000/api/example/')
.then(response => {
this.exampleData = response.data;
})
.catch(error => {
console.error(error);
});
},
},
};
</script>
在vue3_project/src/App.vue中引入并使用该组件：
<template>
<div id="app">
<ExampleComponent />
</div>
</template>
<script>
import ExampleComponent from './components/ExampleComponent.vue';
export default {
components: {
ExampleComponent,
},
};```
在vue3_project/src/main.js中注册ExampleComponent组件：
import { createApp } from 'vue'
import App from './App.vue'
import ExampleComponent from './components/ExampleComponent.vue'
const app = createApp(App)
app.component('ExampleComponent', ExampleComponent)
app.mount('#app')
7. 运行项目
7.1 运行Django后端
在命令行中进入django4_project目录，运行Django开发服务器：
python manage.py runserver
默认情况下，Django开发服务器会在http://127.0.0.1:8000/上运行。
7.2 运行Vue3前端
在命令行中进入vue3_project目录，运行Vue开发服务器：
npm run serve
默认情况下，Vue开发服务器会在http://localhost:8080/上运行。
8. 访问前端页面
在浏览器中访问http://localhost:8080/，你应该能够看到Vue3前端页面，并且能够看到从Django后端获取的数据显示在页面上。
9. 构建和部署
9.1 构建Vue3项目
在命令行中进入vue3_project目录，构建Vue项目：
npm run build
这将生成一个dist目录，其中包含静态文件，可以部署到任何静态文件服务器上。
9.2 部署Django项目
将Django项目部署到服务器上，可以使用Gunicorn作为WSGI服务器，配合Nginx作为反向代理服务器。具体的部署步骤可能会根据服务器环境和个人偏好有所不同。
10. 结束语
通过本文的介绍，你已经掌握了如何使用Vue3和Django4搭建一个全栈项目。这个项目涵盖了前端和后端的开发，以及如何将两者结合起来。你可以在此基础上继续深入学习Vue3和Django4的更多高级功能，以便在实际项目中更加得心应手。
