day77:luffy:导航栏的实现&DjangoRestFramework JWT&多条件登录

1.导航栏的实现

1.设计导航栏的model模型类

apps/home/models.py

class Nav(BaseModel):

    """导航菜单模型"""

    POSITION_OPTION = (

        (1, "顶部导航"),

        (2, "脚部导航"),

    )

    title = models.CharField(max_length=500, verbose_name="导航标题")

    link = models.CharField(max_length=500, verbose_name="导航链接")

    position = models.IntegerField(choices=POSITION_OPTION, default=1, verbose_name="导航位置")

    is_site = models.BooleanField(default=False, verbose_name="是否是站外地址")

    class Meta:

        db_table = 'ly_nav'

        verbose_name = '导航菜单'

        verbose_name_plural = verbose_name

    # 自定义方法[自定义字段或者自定义工具方法]

    def __str__(self):

        return self.title

2.在Xadmin中注册导航栏模型类

apps/home/adminx.py

# 导航菜单

class NavModelAdmin(object):

    list_display=["title","link","is_show","is_site","position"]

xadmin.site.register(models.Nav, NavModelAdmin)

执行数据库迁移同步指令

python manage.py makemigrations

python manage.py migrate

3.在Xadmin中添加一些导航栏数据

4.注册导航栏的URL

from django.urls import path,re_path

from . import views

urlpatterns = [

    ......

    path("nav/header/", views.HeaderNavListAPIView.as_view()),

]

5.新建导航栏的视图类

from .models import Nav

from .serializers import NavModelSerializer

class HeaderNavListAPIView(ListAPIView):

    """顶部导航菜单视图"""

    queryset = Nav.objects.filter(is_show=True, is_deleted=False,position=1).order_by("-orders","-id")[:constants.HEADER_NAV_LENGTH]

    serializer_class = NavModelSerializer

'''

position=1代表是顶部导航,position=2代表是底部导航

'''

6.新建导航栏的序列化器

from .models import Nav

class NavModelSerializer(serializers.ModelSerializer):

    """导航菜单序列化器"""

    class Meta:

        model = Nav

        fields = ["id","title","link","is_site"]

7.调试一下看是否能获取到数据

8.编写导航栏vue组件的代码

1.Vheader组件加载时，通过axios的get请求去请求后端的数据

<script>

    export default {

      name: "Header",

      data(){

        return {

         ......

          nav_data_list:[],

        }

      },

      methods:{

        ......

        get_nav_data(){

          this.$axios.get(`${this.$settings.Host}/home/nav/header/`,).then((res)=>{

            this.nav_data_list = res.data;

          })

          .catch((error)=>{

            console.log(error);

          })

        }

      },

      // 注意:一定要写created方法来触发函数

      created() {

        this.get_nav_data();

      }

    }

</script>

2.后端数据已经拿到，接下来要在前端展示出来

思路:for循环取出导航栏所有的数据，判断导航栏的标题是站内跳转还是站外跳转

如果是站内跳转就用router-link,如果是站外跳转就用a href

value就是你从后端获取到的数据 value.link value.is_site value.title就可以取到相应的值

 <el-col class="nav" :span="10">

            <el-row>

                <el-col :span="3" v-for="(value,index) in nav_data_list" :key="index">

                 <a :href="value.link" class="active" v-if="value.is_site">{{value.title}}</a>

                  <router-link :to="value.link" v-else>{{value.title}}</router-link>

                </el-col>

              </el-row>

          </el-col>

2.登录前戏:用户表初始化

1.Login.vue

