vue项目通过url链接引入其他系统页面_vue项目嵌入别的系统

最新推荐文章于 2024-07-08 00:30:00 发布

2401_85124719

最新推荐文章于 2024-07-08 00:30:00 发布

阅读量497

点赞数 3

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2401_85124719/article/details/139585248

版权

methods: {
widthHeight() {
this.searchTableHeight = window.innerHeight -180;
this.searchTableWidth = window.innerWidth - 230
},
},
data() {
return {
reportUrl: ‘https://www.baidu.com/’,
searchTableHeight: 0,
searchTableWidth: 0
}
},
mounted() {
window.onresize = () => {
this.widthHeight(); // 自适应高宽度
};
this. $KaTeX parse error: Expected 'EOF', got '}' at position 60: \dotst(); }); }̲, created() {\dots$ route’: function () {
// 监听路由变化
this.reportUrl = ‘https://www.baidu.com/’
}
}
}


效果图：


![](https://img-blog.csdnimg.cn/20201223172516471.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HTElaRU5H,size_16,color_FFFFFF,t_70)


2.加载引入系统可能会出现拦截，xxx 拒绝了我们的连接请求。前端页面Refused to display 'xxx' in a frame because it set 'X-Frame-Options' to 'sameorigin'，对于这个问题我们需要在引入的项目中进行拦截处理，引入项目中response.addHeader("x-frame-options","SAMEORIGIN")需要改写为response.addHeader("x-frame-options","ALLOW-FROM http://127.0.0.1:项目端口/");对访问方式进行允许iframe不同域名之间进行调动


![](https://img-blog.csdnimg.cn/20201223172949936.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HTElaRU5H,size_16,color_FFFFFF,t_70)


3.引入项目的后台拦截代码


@Configuration  
 public class MvcConfig implements WebMvcConfigurer {  
    //配置日志  
     private static final Logger logger= LoggerFactory.getLogger(MvcConfig.class);  
       
     @Autowired  
     SystemConfig systemConfig;  
      
     @Override  
     public void addInterceptors(InterceptorRegistry registry) {  
         registry.addInterceptor(new HandlerInterceptor() {  
             @Override  
             public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {  
                 //设置日志级别  
                 //logger.debug("前置方法被执行");  
                 return true;  
             }  
    


### 最后

全网独播-价值千万金融项目前端架构实战

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWMxLnpoaW1nLmNvbS84MC92Mi1iMzExOWVhYzM3ZjkyNWE3NjMyNTFkNWE5ZWY5Njc3MF9oZC5qcGc?x-oss-process=image/format,png)



从两道网易面试题-分析JavaScript底层机制

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWMyLnpoaW1nLmNvbS84MC92Mi0xMGE3MzBlOTc1ZmVjOTFjMDcwOTE1OWIwMTdjNTliMV9oZC5qcGc?x-oss-process=image/format,png)



RESTful架构在Nodejs下的最佳实践



![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWMyLnpoaW1nLmNvbS84MC92Mi1hY2UyZjVjNjQ1YjhkMTE1MzA4YzcyZDM1ZGNkZGYzNV9oZC5qcGc?x-oss-process=image/format,png)

一线互联网企业如何初始化项目-做一个自己的vue-cli

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWMxLnpoaW1nLmNvbS84MC92Mi04MGU5MWQ0NGY3NTUzZTA5OTJhOWEzN2Y2OGFhYTAwNF9oZC5qcGc?x-oss-process=image/format,png)



思维无价，看我用Nodejs实现MVC

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWM0LnpoaW1nLmNvbS84MC92Mi0yZGI4MTZiY2JlODkwNjBiMDY1NWIyODdlM2Y4NWVlM19oZC5qcGc?x-oss-process=image/format,png)



代码优雅的秘诀-用观察者模式深度解耦模块

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWMxLnpoaW1nLmNvbS84MC92Mi04YTY0YTU3YTdlNDFmZDc3OTRiZWYzNjVkYjNlYzQxMF9oZC5qcGc?x-oss-process=image/format,png)

前端高级实战，如何封装属于自己的JS库

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWM0LnpoaW1nLmNvbS84MC92Mi1lOTdlMTZkMWYyNDZhNjUxZjA4ZThlZjdjZjRhZWRjZl9oZC5qcGc?x-oss-process=image/format,png)

VUE组件库级组件封装-高复用弹窗组件

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWMyLnpoaW1nLmNvbS84MC92Mi00NWJjMGI2OWU4YzY2YTcxYzBkNWFiNjczZTkzM2MyZF9oZC5qcGc?x-oss-process=image/format,png)