首先，您需要在本地安装
Django和
Vue CLI。接下来，您可以按照以下步骤
创建Vue项目和
Django后端：
1. 使用
Vue CLI
创建一个新的
Vue项目：
```
vue create my-project
```
2. 进入
项目文件夹并安装
Django：
```
cd my-project
pip install
django
```
3.
创建Django项目：
```
django-admin startproject backend
```
4. 进入
Django项目文件夹并
创建Django应用程序：
```
cd backend
python manage.py startapp api
```
5. 在
Django项目的设置文件中添加以下内容：
```python
INSTALLED_APPS = [
...
'rest_framework',
'api',
]
MIDDLEWARE = [
...
'corsheaders.middleware.CorsMiddleware',
'
django.middleware.common.CommonMiddleware',
]
CORS_ORIGIN_ALLOW_ALL = True
```
6. 在
Django应用程序的`views.py`文件中编写API视图：
```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!'})
```
7. 在
Django应用程序的`urls.py`文件中添加API路由：
```python
from
django.urls import path
from .views import hello_world
urlpatterns = [
path('hello/', hello_world),
]
```
8. 在
Vue项目中安装axios库：
```
npm install axios
```
9. 在
Vue项目中
创建一个API服务：
```js
import axios from 'axios';
const apiClient = axios.create({
baseURL: 'http://localhost:8000/api/',
headers: {
'Content-Type': 'application/json',
},
});
export default {
hello() {
return apiClient.get('hello/');
},
};
```
10. 在
Vue组件中使用API服务：
```html
<template>
<div>
<h1>{{ message }}</h1>
</div>
</template>
<script>
import api from '@/services/api';
export default {
name: 'HelloWorld',
data() {
return {
message: '',
};
},
async created() {
const response = await api.hello();
this.message = response.data.message;
},
};
</script>
```
这样，您就可以在
Vue项目上
创建Django后端。请注意，这只是一个简单的示例，您需要根据您的需求进行更改和扩展。
783
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
