CCの日记

Vue2中watch使用方法在有些情况下，我们需要在状态变化时执行一些“副作用”：例如更改 DOM，或是根据异步操作的结果去修改另一处的状态。下面是两种侦听属性的写法： 12345678910111213141516171819202122export default { data(){ return{ value:1, form:{ name:"zhangsan" } } }, watch:{ value:{ handler(newValue,oldValue){ console.log(newVaalue,oldValue); } }, ...

redux报错 React使用redux报错：A non-serializable value was detected in an action, in the path: payload.0. Value123456789const store = configureStore({ reducer: { counter: counterReducer, clienter: clienterSlice }, middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: false })}) 这是因为我们传入的payload是一个函数，导致数据无法序列化，redux是不建议存储这种类型的数据的，但是经我实践，这样照样可以正常运行，上面的写法可以不让控制台报错。

如何链接docker容器中的mysql 进入mysql容器 docker ps会列出所有容器 这里我们复制CONTAINER ID，运行指令docker exec -it 容器ID /bin/bash，后面的是路径一般是这个，照抄就完了 使用命令mysql -uroot -p，输入密码链接数据库，输入密码的过程是不可见的 更改权限 选择dabase命令：use mysql，然后查看权限用户select host,user from user;，注意;是必须的 如果像上这样的host=%，user=root就不用修改了，如果不是就需要使用命令：update user set host = '%' where user ='root';修改权限flush privileges;刷新 这里我用的是tableplus，绿色代表链接成功。

如何在antdpro中使用reduxredux是一个状态管理的库，和Vuex的作用差不多。当项目变得越来越大，状态管理也随之变得困难这是我们就需要使用状态管理库来协助开发。官方提供了相关工具redux-toolkit 1. 在项目中引入 react-redux和react-toolkit123npm install @react-reduxnpm install @reduxjs/toolkit 2. 在项目中引入看官网文档说是在根组件外面包裹Provider组件，但是因为antdpro没有/src/index.tsx这个文件，所以我们可以在App.tsx中引入，在childrenrender函数这里使用。 1234567891011import { Provider } from 'react-redux';childrenRender: (children) => { // if (initialState?.loading) return <PageLoading />; ...

如何真机调试（H5）前提条件，手机设置为开发者模式，并且与电脑在同一局域网下。 手机端同时需要用同样的浏览器，建议使用edge。 记住下面两个地址 edge://inspect/#devices edge://flags/#unsafely-treat-insecure-origin-as-secure 如果是谷歌浏览器把edge换成chrome。 操作步骤 启动项目 链接手机 在对应浏览器打开edge、chrome ​ 链接正常的情况下会出现下图 如果需要用到摄像头还需要打开edge,如下图启用Insecure origins treated as secure 点击inspect，此时手机端浏览器就会弹出项目界面，这样就可以在电脑修改代码，查看控制台，而在手机查看效果了。

本地项目使用nginx转发端口后，ant-design-pro项目不停刷新，无法正常进入问题描述：项目原来是运行在8000端口下，现在我想把它代理到8001端口，发现页面不停地刷新，并且控制台报错如下图所示 问题原因经查询我在UmiJS官网找到了问题的答案，带静态资源到本地后，一直restart刷新页面，问题的关键在用于代码热更新的MFUS服务无法访问，该服务是一个websocket链接，因为代理后它所走的链接不正确，所以会一直重连而导致页面不断刷新。 解决办法在项目的根目录也就是src同级目录创建一个.env.local文件，用于控制开发时的环境变量，该文件最好放入.gitignore里面，在文件添加如下内容： SOCKET_SERVER=http://127.0.0.1:8001/ 即指定一个和开发服务器地址相同的SOCKET_SERVER环境变量。

如何在本地服务中使用自签名证书开启网站https因为业务需要使用网页嗲用手机的摄像头进行扫码，然http是不支持普通浏览器调用摄像。 安装OpenSSL工具 windows：https://slproweb.com/products/Win32OpenSSL.html linux：https://www.openssl.org/source/ 创建CA证书1. 生成RSA私钥打开终端，进入要存储证书的目录，输入下面的命令 openssl genrsa -des3 -out server.key 2048 这样是生成rsa私钥，des3算法，openssl格式，2048位强度。server.key是密钥文件名 通过以下方法生成没有密码的key:openssl rsa -in server.key -out server.key server.key就是没有密码的版本 2. csr生成方法openssl req -new -key server.key -out server.csr 3. 生成CA的crtopenssl req -new -x509 -key...

在微信小程序项目开发的过程，随着业务需求的增长，程序包也来越大，总所周知，微信对于小程序代码包 是有要求的，总体积不得超过2M，所以我们必须对小程序进行分包。 分包的优点 减少初始加载时间。如果整个小程序页面非常庞大，包含了大量的文件代码，那么初始加载就会耗费大量的时间，影响用户体验。 按需更新维护。通过将不同功能的模块或页面分离到不同的包中，可以实现独立的更新和维护。 小程序启动时，默认下载主包并启动主包内的页面，当用户进入分包内的某个页面时，客户端会把对应的分包下载下来。 如何分包微信小程序每个分包大小 不得超过2M，总体积不超过20M。如果支持分包的小程序目录如下 123456789101112131415├── app.js├── app.json├── app.wxss├── packageA│ └── pages│ ├── cat│ └── dog├── packageB│ └── pages│ ├── apple│ └── banana├── pages│ ├── index│ └──...

在react中调用后置扫码，获取二维码内容这里我们为了方便直接使用一个库react-qr-reader 安装npm insstall react-qr-reader 使用直接在组件中引用 123456789101112131415161718192021222324import React, { useState } from 'react';import { QrReader } from 'react-qr-reader';const Test = (props) => { const [data, setData] = useState('No result'); return ( <> <QrReader onResult={(result, error) => { if (!!result) { ...