<template>

    <div class="login box">

        <img src="../../static/img/Loginbg.3377d0c.jpg" alt="">

        <div class="login">

            <div class="login-title">

                <img src="../../static/img/Logotitle.1ba5466.png" alt="">

                <p>帮助有志向的年轻人通过努力学习获得体面的工作和生活!</p>

            </div>

            <div class="login_box">

                <div class="title">

                    <span @click="login_type=0">密码登录</span>

                    <span @click="login_type=1">短信登录</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" v-model="remember"/>

                            <span>记住密码</span>

                        </p>

                        <p>忘记密码</p>

                    </div>

                    <button class="login_btn" @click="loginHandle">登录</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:"",

        remember:false,

    }

  },

  methods:{

    loginHandle(){

      this.$axios.post(`${this.$settings.Host}/users/login/`,{

        username:this.username,

        password:this.password,

      }).then((res)=>{

        console.log(res);

        // console.log(this.remember);

        if (this.remember){

          localStorage.token = res.data.token;

          localStorage.username = res.data.username;

          localStorage.id = res.data.id;

          sessionStorage.removeItem('token');

          sessionStorage.removeItem('username');

          sessionStorage.removeItem('id');

        }else {

          sessionStorage.token = res.data.token;

          sessionStorage.username = res.data.username;

          sessionStorage.id = res.data.id;

          localStorage.removeItem('token');

          localStorage.removeItem('username');

          localStorage.removeItem('id');

        }

        this.$router.push('/');

      }).catch((error)=>{

        this.$alert('用户名password error', 'error msg', {

          confirmButtonText: '确定',

        });

      })

    }

  },

};

</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;

    top: 0;

    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-family: PingFangSC-Regular;

    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 span:nth-of-type(1){

    color: #4a4a4a;

        border-bottom: 2px solid #84cc39;

}

.inp{

    width: 350px;

    margin: 0 auto;

}

.inp input{

    border: 0;

    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>

2.在index.js中添加Login组件的路由

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: [

   ......

    {

      path:'/user/login',

      component: Login

    }

  ]

})

3.将导航栏Vheader组件的登录按钮设置一个跳转连接

<!-- 点击登录按钮 跳转到登录的页面:/user/login -->

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

4.将导航栏Vheader组件中的登录状态token改为false

将token值改为false，让首页是未登录状态，这样才能显示登录注册的按钮

