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.result
    console.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; // 每个分片的大小，1MB
  const 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区别？