Ant Design Pro 踩坑记录
antdpro单个路由的布局问题 项目中现在需要对一个单独路由设置不同的布局,比如隐藏掉左侧的菜单栏side组件 官网给出的是这样的 但是并不会生效,应该是这样的 123456789101112131415export default [ { path: '/product', // 不展示菜单 menuRender: false, name: '产品管理', }, { path: '/list/:id', // 编辑的时候使用顶部菜单 layout: 'top', name: '列表详情', parentKeys: ['/product'], },]; 链接在这——[菜单的高级用法-根据路径更换布局](菜单的高级用法 - Ant Design Pro)
vue2和vue3中的watch的区别
Vue2中watch使用方法在有些情况下,我们需要在状态变化时执行一些“副作用”:例如更改 DOM,或是根据异步操作的结果去修改另一处的状态。下面是两种侦听属性的写法: 12345678910111213141516171819202122export default { data(){ return{ value:1, form:{ name:"zhangsan" } } }, watch:{ value:{ handler(newValue,oldValue){ console.log(newVaalue,oldValue); } }, ...
redux报错A non-serializable value was detected in an action......
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
如何链接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,绿色代表链接成功。
如何在Ant Design Pro中使用Redux
如何在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如何本地真机调试
如何真机调试(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项目不停刷新,无法正常进入
本地项目使用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
如何在本地服务中使用自签名证书开启网站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...