刘新修

允许Chrome浏览器，请求内网资源地址，避免跨域问题

[

2026/04/23 08:54 | by 刘新修 ]

允许Chrome浏览器，请求内网资源地址，如JSONP等

C#代码

chrome.exe --disable-features=BlockInsecurePrivateNetworkRequests

浏览器相关 | 评论(0) | 引用(0) | 阅读(38)

jpgjpeg有什么区别

[

2025/07/03 09:04 | by 刘新修 ]

技术分类 | 评论(0) | 引用(0) | 阅读(978)

字符串遍历拼接、字符串局部清除、字符串局部插入，等逻辑

[

2024/12/24 19:57 | by 刘新修 ]

JavaScript代码

/*** 清空指定字符串之间的内容(包括起始字符) ***/
function deleteBetweenCharacters(str, startChar, endChar) {
/*** 容错处理 ***/
if (typeof(str) == 'undefined' ||
typeof(startChar) == 'undefined' ||
typeof(endChar) == 'undefined') {
return false;
}
/*** 起始替换逻辑 ***/
let startIndex = str.indexOf(startChar);
let endIndex = str.indexOf(endChar);
while (startIndex !== -1 && endIndex !== -1) {
str = str.substring(0, startIndex) + str.substring(endIndex + 1);
startIndex = str.indexOf(startChar);
endIndex = str.indexOf(endChar);
}
return str;
}
/*** 向字符串指定位置插入字符(业务标记符) ***/
function insertString(str, insertStr, index) {
/*** 容错处理 ***/
if (typeof(str) == 'undefined' ||
typeof(insertStr) == 'undefined' ||
typeof(index) == 'undefined') {
return false;
}
return str.slice(0, index) + insertStr + str.slice(index);
}
/*** 业务处理主函数 ***/
function main (str, startChar, endChar, itemNames) {
/*** 容错处理 ***/
if (typeof(str) == 'undefined' ||
typeof(startChar) == 'undefined' ||
typeof(endChar) == 'undefined' ||
typeof(itemNames) == 'undefined') {
return false;
}
var newStrData = str;
var startIndex = str.indexOf(startChar);
/*** 如果是首次出现 ***/
if (str.indexOf('--') == -1) {
str = insertString(newStrData, '--', startIndex);
/*** 调用清除方法 ***/
let data = deleteBetweenCharacters(str, startChar, endChar);
let replacedStr = data? data.replace(/--/g, itemNames) : '';
return replacedStr;
}
}
// 示例用法
// const inputString = "This is 【some】 example 【string】 with 【special】 characters.";
// const str = main(inputString, "【", "】")
// console.log(str);
/*** 业务源数据 ***/
let dataList = [
{idStorage: 1, name: 'red', riskItem: '', suggest: '建议核实【】实际配件价格，剔除多定金额。'},
{idStorage: 1, name: 'red1', riskItem: '', suggest: '建议核实【高压电池包】【高压电池包】实际配件价格，剔除多定金额。'},
{idStorage: 2, name: 'sese', riskItem: '', suggest: '建议核实【】实际配件价格，剔除多定金额。'},
{idStorage: 1, name: 'red', riskItem: '', suggest: '建议核实【】实际配件价格，剔除多定金额。'},
{idStorage: 3, name: 'bbbd', riskItem: '', suggest: '建议核实【】实际配件价格，剔除多定金额。'}
];
/*** 拼接字符串小模板(备用) ***/
let itemNames = '【' + dataList.filter(item => item.idStorage === 1).map(item => item.name).join('】【') + '】';
console.log('itemNames', itemNames)
/*** 拷贝源数据备用 ***/
var arr = JSON.parse(JSON.stringify(dataList))
for (var i = 0; i < arr.length; i++) {
if (arr[i].idStorage == 1) {
arr[i].suggest = main(arr[i].suggest, "【", "】", itemNames)
}
}
console.log('arr', arr)

JavaScript代码

const inputString = "This is 【some】 example 【string】 with 【special】 characters.";
const str = deleteBetweenCharacters(inputString, "【", "】")
console.log(str);
//This is example with characters.

H5/JS/CSS | 评论(0) | 引用(0) | 阅读(1323)

JS时间格式排序

[

2024/12/17 22:15 | by 刘新修 ]

JavaScript代码

