网站国际互联网备案号,WordPress考勤模板,电子商务网站建设的准备工作有哪些,网站首页确认书1.主要内容
工作台待办 实现思路#xff1a;
1#xff0c;待办list由后端返回#xff0c;固定需要的字段有id(查详细)、type(本条待办的类型)#xff0c;还可能需要时间#xff0c;状态等
2#xff0c;一个集中处理待办中转路由页#xff0c;所有待办都跳转到这个页面…1.主要内容
工作台待办 实现思路
1待办list由后端返回固定需要的字段有id(查详细)、type(本条待办的类型)还可能需要时间状态等
2一个集中处理待办中转路由页所有待办都跳转到这个页面然后用逻辑控制显示内容
3动态待办子页面单独处理需要的逻辑
4每次改变type的值都在redux中取
5所有跟type相关的组件都做成一个配置文件方便后续添加新组件代码
const toDoTask(item){console.log(item);const isComptype2Comp[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 divComponent not found/div;}return (React.Suspense fallback{divLoading.../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 divapplydiv{props.name}/divdiv{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.globc.将菜单和路由存在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
*访问路径xxxpath
*前端组件xxxcomponent/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 (RouterSuspense fallback{divLoading.../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 readernew FileReader();
reader.readAsDataURL(this.files[0])//input读取完成后自动执行onload函数reader.onloadfunction(e){preview.srce.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 typefile idfileInput /button iduploadButton上传/buttondiv idprogress/divscript
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-chatsocket.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 refvideo idvideo-fix :widthwidth :heightheightautoplay webkit-playsinline playsinline/videoios端video标签必须加webkit-playsinline、playsinline属性。
android端部分视频也会存在自动全屏问题添加webkit-playsinline属性。2拍出来的照片默认是640*480 照片不清晰 解决方案
video refvideo idvideo-fix width1280 height720 autoplay webkit-playsinline playsinline/video
canvas refcanvas styledisplay: none width1280 height720/canvasvideo宽高要设置成 4:3或16:9才行,这里我设置成了1280*7203本地local能打开电脑前置不是最终效果 localhost 只能调起电脑的前置摄像头无法在手机本地调试。这是因为浏览器的安全限制必须使用 https 才可以。所以需要让运维升级测试环境为https。所在在使用后置摄像头调试时非常麻烦建议将需要调试的参数都设置成变量再逐一调试。
4部分手机打开相机默认是放大的(手动设置焦距)
5ios的css样式bug
原因是ios的游览器识别不到video实时的offsetHeight的值所以在识别不到的时候手动设置一下遮罩层的高度就可以了。
videoHeight.valuevideo.value.offsetHeight
if(video.value.offsetHeight400){//解决ios不能获取到实时的offsetHeight的问题videoHeight.value600
}详细文档https://blog.csdn.net/beekim/article/details/143680213?spm1001.2014.3001.5502
H5-pdf文件预览
需求有一个H5项目要嵌入我们的主项目,嵌入方案是用的iframe但是在H5项目中需要预览pdf文件这里再用Iframe就会出问题。 在多次查找和尝试后解决了预览pdf的问题 方案借助pdfjs插件将pdf文件流/pdf下载链接传入pdfjs插件会读取文件并识别出一些文件信息把pdf转为图片。我们再将图片绘制到cavans上就可以完美解决这个问题了。
核心代码如下
templatediv refshowpdfRef/div
/templatescript 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 xxxxxxxxconst 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);},);
/scriptstyle scoped/style
详细文档https://blog.csdn.net/beekim/article/details/144857593?spm1001.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: rowflex-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区别
