Python笔记_71_首页_导航功能_用户登录认证_前端显示登录页面_后端实现登陆认证

首页

导航功能实现

四步走:
在这里插入图片描述

创建模型

引入一个公共模型【抽象模型,不会在数据迁移的时候为它创建表】

from luffyapi.utils.models import BaseModel, models

class BannerInfo(BaseModel):
    """轮播图"""
    # upload_to 设置保存文件的子目录,系统会自动创建,但是当前子目录的父级目录需要开发者手动创建
    img_url = models.ImageField(upload_to="banner",null=True, blank=True, max_length=255, verbose_name='轮播图')
    name = models.CharField(max_length=150, verbose_name='轮播图名称')
    note = models.CharField(max_length=150, verbose_name='备注信息')
    link = models.CharField(max_length=150, verbose_name='轮播图广告地址')

    class Meta:
        db_table = "ly_banner"
        verbose_name = '轮播图'
        verbose_name_plural = verbose_name

    @property
    def image_url(self):
        """默认情况下,models.ImageFiled字段查询的结果是一个文件对象,不能直接被序列化器转换的,所以我们需要
        在模型中,设置一个自定义字段
        """
        return self.img_url.url

    def __str__(self):
        return self.name

class NavInfo(BaseModel):
    """导航"""
    # 导航位置
    NAV_OPTION = (
        (1,"头部导航"),
        (2,"脚部导航"),
    )
    name = models.CharField(max_length=150, verbose_name='导航名称')
    link = models.CharField(max_length=150, verbose_name='导航链接地址')
    opt = models.SmallIntegerField(choices=NAV_OPTION,default=1, verbose_name="导航位置")

    class Meta:
        db_table = 'ly_nav'
        verbose_name = '导航'
        verbose_name_plural = verbose_name

    def __str__(self):
        return self.name

公共模型,保存项目的公共代码库目录下luffyapi/utils.py文件中。

from django.db import models

class BaseModel(models.Model):
    """公共模型"""
    orders = models.IntegerField(verbose_name='显示顺序')
    is_show = models.BooleanField(verbose_name="是否上架",default=False)
    is_delete = models.BooleanField(verbose_name="逻辑删除",default=False)
    created_time = models.DateTimeField(auto_now_add=True, verbose_name="创建时间")
    updated_time = models.DateTimeField(auto_now=True, verbose_name="更新时间")

    class Meta:
        # 设置当前模型为抽象模型, 在django执行数据迁移时,不会为当前模型创建表和迁移文件
        abstract = True

数据迁移

python manage.py makemigrations
python manage.py migrate
序列化器代码

home/serializers.py

from .models import NavInfo

class NavInfoModelSerializer(serializers.ModelSerializer):
    """导航序列化器"""
    class Meta:
        model = NavInfo
        fields = ["id","name","link"]
视图代码

home/views.py

from .models import NavInfo
from .serializers import NavInfoModelSerializer

class HeaderNavListAPIView(ListAPIView):
    """头部导航列表"""
    queryset = NavInfo.objects.filter(is_show=True,is_delete=False,opt=1).order_by("orders")
    serializer_class = NavInfoModelSerializer

class FooterNavListAPIView(ListAPIView):
    """脚部导航列表"""
    queryset = NavInfo.objects.filter(is_show=True,is_delete=False,opt=2).order_by("orders")
    serializer_class = NavInfoModelSerializer
路由代码

home/urls.py

from django.urls import path, re_path
from . import views

urlpatterns = [
    path(r"banner/", views.BannerListAPIView.as_view()),
    path(r"nav/header/", views.HeaderNavListAPIView.as_view()),
    path(r"nav/footer/", views.FooterNavListAPIView.as_view()),
]
注册模型到xadmin中

在当前子应用home/adminx.py,添加如下代码

# 导航
from home.models import NavInfo

class NavInfoInfoModelAdmin(object):
    list_display=["name","link","is_show"]
xadmin.site.register(NavInfo, NavInfoInfoModelAdmin)

添加测试数据

客户端代码获取数据

头部导航Header.vue代码:

