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 将存储在本地存储中，用于后续的认证请求。