2024年最新登录功能的实现（包括前后端）_前端登录功能实现(1)，2024年最新大厂几面-CSDN博客

本文链接：https://blog.csdn.net/2401_84618790/article/details/138908315

紧跟潮流

大前端和全栈是以后前端的一个趋势，懂后端的前端，懂各端的前端更加具有竞争力，以后可以往这个方向靠拢。

这边整理了一个对标“阿里 50W”年薪企业高级前端工程师成长路线，由于图片太大仅展示一小部分

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

let re = /¹*$/;
// console.log(value.length);
// ||value.length != 11
if (!re.test(value)) {
// console.log(re.test(value));
callback(new Error(“输入格式有误哟”));
} else {
callback();
}
};

const checkPassword = (rule: any, value: string, callback: any) => {
if (!value) {
return callback(new Error(“请输入密码呀”));
}
let re = /²*$/;

if (!re.test(value)) {
// console.log(re.test(value));
return callback(new Error(“输入格式有误哟”));
} else {
return callback();
}
};

const rules = reactive({
phone_number: [{ validator: checkPhonenumber, trigger: “blur” }],
password: [{ validator: checkPassword, trigger: “blur” }],
});


 **axios封装**


 **index.js**

import db from “…/db/user_db.js”
import bcrypt from “bcryptjs”
import jwt from “jsonwebtoken”
import config from “…/config.js”

export async function regUser(req, res) {
try {
// console.log(req.body);
const data = req.body;
// console.log(data.phoneNumber);
const selectSql = “select * from users where phoneNumber=?”;
let [result] = await db.query(selectSql, data.phoneNumber)
.catch(err => { console.log(err) });
// console.log(result.length);
//号码已占用
if (result.length > 0) {
throw new Error(res.send({
status: 403,
message: “电话号码已注册过了嗷”,
}))
}

    //对密码进行加密
    // console.log(data.password);
    data.password = bcrypt.hashSync(data.password, 10);
    console.log(data.password);
    const insertSql = "insert into users set ?";

    const insertStr = { phoneNumber: data.phoneNumber, password: data.password };
    [result] = await db.query(insertSql, insertStr)
        .catch(err => { console.log(err) });
    // console.log(result.affectedRows);
    if (result.affectedRows != 1) {
        res.send({
            status: 403,
            message: "请求失败",
        })
    }
    res.send({
        status: 0,
        message: "请求成功",
    })
} catch (err) {
    res.send({
        status: 403,
        message: "请求失败",
        desc: err.message
    })

}

}

export async function loginUser(req, res) {
try {
// console.log(req.body);
const data = req.body;
// console.log(data.phoneNumber);
const selectSql = “select * from users where phoneNumber=?”;
let [result] = await db.query(selectSql, data.phoneNumber)
.catch(err => { console.log(err) });
// console.log(result);
//无注册账号
if (result.length == 0) {
return res.send({
status: 403,
message: “无注册账号”,
})
}

    //验证密码
    // console.log(result[0].password);
    const compareResult = bcrypt.compareSync(data.password, result[0].password);
    if (compareResult == 0) {
        return res.send({
            status: 403,
            message: "密码错误",
        })
    }

    const user = { ...result[0], password: '' };
    console.log(user);
    const tokenStr = jwt.sign(user, config.jwtSecretKey, { expiresIn: "10h" });
    return res.send({
        status: 0,
        message: "登录成功",
        token: tokenStr
    })
} catch (err) {
    return res.send({
        status: 403,
        message: "请求失败",
        desc: err.message
    })

}

}

export async function GetInfo(req, res) {
console.log(req.headers.authorization);
const token = req.headers.authorization;
if (!token) {
return res.send({
status: 403,
message: “无token”
})
}
try{
const flag = jwt.verify(token, config.jwtSecretKey);
if (flag) {
return res.send({
status: 0,
message: “验证成功”
})
} else {
return res.send({
status: 403,
message: “token错误”
})
}
}catch(err){
return res.send({
status: 403,
message: “token已过期”
})
}

}


 **request.js**

// http/axios.js
import instance from “./index”
/**
* @param {String} method 请求的方法：get、post、delete、put
* @param {String} url 请求的url:
* @param {Object} data 请求的参数
* @param {Object} config 请求的配置
* @returns {Promise} 返回一个promise对象，其实就相当于axios请求数据的返回值
*/

export const axios = ({
method,
url,
data,
config
}) => {
method = method.toLowerCase();
if (method == ‘post’) {
return instance.post(url, data, {…config})
} else if (method == ‘get’) {
return instance.get(url, {
params: data,
…config
})
} else if (method == ‘delete’) {
return instance.delete(url, {
params: data,
…config
}, )
} else if (method == ‘put’) {
return instance.put(url, data,{…config})
} else {
console.error(‘未知的method’ + method)
return false
}
}


 **Login.js**

import { axios } from “…/utils/request”

export const LoginInPost = (data) => {
return axios({
url: “http://localhost:3007/api/user_login”,
method: “post”,
data
})
}

export const GetUsersInfo = (data) => {
return axios({
url: “http://localhost:3007/api/get_info”,
method: “get”,
data
})
}


 **登录验证**

    //验证密码
    // console.log(result[0].password);
    const compareResult = bcrypt.compareSync(data.password, result[0].password);
    if (compareResult == 0) {
        return res.send({
            status: 403,
            message: "密码错误",
        })
    }

    const user = { ...result[0], password: '' };
    console.log(user);
    const tokenStr = jwt.sign(user, config.jwtSecretKey, { expiresIn: "10h" });
    return res.send({
        status: 0,
        message: "登录成功",
        token: tokenStr
    })
} catch (err) {
    return res.send({
        status: 403,
        message: "请求失败",
        desc: err.message
    })

}

}


  
#### 总结

=============================================================

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础



![](https://img-blog.csdnimg.cn/img_convert/3e0d5b0f6a97b823cc1ef22ff1a18191.png)

第二阶段:移动端开发技术



![](https://img-blog.csdnimg.cn/img_convert/fc21db0a800494796dc6408ce1486031.png)



第三阶段:前端常用框架



![](https://img-blog.csdnimg.cn/img_convert/644efd4ddd0f8d43535f1982ec0da6e4.png)



*   推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。



*   大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。