编辑
2025-07-01
(灵机一线)前端小项目
00
编辑
2025-07-01
前端开发遇到问题
00

在使用百度地图官方推荐react库react-bmap时,会经常遇到最新api无法使用的问题(该库也已经很久未维护),因此这里需要修改react-bmap源码,加入最新api。这里以展示标注配置showVectorStreetLayer为例,修改原始包。

问题截图

img1.png

使用pnpm命令给包打补丁

  • 安装pnpm
  • 使用pnpm重新安装所有包(生成pnpm-lock.yaml文件)
  • 使用pnpm patch给指定包打补丁
  • 修改包代码
  • pnpm patch-commit提交修改文件
  • 重启项目
bash
# 安装pnpm npm install -g pnpm@latest-10 # 使用pnpm重新安装所有包(生成pnpm-lock.yaml文件) pnpm i # 使用pnpm patch给指定包打补丁(命令成功后生成/patches/react-bmapgl.patch文件,同时node_modules文件夹下会生成一个.pnpm_patches/react-bmapgl@0.2.28文件) pnpm patch react-bmapgl # 提交修改文件 pnpm patch-commit '/Volumes/KX_sd10/sd_pro/cms_v5.1/node_modules/.pnpm_patches/react-bmapgl@0.2.28' # 重启项目 pnpm run start

react-bmapgl修改添加showVectorStreetLayer配置

找到/node_modules/react-bmapgl/dist/Map/Map.js,安全修改配置 在78行下添加

js
,'showVectorStreetLayer'

在133行添加

js
if(this.props?.showVectorStreetLayer !== undefined) { options.showVectorStreetLayer = this.props?.showVectorStreetLayer }

使用组件添加showVectorStreetLayer配置

js
<Map ref={(ref: any) => { map = ref ? ref.map : null; actions.addMap(ref ? ref.map : null) }} showVectorStreetLayer={true} // 百度地图个性化配置,可在https://lbsyun.baidu.com/index.php?title=open/custom配置需要用到的json mapStyleV2={{ styleJson: satelliteJson }} > </Map>

已经卫星地图已经改为自定义标注

img321.png

编辑
2025-06-28
部署项目遇到的问题
00

在使用homebrew安装应用时,git clone github项目特别慢,因此需要用到github镜像文件下载。

加速方法

  1. 进入加速网站复制加速链接 https://www.7ed.net/gitmirror/hub.html

  2. git配置替换https命令

shell
git config --global url."https://hub.gitmirror.com/https://github.com/".insteadOf "https://github.com/"

该配置是将项目https://github.com/open-webui/open-webui地址更换为https://hub.gitmirror.com/https://github.com/open-webui/open-webui。从而达到加速的目的。

  1. 下载完成后,删除该配置。
shell
git config --global --unset url."https://hub.gitmirror.com/https://github.com/".insteadOf "https://github.com/"

由于此命令为全局配置需要删除,若只针对当前终端页,第一个命令移除--global即可

bash
git config url."https://hub.gitmirror.com/https://github.com/".insteadOf "https://github.com/"

成功图片

18e7253aa99898c63af68d12cfe7cae1.jpg

扩展

https://hub.gitmirror.com/ 文件加速失效,可尝试使用其它网站,例如:

镜像网站使用命令
https://mirror.ghproxy.com/git config url."https://mirror.ghproxy.com//https://github.com/".insteadOf "https://mirror.ghproxy.com/"
https://gitmirror.com/git config url."https://gitmirror.com/".insteadOf "https://mirror.ghproxy.com/"
https://fastgit.org/git config url."https://fastgit.org/".insteadOf "https://mirror.ghproxy.com/"
编辑
2025-05-19
部署项目遇到的问题
00

近期认识到刷路由器固件可以加快自己路由器的网速,于是我萌生了一个想法,用ttl烧录固件,完成openwrt安装。用到的路由器型号 TX 1801plus(pdd 29元),使用的mac电脑(该有的都有就是扩展坞啥的很麻烦),ttl转usb,杜邦线(一边公一边母)。

准备操作

将路由器撬开,或者牛一些的可以在路由器的散热孔找引脚,只要对上插进去,就能进入到reboot界面,然后按0进入到boot指令内。

刷入系统

下载对应openwrt包,通过tftp远程传入路由器内(这里对mac很坑,因为要插网线,将电脑与wifi连起来,wifi要插lan口,这里不能用远程网络 555~)。

刷入openwrt就能使用了

后续出完整教程。。。

编辑
2025-05-17
部署项目遇到的问题
00

最近需要一个文档应用,需要支持设置文档过期时间与文档打开次数,即阅后自焚,于是上github找到一个特别匹配的项目。pastme:https://github.com/LucienShui/PasteMe

项目部署教程

docker部署方式

通过查看项目部署方式,查找到该项目可通过docker镜像形式部署,只需要使用该docker配置文件,输入命令,即可一件部署:

