不知名程序猿丶-CSDN博客

原创 Vue配置代理服务器

此文件基于vue脚手架5.0实现, 把以下代码替换项目中vue.config.js的内容, 修改代理target即可。// 在vue.config.js中的devServer.proxy字段设置代理服务器。// 这个文件是服务器的配置文件, 所以这个文件的修改需要重启项目生效。lintOnSave: true, // 在保存时校验格式。publicPath: '/', // 启动页地址。outputDir: 'dist', // 打包的目录。服务端设置的一些功能。

2023-07-10 21:55:25 82 1

原创 React路由监听

2, 在组件的componentWillUnmount中取消路由监听, 调用 cancle函数, 以防止重复监听,浪费性能。1, 在路由跳转的组件中使用props.history.listen() 监听路由, 得到返回值cancle。注: 全局路由监听,根组件App中没有路由信息, 需要使用高阶组件withRouter添加路由信息,然后监听。注: 局部监听只能监听此组件离开时的路由, 类似于vue中beforeRouteLeave() 路由守卫。1, 在app.js中从路由模块导入withRouter。

2023-06-29 16:21:00 917 1

原创 React路由跳转与传值

路由控制跳转的组件中(一般是views目录下的页面组件),props会自动添加以下三个字段, (根组件和components中的组件没有路由信息)接收 {this.props.location.data && this.props.location.data.name}动态路由(友好url)传值跳转个人中心 react路由传值方式2: 动态路由(友好url)传值。

2023-06-29 16:17:24 453 1

原创 React路由6.0配置

注意: 使用router6.0实现的路由跳转, 不会向组件中传入路由信息, 可以在组件中从路由模块导出useLocation和useNavigate函数以实现路由相关功能。2, 在入口文件 src/index.js中,从路由模块导入工具组件Router ,并包裹根组件。3, 创建路由文件src/router/index.js, 并从路由模块中导入工具组件Route。6, 在根组件app模板中添加路由组件,即路由出口。4, 创建路由组件,配置路由, 并导出。5, 在app.js中导入路由组件。

2023-06-29 16:16:11 131 1

原创 React路由5.0配置

{/* 路由重定向, 使用Redirect组件实现, 要写在最后 */}2, 在入口文件 src/index.js中,从路由模块导入工具组件Router ,并包裹根组件。3, 创建路由文件src/router/index.js, 并从路由模块中导入工具组件Route。(注: 哈希模式用HashRouter 历史模式用BrowserRouter)7, 在需要跳转的页面, 从路由模块导入工具组件 Link。6, 在根组件app模板中添加路由组件,即路由出口。4, 创建路由组件,配置路由, 并导出。

2023-06-29 16:15:24 56 1

原创在react中如何实现样式隔离

2, 在组件jsx导入样式文件时使用 import styles from './xxx.module.css' 导入代替 import './xxx.css'1, 创建组件样式文件时以 xxx.module.css命名, 例如 Home.module.css 代替 Home.css。如果需要每个组件样式隔离, 在设置组件样式时, 每一个选择器都添加组件根标签选择器, 以区分不同组件中的样式。4, 在xxx.module.css中通过 .yyy{} 设置样式,即为局部样式。

2023-06-28 17:35:36 168 1

原创在weibpack中构造react配置代理

也可以通过指令 npm run eject 把服务器配置暴漏出来, 修改scripts/start.js (这个指令不可逆)设置项目端口号: node_modules/react-scripts/scripts/start.js。1, 下载安装代理模块。

2023-06-28 17:34:33 25 1

原创在vite中构建react配置代理

在vite.config.js中加入以下代码 (针对react,可全选替换)使用vite构建vue项目和react项目,配置代理等信息的方式是一样的。

2023-06-28 17:33:52 125 1

原创 react中查找DOM的方法

2, 在构造器中创建ref全局变量, 在标签中ref属性动态绑定这个全局变量, 通过全局变量的current字段调用。1, 在父组件中用ref获取子组件对象, 必须保证子组件是类组件, 函数式组件获取结果是undefined。1, 给标签设置ref属性, 通过this.refs调用 (老版本语法,将要废除)2, 父组件使用ref获取子组件对象后, 可以对子组件状态数据和函数执行调用和修改。3, 在标签ref属性绑定函数, 在函数中定义全局变量赋值, 通过全局变量调用。4, 使用hook语法查找DOM。

2023-06-28 14:39:57 174 1

原创使用vite创建react

2, 使用vite构建项目, 选择react。3, 切换到项目根目录, 安装依赖包。4, 运行,启动vite项目。1, 安装vite构建工具。

2023-06-28 14:39:12 433 1

原创同源策略的概念

同源策略:是浏览器出于安全考虑,针对ajax请求的一种限制,浏览器会禁止ajax请求非同源的接口和数据。同源/同域:当前url和请求数据的url具有相同的协议域名 ip 端口。

2023-06-26 15:56:57 41 1

原创跨域解决方案

缺点:客户端请求比较复杂,请求对目标服务器的依赖性较强,如果目标服务器没有使用jsonp函数响应数据,则不能实现jsonp跨域。跨域:一个服务器A 中的页面,去请求另一个服务器B中的数据或者接口,非同源请求就是跨域请求,浏览器默认是禁止的。缺点:对目标服务器的依赖性太强,而且目标服务器跨域随时允许或者禁止跨域访问。优点:快捷方便,一句代码即可实现跨域,客户端请求数据方便,无需修改代码。2.在客户端请求数据的时候,不再请求跨域地址,而是请求域内的代理地址。1.在客户端所在的同源服务器中设置服务器代理。

2023-06-26 15:55:36 61 1

Forvever_的博客