很高兴为你提供一个
Django+
Vue3+ElementPlus
前后端分离的demo。
## 后端部分
首先，我们需要创建一个
Django项目。在命令行中输入以下命令：
```
django-admin startproject project_name
```
然后，我们需要创建一个应用程序。在命令行中输入以下命令：
```
python manage.py startapp app_name
```
接下来，我们需要安装一些必要的库。在命令行中输入以下命令：
```
pip install
djangorestframework
django-cors-headers
```
接下来，我们需要在`settings.py`文件中添加以下代码：
```python
INSTALLED_APPS = [
...
'rest_framework',
'corsheaders',
'app_name',
]
MIDDLEWARE = [
...
'corsheaders.middleware.CorsMiddleware',
'
django.middleware.common.CommonMiddleware',
]
CORS_ORIGIN_ALLOW_ALL = True
```
现在，我们已经完成了后端部分的设置。我们可以开始编写API。
在`app_name`中创建一个名为`api.py`的文件，并编写以下代码：
```python
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!"})
```
这是一个简单的API，当我们向`/api/hello`发送GET请求时，它将返回一个JSON响应，其中包含“Hello, World!”消息。
最后，在`urls.py`文件中添加以下代码：
```python
from
django.urls import path
from . import api
urlpatterns = [
path('api/hello', api.hello_world),
]
```
现在，我们已经完成了后端部分的设置。我们可以在终端中运行`python manage.py runserver`命令来启动服务器。
## 前端部分
首先，我们需要安装
Vue CLI。在命令行中输入以下命令：
```
npm install -g @
vue/cli
```
然后，我们需要创建一个
Vue项目。在命令行中输入以下命令：
```
vue create project_name
```
接下来，我们需要安装ElementPlus。在命令行中输入以下命令：
```
npm i element-plus -S
```
接下来，我们需要在`main.js`文件中添加以下代码：
```javascript
import { createApp } from '
vue'
import App from './App.
vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
createApp(App).use(ElementPlus).mount('#app')
```
现在，我们已经完成了前端部分的设置。我们可以开始编写页面。
在`src`中创建一个名为`HelloWorld.
vue`的文件，并编写以下代码：
```
vue
<template>
<div>
<h1>{{ message }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
message: ''
}
},
created() {
fetch('http://localhost:8000/api/hello')
.then(response => response.json())
.then(data => this.message = data.message)
}
}
</script>
```
这是一个简单的页面，它将从我们的API中获取消息并显示在页面上。
最后，在`App.
vue`文件中添加以下代码：
```
vue
<template>
<HelloWorld />
</template>
<script>
import HelloWorld from './components/HelloWorld.
vue'
export default {
components: {
HelloWorld
}
}
</script>
```
现在，我们已经完成了前端部分的设置。我们可以在终端中运行`npm run serve`命令来启动前端服务器。
现在，我们可以在浏览器中访问`http://localhost:8080`，应该可以看到一个页面，其中包含“Hello, World!”消息。
本文主要探讨在Django+Vue前后端分离的项目中遇到的问题及其解决方案。在Django的Serializer部分，解决了Got AttributeError问题，通过设置`write_only=True`避免将`password_repeat`字段保存到数据库。在Vue方面，详细说明了如何去除访问路径中的#号，并且讨论了跨域问题的解决策略。此外，还提醒在使用Django REST framework时务必安装相关依赖。最后，分享了使用vue axios提交表单数据的经验。
最低0.47元/天 解锁文章
4267
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
