MeowRain

Life is Simple

用网络上的二次元随机图API写一个瀑布流相册使用grid布局

meowrain 发布于 2024-09-22 收录于前端

效果 html 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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="header">MeowRain's Images</div> <div class="content"> </div> <div class="footer">CopyRight MeowRain 2024</div> </div> <script> document.

个人图床 Go实现

meowrain 发布于 2024-09-22 收录于 Go

个人图床-Go实现 https://github.com/meowrain/img-bed-Go 使用到的框架: Gin 使用到的库: github.com/chai2010/webp 一.目录结构项目如何运行？什么是反向代理？二.安装相关库 1 2 3 4 go get -u github.com/gin-gonic/gin go get -u github.com/chai2010/webp go get -u gopkg.in/yaml.v3 go get -u "github.com/gin-contrib/cors" 三.配置读取-config/config.go 在config文件夹中编写config.go 分段分析我准备读取下面的配置文件 1 2 3 4 Domain: "http://127.0.0.1" port: 8080 auth: token: xxx # demo 这里需要分析一下我们的配置文件为什么这么写，Domain这个用来以后找你的图片，比如你准备把图床的网站域名设置为: https://pic.meowrain.cn，那么当你向http://your server ip:8080发送post请求上传图片后，会收到后端响应，响应给你的地址也就是https://pic.meowrain.cn/year/month/day/xxxx.webp 因此为了我们访问图片能访问到，你需要为你的webserver（比如nginx或者caddy)设置一个反向代理那么我需要编写对应的结构体,在config.go中 1 2 3 4 5 6 7 type Config struct { Domain stgring `yaml:"domain"` Port string `yaml:"port"` Auth struct { Token string `yaml:"token"` } `yaml:"auth"` } 然后我们需要一个公共变量供外部函数调用

Nginx配置訪問密碼

meowrain 发布于 2024-09-15 收录于折腾

Nginx 配置訪問密碼 Ubuntu安裝的nginx存放網站的目錄在/var/www下，我們在這個目錄創建一個auth文件夾 1 mkdir auth 然後我們創建訪問密碼和用戶的工具htpasswd，我們需要安裝apache2-utils 1 sudo apt-get install apache2-utils 然後我們使用htpasswd創建配置文件 1 htpasswd /var/www/auth username 如圖，我們輸入兩次密碼就可以了然后我们配置nginx的配置文件 1 vim /etc/nginx/conf.d/xxx.conf 如上图。我们绑定了域名为test2.meowtwyyds.top 然后设置auth_basic 和auth_basic_user_file 1 2 3 4 5 6 7 8 9 10 11 server { server_name yourdomain; listen port; location / { auth_basic on; auth_basic_user_file /var/www/auth/htpasswd; root /var/www/home; index index.html; } } 然后使用 1 nginx -s reload 进行配置文件重载，重载过后，我们就可以打开 yourdomain:port进行测试了

Nginx 编译安装

meowrain 发布于 2024-09-15 收录于折腾

参考 https://blog.csdn.net/weixin_59298892/article/details/134988500 下载源码包 1 2 wget https://nginx.org/download/nginx-1.26.2.tar.gz tar -zxvf nginx-1.26.2.tar.gz 安装编译必须库 1 2 sudo apt install build-essential sudo apt install gcc libpcre3 libpcre3-dev zlib1g-dev libssl-dev openssl 配置 1 ./configure --prefix=/usr/local/nginx --with-http_ssl_module --with-http_stub_status_module --with-http_gzip_static_module 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 2. 安装路径: Nginx 的安装路径为 /usr/local/nginx。可执行文件（二进制文件）位于 /usr/local/nginx/sbin/nginx。模块路径为 /usr/local/nginx/modules。配置文件路径为 /usr/local/nginx/conf。主配置文件为 /usr/local/nginx/conf/nginx.conf。 PID 文件（进程 ID 文件）为 /usr/local/nginx/logs/nginx.pid。错误日志文件为 /usr/local/nginx/logs/error.

