vue django实现登陆
Vue 和 Django 实现登录功能
后端 Django 实现
安装 Django 和 Django REST framework：
pip install django djangorestframework创建 Django 项目和应用：
django-admin startproject backend
cd backend
python manage.py startapp accounts配置 settings.py：
INSTALLED_APPS = [
...
'rest_framework',
'accounts',
]
REST_FRAMEWORK = {
'DEFAULT_AUTHENTICATION_CLASSES': [
'rest_framework.authentication.TokenAuthentication',
]
}创建用户模型和序列化器：
# accounts/models.py
from django.contrib.auth.models import AbstractUser
class User(AbstractUser):
pass# accounts/serializers.py
from rest_framework import serializers
from django.contrib.auth import authenticate
from .models import User
class UserSerializer(serializers.ModelSerializer):
class Meta:
model = User
fields = ('id', 'username', 'email')
class LoginSerializer(serializers.Serializer):
username = serializers.CharField()
password = serializers.CharField()
def validate(self, data):
user = authenticate(data)
if user and user.is_active:
return user
raise serializers.ValidationError("Incorrect Credentials")创建视图：
# accounts/views.py
from rest_framework import generics, permissions, status
from rest_framework.response import Response
from rest_framework.authtoken.models import Token
from .serializers import UserSerializer, LoginSerializer
class LoginView(generics.GenericAPIView):
serializer_class = LoginSerializer
def post(self, request):
serializer = self.get_serializer(data=request.data)
serializer.is_valid(raise_exception=True)
user = serializer.validated_data
token, created = Token.objects.get_or_create(user=user)
return Response({
"user": UserSerializer(user).data,
"token": token.key
})配置路由：
# backend/urls.py
from django.contrib import admin
from django.urls import path
from accounts import views
urlpatterns = [
path('admin/', admin.site.urls),
path('api/login/', views.LoginView.as_view(), name='login'),
]前端 Vue 实现
安装 Vue 和 axios：
npm install vue axios创建登录组件：
<template>
<div>
<form @submit.prevent="login">
<input v-model="username" placeholder="Username">
<input v-model="password" type="password" placeholder="Password">
<button type="submit">Login</button>
</form>
<p v-if="error">{{ error }}</p>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
username: '',
password: '',
error: ''
}
},
methods: {
async login() {
try {
const response = await axios.post('http://localhost:8000/api/login/', {
username: this.username,
password: this.password
})
localStorage.setItem('token', response.data.token)
this.$router.push('/dashboard')
} catch (err) {
this.error = 'Login failed'
}
}
}
}
</script>配置 axios 拦截器：
// main.js
import axios from 'axios'
axios.interceptors.request.use(config => {
const token = localStorage.getItem('token')
if (token) {
config.headers.Authorization = `Token ${token}`
}
return config
})
Vue.prototype.$http = axios跨域问题解决
安装 Django CORS 中间件：
pip install django-cors-headers配置 settings.py：
INSTALLED_APPS = [
...
'corsheaders',
]
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware',
...
]
CORS_ORIGIN_WHITELIST = [
'http://localhost:8080',
]测试流程
启动 Django 开发服务器：
python manage.py migrate
python manage.py runserver启动 Vue 开发服务器：
npm run serve访问 Vue 应用，测试登录功能是否正常工作。成功登录后，token 将存储在本地存储中，用于后续的认证请求。