/**
* @description 2.根据日期时间混合排序
* @param {Object[]} dataList - 要排序的数组
* @param {string} property - 传入需要排序的字段
* @param {boolean} bol - true: 升序；false: 降序；默认为true 升序
* @return {Object[]} dataList - 返回改变完顺序的数组
*/
function dateSort(dataList, property, bol = true) {
dataList.sort(function (a, b) {
if (bol) {
// return a[property].localeCompare(b[property]); // 升序
return Date.parse(a[property]) - Date.parse(b[property]); // 升序
} else {
// return b[property].localeCompare(a[property]); // 降序
return Date.parse(b[property]) - Date.parse(a[property]); // 降序
}
})
return dataList;
}
let arrList = [
{ id: 1, name: 'test1', score: 99, dateTime: '2024-03-25 13:51:03' },
{ id: 2, name: 'test2', score: 89, dateTime: '2024-03-24 23:01:52' },
{ id: 3, name: 'test3', score: 102, dateTime: '2024-03-15 01:51:12' },
{ id: 4, name: 'test4', score: 100, dateTime: '2024-03-23 10:30:39' },
{ id: 5, name: 'test5', score: 111, dateTime: '2024-03-23 11:21:42' },
]
// console.log('升序：', dateSort(arrList, 'dateTime')); // 升序
console.log('降序：', dateSort(arrList, 'dateTime', false)); // 降序

H5/JS/CSS | 评论(0) | 引用(0) | 阅读(1286)

Dioxus由DioxusLabs开发的全栈应用框架旨在简化跨平台应用的开发

[

2024/12/10 17:14 | by 刘新修 ]

Dioxus是一个现代的、轻量级的、用于构建跨平台UI的库，灵感来源于React。它以其高性能、简洁的API和丰富的生态系统，为开发者提供了一种高效开发原生应用的新方式。

项目简介

Dioxus的核心目标是为移动应用、Web应用、桌面应用以及服务器端渲染提供一致性的开发体验。使用Rust编程语言编写，它提供了与React类似的语法和概念，但利用了Rust的强大功能，如类型安全和编译时检查，从而在性能上取得显著优势。

技术分析

Dioxus的架构基于组件模型，允许开发者以声明式的方式创建可复用的UI元素。与React类似，它使用虚拟DOM来减少对实际DOM的操作，不过Dioxus进一步优化，通过Rust的静态分析能力避免了不必要的更新，实现了更快的渲染速度。

此外，Dioxus还支持SSR（Server-Side Rendering）和SSG（Static Site Generation），并可以无缝地与WebAssembly集成，这使得它能够被广泛应用于Web开发和后端渲染场景。

应用场景

移动应用开发：Dioxus提供了一套完整的工具链，让你可以用Rust直接开发iOS和Android应用。

Web应用：你可以创建高效的单页应用，并受益于Rust的安全性和性能。

桌面应用：借助Electron或其它桌面应用框架，Dioxus可以轻松构建桌面应用。

服务器渲染：对于SEO友好的网站或者需要快速首屏加载的应用，Dioxus的SSR功能非常实用。

特点

高性能：Rust的零成本抽象和编译时优化，使Dioxus的性能远超传统的JavaScript解决方案。

类型安全：利用Rust的类型系统，Dioxus确保代码在运行前无类型错误，提高了软件的稳定性。

简洁API：Dioxus的API设计借鉴了React，对熟悉React的开发者来说，学习曲线较平缓。

跨平台兼容：一套代码，多平台运行，大大提高了开发效率。

强大的社区支持：Dioxus拥有活跃的开发者社区，不断推出新的库和工具，丰富生态体系。

快速使用指南

安装 CLI 工具：首先，安装 Dioxus 提供的 CLI 工具。可以通过以下命令进行安装：

cargo install dioxus-cli

创建新项目：使用 CLI 工具创建一个新的 Dioxus 项目：

dioxus new my_project

运行开发服务器：进入项目目录并启动开发服务器：

cd my_project dioxus serve

编写代码：在 src 目录下编写你的应用代码。Dioxus 使用类似 JSX 的语法，使得编写 UI 代码变得简单直观。

打包和部署：当应用开发完成后，可以使用以下命令进行打包和部署：

dioxus bundle --release

通过以上步骤，你可以快速上手 Dioxus 并开始构建跨平台应用。Dioxus 的高性能、易用性和强大的功能使其成为现代应用开发的理想选择。

结论

如果你正在寻找一种能够提升应用性能，同时保持开发效率的技术栈，Dioxus值得你尝试。其结合了React的易用性和Rust的高性能，为开发者带来前所未有的开发体验。无论是新项目还是现有项目的重构，Dioxus都能作为一个强大且灵活的选择。

PHP/Java/Go | 评论(0) | 引用(0) | 阅读(1479)

