当前位置:首页 » 《休闲阅读》 » 正文

前端高频面试题2024/9/22(偏项目问题--通用后台管理系统)

8 人参与  2024年10月15日 14:01  分类 : 《休闲阅读》  评论

点击全文阅读


文章目录

一.前端项目概述1.系统登录注册模块1.对注册的密码进行加密 (使用加密中间件bcrypt.js)2.登录成功后返回token3.前端登录页面有用到弹性布局,ref和reactive4.登录头像:文件上传 2.系统设置模块2.系统首页模块(轮播图+栅格布局+dialog弹窗)1.弹窗+富文本编辑器wangeditor 3.系统概览模块(echart组件可视化信息,快速点击入口)1.用了哪些echart图? 4.用户管理模块1.前端完成分页功能(实现一个算法)2.用户赋权问题 二.针对项目可能问的问题1.用ts吗?说一下你常用的知识点。2.vue3和vue2的区别。3.说一下你项目中的难点,是怎样解决的?4.我看你项目中用过node.js,说一下你对前端用node.js的看法5.你为什么选择用express框架,express和koa的区别6.说一下computed和watch的区别,及实现原理7.你工作中有没有自己写过组件,你觉得写组件的原则是什么?8.用过哪些设计模式?什么场景下会遇到9.你对高内聚,低耦合怎么理解?10.做过哪些性能优化?11.用过哪些加密方式,都怎么用的?12.ref和reactive的区别?(组件间传值会用上)13.Dialog对话框是什么?14.解构赋值是什么?15.你这里的文件上传是怎么做的?16.项目中有遇到哪些错误吗?17.项目中前端你是如何发送请求的?(写一下原生ajax发送请求)18.基于promise怎么封装这个axios请求?19.说一下事件循环?20.多端适配怎么做?21.echart了解到什么程度,底层是用canvas和re-render22.路由传参query和params区别23.

一.前端项目概述

在这里插入图片描述

1.系统登录注册模块

前端通过ts限制数据类型,后端通过joi限制数据类型
这里的这个joi是对输入数据进行限制的中间件
!!

1.对注册的密码进行加密 (使用加密中间件bcrypt.js)
对密码进行加密bcrypt.jsreginfo.password = bcrypt.hashSync(reginfo.password,10)//10是指加密后的长度

这里后端解密(compareSync),其实也不是真正的解密,这种密码一般都是不可逆的

const compareResult = bcrypt.compareSync(loginfo.password,result[0].password)
2.登录成功后返回token

生成返回给前端的token

res.send({results:results[0]status:0message:"登录成功"token:'Bearer'+tokenStr})
3.前端登录页面有用到弹性布局,ref和reactive

弹性布局:flex

display:flexjustify-content:space-between

ref:通常用来定义基本数据类型
reactive:如果使用的是数组和对象,就要使用reactive

const activeName = ref('first')const loginData = reactive({account:'',password:'',})
4.登录头像:文件上传

Multer是一个node.js中间件
用于处理multipart/form-data类型的表单数据
它主要用于上传文件
!!!
通常情况下,上传图片后,这个图片会和上传该图片的用户绑定
我之前做这个部分的时候,用的是image_url绑定的,事实上,用image_url绑定容易出错,可能会出现相同的url地址。
后来的解决方案是使用onlyid去分别绑定图片的地址,然后用这个onlyid去绑定用户
onlyid是使用node.js的crypto库随机生成的。

2.系统设置模块

pinia:因为我们当前的数据是多组件共用的一个数据
pinia是vue的专属状态管理库
它允许你跨组件或页面共享状态

封装了一个面包屑组件

2.系统首页模块(轮播图+栅格布局+dialog弹窗)

首页基本布局:
在这里插入图片描述

1.弹窗+富文本编辑器wangeditor

在这里插入图片描述

3.系统概览模块(echart组件可视化信息,快速点击入口)

在这里插入图片描述

1.用了哪些echart图?

饼状图,柱状图,环形图,折线图

4.用户管理模块

在这里插入图片描述

1.前端完成分页功能(实现一个算法)

在这里插入图片描述

2.用户赋权问题

本系统做的是一个企业管理系统,在企业中不同的岗位有不同的权限,因此我们需要做一个用户赋权的判断。
其实就是一个dialog弹窗,里面有一个单选
在这里插入图片描述

二.针对项目可能问的问题

1.用ts吗?说一下你常用的知识点。

2.vue3和vue2的区别。

