django vue 实现登录

Django 和 Vue 实现登录功能

后端 (Django) 配置

安装 Django 和必要的包：

pip install django djangorestframework django-cors-headers

创建 Django 项目和应用：

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

配置 settings.py：

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

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

CORS_ORIGIN_ALLOW_ALL = True  # 开发时允许所有跨域请求

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

# models.py
from django.contrib.auth.models import AbstractUser

class User(AbstractUser):
    pass

# 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.views import APIView
from rest_framework.response import Response
from rest_framework import status
from django.contrib.auth import authenticate, login

class LoginView(APIView):
    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)
            return Response({'message': 'Login successful'}, status=status.HTTP_200_OK)
        return Response({'message': 'Invalid credentials'}, status=status.HTTP_401_UNAUTHORIZED)

配置 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 项目：

vue create frontend
cd frontend
npm install axios vue-router

创建登录组件（src/components/Login.vue）：

<template>
  <div>
    <h2>Login</h2>
    <form @submit.prevent="handleSubmit">
      <input v-model="username" type="text" placeholder="Username" required>
      <input v-model="password" type="password" placeholder="Password" required>
      <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
        });
        console.log(response.data);
        // 处理登录成功后的逻辑，如跳转页面
      } catch (err) {
        this.error = 'Login failed. Please check your credentials.';
      }
    }
  }
};
</script>

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

import Vue from 'vue';
import Router from 'vue-router';
import Login from '../components/Login.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: Login
    }
  ]
});

运行项目

启动 Django 后端：

python manage.py migrate
python manage.py runserver

启动 Vue 前端：

npm run serve

访问 http://localhost:8080/login 测试登录功能。