1、如何让被遮挡层可以进行事件点击（纯CSS方法）
项目中有一个图片挡住一列文本的点击事件，本来想的是把层级提高，但是提高层级后，页面往上滑后，字又会浮到图片上面，或者是写个函数去判断字体到底部的距离，然后根据距离去调整这个层级关系，但是这个有点麻烦
最后经过查阅资料，可以通过css直接调整：
外层（被遮挡的层）{
pointer-events: none;
}
内层（要发生事件的层）{
pointer-events: auto;
}取值none：元素永远不会成为鼠标事件的target
取值auto：与pointer-events属性未指定时的表现效果相同（即将元素恢复成为鼠标事件的target）
2、css控制页面文字不能被选中 user-select:none;
现象：html中可能有些地方不想让用户复制文字，或是用a标签做了个点击按钮，点快的时候文字会被选中，很丑，这个时候可以使用下面的方案禁止文字选中。
原因：鼠标点快了文字会被选中。
解决方案：不同的浏览器设置的内容不一样，user-select不是一个W3C的标准，浏览器的支持不完成，需要对不同的浏览器进行调整。
body{
-moz-user-select:none;/火狐/
-webkit-user-select:none;/webkit浏览器/
-ms-user-select:none;/IE10/
-khtml-user-select:none;/早期浏览器/
user-select:none;
}
3、解决flex布局space-between最后一行没有左对齐的问题
在最后一行，留下一个宽度一样的占位盒子
.main:after { content: ""; width: 100px; }
flex布局2个p标签垂直居中：
display: flex;
flex-direction: column;
align-items: center;4、关于服务端渲染
之前没有接触过服务端渲染，在来公司后接触了一些，一直没有做记录，现在做一些常见问题的解决方法总结：
服务端渲染（Server-Side Rendering），简称SSR，是指由服务侧完成页面的 HTML 结构拼接的页面处理技术。一般用于解决 SEO 问题和首屏加载速度问题。由于 SSR 是在非浏览器环境执行 JS 代码，所以会出现很多问题：
问题一：DOM/BOM 缺失
SSR 是在 node 环境下运行 React 代码，而此时 window、document、navigator 等全局属性没有。如果直接使用了这些属性，就会报错 window is not defined, document is not defined, navigator is not defined 等问题，项目中也出现了好多次该问题，通常的解决方法是：
1、通过typeof window !== 'undefined'来判断， 判断window存在再去执行下面代码。
typeof window !== 'undefined' && window.document && window.document.createElement 2、查阅资料发现另一种方法：
将访问 DOM/BOM 的方法放在 useEffect 中（服务端不会执行），避免服务端执行时报错
React.useEffect(() => {
SetElement(document.createElement );
}, [])5、next.js antd 配置 ConfigProvider 中文 zh_CN 时出错
根据文档 国际化 - Ant Design 使用 ConfigProvider 在page ---- _app.tsx全局配置国际化文案时，出现如下错误
import Pagination from "rc-pagination/es/locale/zh_CN";
^^^^^^^^^^
SyntaxError: Unexpected identifie解决方案：
把 import zhCN from 'antd/es/locale/zh_CN' 改成
import zhCN from 'antd/lib/locale/zh_CN'6、后端返回文件流，前端处理并下载文件
在前后端分离开发的项目中，前端无论使用Vue或React哪种框架，发送HTTP请求都会使用Ajax异步请求的方式。在很多项目中都会选择使用 axios 发送请求。但是在使用 axios 实现下载功能时，往往会出现以下问题。
当前端直接使用 axios 去请求下载文件的 api 接口时，状态码返回200，但是获取的数据却是一堆乱码，效果如下：
下载其实是浏览器的内置事件，浏览器的 GET请求（frame、a）、 POST请求（form）具有如下特点：
- response 会交由浏览器处理；
- response 内容可以为二进制文件、字符串等。
但是AJAX请求不一样：
- response 会交由 Javascript 处理；
- response 内容只能接收字符串才能继续处理。
因此，AJAX本身无法触发浏览器的下载功能。
解决：
要在 axios 的 config 配置 responseType: ‘blob’ （非常关键），服务端读取文件，以 content-type: ‘application/octet-stream’ 的格式返回前端，前端接收到数据后使用 Blob 来接收数据，并且创建a标签进行下载。
一个对象的类型取决于 responseType 的值，当值为 “blob”时表示 response 是一个包含二进制数据的 Blob 对象。
在使用 axios 发起请求前，首先了解一下 responseType 这个属性是如何在 axios 中使用的。以 axios 最常用的 get 和 post 请求为例，这两种请求方式在传递参数的时候也是不同的：
在get请求当中，config 是第二个参数，而到了 post 里 config 变成了第三个参数，这是传递 responseType 第一个需要注意的地方。
// axios设置reponseType的方式应该类似下面
const url = '/v1/exportUser'
// get、delete、head 等请求
axios.get(url, {params: {}, responseType: 'blob'})
.then((res) => {})
.catch((err) => {})// post、put、patch 等请求
axios.post(url, {...params}, {responseType: 'blob'})
.then((res) => {})
.catch((err) => {})例如：
其中，downloadBlobFile函数如下：
export function downLoadBlobFile(data: any, headers: object, fileName: string) {
// 此处当返回json文件时需要先对data进行JSON.stringify处理，其他类型文件不用做处理
//const blob = new Blob([JSON.stringify(data)], ...)
const blob = new Blob([data], { type: headers['content-type'] })
let link = document.createElement('a')
let url = window.URL.createObjectURL(blob)
link.href = url
link.download = fileName
link.style.display = 'none'
document.body.appendChild(link)
link.click()
link.parentNode.removeChild(link)
window.URL.revokeObjectURL(url)
}
export default downLoadBlobFile7、react实现语音播放功能
编写语音播放函数：
const synth = window.speechSynthesis
const msg = new SpeechSynthesisUtterance()
const handleSpeak = (text) => {
msg.text = text; // 文字内容: 哈哈哈哈哈
msg.lang = "zh-CN"; // 使用的语言:中文
msg.volume = 1; // 声音音量：1
msg.rate = 1; // 语速：1
msg.pitch = 1; // 音高：1
synth.speak(msg); // 播放
}
调用即可：
React.useEffect(() => {
handleSpeak('啊哈哈哈')
}, [])
8、Docker Desktop提示“Docker Desktop Stopped”解决方案
Docker Desktop提示“Docker Desktop Stopped”解决方案_宇航员写代码的博客-CSDN博客
9、Proxifier打开后，本地项目启动一直会拒绝服务
把default改成direct，然后确定保存重启
206
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