WSL2中安装Arch

meowrain 发布于 2024-09-15 收录于折腾

这里你应该已经成功安装wsl了没安装的见这个 https://learn.microsoft.com/zh-cn/windows/wsl/install https://learn.microsoft.com/zh-cn/windows/wsl/install#upgrade-version-from-wsl-1-to-wsl-2 下载相关文件 https://github.com/yuk7/ArchWSL/releases 解压后,我们打开终端，执行Arch.exe,会自动安装里面的ext4.vhdx是安装后生成的配置首先在终端进入Arch.exe 然后配置密码 1 passwd 输入两次你的密码然后我们配置 sudo 权限 1 echo "%wheel ALL=(ALL) ALL" > /etc/sudoers.d/wheel 添加用户 1 useradd -m -G wheel -s /bin/bash {username} 设置默认用户密码 1 passwd {username} 设置Arch.exe默认启动的用户 1 Arch.exe config --default-user {username} 配置pacman 自动设置镜像 1 2 3 curl -l -O "https://raw.githubusercontent.com/LS-KR/Arch-Install-Shell-Stable/main/ustc-mirror.sh" sudo sh ./ustc-mirror.sh 配置pacman 1 2 3 4 5 6 7 sudo pacman-key --init sudo pacman-key --populate sudo pacman -Syy archlinux-keyring sudo pacman -Su 更新系统软件包

Go Jwt

meowrain 发布于 2024-09-15 收录于 Go

参考 https://juejin.cn/post/7342766597243207715?searchId=20240903160011693AB9B562C29F25EA11 http://ruanyifeng.com/blog/2018/07/json_web_token-tutorial.html JWT 介紹 JWT 即 JSON web Token ，用於在網絡應用環境中安全地傳遞聲明claims JWT 是一种紧凑且自包含的方式，用于作为 JSON 对象在各方之间安全地传输信息。由于其信息是经过数字签名的，所以可以确保发送的数据在传输过程中未被篡改。 JWT 組成結構 JWT 由三个部分组成，它们之间用 . 分隔，格式如下：Header.Payload.Signature、 Header： Header部分用於描述該JWT的基本信息，比如其類型和所使用的算法 Payload(負載)： Payload部分包含所傳遞的聲明，聲明是關於實體和其他數據的語句。聲明能分爲三種類型： > 注冊聲明 > 公共聲明 > 私有聲明 > Signature(簽名): 为了防止数据篡改，将头部和负载的信息进行一定算法处理，加上一个密钥，最后生成签名。如果使用的是 HMAC SHA256 算法，那么签名就是将编码后的头部、编码后的负载拼接起来，通过密钥进行HMAC SHA256 运算后的结果。 Signature 部分是对前两部分的签名，防止数据篡改。首先，需要指定一个密钥（secret）。这个密钥只有服务器才知道，不能泄露给用户。然后，使用 Header 里面指定的签名算法（默认是 HMAC SHA256），按照下面的公式产生签名。 HMACSHA256( base64UrlEncode(header) + “.” + base64UrlEncode(payload), secret) 算出签名以后，把 Header、Payload、Signature 三个部分拼成一个字符串，每个部分之间用"点"（.）分隔，就可以返回给用户。實際使用安裝go-jwt 1 go get -u github.com/golang-jwt/jwt/v5 创建 Token（JWT）对象生成 JWT 字符串首先需要创建 Token 对象（代表着一个 JWT）。因此我们需要先了解如何创建 Token 对象。

Golang使用bcrypt实现密码加密和验证

meowrain 发布于 2024-09-15 收录于 Go

