ES6
-
列举常用的ES6特性:
-
箭头函数需要注意哪些地方?
-
let、const、var
-
拓展:var方式定义的变量有什么样的bug?
-
Set数据结构
-
拓展:数组去重的方法
-
箭头函数this的指向。
-
手写ES6 class继承。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
微信小程序
-
简单描述一下微信小程序的相关文件类型?
-
你是怎么封装微信小程序的数据请求?
-
有哪些参数传值的方法?
-
你使用过哪些方法,来提高微信小程序的应用速度?
-
小程序和原生App哪个好?
-
简述微信小程序原理?
-
分析微信小程序的优劣势
-
怎么解决小程序的异步请求问题?
其他知识点面试
-
webpack的原理
-
webpack的loader和plugin的区别?
-
怎么使用webpack对项目进行优化?
-
防抖、节流
-
浏览器的缓存机制
-
描述一下二叉树, 并说明二叉树的几种遍历方式?
-
项目类问题
-
笔试编程题:
最后
技术栈比较搭,基本用过的东西都是一模一样的。快手终面喜欢问智力题,校招也是终面问智力题,大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了,建议回去补一下。
6. 若过期,则清除用户信息,回到未登录状态
✨✨✨技术栈
-
前端:JavaScript,Vue
- axios (发送请求的第三方库)
- element-plus (基于 Vue 3 的组件库,简化UI代码)
-
后端:Node.js
- express (简化请求响应代码)
- cors (解决跨域问题)
- bcryptjs(密码加密解密)
- jsonwebtoken(实现token的生成与验证)
✨✨✨效果图
登陆前
登录界面
登录成功
✨✨✨代码
表单验证及发送请求
<template>
<el-form
ref="ruleFormRef"
:model="ruleForm"
:rules="rules"
label-width="35rem"
>
<el-form-item prop="phone\_number" class="phone\_number">
<el-input
type="text"
placeholder="你的手机号/邮箱"
v-model="ruleForm.phone\_number"
/>
</el-form-item>
<el-form-item prop="password" class="password">
<el-input
type="password"
placeholder="密码"
v-model="ruleForm.password"
autocomplete="off"
/>
</el-form-item>
<el-form-item class="login\_in\_button">
<el-button type="primary" @click="submitForm(ruleFormRef)"
>登录</el-button
>
<el-button>注册</el-button>
</el-form-item>
</el-form>
</template>
<script lang="ts" setup>
import { reactive, ref } from "vue";
import type { FormInstance } from "element-plus";
import { ElMessage } from "element-plus";
import { LoginInPost } from "../../api/LoginIn";
import { useRouter } from "vue-router";
import axios from "axios";
import { useStore } from "../../../store.js";
import { storeToRefs } from "pinia";
const router = useRouter();
const store = useStore();
// const { islogin } = storeToRefs(store);
const formSize = ref("default");
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
phone_number: "",
password: "",
});
const checkPhonenumber = (rule: any, value: string, callback: any) => {
if (!value) {
callback(new Error("请输入注册时用的邮箱或者手机号呀"));
}
let re = /^[0-9]\*$/;
// 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 = /^[0-9a-zA-Z]\*$/;
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" }],
});
const submitForm = async (formEl: FormInstance | undefined) => {
if (!formEl) return;
await formEl.validate((valid, fields) => {
if (valid) {
let url = "http://localhost:3007/api/user\_register";
let dataObject = reactive({
phoneNumber: ruleForm.phone_number,
password: ruleForm.password,
});
try {
LoginInPost(dataObject).then(function (res) {
// console.log(res.data.token);
if (res.data.status == 0) {
store.loginIn();
localStorage.setItem("token",res.data.token);
router.go(-1);
} else if (res.data.status == 403) {
ElMessage({ message: res.data.message, offset: 200 });
}
});
} catch (error) {
console.log(error);
}
} else {
console.log("error submit!", fields);
}
});
};
</script>
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
### 总结
**前端资料汇总**
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**
![](https://img-blog.csdnimg.cn/img_convert/6e0ba223f65e063db5b1b4b6aa26129a.png)
* 框架原理真的深入某一部分具体的代码和实现方式时,要多注意到细节,不要只能写出一个框架。
* 算法方面很薄弱的,最好多刷一刷,不然影响你的工资和成功率😯
* 在投递简历之前,最好通过各种渠道找到公司内部的人,先提前了解业务,也可以帮助后期优秀 offer 的决策。
* 要勇于说不,对于某些 offer 待遇不满意、业务不喜欢,应该相信自己,不要因为当下没有更好的 offer 而投降,一份工作短则一年长则 N 年,为了幸福生活要慎重选择!!!
喜欢这篇文章文章的小伙伴们点赞+转发支持,你们的支持是我最大的动力!