<template>
    <div class="header-box">
      <div class="header">
        <div class="content">
          <div class="logo full-left">
            <router-link to="/"><img src="/static/image/logo.svg" alt=""></router-link>
          </div>
          <ul class="nav full-left">
              <li :key="key" v-for="nav,key in nav_list">
                <router-link v-if="nav.link.search('://') == -1" :to="nav.link">{{nav.name}}</router-link>
                <a v-else :href="nav.link">{{nav.name}}</a>
              </li>
          </ul>
          <div class="login-bar full-right">
            <div class="shop-cart full-left">
              <img src="/static/image/cart.svg" alt="">
              <span><router-link to="/cart">购物车</router-link></span>
            </div>
            <div class="login-box full-left">
              <span>登录</span>
              &nbsp;|&nbsp;
              <span>注册</span>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
      name: "Header",
      data(){
        return{
          nav_list:[]
        }
      },
      created(){
        this.get_header_nav();
      },
      methods:{
        get_header_nav(){
            this.$axios.get(`${this.$settings.Host}/nav/header/`).then(response=>{
                console.log(response.data);
                this.nav_list = response.data;
            })
        },
      }
    }
</script>

<style scoped>
.header-box{
  height: 80px;
}
.header{
  width: 100%;
  height: 80px;
  box-shadow: 0 0.5px 0.5px 0 #c9c9c9;
  position: fixed;
  top:0;
  left: 0;
  right:0;
  margin: auto;
  z-index: 99;
  background: #fff;
}
.header .content{
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}
.header .content .logo{
  height: 80px;
  line-height: 80px;
  margin-right: 50px;
  cursor: pointer; /* 设置光标的形状为爪子 */
}
.header .content .logo img{
  vertical-align: middle;
}
.header .nav li{
  float: left;
  height: 80px;
  line-height: 80px;
  margin-right: 30px;
  font-size: 16px;
  color: #4a4a4a;
  cursor: pointer;
}
.header .nav li span{
  padding-bottom: 16px;
  padding-left: 5px;
  padding-right: 5px;
}
.header .nav li span a{
  display: inline-block;
}
.header .nav li .this{
  color: #4a4a4a;
  border-bottom: 4px solid #ffc210;
}
.header .nav li:hover span{
  color: #000;
}
.header .login-bar{
  height: 80px;
}
.header .login-bar .shop-cart{
  margin-right: 20px;
  border-radius: 17px;
  background: #f7f7f7;
  cursor: pointer;
  font-size: 14px;
  height: 28px;
  width: 88px;
  margin-top: 30px;
  line-height: 32px;
  text-align: center;
}
.header .login-bar .shop-cart:hover{
  background: #f0f0f0;
}
.header .login-bar .shop-cart img{
  width: 15px;
  margin-right: 4px;
  margin-left: 6px;
}
.header .login-bar .shop-cart span{
  margin-right: 6px;
}
.header .login-bar .login-box{
  margin-top: 33px;
}
.header .login-bar .login-box span{
  color: #4a4a4a;
  cursor: pointer;
}
.header .login-bar .login-box span:hover{
  color: #000000;
}
</style>

脚部导航Footer.vue代码:

<template>
    <div class="footer">
      <ul>
          <li :key="key" v-for="nav,key in nav_list">
            <router-link v-if="nav.link.search('://') == -1" :to="nav.link">{{nav.name}}</router-link>
            <a v-else :href="nav.link">{{nav.name}}</a>
          </li>
      </ul>
      <p>Copyright © luffycity.com版权所有 | 京ICP备17072161号-1</p>
    </div>
</template>

<script>
    export default {
        name: "Footer",
        data(){
            return {
                nav_list:[]
            }
        },
        created() {
            this.get_footer_nav();
        },
        methods:{
            get_footer_nav(){
            this.$axios.get(`${this.$settings.Host}/nav/footer/`).then(response=>{
                console.log(response.data);
                this.nav_list = response.data;
            })
        },
        }
    }
</script>

<style scoped>
.footer {
  width: 100%;
  height: 128px;
  background: #25292e;
  color: #fff;
}
.footer ul{
  margin: 0 auto 16px;
  padding-top: 38px;
  width: 810px;
}
.footer ul li{
  float: left;
  width: 112px;
  margin: 0 10px;
  text-align: center;
  font-size: 14px;
}
.footer ul li a{
  color: #eee;
}
.footer ul::after{
  content:"";
  display:block;
  clear:both;
}
.footer p{
  text-align: center;
  font-size: 12px;
}
</style>

用户的登陆认证

前端显示登陆页面

登录页组件

Login.vue

