一个客户端AES自己加密自己解密示例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>crypto-js-AES加密</title> <!-- 加密 --> <script src="https://cdn.bootcss.com…
从前端，到后端，除了Gin框架本身，完全不依赖第三方库，极简实现，无比丝滑。 流程梳理 客户端生成一个AES密钥（建议存Cookie里） 服务端生成一对RSA密钥（private.pem+public.pem） 服务端开启一个接口，接收任意请求方法都行，将RSA公钥以Set-Cookie标头直接塞到客户端浏览器Cookie里面（记得以base64传…
刚看到一篇文章：HTML 为什么在HTML中使用onClick()是不良实践的 onClick() 现代对于onClick()的看法 不符合分离原则：将JavaScript代码嵌入HTML中违反了内容（HTML）、样式（CSS）和行为（JavaScript）分离的原则。 维护困难：当事件处理逻辑变得复杂时，HTML文件会变得难以阅读和维护。 作用域…
当今虽有HTTPS，但一些重要数据如果需要存在客户端，还是要进行额外加密，同时更能确保传输过程安全。对于少量数据的加解密，非对称加密RSA还是非常好用的，如果是大量数据要考虑使用AES+RSA混合加密。 下方示例中前端纯HTML+JS，后端使用Go（Gin框架）。 HTML 使用公钥数据加密并将加密后的数据发送POST请求到后端。 <!DOC…
src/router/main.ts 参考示例，提前写好一个用于展示的页面放到src/pages/404.vue import { createRouter, createWebHashHistory } from 'vue-router/auto' import { setupLayouts } from 'virtual:generated-l…
定义好一个图片url地址字典随机请求罢了，免了做后端接口，本篇只是为了方便以后copy记录一下。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width…
测试某接口返回8.9MB的JSON数据，前端dom花10秒左右才渲染出来完整数据，加载过程一直是白屏，造成用户体验极差，还容易造成卡死。不得不上这招了，顺便记录一下解决办法。 原理 请求接口成功后，通过response.body获取到可读流（ReadableStream）。 示例 <!DOCTYPE html> <html lan…
UMD（Universal Module Definition）模块格式允许JavaScript代码在不同的环境和模块系统中使用。本文将教学：使用Vite构建工具将一个名为demo的模块打包成UMD格式，并通过版本号命名文件夹，最后将其部署到CDN，以便在HTML页面中直接引用。 创建一个新项目(文件夹)，进入到项目文件夹中初始化并安装依赖： np…
封装开源了一个调用Alist API进行前端文件上传的JS库，支持CDN引入
JS: 检测不同系统/浏览器所支持的视频格式+回退操作
为了方便后期调用Alist进行文件上传，特地将一篇往期文章的JS部分封装成了CDN库。 项目开源地址 GitHub4444TENSEI/AlistUploaderJS 话不多说，直接上示例。 CDN引入，快捷调用示例（HTML） <!DOCTYPE html> <html lang="zh-CN"> <head&…
今天写页面发现一个问题，不同浏览器之间的视频播放器需要做好适配，记录一下检测和自动切换的办法。 将下方HTML自行部署到服务器，从不同设备和浏览器测试，可以发现差异还是不小的。 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"&…