Blog项目——用户登录、登出
文章目录
一、用户登录
1. 分析
业务处理流程:
- 判断用户输入的账号是否为空
- 判断用户输入的密码是否为空,格式是否正确
- 判断用户输入的账号与密码是否正确
请求方法:POST
url定义:/user/login/
请求参数:url路径参数
参数 | 类型 | 前端是否必须传 | 描述 |
---|---|---|---|
user_account | 字符串 | 是 | 用户输入的账号可以是手机号也可以是用户名 |
password | 字符串 | 是 | 用户输入的密码 |
remember_me | 字符串 | 是 | 用户输入的“是否记住我” |
注:由于是post请求,在向后端发起请求时,需要附带csrf token
2. 流程
- 用户输入用户名或者手机,密码
- 判断每个值是否为空
- 判断每个值是否合法
- 利用ajax往后台传输数据(也是json格式)
- 后台接收数据
- 判断数据是否为空
- 利用form清洗数据
- 如果数据正确,就进行用户登录操作
- 如果数据不正确,则返回相应的错误原因
- 前台接收后台返回的数据
- 如果是正确的,则给客户展现正确的信息
- 如果是错误的,则给客户展现错误的信息
3. 代码
3-1 前端js
前端页面还是稍微比较简单,
- 首先就是获取表单元素(submit必须是form属性)
- 然后进行阻止默认提交
- 判断每个值是否为空是否合法
- 发送ajax到后台,然后接收后台传送数据
- 如果发送的是0,则设置定时器,判断上个页面的类,如果不是空或者注册页,则跳转上个页面,如果是空则直接跳转首页
- 如果发送的不是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