<template>
	<div class="login box">
		<img src="/static/image/Loginbg.3377d0c.jpg" alt="">
		<div class="login">
			<div class="login-title">
				<img src="/static/image/Logotitle.1ba5466.png" alt="">
				<p>帮助有志向的年轻人通过努力学习获得体面的工作和生活!</p>
			</div>
			<div class="login_box">
				<div class="title">
					<span @click="login_type=0" :class="login_type==0?'current':''">密码登录</span>
					<span @click="login_type=1" :class="login_type==1?'current':''">短信登录</span>
				</div>
				<div class="inp" v-if="login_type==0">
					<input v-model = "username" type="text" placeholder="用户名 / 手机号码" class="user">
					<input v-model = "password" type="password" name="" class="pwd" placeholder="密码">
					<div id="geetest1"></div>
					<div class="rember">
						<p>
							<input type="checkbox" class="no" name="a"/>
							<span>记住密码</span>
						</p>
						<p>忘记密码</p>
					</div>
					<button class="login_btn">登录</button>
					<p class="go_login" >没有账号 <span>立即注册</span></p>
				</div>
				<div class="inp" v-show="login_type==1">
					<input v-model = "username" type="text" placeholder="手机号码" class="user">
					<input v-model = "password"  type="text" class="pwd" placeholder="短信验证码">
          <button id="get_code">获取验证码</button>
					<button class="login_btn">登录</button>
					<p class="go_login" >没有账号 <span>立即注册</span></p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
  name: 'Login',
  data(){
    return {
        login_type: 0,
        username:"",
        password:"",
    }
  },

  methods:{

  },

};
</script>

<style scoped>
.box{
	width: 100%;
  height: 100%;
	position: relative;
  overflow: hidden;
}
.box img{
	width: 100%;
  min-height: 100%;
}
.box .login {
	position: absolute;
	width: 500px;
	height: 400px;
	left: 0;
  margin: auto;
  right: 0;
  bottom: 0;
  top: -338px;
}
.login .login-title{
     width: 100%;
    text-align: center;
}
.login-title img{
    width: 190px;
    height: auto;
}
.login-title p{
    font-size: 18px;
    color: #fff;
    letter-spacing: .29px;
    padding-top: 10px;
    padding-bottom: 50px;
}
.login_box{
    width: 400px;
    height: auto;
    background: #fff;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.5);
    border-radius: 4px;
    margin: 0 auto;
    padding-bottom: 40px;
}
.login_box .title{
	font-size: 20px;
	color: #9b9b9b;
	letter-spacing: .32px;
	border-bottom: 1px solid #e6e6e6;
	 display: flex;
    	justify-content: space-around;
    	padding: 50px 60px 0 60px;
    	margin-bottom: 20px;
    	cursor: pointer;
}
.login_box .title .current{
	    color: #4a4a4a;
    	border-bottom: 2px solid #84cc39;
}

.inp{
	width: 350px;
	margin: 0 auto;
}
.inp input{
    outline: 0;
    width: 100%;
    height: 45px;
    border-radius: 4px;
    border: 1px solid #d9d9d9;
    text-indent: 20px;
    font-size: 14px;
    background: #fff !important;
}
.inp input.user{
    margin-bottom: 16px;
}
.inp .rember{
     display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin-top: 10px;
}
.inp .rember p:first-of-type{
    font-size: 12px;
    color: #4a4a4a;
    letter-spacing: .19px;
    margin-left: 22px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    /*position: relative;*/
}
.inp .rember p:nth-of-type(2){
    font-size: 14px;
    color: #9b9b9b;
    letter-spacing: .19px;
    cursor: pointer;
}

.inp .rember input{
    outline: 0;
    width: 30px;
    height: 45px;
    border-radius: 4px;
    border: 1px solid #d9d9d9;
    text-indent: 20px;
    font-size: 14px;
    background: #fff !important;
}

.inp .rember p span{
    display: inline-block;
  font-size: 12px;
  width: 100px;
  /*position: absolute;*/
/*left: 20px;*/

}
#geetest{
	margin-top: 20px;
}
.login_btn{
     width: 100%;
    height: 45px;
    background: #84cc39;
    border-radius: 5px;
    font-size: 16px;
    color: #fff;
    letter-spacing: .26px;
    margin-top: 30px;
}
.inp .go_login{
    text-align: center;
    font-size: 14px;
    color: #9b9b9b;
    letter-spacing: .26px;
    padding-top: 20px;
}
.inp .go_login span{
    color: #84cc39;
    cursor: pointer;
}
</style>

绑定登陆页面路由地址

index.js

import Vue from "vue"
import Router from "vue-router"

// 导入需要注册路由的组件
import Home from "../components/Home"
import Login from "../components/Login"
Vue.use(Router);

// 配置路由列表
export default new Router({
  mode:"history",
  routes:[
    // 路由列表
		...
    {
      name:"Login",
      path: "/user/login",
      component:Login,
    }
  ]
})
调整首页头部子组件中登陆按钮的链接信息

Header.vue

<router-link to="/user/login">登录</router-link>

后端实现登陆认证

