登录功能的实现（包括前后端）_前端登录功能实现(1)

<el-form-item class="login\_in\_button">
  <el-button type="primary" @click="submitForm(ruleFormRef)"
    >登录</el-button
  >
  <el-button>注册</el-button>
</el-form-item>

 **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
})
}

 **登录验证**

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,
跳槽是每个人的职业生涯中都要经历的过程，不论你是搜索到的这篇文章还是无意中浏览到的这篇文章，希望你没有白白浪费停留在这里的时间，能给你接下来或者以后的笔试面试带来一些帮助。

也许是互联网未来10年中最好的一年。WINTER IS COMING。但是如果你不真正的自己去尝试尝试，你永远不知道市面上的行情如何。这次找工作下来，我自身感觉市场并没有那么可怕，也拿到了几个大厂的offer。在此进行一个总结，给自己，也希望能帮助到需要的同学。

面试准备

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

面试准备根据每个人掌握的知识不同，准备的时间也不一样。现在对于前端岗位，以前也许不是很重视算法这块，但是现在很多公司也都会考。建议大家平时有空的时候多刷刷leetcode。算法的准备时间比较长，是一个长期的过程。需要在掌握了大部分前端基础知识的情况下，再有针对性的去复习算法。面试的时候算法能做出来肯定加分，但做不出来也不会一票否决，面试官也会给你提供一些思路。