1.vue3中引入组合式api,在setup()中可以更加灵活的组合和复用逻辑,vue2中逻辑分布在data,computed,methods中,有局限性。
2.vue3更好的支持ts
3.生命周期不同,vue3生命周期是setup(),onbeforeMount,onMounted,onbeforeUpdate,onUpated,onbeforeUnMount,onUnmounted
4.vue2使用vuex,vue3使用pinia

3.说一下你项目中的难点,是怎样解决的?

图片上传部分,不能直接根据图片url进行绑定用户,因为它这个图片地址可能是一样的,我们需要为头像创建一个唯一id,通过这个唯一id去绑定用户

4.我看你项目中用过node.js,说一下你对前端用node.js的看法

node.js是一个基于chorme V8引擎的JavaScript运行环境。

5.你为什么选择用express框架,express和koa的区别

6.说一下computed和watch的区别,及实现原理

7.你工作中有没有自己写过组件,你觉得写组件的原则是什么?

写过一些小组件,比如面包屑组件,就是一个导航列表,显示你现在正在哪个功能目录下,比如:用户管理模块–>产品管理员这种
还有头组件,页面底部组件这些
原则是可复用性高,能够是代码更简洁,减少代码量比较好

8.用过哪些设计模式?什么场景下会遇到

发布订阅模式
像数据双向绑定,事件总线都是用的发布订阅模式

9.你对高内聚,低耦合怎么理解?

10.做过哪些性能优化?

数据缓存机制,将用户信息缓存在本地,因为很多组件都要用到这个信息
上传大文件是用的异步上传,几个切片并行上传,节省了时间,提高了性能

11.用过哪些加密方式,都怎么用的?

1.有用过一个加密中间件,是一个密码哈希函数,叫bcrypt.hashSync()
用在系统登录注册模块,前端将用户密码传到数据库的时候,传的其实是加密后的密码,下次再判断用户密码是否正确时,就把用户输入的密码加密,将加密后的内容与数据库中存放的加密密码比较,如果相同,就表示用户输入的密码是正确的。

12.ref和reactive的区别?(组件间传值会用上)

ref和reactive都可以用来创建响应式数据
1.ref一般用来定义基本数据类型的响应式数据,而reactive通常用来定义对象数组这种复杂的数据类型。
2.当你给ref赋值时,vue会自动将值包装到一个带有.value属性的对象中,因此,后面访问,可以通过ref.value来修改这个值

import {ref} from 'vue'const count = ref(0)console.log(count.value)count++console.log(count.value)

3.当你用reactive创建一个响应式数据时,赋值给他的对象不会被包装,你可以直接访问他的属性

import {reactive} from 'vue'const state = reactive({count:0;})console.log(state.count)state.count++console.log(state.count)

13.Dialog对话框是什么?

就是一个弹窗,这个对话框的内容可以是任何东西,甚至可以是一个表格或表单。

//控制弹窗,默认关闭const state = reactive({forgetpasswordDialog:false})//打开弹窗const open=()=>{state.forgetpasswordDialog=true}

14.解构赋值是什么?

15.你这里的文件上传是怎么做的?

上传头像部分,是使用node.js里面的multer来实现的。

16.项目中有遇到哪些错误吗?

通常情况下,上传图片后,这个图片会和上传该图片的用户绑定
我之前做这个部分的时候,用的是image_url绑定的,事实上,用image_url绑定容易出错,可能会出现相同的url地址。
后来的解决方案是使用onlyid去分别绑定图片的地址,然后用这个onlyid去绑定用户
onlyid是使用node.js的crypto库随机生成的。

17.项目中前端你是如何发送请求的?(写一下原生ajax发送请求)

我的项目是基于vue做的,我用的是axios方法

axios.get("https://api.example.com/data").then(response=>{console.log(response.data)}).catch(error=>{console.error('Error fetching data: ', error)}

18.基于promise怎么封装这个axios请求?

定义一个函数将axios封装起来

function fetchData(url){return new promise(resolve,reject)=>{axios.get(url).then(response=>{resolve(response.data)}).catch(error=>{reject("error",error)})}}//调用封装好的函数fetchData("https://api.com/data").then(data=>{console.log(data)}.catch(error=>{console.error('Error fetching data: ', error)}))

19.说一下事件循环?

20.多端适配怎么做?

21.echart了解到什么程度,底层是用canvas和re-render

22.路由传参query和params区别

query类似于get,参数会拼接到地址栏中显示,数据不会丢失
params类似于post,参数不会显示在地址栏,相对于query传参比较安全,但是传参过去后,参数保存在内存中,再次刷新页面或跳转到其他页面时数据会丢失。

23.


点击全文阅读


本文链接:http://zhangshiyu.com/post/172131.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1