chrome 公网地址页面，无法访问内网地址图片及接口解决方法

[

2024/11/14 18:37 | by 刘新修 ]

C#代码

地址栏输入：chrome://flags/，回车。搜索找到Block insecure private network requests，设置禁用（Disabled），然后重启浏览器即可

浏览器相关 | 评论(0) | 引用(0) | 阅读(1433)

fetch获取wasm模块实例

[

2024/11/14 11:18 | by 刘新修 ]

fetch获取wasm模块实例

JavaScript代码

/*** 完整的实例 ***/
fetch("/pkg/wasm-lib/wasm_lib_bg.wasm")
.then((response) => response.arrayBuffer())
.then(bytes => {
var module = new WebAssembly.Module(bytes);
var imports = {
"__wbindgen_init_externref_table": ()=> {}
};
var instance = new WebAssembly
.Instance(module, { wbg: imports});
console.log(instance.exports.add(1,2));
})

axios获取wasm模块实例

JavaScript代码

/*** 请求.wasm文件流 ***/
this.$store.dispatch("test/getWasmStream",{}).then(async (res) => {
WebAssembly.compile(res.data).then(module => {
// 使用编译好的模块
// 打印静态属性
var imports = WebAssembly.Module.imports(module);
var exports = WebAssembly.Module.exports(module);
var strJSON = JSON.stringify({"imports":imports, "exports":exports}, null, 2)
console.log('strJSON', strJSON)
var imports = {
"__wbindgen_init_externref_table": ()=> {}
};
/*** 使用WASM模块(运行实例) ***/
var instance = new WebAssembly.Instance(module, {wbg: imports})
//console.log(instance.exports.add(3,6))
this.exports = instance.exports;
}).catch(error => {
console.error(error);
});
}).catch((error)=> {
console.log('Action failed', error);
});

loadWebAssemblyModule.js 封装

JavaScript代码

/*
* @Description: loadWebAssemblyModule.js
* @Version: 1.0
* @Author: Jesse Liu
* @Date: 2022-11-14 10:32:06
* @LastEditors: Jesse Liu
* @LastEditTime: 2024-11-14 10:55:25
*/
/*** AJAX加载WASM模块的函数 ***/
const getWebAssemblyModule = (url) => {
/*** 返回一个Promise ***/
return new Promise(function(resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'arraybuffer';
xhr.onload = function() {
if (xhr.status === 200) {
// 加载成功，编译WASM模块
var arrayBuffer = xhr.response;
WebAssembly.compile(arrayBuffer).then(function(module) {
resolve(module);
}).catch(function(error) {
reject(error);
});
} else {
// 出错了
reject(new Error('Error loading WASM module: ' + xhr.statusText));
}
};
xhr.send();
});
}
/*** fetch加载WASM模块的函数 ***/
const fetchWebAssemblyModule = (url) => {
/*** 返回一个Promise ***/
return new Promise(function(resolve, reject) {
fetch(url)
.then((response) => response.arrayBuffer())
.then(bytes => {
var module = new WebAssembly.Module(bytes);
resolve(module);
})
.catch(error => {
console.error('Fetch 错误:', error)
reject(error);
});
});
}
export { fetchWebAssemblyModule, getWebAssemblyModule };

H5/JS/CSS | 评论(0) | 引用(0) | 阅读(1346)

centos 安装 Emscripten

[

2024/11/08 15:53 | by 刘新修 ]

centos 安装 Emscripten

在CentOS上安装Emscripten需要几个步骤。以下是基本的安装指南：

更新系统包：

sudo yum update

安装Emscripten需要的依赖项：

sudo yum install git clang make python nodejs

获取Emscripten源代码：

git clone https://github.com/emscripten-core/emsdk.git

进入emsdk目录并安装最新的Emscripten SDK：

cd emsdk

./emsdk install latest

激活安装的SDK：

./emsdk activate latest

加载Emscripten环境变量，可以将以下命令加入到你的.bashrc或.bash_profile中，以便在每个新的终端会话中自动设置环境变量：

source ./emsdk_env.sh

完成以上步骤后，Emscripten应该就安装并配置好了。

可以通过运行emcc --version来检查是否安装成功。

[root@localhost emsdk]# emcc --version

shared:INFO: (Emscripten: Running sanity checks)

emcc (Emscripten gcc/clang-like replacement + linker emulating GNU ld) 3.1.71 (4171ae200b77a6c266b0e1ebb507d61d1ade3501)

This is free and open source software under the MIT license.

