Django实现前后端登录

前端登录

1. login.vue






2.设置路由

router/index.JS

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Login from '@/components/Login'
import Register from "../src/components/Register";
import QQLoginIndex from '@/components/OOLoginIndex'


Vue.vue(Router)

export default new Router({
  mode:'history',
  routes:[
    {
      path:'/',
      component:Home
    },
    {
      path:'/login',
      component: Login
    },
    {
      path:'/register',
      component: Register
    },
    {
      path:'/oauth_callback.html',
      component: QQLoginIndex
    }
  ]
})

3.登录标签设置

header.vue

将a 标签设置为 router-link(站外链接调整为站内链接)


后端登录

2.1 创建一个用户表

虚拟环境下

cd renranapi/renranapi/apps
python ../../manage.py startapp users

2.2 Settings/dev/py 新增配置

INSTALLED_APPS = [
  
    #以下为第三方软件
    'corsheaders',
    'users'
]

2.3 运行时报错修& 改配置环境路径

报错

修改配置环境路径

settings.dev.py

修改配置环境路径
settings.dev.py

2.4 创建用户模型类

Renranapi/apps/users/migrations/models.py

from django.db import models
from django.contrib.auth.models import AbstractUser
# Create your models here.
class User(AbstractUser):
    """用户模型类"""
    mobile = models.CharField(max_length=15, null=True,blank=True, unique=True, help_text="手机号码",verbose_name="手机号码")
    wxchat = models.CharField(max_length=100, null=True, blank=True, unique=True, help_text="微信账号",verbose_name="微信账号")
    alipay = models.CharField(max_length=100, null=True, blank=True, unique=True, help_text="支付宝账号",verbose_name="支付宝账号")
    qq_number = models.CharField(max_length=11, null=True, blank=True, unique=True, help_text="QQ号",verbose_name="QQ号")
    # 保存文件的子目录
    avatar = models.ImageField(upload_to="avatar", null=True,blank=True, default=None, verbose_name="头像")

    class Meta:
        db_table = "rr_users"
        verbose_name = "用户信息"
        verbose_name_plural = verbose_name

    def __str__(self):
        return self.username

2.5 配置

settings/dev.py

AUTH_USER_MODEL = 'users.User'

2.6 数据库迁移

python ../../manage.py makemigrations
python ../../ manage.py migrate

设置 mysql

Django实现前后端登录_第1张图片

admin 配置

创建超级管理员

Django实现前后端登录_第2张图片

此时后台数据库

Django实现前后端登录_第3张图片

进入http://127.0.0.1:8000/admin/
root 用户登录:root 密码 123

以上就是Django实现前后端登录的详细内容,更多关于Django 前后端登录的资料请关注脚本之家其它相关文章!

你可能感兴趣的:(Django实现前后端登录)