drf+vue3+element-plus搭建登录模板
时间: 2023-10-09 20:14:55 浏览: 137
好的,以下是使用Django Rest Framework (DRF) + Vue 3 + Element Plus搭建登录模板的步骤:
1. 创建Django项目
使用如下命令创建一个Django项目:
```
django-admin startproject your_project_name
```
2. 创建Django应用
使用如下命令创建一个Django应用:
```
python manage.py startapp your_app_name
```
3. 安装DRF
使用如下命令安装DRF:
```
pip install djangorestframework
```
4. 配置DRF
在Django项目的settings.py文件中添加如下配置:
```
INSTALLED_APPS = [
...
'rest_framework',
]
REST_FRAMEWORK = {
'DEFAULT_AUTHENTICATION_CLASSES': [
'rest_framework.authentication.SessionAuthentication',
],
'DEFAULT_PERMISSION_CLASSES': [
'rest_framework.permissions.IsAuthenticated',
],
}
```
5. 创建用户模型
在Django应用中创建一个用户模型:
```python
from django.contrib.auth.models import AbstractUser
class User(AbstractUser):
pass
```
6. 创建序列化器
在Django应用中创建一个序列化器:
```python
from rest_framework import serializers
from .models import User
class UserSerializer(serializers.ModelSerializer):
class Meta:
model = User
fields = ['username', 'password']
extra_kwargs = {'password': {'write_only': True}}
def create(self, validated_data):
user = User.objects.create_user(**validated_data)
return user
```
7. 创建视图函数
在Django应用中创建一个视图函数,用于用户登录:
```python
from django.contrib.auth import authenticate, login
from rest_framework import status
from rest_framework.response import Response
from rest_framework.decorators import api_view
from .serializers import UserSerializer
@api_view(['POST'])
def login(request):
serializer = UserSerializer(data=request.data)
if serializer.is_valid():
user = authenticate(request, **serializer.validated_data)
if user is not None:
login(request, user)
return Response({'success': True})
return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
```
8. 配置URL
在Django应用的urls.py文件中添加如下配置:
```python
from django.urls import path
from .views import login
urlpatterns = [
path('login/', login),
]
```
9. 创建Vue 3项目
使用如下命令创建一个Vue 3项目:
```
vue create your_project_name
```
10. 安装Element Plus
使用如下命令安装Element Plus:
```
npm install element-plus --save
```
11. 创建登录组件
在Vue 3项目中创建一个登录组件:
```vue
<template>
<div>
<el-form :model="form" ref="form" :rules="rules" label-width="80px">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="form.password"></el-input>
</el-form-item>
</el-form>
<el-button type="primary" @click="submitForm">登录</el-button>
</div>
</template>
<script>
export default {
data() {
return {
form: {
username: '',
password: ''
},
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
]
}
}
},
methods: {
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
this.$axios.post('/api/login/', this.form)
.then(response => {
if (response.data.success) {
this.$router.push('/')
} else {
this.$message.error('登录失败')
}
})
.catch(error => {
this.$message.error(error.response.data)
})
} else {
return false
}
})
}
}
}
</script>
```
12. 配置Axios
在Vue 3项目中配置Axios:
```js
import axios from 'axios'
axios.defaults.baseURL = process.env.VUE_APP_API_BASE_URL
axios.defaults.withCredentials = true
```
13. 配置路由
在Vue 3项目中配置路由:
```js
import Login from './views/Login.vue'
const routes = [
{ path: '/login', component: Login }
]
const router = createRouter({
history: createWebHistory(),
routes
})
```
14. 运行项目
使用如下命令运行Django项目:
```
python manage.py runserver
```
使用如下命令运行Vue 3项目:
```
npm run serve
```
现在可以通过访问http://localhost:8080/login来访问登录页面了。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)