当前位置：首页 > VUE

vue和django实现登录

2026-02-21 16:45:23VUE

Vue 和 Django 实现登录功能

后端 Django 实现

安装 Django 和 Django REST framework：

pip install django djangorestframework

创建 Django 项目和应用：

django-admin startproject backend
cd backend
python manage.py startapp accounts

配置 backend/settings.py：

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

REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': [
        'rest_framework.authentication.SessionAuthentication',
    ]
}

创建用户模型和序列化器 accounts/models.py：

from django.contrib.auth.models import AbstractUser
from django.db import models

class User(AbstractUser):
    pass

accounts/serializers.py：

from rest_framework import serializers
from django.contrib.auth import authenticate

class UserSerializer(serializers.ModelSerializer):
    class Meta:
        model = User
        fields = ('id', 'username')

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：

vue和django实现登录

from rest_framework import generics, permissions, status
from rest_framework.response import Response
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
        return Response({
            "user": UserSerializer(user).data,
            "message": "Login Success"
        })

配置路由 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'),
]

迁移数据库：

python manage.py makemigrations
python manage.py migrate

前端 Vue 实现

创建 Vue 项目：

npm init vue@latest frontend
cd frontend
npm install axios vue-router

配置登录页面 src/views/LoginView.vue：

vue和django实现登录

<template>
  <div>
    <h2>Login</h2>
    <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" class="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
        })
        console.log('Login success:', response.data)
        // 存储用户信息或跳转到主页
      } catch (err) {
        this.error = 'Login failed'
        console.error('Login error:', err)
      }
    }
  }
}
</script>

配置路由 src/router/index.js：

import { createRouter, createWebHistory } from 'vue-router'
import LoginView from '../views/LoginView.vue'

const routes = [
  {
    path: '/login',
    name: 'login',
    component: LoginView
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

配置跨域支持（Django 端）：在 backend/settings.py 中添加：

CORS_ALLOWED_ORIGINS = [
    "http://localhost:8080",
]

INSTALLED_APPS = [
    ...,
    'corsheaders',
]

MIDDLEWARE = [
    ...,
    'corsheaders.middleware.CorsMiddleware',
]