使用 Rust 和 wasm-pack 开发 WebAssembly 应用
一、什么是 WebAssembly?
WebAssembly 是一种运行在现代 Web 浏览器中的新型二进制指令格式。它是一种低级别的字节码,可以被多种语言编译,并在浏览器中高效运行。
1.1 WebAssembly 的背景与概念
- 高性能计算:WebAssembly 旨在提高 Web 应用的性能,接近原生速度,适合计算密集型任务。
- 跨语言支持:开发者可以使用包括 C、C++、Rust 等多种编程语言编写代码,然后编译为 WebAssembly,在浏览器中运行。
- 安全沙箱环境:WebAssembly 在浏览器的沙箱环境中运行,确保了代码执行的安全性。
1.2 WebAssembly 对 Web 开发的意义
- 性能提升:相比于 JavaScript,WebAssembly 提供了接近原生的执行速度,显著提升了 Web 应用的性能。
- 更广泛的语言选择:开发者不再局限于 JavaScript,可以选择更适合特定任务的语言。
- 模块化和可移植性:WebAssembly 模块可以方便地在不同环境中加载和运行,增加了代码的复用性。
二、为什么选择 Rust?
在众多支持编译到 WebAssembly 的语言中,Rust 脱颖而出,成为开发者的热门选择。
2.1 Rust 语言的优势
- 内存安全:Rust 的所有权系统确保了内存安全,防止了常见的内存错误,如空指针和数据竞争。
- 高性能:Rust 编译后的代码性能接近于 C 和 C++,非常适合性能敏感的应用。
- 现代特性:Rust 提供了现代语言的特性,如模式匹配、泛型和函数式编程支持。
2.2 Rust 与 WebAssembly 的天然契合
- 无运行时开销:Rust 没有垃圾回收器,编译后的代码更小,启动更快,非常适合 WebAssembly 的场景。
- 强大的社区支持:Rust 社区对 WebAssembly 的支持非常积极,提供了丰富的工具和库。
- wasm-bindgen 工具:Rust 提供了
wasm-bindgen
,用于在 Rust 和 JavaScript 之间进行高效的交互。
三、什么是 wasm-pack?
要将 Rust 代码编译为 WebAssembly 并与 JavaScript 集成,wasm-pack 是不可或缺的工具。
3.1 wasm-pack 的作用
- 简化构建流程:一键式命令将 Rust 代码编译为 WebAssembly,并生成相应的 JavaScript 绑定。
- 包管理集成:自动生成
package.json
,方便通过 npm 进行包管理和发布。 - 开发者友好:提供了友好的输出信息和错误提示,简化了调试过程。
3.2 为什么使用 wasm-pack?
- 提高生产力:减少了手动配置的繁琐步骤,专注于业务逻辑开发。
- 一致性:确保生成的包符合 Web 标准和最佳实践。
- 活跃的社区支持:定期更新和维护,兼容最新的 Rust 和 WebAssembly 特性。
四、环境配置
在开始编写代码之前,我们需要配置开发环境。本节将指导你安装并设置所需的工具,包括 Rust、wasm-pack 以及其他相关依赖。
4.1 安装 Rust
首先,需要在你的系统上安装 Rust 编程语言。
4.1.1 使用 rustup
安装 Rust
Rust 提供了一个名为 rustup
的工具,用于管理 Rust 版本和相关组件。
-
步骤一:打开终端(命令行)。
-
步骤二:运行以下命令来安装
rustup
:curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
-
步骤三:按照提示完成安装过程。
4.1.2 配置环境变量
安装完成后,可能需要将 Rust 的路径添加到系统的环境变量中。根据安装提示,执行以下命令:
source $HOME/.cargo/env
4.1.3 验证安装
验证 Rust 是否安装成功:
rustc --version
如果终端输出了 Rust 的版本号,说明安装成功。
4.1.4 更新到最新稳定版
确保你的 Rust 版本是最新的稳定版本:
rustup update stable
4.2 安装 wasm-pack
wasm-pack 是一个用于构建 Rust WebAssembly 项目的工具。
4.2.1 使用 Cargo 安装 wasm-pack
Cargo 是 Rust 的包管理器,使用它来安装 wasm-pack:
cargo install wasm-pack
4.2.2 验证安装
检查 wasm-pack 是否安装成功:
wasm-pack --version
如果显示了版本号,表示安装成功。
4.3 安装其他依赖项
为了将编译后的 WebAssembly 模块与 JavaScript 集成,需要安装 Node.js 和 npm。
4.3.1 安装 Node.js 和 npm
前往 Node.js 官方网站 下载适用于你操作系统的安装包,并按照指示完成安装。
4.3.2 验证安装
验证 Node.js 和 npm 是否安装成功:
node -v
npm -v
如果两者都显示了版本号,说明安装成功。
4.3.3 安装 wasm-server-runner
(可选)
wasm-server-runner
是一个用于本地测试 WebAssembly 应用的简单服务器。
cargo install wasm-server-runner
4.4 创建项目目录
在开始实际开发之前,创建一个新的项目目录以组织代码。
mkdir hello-wasm
cd hello-wasm
五、与 JavaScript 集成
将编译后的 WebAssembly 模块与 JavaScript 前端应用集成是构建 WebAssembly 应用的重要一步。本节将指导你如何创建前端项目、引入生成的 WebAssembly 包,并在 JavaScript 中调用 Rust 导出的函数。
5.1 创建前端项目
为了演示如何与 WebAssembly 模块集成,我们将创建一个新的前端项目。
5.1.1 初始化前端项目
使用 npm
创建一个新的项目目录:
mkdir www
cd www
npm init -y
这将创建一个名为 www
的目录,并生成一个默认的 package.json
文件。
5.1.2 安装 Webpack 和开发服务器
我们将使用 Webpack 来打包前端代码,并使用 webpack-dev-server 来启动本地开发服务器。
npm install --save-dev webpack webpack-cli webpack-dev-server
5.1.3 配置 Webpack
在 www
目录下创建一个 webpack.config.js
文件,添加以下内容:
const path = require('path');module.exports = {entry: './index.js',mode: 'development',devServer: {contentBase: path.join(__dirname, 'dist'),compress: true,port: 8080,},output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist'),},
};
5.1.4 更新 package.json
在 package.json
中添加以下脚本:
"scripts": {"start": "webpack serve --open"
}
5.2 引入生成的 WebAssembly 包
现在,我们需要将之前使用 wasm-pack
生成的 WebAssembly 包引入到前端项目中。
5.2.1 复制生成的包
在之前的步骤中,wasm-pack build
命令在 pkg
目录下生成了 WebAssembly 包。将整个 pkg
目录复制到 www
目录下:
cp -r ../pkg ./pkg
5.2.2 安装本地包
在前端项目中,将本地的 wasm 包安装为依赖项:
npm install ./pkg
5.3 编写前端代码
现在,我们可以在 JavaScript 中调用 Rust 导出的函数。
5.3.1 创建入口文件
在 www
目录下创建一个 index.js
文件,添加以下内容:
import init, { add } from 'hello-wasm';async function run() {await init();console.log(add(2, 3)); // 输出 5
}run();
- 解释:
import init, { add } from 'hello-wasm';
:从刚才安装的 wasm 包中导入初始化函数和add
函数。await init();
:初始化 WebAssembly 模块。console.log(add(2, 3));
:调用 Rust 导出的add
函数,并在控制台输出结果。
5.3.2 创建 HTML 文件
在 www
目录下创建一个 index.html
文件,添加以下内容:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Hello Wasm</title>
</head>
<body><script src="bundle.js"></script>
</body>
</html>
5.3.3 修改 Webpack 配置(如果需要)
如果需要处理 WebAssembly 文件,你可能需要在 webpack.config.js
中添加对 .wasm
文件的支持:
module.exports = {// 之前的配置...experiments: {asyncWebAssembly: true,},
};
5.4 运行与测试
5.4.1 启动开发服务器
在 www
目录下,运行以下命令启动开发服务器:
npm run start
5.4.2 访问应用程序
打开浏览器,访问 http://localhost:8080
,打开开发者控制台,你应该能看到输出的结果:
5
这表明我们成功地在 JavaScript 中调用了由 Rust 编写的 WebAssembly 模块。
5.5 理解代码与调试
5.5.1 加载和初始化 WebAssembly 模块
在 JavaScript 中,我们需要先初始化 WebAssembly 模块,才能调用其中的函数:
await init();
5.5.2 调用导出的函数
初始化完成后,就可以像调用普通的 JavaScript 函数一样,调用 Rust 导出的函数:
console.log(add(2, 3));
5.5.3 调试技巧
- 查看网络请求:在浏览器的网络面板中,可以查看
.wasm
文件是否成功加载。 - 检查错误信息:如果有错误发生,浏览器控制台会显示详细的错误信息。
5.6 常见问题与解决方案
5.6.1 模块未找到
问题:运行时出现类似 Cannot find module 'hello-wasm'
的错误。
解决方案:确保已正确安装 wasm 包,并且在 package.json
的依赖中存在。如果是从本地安装,路径要正确。
5.6.2 WebAssembly 加载失败
问题:浏览器提示无法加载 .wasm
文件。
解决方案:检查 Webpack 配置,确保已启用 WebAssembly 支持。或者确认服务器正确配置了 MIME 类型。
六、发布与部署
在完成了开发和测试之后,下一步就是将你的 WebAssembly 应用优化并部署到生产环境。本节将指导你如何优化构建、减小文件大小,以及如何将应用部署到静态网站托管服务。
6.1 优化构建
为了在生产环境中获得最佳性能,我们需要对构建的 WebAssembly 模块进行优化。
6.1.1 使用 --release
进行发布构建
默认情况下,wasm-pack build
会进行调试构建,生成未优化的 WebAssembly 文件。使用 --release
标志可以生成优化后的构建。
wasm-pack build --release
6.1.2 解释优化的好处
- 更小的文件大小:优化后的
.wasm
文件体积更小,减少了网络传输时间。 - 更快的执行速度:编译器会进行代码优化,提高运行时性能。
- 去除调试信息:移除不必要的调试符号,保护代码的隐私和安全。
6.2 压缩 WebAssembly 文件
为了进一步减小文件大小,可以对生成的 .wasm
文件进行压缩。
6.2.1 使用 wasm-opt
工具
wasm-opt
是 Binaryen 项目中的一个优化工具,可以对 WebAssembly 模块进行高级优化。
6.2.1.1 安装 wasm-opt
从 WebAssembly Binaryen 发行版 下载适用于你操作系统的预编译二进制文件,或者通过包管理器安装。
6.2.1.2 优化 .wasm
文件
在 pkg
目录下运行:
wasm-opt -Oz -o your_project_bg.wasm your_project_bg.wasm
-Oz
:表示尽可能地优化并减小文件大小。-o
:指定输出文件,直接覆盖原文件。
6.2.2 使用 Gzip 或 Brotli 压缩
在服务器配置中启用 Gzip 或 Brotli 压缩,进一步减少传输的数据量。
6.3 部署到生产环境
现在,我们的应用已经过优化,准备好部署到生产环境。
6.3.1 部署到静态网站托管服务
以下是一些常用的静态网站托管服务:
6.3.1.1 GitHub Pages
- 步骤一:将你的项目推送到 GitHub 仓库。
- 步骤二:在仓库的设置中,启用 GitHub Pages,并指定发布分支和目录(通常是
gh-pages
分支或docs
文件夹)。 - 步骤三:访问生成的 GitHub Pages 链接,查看你的应用。
6.3.1.2 Netlify
- 步骤一:登录 Netlify 官网。
- 步骤二:新建一个站点,连接到你的 GitHub 仓库。
- 步骤三:配置构建命令和发布目录(例如,构建命令:
npm run build
,发布目录:dist
)。 - 步骤四:部署并访问你的应用。
6.3.1.3 Vercel
- 步骤一:登录 Vercel 官网。
- 步骤二:导入 GitHub 项目。
- 步骤三:配置项目设置,部署应用。
6.3.2 配置服务器 MIME 类型
确保服务器正确配置了 WebAssembly 的 MIME 类型,否则浏览器可能无法正确加载 .wasm
文件。
- MIME 类型:
application/wasm
6.3.2.1 Nginx 配置示例
在 Nginx 配置文件中添加:
types {application/wasm wasm;
}
6.3.2.2 Apache 配置示例
在 .htaccess
文件中添加:
AddType application/wasm .wasm
6.4 验证部署
6.4.1 测试应用功能
- 步骤一:在浏览器中访问你的应用网址。
- 步骤二:打开开发者工具,检查控制台输出是否正常。
- 步骤三:确认 WebAssembly 模块已成功加载并执行。
6.4.2 性能监测
使用浏览器的性能分析工具,查看应用的加载时间和运行性能,确保优化措施生效。
6.5 持续集成与部署(CI/CD)
为了简化后续的更新和部署,可以设置持续集成与部署流程。
6.5.1 使用 GitHub Actions
- 步骤一:在项目根目录创建
.github/workflows/ci.yml
。 - 步骤二:配置构建和部署步骤,例如在推送代码时自动构建并部署到 GitHub Pages。
示例配置:
name: Build and Deployon:push:branches: [main]jobs:build:runs-on: ubuntu-lateststeps:- uses: actions/checkout@v2- name: Install Rustuses: actions-rs/toolchain@v1with:toolchain: stableoverride: true- name: Install wasm-packrun: cargo install wasm-pack- name: Build wasm packagerun: wasm-pack build --release- name: Build frontendrun: |cd wwwnpm installnpm run build- name: Deploy to GitHub Pagesuses: peaceiris/actions-gh-pages@v3with:github_token: ${{ secrets.GITHUB_TOKEN }}publish_dir: ./www/dist
6.5.2 使用其他 CI/CD 平台
根据你的需求,也可以使用其他 CI/CD 平台,如 GitLab CI、Travis CI 等。
6.6 部署注意事项
6.6.1 HTTPS 支持
确保你的应用通过 HTTPS 访问,以满足现代浏览器对 WebAssembly 的安全要求。
6.6.2 浏览器兼容性
虽然大多数现代浏览器都支持 WebAssembly,但仍需考虑兼容性问题。
- 检查支持情况:使用 Can I use 查看 WebAssembly 的浏览器支持情况。
- 提供回退方案:对于不支持的浏览器,提供功能降级或友好的提示信息。
七、结论
经过以上的学习和实践,我们已经了解了如何使用 Rust 和 wasm-pack 开发 WebAssembly 应用。从环境配置到项目创建,再到与 JavaScript 的集成和部署,我们完整地走过了开发的全过程。本节将对所学内容进行总结,并提供一些进一步学习的资源。
7.1 总结
7.1.1 回顾开发流程
-
环境配置:安装了 Rust、wasm-pack,以及 Node.js 和 npm,为开发奠定了基础。
-
创建 Rust 项目:使用
cargo
创建了一个新的库项目,并编写了简单的 Rust 函数。 -
编译为 WebAssembly:通过
wasm-pack build
将 Rust 代码编译为 WebAssembly 模块。 -
与 JavaScript 集成:创建了前端项目,将生成的 WebAssembly 包引入,并在 JavaScript 中调用了 Rust 函数。
-
运行与测试:启动了本地开发服务器,验证了应用的功能。
-
发布与部署:优化了构建,部署了应用到生产环境。
7.1.2 学习与使用的优势
-
高性能:利用 Rust 的高性能和 WebAssembly 的高效执行,使 Web 应用获得了接近原生的速度。
-
安全性:Rust 的内存安全特性降低了运行时错误的风险,提升了应用的可靠性。
-
跨平台:WebAssembly 的跨平台特性,使得应用可以在各种支持 WebAssembly 的环境中运行。
-
丰富的生态系统:借助 wasm-pack 和其他工具,开发者可以方便地将 Rust 代码与现有的 JavaScript 生态系统结合。
7.2 进一步学习资源
为了深入了解 Rust 和 WebAssembly,以下是一些推荐的资源:
7.2.1 官方文档
-
Rust 官方网站:https://www.rust-lang.org/
Rust 的官方网站,包含了完整的语言文档和教程。
-
wasm-pack GitHub 仓库:https://github.com/rustwasm/wasm-pack
wasm-pack 的源代码和使用指南。
-
WebAssembly 官方网站:https://webassembly.org/
了解 WebAssembly 的最新进展和规范。
7.2.2 社区教程与博客
-
Rust and WebAssembly Book:https://rustwasm.github.io/docs/book/
官方的 Rust 与 WebAssembly 入门书籍,内容详实。
-
MDN Web Docs - WebAssembly:https://developer.mozilla.org/en-US/docs/WebAssembly
Mozilla 开发者网络提供的 WebAssembly 教程和参考资料。
-
深入理解 WebAssembly:寻找中文社区的教程和博客,帮助理解复杂概念。
7.2.3 示例项目
-
wasm-game-of-life:https://github.com/rustwasm/wasm-game-of-life
一个用 Rust 和 WebAssembly 实现的生命游戏,适合学习高级用法。
-
awesome-rust:https://github.com/rust-unofficial/awesome-rust#wasm
Rust 社区的精选项目列表,其中包含了许多 WebAssembly 相关的项目。
7.3 展望与建议
-
持续实践:通过实践巩固所学知识,可以尝试开发更复杂的应用。
-
参与社区:加入 Rust 和 WebAssembly 的社区,与其他开发者交流经验。
-
关注最新动态:WebAssembly 和 Rust 都在快速发展,保持对新特性的关注。
八、附录
在本附录中,我们将提供一些有用的参考链接、完整的代码示例,以及常见问题的解答,以便你在开发过程中有更多的资源可供参考。
8.1 参考链接
以下是一些与 Rust、WebAssembly 和相关工具的官方资源和文档:
-
Rust 官方网站:https://www.rust-lang.org/
Rust 编程语言的官方网站,提供了下载、文档和教程。
-
Rust 文档(The Rust Programming Language):https://doc.rust-lang.org/book/
详尽的 Rust 语言教程,适合初学者和有经验的程序员。
-
wasm-pack GitHub 仓库:https://github.com/rustwasm/wasm-pack
wasm-pack 的源代码仓库,包含了使用指南和更新日志。
-
WebAssembly 官方网站:https://webassembly.org/
WebAssembly 的官方网站,提供了规范、指南和最新动态。
-
wasm-bindgen 项目:https://github.com/rustwasm/wasm-bindgen
用于在 Rust 和 JavaScript 之间进行高效交互的工具。
-
Rust 与 WebAssembly 书籍:https://rustwasm.github.io/docs/book/
官方的 Rust 和 WebAssembly 学习资料,涵盖了从基础到高级的主题。
8.2 完整代码示例
为了帮助你更好地理解和实践,我们提供了完整的代码示例。你可以在以下 GitHub 仓库中找到本教程的完整源代码:
-
GitHub 仓库:https://github.com/yourusername/hello-wasm
注意:请将
yourusername
替换为你的 GitHub 用户名。
8.2.1 代码结构
项目的目录结构如下:
hello-wasm/
├── src/
│ └── lib.rs # Rust 源代码
├── Cargo.toml # Rust 项目的配置文件
├── pkg/ # wasm-pack 生成的 WebAssembly 包
└── www/├── index.html # 前端 HTML 文件├── index.js # 前端 JavaScript 入口文件├── package.json # 前端项目的配置文件└── webpack.config.js # Webpack 配置文件
8.2.2 主要文件说明
-
src/lib.rs
:包含了 Rust 的源代码,如导出的函数和模块。use wasm_bindgen::prelude::*;#[wasm_bindgen] pub fn add(a: i32, b: i32) -> i32 {a + b }
-
www/index.js
:前端的入口文件,负责加载和调用 WebAssembly 模块。import init, { add } from 'hello-wasm';async function run() {await init();console.log(add(2, 3)); // 输出 5 }run();
-
www/index.html
:简单的 HTML 文件,用于加载前端脚本。<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Hello Wasm</title> </head> <body><script src="bundle.js"></script> </body> </html>
8.3 常见问题解答
8.3.1 问题:在编译过程中遇到 wasm-bindgen
相关的错误
解答:确保已在 Cargo.toml
中添加了 wasm-bindgen
的依赖:
[dependencies]
wasm-bindgen = "0.2"
同时,检查是否已正确导入了 wasm-bindgen
:
use wasm_bindgen::prelude::*;
8.3.2 问题:浏览器无法加载 .wasm
文件,提示 MIME 类型错误
解答:这是因为服务器未正确配置 WebAssembly 的 MIME 类型。请参考前文的 6.3.2 配置服务器 MIME 类型,添加正确的 MIME 类型设置。
8.3.3 问题:在浏览器控制台中出现 unexpected end of section or function
错误
解答:可能是因为加载了未压缩或损坏的 .wasm
文件。确保 .wasm
文件在传输过程中未被损坏,或者检查服务器是否对 .wasm
文件进行了错误的压缩。
8.3.4 问题:TypeError: WebAssembly.instantiate(): Import #0 module="env" function="__wbindgen_placeholder__" error: function import requires a callable
解答:这是因为 WebAssembly 模块需要一些外部函数,但未正确初始化。确保在 JavaScript 中正确调用了初始化函数 init()
,并等待其完成:
await init();
8.4 额外的工具和资源
8.4.1 调试工具
-
wasm-snip:用于移除未使用的代码,减小
.wasm
文件的大小。GitHub 链接:https://github.com/rustwasm/wasm-snip
-
wasm-bindgen-debug:帮助在调试过程中更好地查看 WebAssembly 模块的状态。
GitHub 链接:https://github.com/rustwasm/wasm-bindgen/tree/master/crates/debug
8.4.2 社区与支持
-
Rust 中文社区:https://rustcc.cn/
提供了 Rust 相关的中文资源和讨论。
-
Stack Overflow:https://stackoverflow.com/questions/tagged/rust+webassembly
可以在这里提问和查找 Rust 与 WebAssembly 相关的问题。
相关文章:

使用 Rust 和 wasm-pack 开发 WebAssembly 应用
一、什么是 WebAssembly? WebAssembly 是一种运行在现代 Web 浏览器中的新型二进制指令格式。它是一种低级别的字节码,可以被多种语言编译,并在浏览器中高效运行。 1.1 WebAssembly 的背景与概念 高性能计算:WebAssembly 旨在提…...

1. IP地址介绍
IP地址 一、网络概述1、网络类型2、网络组成、传输介质2.1 组成2.2 传输介质 二、IP地址1、IP地址的表示方法2、IP地址的组成3、IP地址的类型3.1 根据IP地址第一个字节大小来分3.1.1 单播地址 Unicast 3.2 根据IP地址的使用 三、子网掩码 netmask1、默认的子网掩码2、判断多个I…...

喜报来袭~又有一波优秀企业选择Smartbi
近期,大金(中国)武汉&广州分公司、中广核智能、新疆银行、四川省人民医院等多家知名企业/机构签约Smartbi,数智化建设再上新高度! Smartbi数10年专注于商业智能BI与大数据分析软件与服务,为各行各业提…...

Web端云剪辑解决方案,BS架构私有化部署,安全可控
传统视频制作流程繁琐、耗时,且对专业设备和软件的高度依赖,常常让企业望而却步,美摄科技凭借其强大的技术实力和创新能力,推出了面向企业用户的Web端云剪辑解决方案,为企业提供一站式、高效、便捷的视频生产平台。 B…...

AI 代码助手插件推荐
AI正在重塑我们的工作方式,软件开发也不例外。AI编码助手使开发人员能够比以往更快、更有效地编写代码。 在本文中,我们将比较几个个最好的AI编码助手,突出它们的独特功能和价格,以帮助读者找到完美的编码伙伴: 1、腾讯云 AI 代…...

word中的表格全部设置宽度100%
1、背景 我们用工具将数据库或其他的数据导出成word时,表格有的会大于100%,超过了边界。word没有提供全局修改的方法。如果我们想改成100%。 一种方式是通过宏,全局改。一种是手动改。 2、宏修改 如果表格多,可以通过这种方式。…...

JFinal整合Websocket
学习笔记,供大家参考 总结的不错的话,记得点赞收藏关注哦!导入JAR包 javax.websocket-api <dependency><groupId>javax.websocket</groupId><artifactId>javax.websocket-api</artifactId><version>1.1&…...

(done) 声音信号处理基础知识(7) (Understanding Time Domain Audio Features)
参考:https://www.youtube.com/watch?vSRrQ_v-OOSg&t1s 时域特征包括: 1.幅度包络 2.均方根能量 3.过零率 振幅包络的定义:一个 frame 里,所有采样点中最大的振幅值 一个形象的关于振幅包络的可视化解释如下:…...

拓数派荣获上海数据交易所“数据治理服务商”认证
近期,杭州拓数派科技发展有限公司(以下简称“拓数派”)荣获上海数据交易所“数据治理服务商”认证,标志着拓数派正式加入上海数据交易所数商生态,成为上海数据交易所官方认证的数据治理服务商。拓数派企业发展部总监吴…...

【Redis】分布式锁之 Redission
一、基于setnx实现的分布式锁问题 重入问题:获得锁的线程应能再次进入相同锁的代码块,可重入锁能防止死锁。例如在HashTable中,方法用synchronized修饰,若在一个方法内调用另一个方法,不可重入会导致死锁。而synchroni…...

对象序列化
Data AllArgsConstructor NoArgsConstructor public class Product implements Serializable {public Long productId;public String productName;public Double productPrice;public String productImg;public Integer productStatus;public String productCategory; }为什么要…...

什么是专利开放许可?
专利作为技术创新的重要载体,其有效转化与应用成为推动社会进步和经济发展的关键力量。那么,专利开放许可究竟是何方神圣?它如何打破传统专利许可的壁垒,促进创新资源的广泛共享? 专利开放许可的定义 专利开放许可&am…...

地表最强开源大模型!Llama 3.2,如何让你的手机变身私人智能助理
你有没有想过,为什么现在的手机越来越像小型电脑?无论是拍照、看视频,还是用各种APP,甚至是AI助手,手机的功能几乎无所不能。其实,这一切的背后有一个技术正在悄悄改变我们的生活,那就是Llama 3…...

Pandas中DataFrame表格型数据结构
目录 1、DataFrame是什么2、创建一个dataframe3、获取dataframe的行、列索引4、获取dataframe的值 1、DataFrame是什么 series是有一组数据与一组索引(行索引)组成的数据结构,而dataframe是由一组数据与一对索引(行索引和列索引&…...

C++的智能指针
很久之前,我们说到了new和delete关键字。 new在堆上分配内存,需要delete来删除内存、释放内存,因为它不会自动释放内存。 智能指针是实现过程自动化的一种方式,即当我们调用new时,我们不需要调用delete关键字。 在很…...

微信小程序showLoading ,showToast ,hideLoading连续调用出现showLoading 不关闭的情况记录
wx.showLoading({title: "操作中",mask: true,});api().then(() > {wx.showToast({title: "操作成功",icon: "none",});}).finally(() > {wx.hideLoading();}); 类似的代码偶尔会出现showLoading不关闭的现象, 这种情况下的解决方法就是 …...

OpenFeign使用详解
什么是OpenFeign? OpenFeign 是一个声明式的 HTTP 客户端,旨在简化微服务架构中不同服务之间的 HTTP 调用。它通过集成 Ribbon 实现了客户端负载均衡,并且能够与 Eureka、Consul 等服务发现组件无缝对接。使用 OpenFeign,开发者只…...

CSS clip-path 属性的使用
今天记录一个css属性clip-path,首先介绍下这个属性。 clip-path 是CSS中的一个神奇属性,它能够让你像魔术师一样,对网页元素施展“裁剪魔法”——只展示元素的一部分,隐藏其余部分。想象一下,不用依赖图片编辑软件&am…...

PHP 函数
PHP 函数 PHP(超文本预处理器)是一种广泛使用的开源服务器端脚本语言,特别适合于网页开发。在PHP中,函数是一段可重复使用的代码,用于执行特定任务。它们是PHP编程的核心组成部分,有助于模块化代码&#x…...

NCEloss与InfoNCEloss的区别
NCE Loss(Noise Contrastive Estimation Loss)和 InfoNCE Loss 是两种常用的损失函数,主要应用在对比学习和自监督学习任务中。它们的区别在于应用场景和具体实现细节。下面是对两者的详细比较: 1. NCE Loss(Noise Co…...

高通Android 12 push framework.jar和service.jar
1、Android framework.jar和service.jar替换注意事项 2、单编 adb push service.jar脚本 如下 adb root adb disable-verity adb remountadb push services.jar system/framework adb push services.jar.prof system/framework adb push oat/arm64/services.art /system/fram…...

HTTPS证书配置
NGINX、SSl配置 修改conf目录下NGINX中的crt和key文件 单点配置SSL 需要的文件和配置信息 证书和keytool.exe(使用jdk1.8的)工具要在同一个目录下 gxszy.qhxzhny.top.pfx(证书) keystorePass.txt(密码) 使用JDK自带的keyto…...

Image matting入门
概念 matting就是扣图,本质是预测前景与背景,将前景扣出来。主要应用于影视行业,如拍电影绿幕扣图。和图像分割的区别在于多一个模糊地带,非01分类,变成了预测alpha通道。前景F,背景B,图像I可以…...

基于安全风险预测的自动驾驶自适应巡航控制优化
摘要 :从周边车辆运动学状态参数和道路设施条件参数中提取场景特征指标和安全风险度量指标,采用极端梯度提升模型(XGboost )和长短时记忆模型( LSTM )进行安全风险预测,由此提出基于安全风险预测的自动驾驶自适应巡航控制(ACC )优化方法,并选取碰撞发生概率、速度平均…...

Docker Compose 搭建 Redis 哨兵集群模式搭建详解(1主2从+3哨兵)(包含主从复制的搭建) (保证一遍学会)
目录 哨兵的作用和工作原理 服务状态监控 选举新的 master 如何实现故障转移 搭建哨兵集群 哨兵的作用和工作原理 Redis 提供了哨兵 (Sentinel) 机制来实现主从集群的自动故障恢复。哨兵的结构和作用如下 监控:Sentinel 会不断检查你的 master 和 slave 是否按…...

Oracle 单机和集群环境部署教程
目录 一、Oracle 单机环境部署1. 环境准备2. 安装 Oracle Database2.1 下载 Oracle Database2.2 创建 Oracle 用户和组2.3 配置内核参数和系统限制2.4 解压和安装2.5 配置监听程序2.6 创建数据库 3. 单机部署注意事项 二、Oracle 集群环境部署 (Oracle RAC)1. 环境准备2. 安装 …...

springboot 整合酷狗获取MV视频最高画质(使用自己账户)
在此声明,本内容仅供个人学习、研究或娱乐之用,严禁任何形式的商业用途。若您发现本内容被用于商业目的,请立即删除,及时与小编联系,我们将删除原代码。 请根据上一篇文章使用该代码:SpringBoot 整合酷狗获…...

数字孪生平台,助力制造设备迈入超感知与智控新时代!
痛点剖析 当前,制造业面临系统分散导致的数据孤岛问题,严重阻碍了有效监管与统计分析;同时,设备多样化且兼容性不足,增加了管理难度;台账记录方式混乱,工单审批流程繁琐且效率低下;…...

音视频入门基础:AAC专题(10)——FFmpeg源码中计算AAC裸流每个packet的pts、dts、pts_time、dts_time的实现
音视频入门基础:AAC专题系列文章: 音视频入门基础:AAC专题(1)——AAC官方文档下载 音视频入门基础:AAC专题(2)——使用FFmpeg命令生成AAC裸流文件 音视频入门基础:AAC…...

pycirclize python包画circos环形图
pycirclize python包画circos环形图 很多小伙伴都有画环形图的需求,网上也有很多画环形图的教程,讲解circos软件和circlize R包的比较多,本文介绍一款python包:pyCirclize。适合喜欢python且希望更灵活作图的小伙伴。 pyCirclize包实际上也…...