Django博客搭建_用户登录、登出功能

Blog项目——用户登录、登出

一、用户登录

1. 分析

业务处理流程：

• 判断用户输入的账号是否为空
• 判断用户输入的密码是否为空，格式是否正确
• 判断用户输入的账号与密码是否正确

请求方法：POST

url定义：/user/login/

请求参数：url路径参数

参数	类型	前端是否必须传	描述
user_account	字符串	是	用户输入的账号可以是手机号也可以是用户名
password	字符串	是	用户输入的密码
remember_me	字符串	是	用户输入的“是否记住我”

注：由于是post请求，在向后端发起请求时，需要附带csrf token

2. 流程

1. 用户输入用户名或者手机，密码
2. 判断每个值是否为空
3. 判断每个值是否合法
4. 利用ajax往后台传输数据（也是json格式）
5. 后台接收数据
   1. 判断数据是否为空
   2. 利用form清洗数据
   3. 如果数据正确，就进行用户登录操作
   4. 如果数据不正确，则返回相应的错误原因
6. 前台接收后台返回的数据
   1. 如果是正确的，则给客户展现正确的信息
   2. 如果是错误的，则给客户展现错误的信息

3. 代码

3-1 前端js

前端页面还是稍微比较简单，

1. 首先就是获取表单元素（submit必须是form属性）
2. 然后进行阻止默认提交
3. 判断每个值是否为空是否合法
4. 发送ajax到后台，然后接收后台传送数据
5. 如果发送的是0，则设置定时器，判断上个页面的类，如果不是空或者注册页，则跳转上个页面，如果是空则直接跳转首页
6. 如果发送的不是0，则输出错误信息

// @Auther:Summer
$(function () {
   
  let $login = $('.form-contain');  // 获取登录表单元素

  // 登录逻辑
  $login.submit(function (e) {
   
    // 阻止默认提交操作
    e.preventDefault();

    // 获取用户输入的账号信息
    let sUserAccount = $("input[name=telephone]").val();  // 获取用户输入的用户名或者手机号
    // 判断用户输入的账号信息是否为空
    if (sUserAccount === "") {
   
      message.showError('用户账号不能为空');
      return
    }
    // 判断输入手机号格式或者用户名格式是否正确
    if (!(/^\w{5,20}$/).test(sUserAccount) || !(/^\w{5,20}$/).test(sUserAccount)) {
   
      message.showError('请输入合法的用户账号：5-20个字符的用户名或者11位手机号');
      return
    }

    // 获取用户输入的密码
    let sPassword = $("input[name=password]").val();  // 获取用户输入的密码
    // 判断用户输入的密码是否为空
    if (!sPassword) {
   
      message.showError('密码不能为空');
      return
    }
    // 判断用户输入的密码是否为6-20位
    if (sPassword.length < 6 || sPassword.length > 20) {
   
      message.showError('密码的长度需在6～20位以内');
      return
    }

    // 获取用户是否勾许"记住我"，勾许为true，不勾许为false
    let bStatus = $("input[type='checkbox']").is(":checked");  // 获取用户是否选择记住我，勾上代表true，没勾上代码false

    // 发起登录请求
    // 创建请求参数
    let SdataParams = {
   
      "user_account": sUserAccount,
      "password": sPassword,
      "remember_me": bStatus
    };

    // 创建ajax请求
    $.ajax({
   
      // 请求地址
      url: "/user/login/",  // url尾部需要添加/
      // 请求方式
      type: "POST",
      data: JSON.stringify(SdataParams),
      // 请求内容的数据类型（前端发给后端的格式）
      contentType: "application/json; charset=utf-8",
      // 响应数据的格式（后端返回给前端的格式）
      dataType: "json",
    })
      .done(function (res) {
   
        if (res.errno === "0") {
   
          // 注册成功
          messa