浏览器跨域消息传递
父页面给子页面传值12const iframe = document.getElementId('iframe')//iframe容器iframe.contentWindow.postMessage({msg: '来自父页面的消息'}, "*"); 子页面接收消息123 window.onmessage = function(event){ console.log(event.data.msg) // 来自父页面的消息} 子页面给父页面传递消息1window.parent.postMessage({msg: '来自子页面值'}, "*"); 父页面接收消息123window.onmessage = function(event){ console.log(event.data.msg) // 来自子页面值}
vue打包后出现文件过大加载速度过慢问题解决方案
我们在处理网站加载速度过慢问题是，首先想到的是cdn加速，还有一种解决方案，这种方案作用于nginx服务。 下面是我做网站配置的解决方案： 新建一个vue项目，打包之后发现会有一个文件特别大，特别是引入的插件越多，这个文件就越大，查阅资料发现这是我们的node_modules打包之后生成的文件。webpack配置可以将文件打包为.gz文件，传入nginx服务器之后，开启相关配置，他就会自动解压，这是这个文件就会成倍的减小。webpack的配置如下： 123456789101112131415//js html css配置configureWebpack: (config) => { /* gzip压缩 */ const productionGzipExtensions = ['html', 'js', 'css'] config.plugins.push( new CompressionWebpackPlugin({ filename:...
dockerfile的说明
docker用的好，dockerfile配置少不了，配置好dockerfile才能打包一个正确的镜像以供使用。 #第一行配置镜像的依赖，比如这个镜像是使用go语言开发，选择开发版本，as build是一个文件名称，后面有用到 1234567891011121314151617181920212223FROM golang:1.18.3 as build#WORKDIR关键字 设置工作路径WORKDIR /build#把项目所有文件复制到镜像的根目录文件夹中ADD . ./# 设置Go语言的环境变量，打开Go Module模式。设置包下载源，有利于快速下载包ENV GO111MODULE=on \GOPROXY=https://goproxy.cn#下载go.mod里面的包RUN go mod download#编译RUN go build -o gin_docker .#打开端口EXPOSE 8000#运行项目ENTRYPOINT ["./gin_docker"]
java配置图片访问映射
建立配置文件，使用config注解，代码如下： 123456789101112@Configurationpublic class ImgConfig implements WebMvcConfigurer { //@Value可以将配置文件的内容自动注入到属性内 @Value("${savePath.profilePhoto}") private String profilePhotoPath; //图标物理存储路径 @Value("${savePath.profilePhotoMapper}") private String profilePhotoMapperPath; //图标映射路径 @Override public void addResourceHandlers(ResourceHandlerRegistry registry){ ...
mobx的介绍和使用
什么是mobox是一个用来管理状态的库，如果被观测组件发生改变，会自动渲染有关页面,告别setState;mbox编程的3个重点： 1.observer观测器：带有观测器的react组件或者属性被mobx实时观测 2.observable可观测对象：由mobx建立的可观测对象 3.action更新事件：标识观测对象的改变事件 mobox的安装和使用1.安装 12npm install mobx,mobx-react-lite --save根目录新建store文件并在store中新建index.js和test.Store.js 123456789101112131415161718192021222324252627282930313233343536373839// test.Store.js module import { makeAutoObservable } from 'mobx' class TestStore { userInfo = {} ...
pinia的安装和使用
1.什么是 pinia?pinia是一个类似于vuex的状态管理工具 2.inia和vuex的区别 pinia 最初是为了探索 Vuex 的下一次迭代会是什么样子 与 Vuex 相比，Pinia 提供了一个更简单的 API，具有更少的仪式，提供了 Composition-API 风格的 API； 最重要的是，在与 TypeScript 一起使用时具有可靠的类型推断支持； 3.安装和使用1.安装 123yarn add pinia# 或者使用 npmnpm install pinia 2.使用 在根目录新建store文件，store中新建index.js文件1234567891011121314151617181920// stores/counter.jsimport { defineStore } from 'pinia';export const useCounterStore = defineStore('counter', { state: () => { ...
