django+vue3+elementplus前后端分离demo

很高兴为你提供一个Django+Vue3+ElementPlus前后端分离的demo。

## 后端部分

首先，我们需要创建一个Django项目。在命令行中输入以下命令：

django-admin startproject project_name

然后，我们需要创建一个应用程序。在命令行中输入以下命令：

python manage.py startapp app_name

接下来，我们需要安装一些必要的库。在命令行中输入以下命令：

pip install djangorestframework django-cors-headers

接下来，我们需要在`settings.py`文件中添加以下代码：

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`的文件，并编写以下代码：

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`文件中添加以下代码：

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`文件中添加以下代码：

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`的文件，并编写以下代码：

<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`文件中添加以下代码：

<template>
  <HelloWorld />
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  components: {
    HelloWorld
  }
}
</script>

现在，我们已经完成了前端部分的设置。我们可以在终端中运行`npm run serve`命令来启动前端服务器。

现在，我们可以在浏览器中访问`http://localhost:8080`，应该可以看到一个页面，其中包含“Hello, World!”消息。