django vue实现登录

使用 Django 和 Vue 实现登录功能

后端 (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',
    'corsheaders',
]

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

CORS_ORIGIN_ALLOW_ALL = True

创建用户模型和序列化器 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 get_user_model

User = get_user_model()

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

创建视图 accounts/views.py：

from rest_framework import permissions, generics
from rest_framework.response import Response
from rest_framework.authtoken.models import Token
from rest_framework.views import APIView
from django.contrib.auth import authenticate, login
from .serializers import UserSerializer

class LoginView(APIView):
    permission_classes = [permissions.AllowAny]

    def post(self, request):
        username = request.data.get('username')
        password = request.data.get('password')
        user = authenticate(request, username=username, password=password)
        if user is not None:
            login(request, user)
            token, created = Token.objects.get_or_create(user=user)
            return Response({
                'token': token.key,
                'user': UserSerializer(user).data
            })
        return Response({'error': 'Invalid credentials'}, status=400)

配置 URL backend/urls.py：

from django.contrib import admin
from django.urls import path
from accounts.views import LoginView

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/login/', LoginView.as_view(), name='login'),
]

前端 (Vue)

创建 Vue 项目：

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

创建登录组件 src/views/Login.vue：

<template>
  <div>
    <h2>Login</h2>
    <form @submit.prevent="handleSubmit">
      <div>
        <label>Username</label>
        <input v-model="username" type="text" required />
      </div>
      <div>
        <label>Password</label>
        <input v-model="password" type="password" required />
      </div>
      <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 handleSubmit() {
      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('/')
      } catch (err) {
        this.error = 'Login failed'
      }
    }
  }
}
</script>

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

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

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

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

export default router

运行项目

启动 Django 后端：

python manage.py migrate
python manage.py runserver

启动 Vue 前端：

npm run dev

注意事项

确保 Django 的 CSRF 中间件不会阻止 Vue 的请求，或者在 Vue 中处理 CSRF token。

在 Django 中创建超级用户测试登录：

python manage.py createsuperuser