django+vue3详细教程
时间: 2023-08-27 18:05:16 浏览: 137
Django 是一个基于 Python 的 Web 应用框架,Vue3 是一个流行的前端 JavaScript 框架。结合使用 Django 和 Vue3 可以构建现代化的全栈 Web 应用程序。下面是一个基本的 Django + Vue3 教程:
1. 创建 Django 项目
首先,我们需要创建一个 Django 项目。打开终端并输入以下命令:
```
django-admin startproject myproject
cd myproject
```
这将创建一个名为 `myproject` 的 Django 项目,并将您的当前工作目录更改为该项目目录。
2. 创建 Django 应用程序
接下来,我们将创建一个 Django 应用程序。在终端中运行以下命令:
```
python manage.py startapp myapp
```
这将创建一个名为 `myapp` 的 Django 应用程序。
3. 安装 Django REST framework
现在,我们需要安装 Django REST framework。在终端中运行以下命令:
```
pip install djangorestframework
```
这将安装 Django REST framework。
4. 创建 Vue3 项目
接下来,我们将创建一个 Vue3 项目。打开另一个终端窗口并输入以下命令:
```
vue create myproject-ui
cd myproject-ui
```
这将使用 Vue CLI 创建一个名为 `myproject-ui` 的 Vue3 项目,并将您的当前工作目录更改为该项目目录。
5. 配置 Django REST framework
现在,我们需要配置 Django REST framework。打开 `myproject/settings.py` 文件并添加以下行:
```python
INSTALLED_APPS = [
# ...
'rest_framework',
'myapp',
]
REST_FRAMEWORK = {
'DEFAULT_PERMISSION_CLASSES': [
'rest_framework.permissions.AllowAny',
]
}
```
6. 创建 Vue3 组件
现在,我们将创建一个 Vue3 组件。打开 `myproject-ui/src/App.vue` 文件并添加以下行:
```html
<template>
<div>
<h1>{{ message }}</h1>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
message: 'Hello, World!'
}
}
}
</script>
```
这将创建一个简单的 Vue3 组件,其中包含一个带有文本的标题。
7. 启动 Django 服务器
现在,我们将启动 Django 服务器。在终端中输入以下命令:
```
python manage.py runserver
```
这将启动 Django 服务器并监听端口 8000。
8. 启动 Vue3 应用程序
接下来,我们将启动 Vue3 应用程序。在另一个终端窗口中输入以下命令:
```
npm run serve
```
这将启动 Vue3 开发服务器并监听端口 8080。
9. 集成 Django 和 Vue3
现在,我们将集成 Django 和 Vue3。打开 `myproject-ui/src/main.js` 文件并添加以下行:
```javascript
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.config.globalProperties.$djangoUrl = 'http://localhost:8000'
app.mount('#app')
```
这将创建一个 Vue3 应用程序实例,并将 `http://localhost:8000` 设置为 Django 服务器的 URL。
10. 使用 Django REST framework 提供数据
最后,我们将使用 Django REST framework 提供数据。打开 `myapp/views.py` 文件并添加以下行:
```python
from django.http import JsonResponse
def hello(request):
return JsonResponse({'message': 'Hello, World!'})
```
这将创建一个简单的 Django 视图函数,该函数返回一个 JSON 响应。
11. 在 Vue3 中使用数据
最后,我们将在 Vue3 中使用数据。打开 `myproject-ui/src/App.vue` 文件并添加以下行:
```html
<template>
<div>
<h1>{{ message }}</h1>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
message: ''
}
},
mounted() {
fetch(`${this.$djangoUrl}/hello`)
.then(response => response.json())
.then(data => {
this.message = data.message
})
}
}
</script>
```
这将使用 `fetch()` 函数从 Django 服务器获取数据,并将其显示在 Vue3 组件中。
现在,您已经学会了如何使用 Django 和 Vue3 构建全栈 Web 应用程序!
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)