Django默认已经提供了Auth认证系统。认证系统包含:

  • 用户管理
  • 权限系统
  • 用户组
  • 密码哈希系统
  • 用户登录或内容显示的表单和视图
  • 一个可插拔的后台系统[热插拔、可插拔]
Django用户模型类

Django认证系统中提供了用户模型类User保存用户的数据,默认的User包含以下常见的基本字段:

字段名字段描述
username必选。150个字符以内。 用户名可能包含字母数字,_@+ .-个字符。
first_name可选(blank=True)。 少于等于30个字符。
last_name可选(blank=True)。 少于等于30个字符。
email可选(blank=True)。 邮箱地址。
password必选。 密码的哈希加密串。 (Django 不保存原始密码)。 原始密码可以无限长而且可以包含任意字符。
groupsGroup 之间的多对多关系。
user_permissionsPermission 之间的多对多关系。
is_staff布尔值。 设置用户是否可以访问Admin 站点。
is_active布尔值。 指示用户的账号是否激活。 它不是用来控制用户是否能够登录,而是描述一种帐号的使用状态。
is_superuser是否是超级用户。超级用户具有所有权限。
last_login用户最后一次登录的时间。
date_joined账户创建的时间。 当账号创建时,默认设置为当前的date/time。

常用方法:

  • set_password(raw_password)

    设置用户的密码为给定的原始字符串,并负责密码的。 不会保存User 对象。当Noneraw_password 时,密码将设置为一个不可用的密码。

  • check_password(raw_password)

    如果给定的raw_password是用户的真实密码,则返回True,可以在校验用户密码时使用。

管理器方法:

管理器方法即可以通过User.objects. 进行调用的方法。

  • create_user(username, email=None, password=None, **extra_fields)

    创建、保存并返回一个User对象。

  • create_superuser(username, email, password, **extra_fields)

    create_user() 相同,但是设置is_staffis_superuserTrue

创建用户模块的子应用
cd luffyapi/apps/
python ../../manage.py startapp users

settings/dev.py文件中注册子应用。

INSTALLED_APPS = [
		...
  	'users',
]
创建自定义的用户模型类

Django认证系统中提供的用户模型类及方法很方便,我们可以使用这个模型类,但是字段有些无法满足项目需求,如本项目中需要保存用户的手机号,需要给模型类添加额外的字段。

Django提供了django.contrib.auth.models.AbstractUser用户抽象模型类允许我们继承,扩展字段来使用Django认证系统的用户模型类。

我们可以在apps中创建Django应用users,并在配置文件中注册users应用。

在创建好的应用users/models.py中定义用户的用户模型类。

class User(AbstractUser):
    """用户模型类"""
    mobile = models.CharField(max_length=15, unique=True, blank=True, null=True, verbose_name="手机号码")
	avatar = models.ImageField(upload_to="avatar", blank=True,null=True ,verbose_name="头像")
    
    class Meta:
        db_table = 'ly_users'
        verbose_name = '用户'
        verbose_name_plural = verbose_name

我们自定义的用户模型类还不能直接被Django的认证系统所识别,需要在配置文件中告知Django认证系统使用我们自定义的模型类。

在配置文件中进行设置

AUTH_USER_MODEL = 'users.User'

AUTH_USER_MODEL 参数的设置以点.来分隔,表示应用名.模型类名

注意:Django建议我们对于AUTH_USER_MODEL参数的设置一定要在第一次数据库迁移之前就设置好,否则后续使用可能出现未知错误。

执行数据库迁移

python manage.py makemigrations
python manage.py migrate

如果是并非第一次迁移之前就直接自定义用户模型,则需要完成以下操作进行项目的初始化才能继续使用自定义用户模型

  • 需要删除的文件
  1. 对数据库中现有的所有数据表进行备份以后,对数据库中所有的数据表进行整体删除[如果数据不重要,直接可以删除]
  2. 先把现有的子应用里面的migrations目录下除了__init__.py以外的迁移文件删除
  3. 对当前python解析器里面的site-package模块里面找到以下文件并删除
    3.1 django.contrib.admin.migrations 除了__init__.py以外的迁移文件
    3.2 django.contrib.auth.migrations 除了__init__.py以外的迁移文件
    3.3 reversion.migrations 除了__init__.py以外的迁移文件
    3.4 xadmin.migrations 除了__init__.py以外的迁移文件
  • 完成上面的步骤以后,重新生成迁移文件,并执行数据迁移,然后把之前备份的数据[除了用户相关的以外]重新执行,还原即可.

  • 重新创建管理员,恢复数据,可以继续照常开发.

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值