react-bn-面试

1.主要内容

工作台待办

实现思路：

1，待办list由后端返回，固定需要的字段有id(查详细)、type(本条待办的类型)，还可能需要时间，状态等
2，一个集中处理待办中转路由页，所有待办都跳转到这个页面然后用逻辑控制显示内容
3，动态待办子页面单独处理需要的逻辑
4，每次改变type的值都在redux中取
5，所有跟type相关的组件都做成一个配置文件，方便后续添加新组件

代码：

const toDoTask=(item)=>{console.log(item);const isComp=type2Comp[item.type]console.log(isComp);dispatch(setDyComp(item.type))if(isComp){//跳转路由navigate(`/todo/${item.id}`)}else{console.error(`Unknown type: ${item.type}`);}
}

中转页核心代码：

function withDynamicComponent(Component, parentProps) {if (!Component) {return <div>Component not found</div>;}return (<React.Suspense fallback={<div>Loading...</div>}><Component props={parentProps} /></React.Suspense>);
}

type配置：

import Tax from '../tax/index'
import Apply from '../apply/index'
import Mail from '../mail/index'
import Text from '../text/index'
export const type2Comp = {tax: Tax,mail: Mail,text: Text,apply: Apply,// 增加一个路由就增加一个配置组件//这里还应该考虑一个type 可能有多个子页面，这种情况可以在子页面通过status再写子页面，类似树结构};

动态子组件

function Apply({props}) {return <div>apply<div>{props.name}</div><div>{props.id}</div></div>;}export default Apply;

登录

Cookie + Session 登录
Token 登录
SSO 单点登录

相关资料：https://blog.csdn.net/beekim/article/details/135130179

权限管理

1.接口权限（登录后存token，通过axios请求拦截器进行拦截，每次请求的时候头部携带token）
2.路由权限\菜单权限:a.路由的name、path、component统一存在后端，由后端返回。配置信息也可以提供界面统一管理。b.后端返回后，路由通过addRoute动态挂载，将component字段换为真正的组件（注意vite项目：import.meta.glob）c.将菜单和路由存在vuex/pinia实时变更页面3.按钮权限a.在登录的时候拉取按钮权限编码code['EXPORT_LIST','OPEN_MODAL']b.将编码缓存本地c.页面通过v-if控制按钮或是自义定指令控制按钮extra:
前端控制权限
//1.在路由配置中配置白名单
{name: "Login",path: "/login",component: () => import("@/views/Login.vue"),meta:{whiteList:['admin','tom']}},//2.在路由守卫beforeEach中判断当前用户角色是否在meta中，是就next()

正式的项目中，权限管理一般都是在后台维护的，也就是用户登录后，从接口获取该用户权限信息（菜单权限，按钮权限等）。要实现该功能，前端项目得提供基础功能用于维护，功能如下：

必备：
1，用户管理
简介：用户基础信息2，角色管理
简介：配置每个用户的角色，一个用户可以有多个角色
作用：
a，可以在给每个角色配置上他能看到的菜单
b，后台可以根据角色来控制列表的数据权限，列表根绝相应的角色和部门信息返回不同的值
c，按钮权限控制也是要通过角色来配置3，菜单管理
简介：配置项目中的菜单信息和按钮权限
参数：
*菜单类型：一级菜单、子菜单、按钮权限
*菜单名称：xxx
*访问路径：xxx（path）
*前端组件：xxx（component/element的位置）
其他参数：角色、图标、序号等注：
type为子菜单时要显示父级菜单。
type按钮权限时要配置权限的编码code，方便使用时匹配对应的权限其他：
部门管理
数据字典
分类字典

在项目中具体怎么使用？

1，获取菜单后怎么渲染？
2，怎么控制按钮权限？

1，获取菜单后怎么渲染？

通过接口返回后，就前端代码只需要写一个公共方法处理返回的data->项目能识别的路由

怎么识别？

import React, { Suspense } from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';// 模拟从接口返回的字符串
const getElementFromApi = async () => {// 假设接口返回的字符串是组件的路径return 'pages/Home'; // 例如：'pages/Home'
};// 动态导入组件的函数
const loadComponent = async (componentPath) => {try {const { default: Component } = await import(`./${componentPath}`);return Component;} catch (error) {console.error('Error loading component:', error);return null;}
};const App = () => {const [routes, setRoutes] = React.useState([]);React.useEffect(() => {const fetchRoutes = async () => {const elementPath = await getElementFromApi();const Component = await loadComponent(elementPath);if (Component) {setRoutes([{path: '/',element: <Component />,},]);}};fetchRoutes();}, []);return (<Router><Suspense fallback={<div>Loading...</div>}><Routes>{routes.map((route, index) => (<Route key={index} path={route.path} element={route.element} />))}</Routes></Suspense></Router>);
};export default App;

2，怎么控制按钮权限？

写一个hooks接受按钮权限编码code
a，在hooks查接口判断有没有权限
b，在登录时查询所有按钮权限编码['EXPORT_LIST','OPEN_MODAL']，缓存在本地，然后再在hooks去查本地有没有权限

文件上传

普通的文件上传

核心部分：
//创建流式读取器
const reader=new FileReader();
reader.readAsDataURL(this.files[0])//input读取完成后自动执行onload函数reader.onload=function(e){preview.src=e.target.resultconsole.log(e.target.result);//读取完成后将e.target.result传给服务器//ajax....
}const formData = new FormData();
formData.append('BizType', props.bizType);//设置文件类型（合同材料，）
formData.append('file', resultFile);//文件
formData.append('businessId', props.businessId);//其他参数const temp: any = await useUpLoadingUrl(fileParam.value);上传成功后，会返回对应文件的下载地址用于回显注意：这里没有考虑大文件上传，后台限制文件最大为50M

大文件上传（分片）：

  <input type="file" id="fileInput" /><button id="uploadButton">上传</button><div id="progress"></div><script>
document.getElementById('uploadButton').addEventListener('click', async () => {const fileInput = document.getElementById('fileInput') as HTMLInputElement;const file = fileInput.files?.[0];if (!file) {alert('请选择一个文件');return;}const chunkSize = 1024 * 1024; // 每个分片的大小，1MBconst totalChunks = Math.ceil(file.size / chunkSize);const uploadProgress = document.getElementById('progress') as HTMLDivElement;for (let i = 0; i < totalChunks; i++) {const start = i * chunkSize;const end = Math.min(start + chunkSize, file.size);const chunk = file.slice(start, end);const formData = new FormData();formData.append('file', chunk, file.name);formData.append('chunkIndex', i.toString());formData.append('totalChunks', totalChunks.toString());try {const response = await fetch('/upload', {method: 'POST',body: formData,});if (!response.ok) {throw new Error('上传失败');}const progress = ((i + 1) / totalChunks * 100).toFixed(2);uploadProgress.innerText = `上传进度: ${progress}%`;} catch (error) {console.error('上传出错:', error);alert('上传失败');return;}}alert('上传完成');
});
</script>

改造？
老的文件上传所有文件存在阿里云上的，后续的投标时，需要批量下载投标材料，阿里云上无法确认文件的准确性。
改造后将所有上传的文件分类（身份证信息，毕业证信息等），存在公司自己的nas盘方便集中管理

如果文件为图片，后台有限制不能超过固定宽高，不同手机拍的照片上传后会有翻转的情况限制宽高：
exif.js插件获取到旋转参数
判断图片方向，重置canvas大小，确定旋转角度，
image.onload里面获取图片宽高，判断是否满足，不满足的话就就创建canvas裁剪
var canvas = document.createElement('canvas');
var context: any = canvas.getContext('2d');
context.drawImage(image, 0, 0, drawWidth * 0.8, drawHeight);
//返回校正图片
next(canvas.toDataURL(v.file.type));

socket聊天

其他常见场景：
https://vue3js.cn/interview/http/WebSocket.html#%E4%BA%8C%E3%80%81%E7%89%B9%E7%82%B9

项目中用到的：advance-chat+socket.io
难点：
1.替换advance-chat源码中后台的firebase
看了源码，firebase有普通接口请求和ws事件请求两种功能，所以将相关代码拆成两块：普通接口，ws事件。再基于对soket.io的封装对firebase中关于ws事件那一块改写
2.socket.io的封装

1.本地创建了一个简单的node服务
/* 这里就是当客户端socket连接到服务端socket的生命周期 */
io.on("connection", function (socket) {/* io.emit(事件名,参数) */io.emit("message", "恭喜连接成功" );// 接受前台发过来的消息socket.on("sendToServer", (message) => {console.log(message);// 向客户端发送消息// socket.emit("sendToClient", {//   message: "你好我是服务端，让我们来聊天呀",// });});
});/* 指定连接的地址 */this.socket = io('ws://localhost:3333');this.socket.connect();//监听后台给前台发的消息this.socket.on('message', (message) => {console.log('我是客户端,接收到了数据', message);//业务逻辑if (message.type === 'getMsg') {console.log(message.id);this.getAutoChatData(message.roomId);}});//前台给后台发的消息this.socket.emit('sendToServer', {message: '我是客户端,来陪我聊聊',});

更多细节见之前写的文章：
https://blog.csdn.net/beekim/article/details/135130179

几个重要的ws事件：
MessageUpdate 监听房间内的消息
RoomUpdate 监听左侧房间list
LastMessageUpdate 监听最后一条消息
如果ws监听到变化，就在相应的回调函数中更新页面上的数据

加解密

这一块主要看计算机网络方面的非对称加密：

非对称加密是一种加密方法，使用一对密钥：公钥和私钥。公钥用于加密数据，私钥用于解密数据。
公钥可以公开发布，而私钥必须保密。加密过程：发送方使用接收方的公钥对数据进行加密，加密后的数据只能通过接收方的私钥解密。
解密过程：接收方使用自己的私钥对加密数据进行解密，恢复原始数据。

H5-原生相机

需求：在h5做身份证件拍照然后上传
方案：
利用 navigator.mediaDevices.getUserMedia 打开摄像头，将视频流放入 video 标签的 src 中，再通过 canvas.drawImage 的方法，以 video 对象为画布源，绘制最终拍照的图
问题：
1，安卓可以正常用video打开相机，ios有问题,打开时全屏的。
解决方案：

 <video ref="video"  id="video-fix" :width="width" :height="height"autoplay   webkit-playsinline playsinline></video>ios端video标签必须加webkit-playsinline、playsinline属性。
android端部分视频也会存在自动全屏问题，添加webkit-playsinline属性。

2，拍出来的照片默认是640*480 ，照片不清晰
解决方案：

<video ref="video"  id="video-fix" width="1280" height="720" autoplay   webkit-playsinline playsinline></video>
<canvas ref="canvas" style="display: none" width="1280" height="720"></canvas>video宽高要设置成 4:3或16:9才行,这里我设置成了1280*720

3，本地local能打开电脑前置，不是最终效果
localhost 只能调起电脑的前置摄像头，无法在手机本地调试。这是因为浏览器的安全限制，必须使用 https 才可以。所以需要让运维升级测试环境为https。所在在使用后置摄像头调试时非常麻烦，建议将需要调试的参数都设置成变量再逐一调试。

4，部分手机打开相机默认是放大的(手动设置焦距)

5，ios的css样式bug

原因是ios的游览器识别不到video实时的offsetHeight的值，所以在识别不到的时候，手动设置一下遮罩层的高度就可以了。
videoHeight.value=video.value.offsetHeight
if(video.value.offsetHeight<400){//解决ios不能获取到实时的offsetHeight的问题videoHeight.value=600
}

详细文档：https://blog.csdn.net/beekim/article/details/143680213?spm=1001.2014.3001.5502

H5-pdf文件预览

需求：有一个H5项目要嵌入我们的主项目,嵌入方案是用的iframe，但是在H5项目中需要预览pdf文件，这里再用Iframe就会出问题。

在多次查找和尝试后解决了预览pdf的问题：
方案：借助pdfjs插件，将pdf文件流/pdf下载链接，传入pdfjs，插件会读取文件并识别出一些文件信息，把pdf转为图片。我们再将图片绘制到cavans上就可以完美解决这个问题了。

核心代码如下：

<template><div ref="showpdfRef"></div>
</template><script setup>
import { ref } from 'vue';
import { getDocument } from 'pdfjs-dist/legacy/build/pdf.mjs';
import 'pdfjs-dist/build/pdf.worker.mjs';const showpdfRef = ref(null);const pdfPath ='xxxxxxxx'const loadingTask = getDocument(pdfPath);
loadingTask.promise.then(async (pdf) => {const canvas = document.createElement('canvas');const context = canvas.getContext('2d');// 循环遍历每一页pdf，将其转成图片for (let i = 1; i <= pdf._pdfInfo.numPages; i++) {// 获取pdf页const page = await pdf.getPage(i);// 获取页的尺寸const viewport = page.getViewport({ scale: 1 });// 设置canvas的尺寸canvas.width = viewport.width;canvas.height = viewport.height;// 将pdf页渲染到canvas上await page.render({ canvasContext: context, viewport: viewport }).promise;// 将canvas转成图片，并添加到页面上const img = document.createElement('img');img.src = canvas.toDataURL('image/png');showpdfRef.value.appendChild(img);}}).then(function () {console.log('# End of Document');},function (err) {console.error('Error: ' + err);},);
</script><style scoped></style>

详细文档：https://blog.csdn.net/beekim/article/details/144857593?spm=1001.2014.3001.5502

3.补充内容

flex

//容器属性
flex-direction
flex-wrap
flex-flow//flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
justify-content
align-items//flex-start、flex-end、center、baseline、stretch
align-content//属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用//项目属性
order//设置顺序
flex-grow//设置放大比例(剩余空间分配比例（默认为0，不扩展）)
flex-shrink//宽度不够时设置缩小比列(空间不足时收缩比例（默认为1，可收缩）)
flex-basis//项目在分配剩余空间前的初始大小
flex//flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选
align-self//允许单个项目有与其他项目不一样的对齐方式

常见问题：
如何实现水平垂直居中？

.container {display: flex;justify-content: center; /* 主轴居中 */align-items: center;     /* 交叉轴居中 */
}

如何实现「圣杯布局」（Header + Footer + 自适应内容区）？

.container {display: flex;flex-direction: column;min-height: 100vh;
}
.header { height: 60px; }
.content { flex: 1; } /* 占据剩余空间 */
.footer { height: 100px; }

flex-basis 和 width 的优先级

若 flex-direction: row，flex-basis 优先级高于 width若 flex-basis 为 auto，则使用 width 的值例外：min-width/max-width 会限制 flex-basis。

flex-shrink: 0 的作用

禁止项目在空间不足时收缩，常用于固定侧边栏：
.sidebar {flex: 0 0 250px; /* flex-grow:0, flex-shrink:0, flex-basis:250px */
}

为什么设置 flex:1 的项目宽度不一致？
原因：若项目内容长度差异大，且 flex-basis:0（即 flex:1），浏览器会优先按内容比例分配空间。

解决：设置 min-width: 0 或 overflow: hidden 重置内容最小尺寸。
Flex 布局中 margin: auto 的特殊效果
现象：在 Flex 项目中，margin: auto 会吸收剩余空间，实现特定对齐效果。

示例：单个项目右对齐 → margin-left: auto。

line-height:120% 和line-height:1.2区别？