react+redux+ant+axios+iframe实现网站门户

最新推荐文章于 2024-07-19 17:18:14 发布
置顶 最新推荐文章于 2024-07-19 17:18:14 发布
阅读量1.6k 收藏 1
点赞数 1
分类专栏： 前端博客 文章标签： react redux ant axios 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40766882/article/details/88035011
版权

一个框架壳子，技术栈react+redux+ant+axios+iframe,实现侧边栏与导航栏还有头部，对打开的页签进行缓存，使用iframe与各个子系统页面相连。
对打开的页签进行缓存即使刷新页面的tag也不会丢失，界面如下：
在这里插入图片描述
这个实现的功能是侧边栏收起和打开，系统全屏显示等功能，这只是一个练手项目，希望大家提建议和交流，如果新学者学习的话使用这个项目练手对react，特别是redux的理解会更加深刻，下面是github的项目地址。
https://github.com/Mrliu1/newboss

埃尔斯（aiers）
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ant Design Pro 运用点滴 [5]
生有涯学无涯
08-26 2137
Ant Design Pro 运用点滴 z turn 第三方登录之 企业微信 企业微信扫码登录 在这个问题上折腾了好久，网上也没有找到什么方案。只好自己动手写了一个组件，还不是很成熟。直接放代码 import React, { Component } from 'react'; import fetch from 'dva/fetch'; import styles f...
react-minimalist-portal:极简主义的门户网站
05-17
React极简主义的门户 一个极简主义的门户网站。 在document.body中创建一个新的React树以创建模式等。此包与react 15和16兼容。 用法 import React from 'react' ; import Portal from 'react-minimalist-portal' ; export default class App extends React . Component { render ( ) { return ( < Portal> < p> I am in document body. < / p > < / Portal > ) ; } } // If you want to render the portal inside your own container const
大型门户网站（响应式）
小时
02-04 1724
http://web.abchina.com/chn/ 1，本项目是: 属于大型门户网站 2，web响应式，自适应        采用的方案是 百分比控制。用js控制在不同的设备尺寸下加加载不同的css 3，在拿到设计的时候，先要看设计能不能切①是光pc②还是pc和移动③pc和移动都有的话，能否对照起来 4，农行项目的要求:只有h1标签和p标签，文章缩进问题自己控制 5，常用的命名
【React】使用 antd 加载组件实现 iframe 的加载效果
最新发布
qq_45677671的博客
07-19 622
使用 antd 加载组件实现 iframe 的加载效果
axios获取文件流，让iframe读取
weixin_43166379的博客
08-16 3030
这里写自定义目录标题axios获取文件流，让iframe读取 axios获取文件流，让iframe读取 axios默认的返回类型是json数据，如果请求回来的数据不是json格式的，也会自动转成json格式，而有时候我们不希望它转成json格式的数据，这时就能通过改变responseType属性来把返回值设置成自己想要的格式，例如后台返回一个pdf文件流，用iframe请求的时候能直接通过src读取到， <iframe :src="url" width="100%" height="600px" &g
vue 页面tabs切换,替换iframe
10-25
vue页面tab切换，替换原来的iframe实现，利用vue的router-view和keep-alive实现
自学vue笔记—antdesign & iframe
pilijiaotun的博客
04-08 2208
e后端需要自己搭平台，无奈前端资源不够，只能自己摸索着开发，好在需求不难，以这篇文章开头记录一些坑，望后续能够解决 1.iframe内嵌网页 <iframe :src = "test" id = "mytest" ></iframe> //api: scrolling() frameborder() allowtransparency()等 function 随便写{ api getelementbyid 对devicewidth length做操作即可
React+webpack+redux+ant design+axios+less全家桶后台管理框架.zip
06-12
React+webpack+redux+ant design+axios+less 这个组合是现代前端开发中的常见技术栈，用于构建高效、可维护的后台管理框架。以下是对这些技术及其在项目中的应用的详细说明： **React.js** React是Facebook开发的一...
react+redux+koa技术栈实现小结
01-29
使用react，只需要引入react.min.js（React的核心库）和react-dom.min.js（提供与 DOM相关的功能）即可。 通常为了使用JSX语法，我们需要在文件打包时使用插件将含有JSX语法的文件解析成普通的JavaScript语法，例如...
基于React+webpack+redux+ant design+axios+less的全家桶后台管理框架
06-11
node10.15.3 + react@16.12.0 + redux@3.7.2 + react-router@3.2.0 + webpack@4.41.2 + axios@0.19.0 + less@2.7.1 + antd@3.25.2 项目运行 ``` cd react (进入项目) npm install (安装依赖包) npm start ...
react中iframe多次加载问题
World__Peace的博客
08-10 1414
问题描述：使用ant design pro V5，项目内部通过iframe内嵌别的平台，切换菜单时出现iframe多次加载问题。
react-antd-admin:React和Ant Design搭建后台
04-27
react-antd-admin
【门户平台】—— Ant Design Pro v4最新版本安装
柳柳66的博客
03-16 616
现在开始安装以及初步运行(ant design pro文档) 安装前需要的环境：yarn、node和git，推荐配置cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org 安装大概有三种方法(本地运行)： 1、 git clone(稳定，速度偏慢) 直接在github下clone下来 git clon...
BODY background=自适应大小_postMessage iframe跨域解决高度自适应
weixin_39776991的博客
11-23 119
今天学习一个新的window方法：window.postMessage。window.postMessage() 方法可以安全地实现跨源通信。postMessage是html5引入的API,postMessage()方法允许来自不同源的脚本采用异步方式进行有效的通信,可以实现跨文本文档,多窗口,跨域消息传递.多用于窗口间数据通信,这也使它成为跨域通信的一种有效的解决方案.之前的一篇iframe高度...
在React中优雅地利用iFrame：React `<Frame />`组件
gitblog_00065的博客
05-13 581
在React中优雅地利用iFrame：React <Frame />组件 react-frame-componentRender your React app to an iFrame项目地址:https://gitcode.com/gh_mirrors/re/react-frame-component 如果你在开发Web应用时遇到过跨域或独立渲染组件的挑战，那么这个开源项目会对你产...
Ant Design和React，在页面中使用window.open(“XXX")打开页面，迅速关闭后页面卡死的问题解决
qq_35639030的博客
03-20 2959
问题描述：在页面A中window.open("XXX")打开一个页面B，在页面B没有请求完接口时，迅速关闭页面B，导致页面A卡死。页面B在关闭时会向页面A发送消息，让页面A刷新页面。 浏览器：Google 解决方案： 将页面B嵌套在页面C中，页面C只有iframe。这样关闭就没有问题了。 具体实现： 话不多说，上代码。 页面C代码 import React from 'react'...
react 嵌套iframe_react 里面嵌套iframe高度自适应问题
weixin_39983350的博客
12-22 574
请教个问题，react里面引入iframe我需要等iframe里面的html页面全部加载完再去获取这个html的高度，期望的是在子iframe里面获取高度后调用父react里面的方法，该怎么写目前是这么写的但加载出来的iframe高度不正确，怀疑是onload拿到的是子iframe未渲染完的高度所以想在子iframe里面获取高度后调父react页面的方法来setState子iframe的高度id=...
iframe使用
你蠢哭我咯的博客
08-16 701
<iframe name="son" src="https://www.hao123.com" width="100%" height="100%" scrolling="auto" security="restricted" sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"> </iframe>
React + React Router + Redux + Axios + Ant Design
07-28
React + React Router + Redux + Axios + Ant Design 是一套常用的前端开发技术栈，用于构建现代化的 Web 应用程序。下面我会逐个介绍这些技术的作用和特点： - React 是一个用于构建用户界面的 JavaScript 库，它...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值