drf+vue3+element-plus搭建模板

以下是一个使用 Django Rest Framework (DRF)、Vue 3 和 Element Plus 搭建的前后端分离模板。

### 后端 (Django Rest Framework)

1. 创建一个 Django 项目和应用程序：

   $ django-admin startproject myproject
   $ cd myproject
   $ python manage.py startapp myapp

2. 安装 DRF：

   $ pip install djangorestframework

3. 在 `myproject/settings.py` 中添加 DRF 和 CORS 的配置：

   INSTALLED_APPS = [
       # ...
       'rest_framework',
   ]

   MIDDLEWARE = [
       # ...
       'corsheaders.middleware.CorsMiddleware',
       'django.middleware.common.CommonMiddleware',
   ]

   REST_FRAMEWORK = {
       'DEFAULT_AUTHENTICATION_CLASSES': (
           'rest_framework.authentication.TokenAuthentication',
           'rest_framework.authentication.SessionAuthentication',
       ),
       'DEFAULT_PERMISSION_CLASSES': (
           'rest_framework.permissions.IsAuthenticated',
       ),
   }

   CORS_ORIGIN_ALLOW_ALL = True

4. 在 `myapp/views.py` 中定义一个视图：

   from rest_framework.decorators import api_view
   from rest_framework.response import Response

   @api_view(['GET'])
   def hello(request):
       return Response({'message': 'Hello, world!'})

5. 在 `myproject/urls.py` 中添加路由：

   from django.urls import path, include
   from myapp.views import hello

   urlpatterns = [
       path('api/', include([
           path('hello/', hello),
       ])),
   ]

6. 运行服务器：

   $ python manage.py runserver

访问 `http://localhost:8000/api/hello/` 应该会返回 `{"message": "Hello, world!"}`。

### 前端 (Vue 3 + Element Plus)

1. 使用 Vue CLI 创建一个新项目：

   $ vue create myproject-frontend

2. 安装 Element Plus：

   $ npm install element-plus --save

3. 在 `main.js` 中引入 Element Plus 和样式：

   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')

4. 在 `App.vue` 中添加一个按钮和一个文本框：

   <template>
     <div class="container">
       <el-input v-model="name" placeholder="Enter your name"></el-input>
       <el-button type="primary" @click="sayHello">Say hello</el-button>
       <div class="result">{{ result }}</div>
     </div>
   </template>

   <script>
   import axios from 'axios'

   export default {
     name: 'App',
     data() {
       return {
         name: '',
         result: ''
       }
     },
     methods: {
       sayHello() {
         axios.get('/api/hello/', {
           headers: {
             'Authorization': 'Token ' + sessionStorage.getItem('token')
           }
         })
         .then(response => {
           this.result = response.data.message
         })
         .catch(error => {
           console.error(error)
         })
       }
     }
   }
   </script>

   <style>
   .container {
     max-width: 800px;
     margin: 0 auto;
     padding: 20px;
   }
   .result {
     margin-top: 20px;
     font-weight: bold;
   }
   </style>

5. 运行服务器：

   $ npm run serve

访问 `http://localhost:8080/` 应该会显示一个文本框和一个按钮。在文本框中输入你的名字，然后点击按钮，应该会显示 `Hello, world!`。

这是一个简单的模板，你可以根据自己的需要进行扩展和定制。