在现代的 Web 开发领域，使用前后端分离的架构已经成为主流。Vue.js 是一种流行的前端框架，它提供了轻量级且灵活的方式来构建用户界面。Django 则是一种强大的后端框架，它能够协调处理业务逻辑和数据管理。结合 Vue.js 和 Django，我们可以构建一个现代化的全栈应用程序。
环境准备
在开始之前，确保你已经安装了以下软件：
- Node.js：https://nodejs.org
- Python：https://www.python.org
- Django：https://www.djangoproject.com
- Vue CLI：https://cli.vuejs.org
创建 Django 项目
首先，我们需要创建一个 Django 项目。在命令行中执行以下命令：
$ django-admin startproject myproject
$ cd myproject
这将创建一个名为 myproject 的 Django 项目。
创建 Vue.js 应用
接下来，我们将使用 Vue CLI 创建一个 Vue.js 应用。在命令行中执行以下命令：
$ vue create frontend
$ cd frontend
然后会有一系列的交互式选项，根据你的需要进行选择。
配置前后端通信
在 frontend 文件夹下打开 src/main.js 文件。在文件开头添加以下内容：
import axios from 'axios'
axios.defaults.xsrfCookieName = 'csrftoken'
axios.defaults.xsrfHeaderName = 'X-CSRFToken'
axios.defaults.withCredentials = true
Vue.prototype.$http = axios
这将配置 Axios 来处理和 Django 后端的通信。
创建 Django 应用
回到 myproject 文件夹，执行以下命令创建一个 Django 应用：
$ python manage.py startapp myapp
这将在 myproject 文件夹下创建一个名为 myapp 的 Django 应用。
配置 Django
在 myproject/settings.py 文件中，将 myapp 添加到 INSTALLED_APPS 项中：
INSTALLED_APPS = [
...
'myapp',
]
然后修改 myproject/urls.py 文件：
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('api/', include('myapp.urls')),
]
这将配置 Django 的路由，允许我们从 frontend 向 myapp 发送 API 请求。
编写 API 视图
打开 myapp/views.py 文件，并添加以下代码：
from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt
import json
@csrf_exempt
def data(request):
if request.method == 'GET':
data = {'message': 'This is a GET request'}
return JsonResponse(data)
elif request.method == 'POST':
data = json.loads(request.body)
data['message'] = 'This is a POST request'
return JsonResponse(data)
这将创建一个简单的 API 视图，当接收到 GET 请求时返回一个消息，当接收到 POST 请求时返回请求的数据。
配置 API 路由
在 myapp 文件夹下创建一个名为 urls.py 的文件，并添加以下代码：
from django.urls import path
from . import views
urlpatterns = [
path('data/', views.data),
]
这将配置 data 路径的路由。
构建前端页面
打开 frontend/src/App.vue 文件，并替换 template 中的内容如下：
<template>
<div class="app">
<div class="message" v-if="message">{{ message }}</div>
<form @submit.prevent="postData">
<input type="text" v-model="data" />
<button type="submit">Submit</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
message: '',
data: ''
}
},
methods: {
getData() {
this.$http.get('/api/data/')
.then(response => {
this.message = response.data.message;
})
.catch(error => {
console.log(error);
});
},
postData() {
this.$http.post('/api/data/', { data: this.data })
.then(response => {
this.message = response.data.message;
})
.catch(error => {
console.log(error);
});
}
},
created() {
this.getData();
}
}
</script>
这将创建一个简单的页面，包含一个输入框和一个按钮，用于向后端发送 GET 和 POST 请求。
运行应用程序
返回到命令行，分别在 myproject 和 frontend 文件夹下执行以下命令：
$ python manage.py runserver
$ npm run serve
这将分别启动 Django 后端和 Vue.js 前端。在浏览器中打开 http://localhost:8080，你将看到一个带有输入框的页面。当你点击按钮时，页面将向后端发送请求，并显示相应的消息。
结论
通过结合 Vue.js 和 Django，我们可以构建一个现代化的全栈应用程序。Vue.js 提供了强大的前端功能，而 Django 则负责处理后端逻辑和数据管理。它们的结合为我们构建复杂的 Web 应用程序提供了很大的方便。希望本文对你有所帮助，祝你构建成功的全栈应用程序！
本文来自极简博客，作者：数字化生活设计师，转载请注明原文链接：使用Vue.js和Django构建现代化的全栈应用程序