golang使用bcrypt实现密码加密和验证介绍把用户的密码存入数据库的时候，我们当然不能使用明文存储，要对密码进行一次加密，然后再存储到数据库中。我们一般采用哈希算法实现对密码的加密，因为哈希算法得到的加密数据是不可逆的哈希算法（Hash Algorithm）是一种将任意长度的数据映射为固定长度数据的算法。哈希算法广泛应用于数据完整性校验、密码存储、数字签名等领域。以下是一些常见的哈希算法：简单的哈希算法 1. MD5 (Message Digest Algorithm 5) 输出长度: 128位（16字节）特点: 速度快，但安全性较低，容易受到碰撞攻击。应用: 文件校验、旧版密码存储。 2. SHA-1 (Secure Hash Algorithm 1) 输出长度: 160位（20字节）特点: 安全性较MD5高，但仍存在碰撞风险。应用: 数字签名、SSL证书。 3. SHA-2 (Secure Hash Algorithm 2) 子算法: SHA-224, SHA-256, SHA-384, SHA-512 输出长度: 224位、256位、384位、512位特点: 安全性高，广泛使用。应用: 数字签名、SSL/TLS、区块链。 4. SHA-3 (Secure Hash Algorithm 3) 子算法: SHA3-224, SHA3-256, SHA3-384, SHA3-512 输出长度: 224位、256位、384位、512位特点: 基于Keccak算法，与SHA-2结构不同，安全性高。应用: 数字签名、密码存储。 5. RIPEMD-160 (RACE Integrity Primitives Evaluation Message Digest 160) 输出长度: 160位（20字节）特点: 安全性较高，常用于比特币地址生成。应用: 数字签名、区块链。 6.

Electron項目因爲eslint配置原因報require錯誤解決

meowrain 发布于 2024-08-31 收录于 Electron

找到.eslintrc.cjs 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 /* eslint-env node */ require('@rushstack/eslint-patch/modern-module-resolution') module.exports = { root: true, 'extends': [ 'plugin:vue/vue3-essential', 'eslint:recommended', '@vue/eslint-config-typescript', '@vue/eslint-config-prettier/skip-formatting' ], parserOptions: { ecmaVersion: 'latest' }, rules: { "no-undef": "off" } } 添加 1 2 3 rules: { "no-undef": "off" } 就可以了

Electron引入和使用sqlite

meowrain 发布于 2024-08-31 收录于 Electron

安裝sqlite 1 npm i sqlite3 在main.js中使用ipcMain創建相關函數記住要導入包 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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 app.whenReady().then(() => { createWindow() dbInit() }) const sqlite3 = require('sqlite3').verbose() let db const dbInit = () => { // Ensure the directory exists const dbPath = path.

Vue項目導入Electron

meowrain 发布于 2024-08-31 收录于 Vue Electron

https://juejin.cn/post/7360899424107970586#heading-3 https://juejin.cn/post/7163088791007068191 安裝vue 1 npm create vue@latest 安裝electron 在安装 electron之前需要先配置一下安装源新建一个 .npmrc文件 windows的.npmrc在C:\Users\yourname Linux在用戶家目錄下 1 2 3 4 5 proxy=http://127.0.0.1:2080 home=https://www.npmjs.org registry=https://registry.npmjs.org/ https-proxy=http://127.0.0.1:2080 electron_mirror=https://npmmirror.com/mirrors/electron/ 我這裏不僅設置了electron的mirror，還設置了npm的代理，防止下載出現問題然後我們安裝electron 1 npm install --save-dev electron 安装electron-builder 用于打包可安装exe程序和绿色版免安装exe程序 1 npm install -D electron-builder 用vite构建electron应用程序需要一个vite插件 1 npm install -D electron-devtools-installer 安裝vite配套electron的插件 1 npm install vite-electron-plugin vite-plugin-electron-renderer -D 接下來我們新建一個electron目錄在electron目錄裏面創建一個index.ts，用於配置electron 這個目錄裏的ts文件後面會被編譯為js文件，放在dist-electron目錄中 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 31 32 33 34 35 36 37 // src-electron/main.