个人笔记
前端笔记
实用JSAPI接口
URLSearchParams：告别「手写」正则
痛点：拼接参数总是漏 &、多 ?。
一行代码：
const p = new URLSearchParams({q: '前端', year: 2025});
console.log(p.toString()); // q=%E5%89%8D%E7%AB%AF&year=2025
生产场景：任意 GET 请求、分页跳转。
隐藏彩蛋：URLSearchParams 本身是可迭代对象，可以直接 for-of。
structuredClone：「深拷贝」循环引用
痛点：JSON.parse(JSON.stringify(obj)) 掉 function、Date、undefined。
一行代码：
const copy = structuredClone(original);
生产场景：Redux 巨型 Store、画板历史记录。
注意：支持 Map/Set/Blob/File，但不拷贝函数。
测试骨架框
<view class="mosaic-box">
<div class="mosaic small"></div>
</view>
/* 马赛克样式 */
.mosaic-box {
background-color: #f5f5f5;
border-radius: 4px;
overflow: hidden;
width: 120px;
height: 24p
x;
}
后端请求外部接口
通过Jsoup解析返回的HTML代码
<dependency>
<groupId>org.jsoup</groupId>
<artifactId>jsoup</artifactId>
<version>1.17.1</version>
</dependency>
HttpRequest request = HttpRequest.get("https://v.api.aa1.cn/api/yiyan/index.php");
String text = Jsoup.parse(request.execute().body()).text();
System.out.println(text+"=================");
若依框架翻译
通过在实体类增加@Translation(type = TransConstant.USER_ID_TO_NAME, mapper = "createBy")注解来翻译
/**
* 创建人名称
*/
@Translation(type = TransConstant.USER_ID_TO_NAME, mapper = "createBy")
private String userName;
/**
* 创建人
*/
@ExcelProperty(value = "创建人")
private Long createBy;
其中的type为翻译的类型，通过常量确定翻译的字段，具体方法在com/minimap/common/translation/core/impl
其中通过
@TranslationType(type = TransConstant.USER_ID_TO_NICKNAME)
实现确定方法文件
自定义查询
接口层controller
// 通过sql查询
@GetMapping("/listSql")
public TableDataInfo<MapArticlesVo> listSql(@Validated(QueryGroup.class) MapArticlesBo bo, PageQuery pageQuery) {
return mapArticlesService.listCont(bo, pageQuery);
}
service层
TableDataInfo<MapArticlesVo> listCont(MapArticlesBo bo, PageQuery pageQuery);
@Override
public TableDataInfo<MapArticlesVo> listCont(MapArticlesBo bo, PageQuery pageQuery) {
LambdaQueryWrapper<MapArticles> lqw = buildQueryWrapper(bo);
Page<MapArticlesVo> page = baseMapper.listCont(pageQuery.build(),lqw);
System.out.println("哈哈哈哈"+lqw.getCustomSqlSegment());
return TableDataInfo.build(page);
}
Mapper层
Page<MapArticlesVo> listCont(@Param("page") Page<MapArticles> page, @Param("ew") Wrapper<MapArticles> wrapper);
xml文件
<select id="listCont" resultType="com.minimap.business.domain.vo.MapArticlesVo">
SELECT A.*,B.name
FROM map_articles A
LEFT JOIN map_topics B ON A.id = B.id
WHERE A.del_flag = 0
${ew.getCustomSqlSegment}
</select>
其中${ew.getCustomSqlSegment}为构造的查询条件，分页功能
部署教程
nignx部署及代理
compose文件
services:
nginx:
image: nginx:latest
container_name: nginx
restart: always
ports:
- "80:80"
- "443:443"
- "9120:9120"
volumes:
- /data/docker/nginx/conf:/etc/nginx/conf.d # 配置文件目录
- /data/docker/nginx/html:/usr/share/nginx/html # 网站文件目录
- /data/docker/nginx/logs:/var/log/nginx # 日志目录
- /etc/localtime:/etc/localtime # 时区同步
environment:
TZ: Asia/Shanghai
代理前端
1.将文件打包
注意:前端文件中的proxy只在开发环境中使用，打包后需要在nignx中配置代理后端地址
2.代理前端
注意：如果将端口9120作为监听端口则需要在compose中将该端口映射出来
listen 9120;
server_name localhost;
# 根路径服务 - 静态资源服务
location / {
root /usr/share/nginx/html/map;
index index.html index.htm;
# SPA路由支持：优先查找真实文件，不存在则返回index.html
try_files $uri $uri/ /index.html;
# 静态资源缓存优化
expires 6M;
access_log off;
add_header Cache-Control "public, immutable";
}
3代理后端：
注意：后端地址需要填写本地地址，即使你通过隧道穿透的也是
主要代码：
location /prod-api/ {
proxy_pass http://192.168.0.72:8080/; # 注意结尾的斜杠
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
redis在docker中部署
:sm
docker run --restart=always \
-p 6379:6379 \
--name redis7.2.5 \
-v /data/redis/conf/redis.conf:/etc/redis/redis.conf \
-v /data/redis/data:/data \
-d redis:7.2.5 redis-server /etc/redis/redis.conf \
--requirepass nP124%21
部署lucky
compose文件：
services:
lucky:
image: gdy666/lucky:latest
container_name: lucky
volumes:
- /data/lucky/data:/goodluck
- /data/lucky/ssl:/ssl
network_mode: host
restart: always
穿透SSH
使用cloudfare 的隧道连接ssh
运行cmd到cloudfare连接客户端，输入以下命令
其中localhost:222表示将ssh.srvdev.qzz.io映射到本地222端口
.\cloudflared.exe access ssh --hostname ssh.srvdev.qzz.io -url localhost:222