There is NO warranty; not even for MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

Linux/Unix | 评论(0) | 引用(0) | 阅读(1587)

安装Rust

[

2024/11/08 15:50 | by 刘新修 ]

Rust 是一种系统级编程语言，旨在提供高性能和内存安全，同时避免常见的编程错误。
由 Mozilla Research 推出，Rust 自推出以来因其独特的设计理念和强大的功能而在开发者社区中迅速获得了广泛的关注和采用。

安装命令：

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

分解说明：

curl：这是一个用于在命令行下传输数据的工具，支持多种协议（如 HTTP、HTTPS、FTP 等）。

--proto '=https'：指定只允许使用 HTTPS 协议进行传输，确保数据传输的安全性。

--tlsv1.2：强制 curl 使用 TLS 1.2 协议，这是一种安全的传输层协议。

-s：静默模式（silent），在执行过程中不会显示进度条或错误信息。

-Sf：

-S：当使用 -s（静默模式）时，-S 可以让 curl 在发生错误时仍然显示错误信息。

-f：如果服务器返回一个错误状态码（如 404），curl 会失败并返回一个错误，而不是输出错误页面的内容。

https://sh.rustup.rs：这是 Rust 官方提供的安装脚本的 URL。

| sh：管道符号（|）将前一个命令（curl）的输出传递给后一个命令（sh）。也就是说，下载的安装脚本将直接由 sh（shell）执行。

整体作用：

这个命令通过安全的 HTTPS 连接下载 Rust 的安装脚本，并立即在您的终端中执行该脚本，以便安装 Rust 编程语言及其工具链。

输出解释

C#代码

info: downloading installer
Welcome to Rust!
This will download and install the official compiler for the Rust
programming language, and its package manager, Cargo.
Rustup metadata and toolchains will be installed into the Rustup
home directory, located at:
/home/jjmczd/.rustup
This can be modified with the RUSTUP_HOME environment variable.
The Cargo home directory is located at:
/home/jjmczd/.cargo
This can be modified with the CARGO_HOME environment variable.
The cargo, rustc, rustup and other commands will be added to
Cargo's bin directory, located at:
/home/jjmczd/.cargo/bin
This path will then be added to your PATH environment variable by
modifying the profile files located at:
/home/jjmczd/.profile
/home/jjmczd/.bashrc
You can uninstall at any time with rustup self uninstall and
these changes will be reverted.
Current installation options:
default host triple: x86_64-unknown-linux-gnu
default toolchain: stable (default)
profile: default
modify PATH variable: yes
1) Proceed with standard installation (default - just press enter)
2) Customize installation
3) Cancel installation

逐行解释：

info: downloading installer

解释：安装程序正在下载过程中。

Welcome to Rust!

解释：欢迎使用 Rust！

接下来的几行

解释：这些行说明了安装过程将会下载和安装 Rust 官方编译器（rustc）以及其包管理器（Cargo）。

Rustup metadata and toolchains will be installed into the Rustup home directory, located at:

解释：Rustup 的元数据和工具链将被安装到指定的 Rustup 主目录中，默认路径为 /home/jjmczd/.rustup。您可以通过设置 RUSTUP_HOME 环境变量来修改此路径。

The Cargo home directory is located at:

解释：Cargo 的主目录位于 /home/jjmczd/.cargo。同样，您可以通过设置 CARGO_HOME 环境变量来修改此路径。

The cargo, rustc, rustup and other commands will be added to Cargo's bin directory, located at:

解释：cargo、rustc、rustup 以及其他相关命令将被添加到 Cargo 的 bin 目录中，即 /home/jjmczd/.cargo/bin。

This path will then be added to your PATH environment variable by modifying the profile files located at:

解释：安装程序会将上述 bin 目录路径添加到您的 PATH 环境变量中，这通过修改您的 shell 配置文件（如 /home/jjmczd/.profile 和 /home/jjmczd/.bashrc）来实现。这样，您可以在任何终端会话中直接运行 Rust 的命令。

You can uninstall at any time with rustup self uninstall and these changes will be reverted.

解释：如果您在任何时候想要卸载 Rust，可以运行 rustup self uninstall 命令，这将撤销所有安装的更改。

Current installation options:

解释：当前的安装选项如下：

default host triple: x86_64-unknown-linux-gnu

解释：默认的主机三元组（host triple）是 x86_64-unknown-linux-gnu，表示安装的是适用于 64 位 Linux 系统的 Rust 工具链。

default toolchain: stable (default)

