- 博客(35)
- 收藏
- 关注
RSS订阅原创 rabbitMQ-前端stompjs的使用方法
stomp-js 是一个用 JavaScript 编写的 STOMP 协议客户端，它提供了在浏览器或 Node.js 环境下使用 STOMP 协议与 ActiveMQ、RabbitMQ 等消息中间件进行通讯的能力。STOMP（Simple Text Oriented Messaging Protocol）协议是一种支持异步消息传输的协议，在可靠性、易用性和扩展性方面都非常优秀，因此被广泛应用于分布式系统中。stomp-js 简化了 STOMP 协议的使用，使得开发者能够更加专注于业务逻辑的实现。
2024-04-08 08:58:43
633
原创 antd mobile 的 Drawer点击失效以及无法弹出
主要有几个方面的注意点！1. Drawer的必备样式要写上（经常性原因）官网有这样一段样式，要加上，不然会造成抽屉无法弹出在less样式文件中，添加这段样式import styles from './index.less';..... <Drawer className={styles.mydrawer} ..... > less:/*-----抽屉必备样式-----*/.my
2022-05-10 22:23:56
1987
原创 配置craco报错
配置npm install @craco/craco 报错查看报错信息是因为 react-scripts 需要得版本是4.0 版本，所以，将 react-script的版本从5.0.1降级到4.0.0版本npm install @craco/craco --save正在上传…重新上传取消...
2022-04-20 12:45:11
1476
6
原创 如何解决flex的动态高度
第一种方法用js来解决，来动态设置padding top 用这句代码document.body.style.paddingTop=document.querySelector('.top-bar').clientHeight第二种方法position:sticky
2022-01-06 09:27:19
733
原创 nginx跨域步骤详情
此文章只实现在本地开发环境下的应用nginx跨域1.下载nginx稳定版本下载地址：nginx: download2. 配置nginx文件下的nginx.conf3.开启nginxstart nginx 是开启nginx查看是否成功开启ctrl+alt+del打开任务管理器 查看是否有nginx.exe运行①没有运行②有运行，即nginx 开启成功...
2021-11-19 15:47:22
2203
原创 解决跨域问题（待更新）
首先了解下浏览器的同源策略同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源那么怎样解决跨域问题的呢？通过jsonp跨域var script = document.createElement('script');script.type ='tex.
2021-11-08 15:55:47
415
原创 如何避免样式全局污染
代码：index.js <Table className ={styles.benchtable} </Table>index.less.benchtable{ :global(.ant-table-thead> tr >th){ color:royalblue; text-align:center }}
2021-11-05 15:08:48
1188
原创 ant design table样式修改合集
目录1. 改变列头颜色2. 修改选中某行时的文字颜色常见问题合集：table的列数据排序，sorter无效不起作用？1. 改变列头颜色 代码部分： index.js:import styles from '../index.less';index.less::global(.ant-table-thead> tr >th) { color: royalblue; text-align: center...
2021-11-05 15:03:49
10690
原创 虚拟滚动库react-window (react实现)
介绍：用于呈现大量的列表和表格数据，可在给定的时间内渲染有限的内容，既降低重新渲染组件所消耗的时间，也能减少DOM节点的数量安装：npm i react-window运用：1.列表2.表格
2021-11-03 19:58:24
5796
1
原创 判断对象类型的方法
var arr =[1,1,2,2,22,333,4,45,5,6,7,7]//以下三种判断方式 console.log(Object.prototype.toString.call(a)) //[object Array] console.log(typeof(a)) //object console.log(a instanceof Array) //true
2021-10-30 16:29:25
102
原创 JSON的了解
JSON是一种轻量级的数据交换格式基于javascript的一个子集，数据简单，易于读写，占用宽带小json字符串转换为json对象var obj =eval('('+str+')');var obj =str.parseJSON();var obj =JSON.parse(str)json对象转换为json字符串var last =obj.toJSONString();var last = JSON.stringify(obj)...
2021-10-26 09:31:54
98
原创 常用css 样式
1. 水平居中的方法：元素为行内元素，设置text-align:center 如果元素宽度固定，可以设置左右margin为auto 如果元素为绝对定位，设置父元素position为relative,元素设left:0;right:0;margin:auto 使用flex-box布局，指定justify-content属性为center display 设置为table-cell...
2021-10-22 22:28:27
106
原创 fetch 用form Data 格式 发送数据（带json格式的参数）
坑：1.fetch如何使用form Data 格式 发送数据？答：使用 var formData = new FormData(); formData.append('developerId', '633');//传参数2.在控制台发现Content-Type:multipart/form-data ；而且数据没有发送成功，后面也没有boundary的分割？答：不要在头部设置'Content-Type':'multipart/form-data;',hea...
2021-10-22 17:19:16
5003
原创 for循环+setTimeout
for(leti=0;i<MachineArray.length;i++){(function(a){//自执行函数，获取isetTimeout(function(){ console.log(a)})},a*1000)})(i)...
2021-10-14 13:48:30
103
原创 react的组件传值
组件之间的嵌套关系分为以下4种通信方式：1.父子通信 在react中，数据是自顶而下单向数据流，父子之间的传值都是通过props来实现的 父组件传值子组件：class Parent extends React.Component{ render() { return ( <Child getname="35464"></Child> ); }}class Child extend...
2021-09-27 22:58:56
255
原创 【react】componentWillReceiveProps失效不起作用
解决办法：state初始化值为父组件传来的props完整的代码：父组件：.... render() { return ( .... <TableDetail data={detaildata} goMain={this.goMain}></TableDetail> .... <
2021-09-26 16:07:19
1196
1
原创 关于react、umi的跨域问题
目录react框架的两种前端跨域方式：1.我这边用的是**基于react的umi框架**步骤1：找到package.json文件，增加proxy这部分内容步骤2：接口部分——在调用的api前省略http：XXXXXX 添加上'api1'(之所以写api1是因为用项目里用/api的接口太多，为了区分和别的接口的，所以用api1)2. react框架步骤1：在src下创建setupProxy.js文件，并添加内容步骤2：如上面方式1的步骤2出现上面的问题：就是跨域问题了针对跨域问题有两种解决方法：后端
2021-09-24 17:05:27
2111
1
原创 【ant design 坑】关于Checkbox多选框改变框的大小问题
组件用的是ant design的Checkbox根据项目需求，要把多选框变大。但是看了ant design 官网的Checkbox，没有一个属性可以改变Checkbox的大小。如何实现改变大小：思路——想通过改变checkbox的组件样式，来改变框的大小，所以要引用less文件来改变样式，只改变单个页面的样式用className={style.FcheckChecked}， 因为修改了组件的默认样式，但是也会修改全局的样式，为了避免污染全局样式代码js页面：import { Check
2021-09-16 14:40:13
2264
转载 【react——小技巧】显示代码块
用户在的输入内容中任何以 `` 包含的内容都会用 包含起来显示到页面上。 这是一个 HTML 结构，需要往页面动态插入 HTML 结构我们只能用 dangerouslySetInnerHTML 了，修改 src/Comment.js，把原来 render() 函数中的：<p>{comment.content}</p>修改成：<p dangerouslySetInnerHTML={{ __html: this._getProcessedContent(comment
2021-09-14 21:44:21
1200
原创 【react——小技巧】显示发布时间(XX秒前~XX分钟前)
示例：展示评论发布了多久效果图：基本思路：组件实例会保存一个 timeString 状态，用于该评论显示发布了多久。通过接受props.Eachdata 里面的 createdTime 调用handleTime函数来渲染更新这个 ：计算当前时间和评论发布时间的时间差，如果已经发布 60 秒以上就显示分钟，否则就显示秒。实现：import React from 'react';class CommentList extends React.Component { constructor
2021-09-10 22:48:10
235
原创 【react——小技巧】定时器setInterval
示例：定时5秒更新一下时间时间是不会自动更新的。除非你手动刷新页面，否则永远显示“1 秒前”。我们可以在 componentWillMount 中启动一个定时器，每隔 5 秒调用一下 _referdata，让它去通过 setState 更新 ：解决：.... componentDidMount=()=>{ //定时器 setInterval(() => { this._referdata() }, 5000); } componentWil
2021-09-10 22:31:13
1390
原创 【react——小技巧】过滤搜索filter
function checkeddata(value) {console.log(value)const name = value.labelreturn name.indexOf(val) !== -1}console.log(this.state.poDatas)var showfilterList = this.state.poDatas.filter(checkeddata)console.log(‘过滤后：’)console.log(showfilterList)this.set
2021-09-08 13:36:24
1272
转载 【react——小技巧】持久化数据LocalStorage
例如：持久化用户名用户输入用户名，然后我们把用户名保存到浏览器的 LocalStorage 当中，当页面加载的时候再从 LocalStorage 把之前保存的用户名显示到用户名输入框当中。这样用户就不用每次都输入用户名了，用户的输入体验就好很多。我们监听用户名输入框失去焦点的事件 onBlur：... <input value={this.state.username} onBlur={this.handleUsernameBlur.bind(this)}
2021-09-05 22:45:24
663
转载 【react】对JSX的理解
1.JSX是什么东西？JSX其实就是Javascript的扩展语法，长得像HTML但是并非是HTML2.为什么要用这种语法？虽然HTML信息和JS所包含的结构信息是一样的,但是对象写起来太长，也没有HTML更清楚的看清结构，于是React.js将javascript的语法进行了扩展，让js语言支持类似HTML结构的语法，编译过程会将JSX变成js对象。HTML：<div class='box' id='content'> <div class='title'>Hello
2021-08-16 16:28:12
175
原创 【react】关于表单的受控组件与非受控组件
处理表单输入有两种方式：受控组件和非受控组件1.受控组件是什么？input表单元素值是由React控制的。表单数据是由React组件来管理。简单理解就是带有onchange函数用setstate更新数据的 就是非受控组件（个人理解）例子: class Form extends Component { constructor() { super(); this.state = { name: '', }; } handleNameChange =
2021-08-16 11:14:36
153
原创 【react】React.lazy
注意:React.lazy 和 Suspense 技术还不支持服务端渲染。如果你想要在使用服务端渲染的应用中使用，我们推荐 Loadable Components 这个库。它有一个很棒的服务端渲染打包指南。React.lazy 函数能让你像渲染常规组件一样处理动态引入（的组件）。使用之前：import OtherComponent from './OtherComponent';使用之后：const OtherComponent = React.lazy(() => import('
2021-08-14 09:33:58
5027
1
原创 【react 技术必备】单行文本溢出，溢出部分添加省略号...
亲测可用！主要的用的就是css样式第一步：设置class ;{text}为超长文本<div class={style.ellipsis}> {text} </div>第二步：import css 样式import style from './index.css'第三步：index.css 样式文件.ellipsis{ max-width:'150px'; width: "50%"; /* 隐藏溢出 */ overflow
2021-08-10 13:50:47
866
原创 【踩坑】react项目中，运行npm start,但是无法自动跳转到浏览器
问题描述：react项目中，运行npm start,但是无法自动跳转到浏览器 原因分析：排查了一下：发现默认浏览器成了空，所以没有自启动浏览器解决方案：如果无法自启动浏览器，排查以下几个方面1.查看默认浏览器是否正确，...
2021-08-07 23:44:24
1523
原创 antd-mobile Checkbox 数据变化后勾选状态未变化
代码：<List renderHeader={() => '药水信息'}> {this.state.ProductData.map(i => ( <CheckboxItem key={i.value} onChange={(e) => this.onChangeCheck(i.value)}> {i
2021-07-12 15:24:30
903
原创 去重（JSON、数组）
数组去重：ES6 用法：function unique(arr) {return Array.from(new Set(arr))}unique（旧数组)JSON去重var hash = {};arr = arr.reduce(function(item, next) {hash[next.name] ? ‘’ : hash[next.name] = true && item.push(next);return item}, [])console.log(arr.
2021-07-12 09:26:17
465
原创 常用CSS样式大全
1.居中： <div style={{ display: 'flex', justifyContent: "center", alignItems: "center" }} >2.一边居左一边居右<div style="width:1000px;"><p style="width:500px;float:left;">Left txt</p><p style="width:500px;float:right;">Right txt&l
2021-05-28 08:21:30
143
转载 【react】配置React 的开发环境
参考了视频：https://www.imooc.com/video/17879第一步：先安装node，链接如下：Node.js 安装配置菜鸟教程 node自带npm第二步：使用官方脚手架工具：create-react-app安装。快速安装脚手架教程：https://www.jianshu.com/p/e16a9da931ec脚手架工具是干什么的？是一种命令行工具，提供一系列和这个框架有关的功能。第三步：创建项目 ，使用命令安装一系列依赖...
2021-03-12 16:13:27
557
原创 关于移动端audio自动播放问题
项目的需求是：接口返回错误信息时，app页面除了会弹出一个弹窗外还要同时发出警报声遇到的问题：在web上调试可以发出滴滴的声音，但是文件打包后，手机端打开后没有声音。原因：也就以下几种：1.src的地址写错2.移动端的限制，一定要用户交互才能触发audio。3.音乐名不能出现中文，不然无法播放...
2021-03-11 16:22:39
1048
原创 【react——小技巧】Input输入框的回车换行获取焦点
、点击第一个输入框回车后，光标定位在第二个输入框中在第二个输入框内Input增加id属性在第一个输入框内Input属性内必须写onpressEnter
2021-01-19 10:53:18
2934
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人