<script>

    export default {

      name: "Header",

      data(){

        return {

          token:false,
　　　　}

5.创建users应用

1.创建user应用

python manage.py startapp users

2.在dev.py配置文件的INSTALL_APPS加上users

3.为user应用配置总路由

  path('users/',include("users.urls")),

6.创建user模型类

在django的auth模块是自带一个用户表的，我们写用户表时可以继承django自带的用户表.

from django.db import models

from django.contrib.auth.models import AbstractUser # AbstractUser是django自带的一个用户表

class User(AbstractUser):

    phone = models.CharField(max_length=16, null=True, blank=True)

    wechat = models.CharField(max_length=16, null=True, blank=True)

    class Meta:

        db_table = 'ly_user'

        verbose_name = '用户表'

        verbose_name_plural = verbose_name

7.关于用户表要做的两件事

我们想做的两件事：

　　1.使用django自带的Abstractuser表加自己的扩展字段作为项目的用户表【已经完成】

　　2.后台登录Xadmin的后台管理系统的那些用户不再使用原来django自带的用户表，而是使用自己创建的用户表

Xadmin使用自己创建的用户表

需要在setting中配置一下，让django别再使用自带的那个user表，而是使用我们自己编写的user表

dev.py

AUTH_USER_MODEL = 'users.User'

注意:如果现在执行数据库迁移指令会报错。

上面的操作应该建立在第一次数据库迁移之前。

但是我们之前已经进行过几次数据库迁移了。所以需要做以下几步操作:

// 0. 先把现有的数据库导出备份，然后清掉数据库中所有的数据表。

// 1. 把开发者创建的所有子应用下面的migrations目录下除了__init__.py以外的所有迁移文件，只要涉及到用户的，一律删除,并将django-migrations表中的数据全部删除。

// 2. 把django.contrib.admin.migrations目录下除了__init__.py以外的所有迁移文件，全部删除。

// 3. 把django.contrib.auth.migrations目录下除了__init__.py以外的所有迁移文件，全部删除。

// 4. 把reversion.migrations目录下除了__init__.py以外的所有迁移文件，全部删除。这个不在django目录里面，在site-packages里面，是xadmin安装的时候带的，它会记录用户信息，也需要删除

// 5. 把xadmin.migrations目录下除了__init__.py以外的所有迁移文件，全部删除。

// 6. 删除我们当前数据库中的所有表

// 7. 接下来，执行数据迁移(makemigrations和migrate)，回顾第0步中的数据，将数据导入就可以了，以后如果要修改用户相关数据，不需要重复本次操作，直接数据迁移即可。//

这些完成之后，创建一个超级用户

python3 manage.py createsuperuser

会发现xadmin超级用户的用户名和密码存到了自己的ly_user表中。我们达到了目的。

3.DjangoRestFramework JWT

1.jwt的安装

pip install djangorestframework-jwt -i https://mirrors.aliyun.com/pypi/simple/

2.jwt的配置

dev.py

REST_FRAMEWORK = {

    'DEFAULT_AUTHENTICATION_CLASSES': (

        'rest_framework_jwt.authentication.JSONWebTokenAuthentication',

        'rest_framework.authentication.SessionAuthentication',

        'rest_framework.authentication.BasicAuthentication',

    ),

}

import datetime

JWT_AUTH = {

    'JWT_EXPIRATION_DELTA': datetime.timedelta(days=1),

}

注:JWT_EXPIRATION_DELTA 指明token的有效期

3.为jwt配置路由

apps/users/urls.py

为jwt设置路由，用来前端访问url 获取jwt token值

from rest_framework_jwt.views import obtain_jwt_token

from django.urls import path

urlpatterns = [

    path(r'login/', obtain_jwt_token),

]

访问 www.lyapi.com:8001/users/login 添加用户名和密码字段 post提交后可得token值,如图所示

4.前端通过axios请求获取后端传过来的token

用户在登录界面输入用户名和密码，点击登录往后台发送post请求

后端返回给前端一个token值，前端接收token值并存储起来

1.获取用户在前端输入的用户名和密码

methods:{

    loginHandle(){

      this.$axios.post(`${this.$settings.Host}/users/login/`,{

        username:this.username,

        password:this.password,

2.为login.vue的登录按钮绑定一个LoginHandle事件

<button class="login_btn" @click="loginHandle">登录</button>

这个时候我们访问www.lycity.com/user/login 输入用户名和密码

查看console 可以看到data中已经存放着token值 ==>这个时候前端已经拿到token值

那么接下来的问题是前端如何将token值保存起来呢？

3.引入session storage 和 local storage===>实现前端对token的存储

session storage和local storage的区别

session storage 是临时存储关闭浏览器就没有了

local storage 是永久存储

5.前端存储token值

登录页面有一个记住密码的选项，我们就可以使用session storage 和 loca storage 来做一些事情

1.将记住密码checkbox设置为v-model

当用户勾选/没有勾选记住密码这个选项时，remember的值发生改变

Login.vue

<p>

    <input type="checkbox" class="no" name="a" v-model="remember"/>

    <span>记住密码</span>

</p>

2.我们先让remember的值默认为false

export default {

  name: 'Login',

  data(){

    return {

         ...

        remember:false,

    }

  },

当用户勾选记住密码 remember的值为true 反之为false

所以根据 remember的值就可以做if判断了

6.扩展默认的返回值

默认的返回值仅有token值，但是我们还需在返回值中增加username和id ,方便在客户端页面中显示当前登录用户。

所以需要扩展一下

通过修改该视图的返回值可以完成我们的需求

user/utils.py

def jwt_response_payload_handler(token, user=None, request=None):

    """

    自定义jwt认证成功返回数据

    """

    return {

        'token': token,

        'id': user.id,

        'username': user.username

    }

除了扩展一下这个，还要修改一下下面的配置

settings/dev.py

# JWT

JWT_AUTH = {

    'JWT_EXPIRATION_DELTA': datetime.timedelta(days=1),

    'JWT_RESPONSE_PAYLOAD_HANDLER': 'users.utils.jwt_response_payload_handler',

}

这个配置的作用是:告诉jwt 响应结果的时候，按照我指定的 jwt_response_payload_handler这个方法来返回

jwt 认证成功返回了三个字段 token id username 响应给前端

前端也应该接収这几个字段

  methods:{

    loginHandle(){

      this.$axios.post(`${this.$settings.Host}/users/login/`,{

        username:this.username,

        password:this.password,

      }).then((res)=>{

        console.log(res);

        if (this.remember){

          localStorage.token = res.data.token;

          localStorage.username = res.data.username;

          localStorage.id = res.data.id;

           ...

        }else {

          sessionStorage.token = res.data.token;

          sessionStorage.username = res.data.username;

          sessionStorage.id = res.data.id;

            ...

        }

final

'''

实现思路：

如果用户标选了记住密码 就将token值存储在local storage中

如果用户没有标记 记住密码 就将token值存储在session storage中

'''

  methods:{

    loginHandle(){

      this.$axios.post(`${this.$settings.Host}/users/login/`,{

        username:this.username,

        password:this.password,

      }).then((res)=>{

        console.log(res);

        // console.log(this.remember);

        if (this.remember){

          localStorage.token = res.data.token;

          localStorage.username = res.data.username;

          localStorage.id = res.data.id;

          sessionStorage.removeItem('token');

          sessionStorage.removeItem('username');

          sessionStorage.removeItem('id');

        }else {

          sessionStorage.token = res.data.token;

          sessionStorage.username = res.data.username;

          sessionStorage.id = res.data.id;

          localStorage.removeItem('token');

          localStorage.removeItem('username');

          localStorage.removeItem('id');

        }

        this.$router.push('/');

Tip:关于session storage和local storage的使用方法

sessionStorage.变量名 = 变量值   // 保存数据

sessionStorage.setItem("变量名","变量值") // 保存数据

sessionStorage.变量名  // 读取数据

sessionStorage.getItem("变量名") // 读取数据

sessionStorage.removeItem("变量名") // 清除单个数据

sessionStorage.clear()  // 清除所有sessionStorage保存的数据

localStorage.变量名 = 变量值   // 保存数据

localStorage.setItem("变量名","变量值") // 保存数据

localStorage.变量名  // 读取数据

localStorage.getItem("变量名") // 读取数据

localStorage.removeItem("变量名") // 清除单个数据

localStorage.clear()  // 清除所有sessionStorage保存的数据

4.多条件登录

扩展的登录视图，在收到用户名与密码时，也是调用Django的认证系统中提供的authenticate()来检查用户名与密码是否正确。

我们可以通过修改Django认证系统的认证后端（主要是authenticate方法）来支持登录账号既可以是用户名也可以是手机号。

官方说：修改Django认证系统的认证后端需要继承django.contrib.auth.backends.ModelBackend，并重写authenticate方法。

authenticate(self, request, username=None, password=None, **kwargs)方法的参数说明：

request 本次认证的请求对象
username 本次认证提供的用户账号
password 本次认证提供的密码

我们想要让用户既可以以用户名登录，也可以以手机号登录，那么对于authenticate方法而言，username参数即表示用户名或者手机号。

重写authenticate方法的思路：

根据username参数查找用户User对象，username参数可能是用户名，也可能是手机号
若查找到User对象，调用User对象的check_password方法检查密码是否正确

users/utils.py

def get_user_by_account(account):

    """

    根据帐号获取user对象

    :param account: 账号，可以是用户名，也可以是手机号

    :return: User对象 或者 None

    """

    try:

        # 查询用户名是否存在

        user = models.User.objects.filter(Q(username=account)|Q(mobile=account)).first()

    except models.User.DoesNotExist:

        return None

    else:

        return user # 存在返回用户名

from . import models

from django.db.models import Q

from django.contrib.auth.backends import ModelBackend

class UsernameMobileAuthBackend(ModelBackend):

    """

    自定义用户名或手机号认证

    """

    def authenticate(self, request, username=None, password=None, **kwargs):

        user = get_user_by_account(username)

        #if user is not None and user.check_password(password) :

        if user is not None and user.check_password(password) and user.is_authenticated:

            #user.is_authenticated是看他有没有权限的，这里可以不加上它

            return user

在配置文件settings/dev.py中告知Django使用我们自定义的认证后端

AUTHENTICATION_BACKENDS = [

    'users.utils.UsernameMobileAuthBackend',

]

以上就实现了我们通过用户名或者手机号的一个多条件登录。

5.登录状态的判断和退出登录

在Vheader组件中添加如下内容

<script>

export default {

  name: "Header",

  data() {

    return {

        .....

      token: true,

      .....

    }

  },

  methods: {

    ......

    check_login() {

      // 二者只要其中之一有值就是true 代表用户已经登录

      this.token = localStorage.token || sessionStorage.token;

    },

    logout() {

      // 用户注销时，无论是临时存储还是永久存储都应该清除掉

      sessionStorage.removeItem('token');

      sessionStorage.removeItem('username');

      sessionStorage.removeItem('id');

      localStorage.removeItem('token');

      localStorage.removeItem('username');

      localStorage.removeItem('id');

      this.check_login();

    }

  },

  created() {

    this.get_nav_data();

  }