网站建设与管理大纲,北京企业网站seo平台,seo顾问服务福建,网站开发的推荐前言 最近在开发中#xff0c;由于是合作开发。双方已经有自己的前后端代码#xff0c;最终需要整合代码上线测试 由于模块功能不同#xff0c;双方ui并没有提前统一设计风格#xff0c;并且已经开发完毕。 前后端如果直接合并到对方项目#xff08;前端-有各种冲突-后端…前言 最近在开发中由于是合作开发。双方已经有自己的前后端代码最终需要整合代码上线测试 由于模块功能不同双方ui并没有提前统一设计风格并且已经开发完毕。 前后端如果直接合并到对方项目前端-有各种冲突-后端鉴权-业务场景不一样导致....... 后来最好的解决办法就是通过iframe标签带参数来回切换对方项目
实现步骤
1.首先思路明确文档能力- 双方前端项目合并可能出现问题 前端工程已经分离社会端监管端支队-总队-服务端登录方式不一鉴权方式不一 整体布局风格不统一代码规范不统一公共组件不统一合并之后需要大量时间修改调整细节 命名冲突合并代码之后可能应为组件名路由名文件资源名类名重名导致代码报错需要修改多处 前端用户体系框架业务代码已经完善合并之后冲突。导致业务逻辑代码需要大量时间重构调试 前端工程分开独立部署可以通过代码层面区分社会端监管端支队-总队-服务端。合并之后无法区分 前端全局处理机制不一样合并之后冲突。导致统一处理失效。全局状态码-统一错误处理机制处理 前端第三方库版本不一合并之后。可能因为部分库版本对不上导致部分api功能失效出现兼容性问题
2.代码实现
// HTML代码
divclassapp-haiyunv-ifsirenindex 2 iframe:srciframeUrlstylewidth: 100%; height: 100%; border: 0/iframe/div// 传递地址访问别人项目-别人项目接受参数免登录-浏览器缓存问题
// 3个参数
// 第一个参数当前时间戳-防止第二个项目有默认路径参数导致参数取不到-防止iframe请求参数一样导致浏览器触发缓存导致boday加载不出来第二个项目
// 第二个参数第二个项目token-拿来做免登录处理
// 第三个参数业务参数-可以不要
// 获取token
let Token getToken()
let time new Date().getTime()
// 路径传参-项目二地址参数
// this.iframeUrl http://192.168.2.23:3000?time${time}validToken${haiyunToken}menuType2
// 开启iframe标签开关
this.sirenindex 2
// 第二个项目-接受参数可以在指定页面接受也可直接写在登录页因为导航守卫会把没token打回登录页mounted () {// 参数处理// 解析URL中的查询字符串console.log(window.location, window.location)
console.log(window.location.search,decodeURIComponent(window.location.search))const urlParams new URLSearchParams(decodeURIComponent(window.location.search))console.log(urlParams, urlParams);console.log(validToken, urlParams.get(validToken));console.log(menuType, urlParams.get(menuType));console.log(time, urlParams.get(time));}
// 样式-整屏切换-高度100vh 防止底部出现白条-导致来回切换项目时底部白条空隙越来越大
.app-haiyun {position: fixed;top: 0;left: 0;z-index: 99999;width: 100vw;height: 100vh;
}
细节优化
1.须知 首相2个项目是假合并让用户感觉不出来。所以2个项目的用户数据数据和token有效期是一样的 第一个项目通过iframe标签跳转到第二个项目需要登录再通过刷新或者返回时第一个项目不需要登录 如果是通过2个按钮来切换项目记得使用浏览器缓存因为在第二个项目刷新时默认会返回第一个项目 切换时我们打开浏览器缓存可以看到是2个地址缓存隔离开来并且在请求栏可以看到2个项目请求
2.高度适应问题-底部出现白条随着iframe来回切换项目导致底部白色间隙越来越大项目布局失衡
解决在iframe外面套一层div-设置100vw100vh。iframe标签100%边框为0
3.2个项目免登录问题 首相我们在第一个项目传递token时最好是在iframe地址第一个参数加上time等于当前时间戳再拼接token 原因1因为iframe标签获取项目也是在发送请求短时间平凡切换可能会参数一样token没变当浏览器发现这个请求一直在请求并且参数一样可能会触发浏览器缓存机制导致iframe标签不在加载某个项目boday加载不出来导致白屏 原因2一般项目在没有token或者token过期时可能会带参数返回登录页iframe也带参数导致2个参数2个问号导致第二个项目在登录页参数取不到。 如果第二个项目是别人的免登录问题不用管传递token让他们处理即可 如果2个项目都是自己-我们也可以解决 解决在login页面接受第一个项目token解析出用户账号密码直接前端走原来页面方法但是注意要使用遮罩层避免用户看到2个登录页面察觉到是2个项目 总结
经过这一趟流程下来相信你也对 vue 使用iframe标签切换不同项目实现步骤互相嵌套高度不适应底部出现白条-随着切换越来越大传值取值免登录内容空白缓存问题 有了初步的深刻印象但在实际开发中我 们遇到的情况肯定是不一样的所以我们要理解它的原理万变不离其宗。加油打工人 有什么不足的地方请大家指出谢谢 -- 風过无痕