解释：默认的工具链是 stable 版本，这是 Rust 的稳定版本，适合大多数用户和生产环境使用。

profile: default

解释：使用的是默认的安装配置文件，包含基本的组件和设置。

modify PATH variable: yes

解释：安装程序将修改您的 PATH 环境变量，以便您可以在终端中直接使用 Rust 的命令。

安装选项菜单：

C#代码

1) Proceed with standard installation (default - just press enter)
2) Customize installation
3) Cancel installation

1) Proceed with standard installation (default - just press enter)

解释：继续标准安装（默认选项）。如果您按回车键，将使用上述默认设置进行安装。

2) Customize installation

解释：自定义安装。选择此选项可以让您自定义安装路径、选择不同的工具链版本或调整其他安装选项。

3) Cancel installation

解释：取消安装。选择此选项将终止 Rust 的安装过程。

接下来的步骤

选择安装选项：

标准安装：如果您不需要自定义安装，直接按回车键继续。这将使用默认设置进行安装。

自定义安装：如果您需要更改安装路径或选择特定的工具链版本，可以输入 2 并按照提示进行操作。

取消安装：如果您暂时不想安装 Rust，可以输入 3 取消。

完成安装：

安装完成后，确保重新启动终端或重新加载 shell 配置文件，以便新的 PATH 设置生效。

您可以通过运行以下命令来验证 Rust 是否安装成功：

C#代码

rustc --version
cargo --version

这两个命令应分别返回 Rust 编译器和 Cargo 的版本信息。

更新 Rust（可选）：

如果您已经安装过 Rust，可以通过以下命令更新到最新版本：

C#代码

rustup update

PATH 环境变量未更新：

如果安装后运行 rustc --version 提示找不到命令，可能是因为 PATH 环境变量未正确更新。您可以手动添加 Cargo 的 bin 目录到 PATH 中，例如：

export PATH="$HOME/.cargo/bin:$PATH"

将上述行添加到您的 ~/.bashrc 或 ~/.profile 文件中，然后重新加载配置：

source ~/.bashrc

wasm-pack编译命令：

C#代码

[root@localhost brotli-compress-vue-component]# wasm-pack build --target web --out-name compress --out-dir pkg

Linux/Unix | 评论(0) | 引用(0) | 阅读(1500)

新版chrome无法请求内网接口的解决方法

[

2024/10/30 14:14 | by 刘新修 ]

开发本地项目时，访问接口如果遇到类似net::ERR_FAILED、Error: Network Error、Preflight等情形，可排查下是否因浏览器自身所致。

用新版chrome（版本92+）跨域请求本地接口，比如http://192.168.xxx.xxx/token。

点击右上角红色警告按钮，提示如下：

大概意思：

一个站点从一个网络中请求一个资源，由于其用户的特权网络位置，它只能访问这个资源。这些请求将设备和服务器暴露给互联网，增加了跨站点请求伪造(CSRF)攻击和/或信息泄漏的风险。
为了降低这些风险，Chrome弃用从非安全上下文发起的对非公共子资源的请求，并将在Chrome 92中开始屏蔽它们(2021年7月)。
若要解决此问题，请将需要访问本地资源的网站迁移到HTTPS。如果目标资源不在本地主机上提供服务，那么它也必须通过HTTPS提供服务，以避免混合内容问题。
管理员可以使用企业策略的insecureprivatenetworkrequestallowed和InsecurePrivateNetworkRequestsAllowedForUrls在所有或某些网站上暂时禁用此限制。

其实还是跨域方面的问题，按照要求设置即可。最简单的方法是暂时禁用此功能，毕竟本地测试的项目，一般安全性都不需要太高。

地址栏输入：chrome://flags/，回车。搜索找到Block insecure private network requests，设置禁用（Disabled），然后重启浏览器即可

浏览器相关 | 评论(0) | 引用(0) | 阅读(2086)

允许Chrome浏览器，请求内网资源地址，避免跨域问题

jpgjpeg有什么区别

字符串遍历拼接、字符串局部清除、字符串局部插入，等逻辑

JS时间格式排序

Dioxus由DioxusLabs开发的全栈应用框架旨在简化跨平台应用的开发

chrome 公网地址页面，无法访问内网地址图片及接口解决方法

fetch获取wasm模块实例

centos 安装 Emscripten

安装Rust

新版chrome无法请求内网接口的解决方法

分类

个人简介

Follow me

搜索

最新日志

新浪微博

最新评论

链接

归档

日历

其他

< 2026 > < 4 >
日	一	二	三	四	五	六
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30