js
version: "3" services: pasteme-frontend: image: pasteme/frontend:3.4.1 container_name: pasteme-frontend depends_on: - pasteme-backend healthcheck: test: ["CMD", "curl", "-so", "/dev/null", "localhost:8080/usr/config.json"] interval: 45s timeout: 3s retries: 3 restart: always //前端页面端口可配置成其它端口,6001:8080 ports: - 80:8080 volumes: - ./data/nginx-logs/:/var/lib/pasteme/ - ./data/frontend-usr/:/www/pasteme/usr/ pasteme-backend: image: pasteme/go-backend:3.5.1 container_name: pasteme-backend depends_on: - pasteme-mysql healthcheck: test: ["CMD", "wget", "-O", "/dev/null", "localhost:8000/api/v3/?method=beat"] interval: 45s timeout: 3s retries: 3 restart: always volumes: - ./data/backend-config/:/etc/pastemed/ logging: driver: "json-file" options: max-file: "3" max-size: "128m" pasteme-mysql: image: mysql:5.5 container_name: pasteme-mysql healthcheck: test: ["CMD", "mysqladmin" ,"ping", "-h", "localhost"] interval: 45s timeout: 3s retries: 3 restart: always command: [ '--character-set-server=utf8mb4', '--collation-server=utf8mb4_unicode_ci' ] environment: MYSQL_USER: username MYSQL_PASSWORD: password MYSQL_ROOT_PASSWORD: password MYSQL_DATABASE: pasteme MYSQL_MAX_ALLOWED_PACKET: 128M MYSQL_INNODB_LOG_FILE_SIZE: 64M volumes: - ./data/mysql:/var/lib/mysql logging: driver: "json-file" options: max-file: "3" max-size: "128m"

配置提示

其中前端项目可更换其它对外端口,即将ports: - 80:8080 修改为 ports: - 6001:8080。这样对外端口就为6001

在当前目录下执行命令即可下载安装镜像文件。

shell
docker-compose up -d

在安装过程中由于docker镜像网站被国内封禁。可添加国内镜像。添加源后再安装镜像即可。

shell
sudo tee /etc/docker/daemon.json <<-'EOF' { "registry-mirrors": [ "https://docker.m.daocloud.io", "https://docker.imgdb.de", "https://docker-0.unsee.tech", "https://docker.hlmirror.com", "https://docker.1ms.run", "https://func.ink", "https://lispy.org", "https://docker.xiaogenban1993.com" ] } EOF #重启docker服务 sudo systemctl daemon-reload && sudo systemctl restart docker #验证源是否加载成功 sudo docker pull hello-world

项目部署后,发现文档有限制,只可创建最多查看3次的文档,需要修改后端代码,于是需要将docker内的开源后端项目改为本地编译的镜像。

修改后端项目docker-compose配置

将后端代码库通过git拉取到服务器内,后端开源项目地址https://github.com/PasteUs/PasteMeGoBackend 再将Dockerfile文件内的配置修改,添加go模块载入代理

config
go env -w GOPROXY=https://goproxy.cn

修改后配置文件

js
FROM pasteme/golang:1.16-alpine AS builder COPY ./ /go/src/github.com/PasteUs/PasteMeGoBackend WORKDIR /go/src/github.com/PasteUs/PasteMeGoBackend go env -w GOPROXY=https://goproxy.cn RUN go mod download RUN go build main.go RUN mkdir /pastemed && \ cp config.example.json docker-entrypoint.sh /pastemed/ && \ cp main /pastemed/pastemed FROM alpine:3 LABEL maintainer="Lucien Shui" \ email="lucien@lucien.ink" ENV TZ=Asia/Shanghai COPY --from=builder /pastemed /usr/local/pastemed RUN chmod +x /usr/local/pastemed/pastemed && \ mkdir /data && \ mkdir -p /etc/pastemed/ && \ apk --no-cache add build-base tzdata && \ cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime && \ echo "Asia/Shanghai" > /etc/timezone CMD ["/usr/bin/env", "sh", "/usr/local/pastemed/docker-entrypoint.sh"] EXPOSE 8000

再修改原始的docker-compose文件配置 将加载的镜像修改为本地编译

config
修改前 image: pasteme/go-backend:3.5.1 修改后 build: ./pasteme-backend #该目录为拉取的代码目录

修改后的配置文件

shell
version: "3" services: pasteme-frontend: image: pasteme/frontend:3.4.1 container_name: pasteme-frontend depends_on: - pasteme-backend healthcheck: test: ["CMD", "curl", "-so", "/dev/null", "localhost:8080/usr/config.json"] interval: 45s timeout: 3s retries: 3 restart: always //前端页面端口可配置成其它端口,6001:8080 ports: - 80:8080 volumes: - ./data/nginx-logs/:/var/lib/pasteme/ - ./data/frontend-usr/:/www/pasteme/usr/ pasteme-backend: build: ./pasteme-backend container_name: pasteme-backend depends_on: - pasteme-mysql healthcheck: test: ["CMD", "wget", "-O", "/dev/null", "localhost:8000/api/v3/?method=beat"] interval: 45s timeout: 3s retries: 3 restart: always volumes: - ./data/backend-config/:/etc/pastemed/ logging: driver: "json-file" options: max-file: "3" max-size: "128m" pasteme-mysql: image: mysql:5.5 container_name: pasteme-mysql healthcheck: test: ["CMD", "mysqladmin" ,"ping", "-h", "localhost"] interval: 45s timeout: 3s retries: 3 restart: always command: [ '--character-set-server=utf8mb4', '--collation-server=utf8mb4_unicode_ci' ] environment: MYSQL_USER: username MYSQL_PASSWORD: password MYSQL_ROOT_PASSWORD: password MYSQL_DATABASE: pasteme MYSQL_MAX_ALLOWED_PACKET: 128M MYSQL_INNODB_LOG_FILE_SIZE: 64M volumes: - ./data/mysql:/var/lib/mysql logging: driver: "json-file" options: max-file: "3" max-size: "128m"

重新安装项目

先删除原有的镜像再重新安装

shell
#查找原有镜像 docker images -a #删除镜像 docker rmi -f 6d46013a1ed 915d0aad7a5 d404d78aa79

根据修改配置文件安装镜像

shell
docker-compose up -d

安装成功后即可看到部署修改后的后端服务