饼干爱折腾
后端如何正确接收Long类型的数据,且防止前端随便输入字符串
在后端接收并验证"Long"类型的数据,同时防止前端随意输入字符串造成类型错误,我们可以使用一套完整的校验机制来确保收到的数据符合预期。
1. 前端输入校验: 在前端,使用JS等技术进行初步校验,确保传递给后端的字段如"businessId"等只包含数字,且符合"Long"类型的限制。这可以通过正则表达式或现成的前端库来实现。
2. 后端注解校验: 后端Java代码中使用Java Bean Validation(例如"javax.validation.constraints"系列中的注解)进行验证,对"Long"类型的数据,特别注意以下几点:
- 使用"@NotNull"确保字段不为空。
- 使用自定义注解或者"@Pattern"(配合字符串)来定义允许通过的格式。
3. 请求处理层转换: 确保在Spring或其他MVC框架的控制器中收到参数时,参数能够自动转换为"Long"。Spring Boot等框架通常会自动处理这种类型转换,但可以通过配置或自定义转换器进行控制。
4. 异常处理: 增加异常捕获机制,当输入不符合"Long"类型约束时,抛出特定的异常并返回给前端有意义的错误信息。
示例代码部分:
import javax.validation.constraints.NotNull;
public class CommunityManageV1Req {
@NotNull(message = "操作业务id不能为空")
private Long businessId;
@NotNull(message = "操作业务类型不能为空")
private Integer businessType;
@NotNull(message = "操作状态不能为空")
private Integer optStatus;
private String optUserName;
@NotNull(message = "操作人ID不能为空")
private Long optUserId;
// Getter和Setter省略
}
5. 日志记录: 在后端对每一个请求异常记录日志,以便排查和修正数据校验问题。
通过这几个步骤,我们可以确保后端能够正确接收和验证"Long"类型数据,并有效防止不良或意外输入对系统的影响。
饼干爱折腾
websocket请求头中如何带上cookie?
带cookie,是为了带token吗,我这有一段ws的带token的方法。
ws = new WebSocket(url, [store.getters.token]);
饼干爱折腾
vue3+echarts5绘制地图后怎么添加标签?
import { ref, onMounted } from "vue";
import * as echarts from "echarts/core";
import {
TitleComponent,
TooltipComponent,
GridComponent,
GeoComponent,
} from "echarts/components";
import { MapChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
import world from "@/data/africa.json";
import { africaXY } from "@/data/africaXY.js";
echarts.use([
TitleComponent,
TooltipComponent,
GridComponent,
GeoComponent,
MapChart,
CanvasRenderer,
]);
const selectedCountries = ref(["Algeria"]);
function getAllNames(data) {
const names = [];
data.features.forEach((feature) => {
if (feature.properties && feature.properties.name) {
names.push({ name: feature.properties.name });
}
});
return names;
}
const convertData = (data) => {
var res = [];
for (var i = 0; i {
const option = {
backgroundColor: "#132538",
tooltip: {
trigger: "item",
enterable: true,
},
geo: {
map: "world",
center: [50, 5],
roam: true,
zoom: 1.3,
scaleLimit: {
// min:
},
label: {
normal: {
// show: true,
},
},
tooltip: {
trigger: "item",
padding: 0,
enterable: true,
transitionDuration: 1,
textStyle: {
color: "#818A91",
decoration: "none",
},
backgroundColor: "rgba(255,255,255,0.96)",
// borderColor:'#000000',
//borderWidth: 1,
formatter: function (params) {
// var tipHtml = "";
// tipHtml =
// '' +
// '' +
// params.name +
// "" +
// '2018年整体进口额为10000323万元;' +
// '2018年整体进口所占份额为13%;' +
// '2018年年进口额增长率为-10%;' +
// "";
return params.name;
},
},
// itemStyle: {
// normal: {
// borderWidth: 2, //设置边线粗细度
// opacity: 0.6, //设置透明度,范围0~1,越小越透明
// areaColor: "#63B8FF", //地图区域颜色
// },
// emphasis: {
// areaColor: "#7FFF00", //高亮时地图区域颜色
// },
// },
nameMap: {
Africa: "非洲",
Algeria: "阿尔及利亚",
},
emphasis: {
itemStyle: {
areaColor: "#2B91B7",
},
show: true,
areaColor: "#131834", //鼠标滑过区域颜色
label: {
show: true,
textStyle: {
color: "#fff",
},
},
},
},
series: [
{
type: "scatter",
coordinateSystem: "geo",
data: convertData([{ name: "Algeria"}]),
zlevel: 12,
// symbolSize: [20, 37], // 标记的大小,[宽、高]
//symbol: 'pin', //气泡
// symbol:
// "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAlCAYAAABCr8kFAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsSAAALEgHS3X78AAAC1klEQVRIx+2WS0gVURjHf6OXvD4jM1+ZVhJmWNfwolmhqxaWRFQgLcwIWkVFG90EEUGhmyBKcpdUCGaPhenClZDgq8iyMqy8lo+0C5nPaz6+FndGx7mP5rqIFv3hwJnvO+d3zjffOd+MggnF1l8WM+MAgswONCtLIINHC68of32H/4H/INCrRCRYRE6LyCMR6RmeGZePk04Rkaeq3fxGRMQmIr3iXx9EZLcZWKEEpkJ/sJQAYZqS9BxFB+wEsrRn1+Ist4fv8tjZyNCvERLXxHE0poCzCaewBoXoGa2KouSuAIrIPuC5ZpxZdHHi3UU6J7o9IrFHZlCz4wahQVa9OUdRlHZYPjbFeu+trw/pGHMgCxEerWPMQeVAnXGdEq2jAXfqvU9G2rzCtFY33GoE7tI6WvmK13sHpuaQxSifCRycnjOaEozAFXUu0bIJx7TTJzA+dL3RFGwMeVDvPRK3x2/IxxP2GoHfjcBOvfdCaj72tWleYfa1aZzbmmcEtmsd7dhkA236Ea6FeW72dnLP0T3lnJ22xoSEuYo3Z4Sf32bHGuzx5chUFKVrhUVEXqzypjR4fdEikrlKYLTP7IlIbYCwS/iTiISIyLhJWB9mJCKHTQJtpoAqtO4PsHLTMBVoERGnD9hnf3NXXLmSsooQIBaILjqYn1OQl11lnFDb2Hyyobn9NfADGKkuL531AJaUVUQA23EXiaVFys4UHUtPTV4qTZ++DNVerXxwXx8M8A3oqS4vnQQILimriAVygSjcVzEJdznKann5Nio9NSU6KiLM2ts/OHrtTs0gsAWIARaBSSACSM7cf+BnV0vTlAWwsVwtDgEp+hCuV9W80j2Gqy1RndcP1KvzbUBTkLrSauXxI2oB3gB2dZVnwEY1rA3qa7CqvgXABYzjLld9LJe9BaDLmJR0IM6YeRM7HAHea0nxdmzigHVAJBCqRmEB5tWdTAMTvo7Nbwng09R+hsh2AAAAAElFTkSuQmCC",
symbolOffset: [0, "-50%"], // 标记相对于原本位置的偏移
// label: {
// normal: {
// show: true,
// offset: [18, -10], // 是否对文字进行偏移。默认不偏移。例如:[30, 40] 表示文字在横向上偏移 30,纵向上偏移 40。
// formatter: function (params) {
// console.log("气泡:", params);
// return "{fline|" + params.data.name + "}";
// },
// position: "insideTopLeft", // 标签相对于图形包围盒左上角的位置。
// distance: 0,
// backgroundColor: "#16B47F",
// padding: [0, 0],
// borderRadius: 3,
// // verticalAlign:'middle',
// // lineHeight: 32,
// color: "#ffffff",
// rich: {
// fline: {
// padding: [4, 6, 4, 6],
// color: "#ffffff",
// },
// },
// },
// emphasis: {
// show: false,
// },
// },
itemStyle: {
emphasis: {
borderColor: "#fff",
borderWidth: 1,
},
},
},
],
};
mapInstance.value.setOption(option);
mapInstance.value.on("click", function (params) {
console.log("---params----", params);
});
};
onMounted(() => {
mapInstance.value = echarts.init(map.value);
echarts.registerMap("world", world);
drawMap();
});
#map {
width: 100%;
height: 600px;
}
饼干爱折腾
前端 不规则进度条,求好的思路?
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250108/67b17e94dbc4844548d6ef884ca2ea67.png)
这是一个水塔的svg,需求:
水面跟随进度上升下降
进度低于20时变红色,其余进度变绿色
整体尺寸不是固定的,跟随父布局大小
思路1:目前我的思路是根据进度,切10张水塔图,根据进度动态显示。但这增加包体积,感觉也有点粗暴。
思路2:用两张图上下放置,上面的水塔用clip-path根据进度切,但好像只能且固定大小,因为svg的path好像是固定的
目前没有更好的解决思路,各位大佬怎么看?
饼干爱折腾
怎么提高页面中大量图表渲染的性能?
找 UI 改设计,
或者找需求给甲方升级电脑,
人力不敌天数 ...
类似的图为啥不能按 Tab 页走?
非要凑在一起?
一堆图标谁看着不眼花?
那么多数据谁看的过来?
我这边做的项目最多就 3 个 ECHART,
还是那种上大屏幕的项目 ...
饼干爱折腾
vue中,每一秒一个data,如何保存所有data,并一次只要8条数据?
在监听里每一秒会返回一个data,一个data长度有65位,总共大概会返回30个,
我也是每一秒实时都要显示数据,一次显示8位,得按顺序来,然后得考虑到有奇数偶数的情况,假设最终只剩7条(或不足8条),就7条一起显示
怎么样保留之后的数据并实时截取呢?
举例子↓
uni.$on('getData', (obj) => {
let data = ['aa','bb','cc','dd','ee','ff']
// let data = ['hh','ii','jj','kk','ll','mm'] //第二次返回
//...期待结果↓
let result = ['aa','bb','cc'] //第一次显示
// let result = ['dd','ee','ff'] //第二次显示
// let result = ['hh','ii','jj'] //第三次显示
// let result = ['kk','ll','mm'] //第四次显示
})
«这里可以不看,大伙可以这样理解,服务器每秒会返回给我一段心率波形的data,一段有65个点来组成波形图,总共会发送30秒大概一秒一个data,但我不可能一次显示65个点在图标上,所以每隔8个来裁剪,我也不可能等30秒之后再全部push到一个新data里再来每8位裁剪。现在的问题就是我不知道怎么在data实时更新的情况下,记忆之前裁剪的位置并继续裁剪»
小弟在这里先感谢各位大神们,感激不尽,祝大神们发财祝大神们取漂亮老婆
饼干爱折腾
如何发送这样一个http请求?
hutool 的 "HttpRequest" 确实不能为 MultipartFormData 的每一项单独再设置 Content-Type
或者其他额外的属性标头了。
但为啥非得用 hutool 呢?HttpClient 不就好了?
饼干爱折腾
ProFormUploadButton Upload.LIST_IGNORE 不生效?
const beforeUpload = (file: RcFile, _: RcFile[]) => {
const isSizeValid = file.size / 1024 / 1024 < 1;
if (!isSizeValid) {
formRef.current?.setFieldsValue({
descImgUrl: [],
});
message.error('只允许上传大小为1MB以内的图片');
}
return isSizeValid || Upload.LIST_IGNORE;
};
还是会有图片显示,怎么能不显示fileList 呀啊!
饼干爱折腾
Prisma操作MySQL数据库,数据的时间少了8小时?
我在写一个 Next.js 项目,数据库用的是腾讯云的 MySQL 5.7 版本,通过命令 "SELECT TIMEDIFF(NOW(), UTC_TIMESTAMP);" 查询到的结果是 "08:00:00",数据库的时区应该没问题,但是 Prisma
创建数据的时间少了8个小时,这是什么原因?
"schema.prisma" 文件:
model User {
...
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
饼干爱折腾
在insert函数里,node->next=p->next那步在vscode里会报错是怎么回事?
这个回答算是对楼上问题评论区小伙伴的回答补充,在insert函数之前添加一个函数声明,或者将getNewNode函数的定义移到insert函数的前面就可以运行了。
比如说这样:
#include
#include
#include
typedef struct Node{
int data;
struct Node *next;
} Node;
Node *getNewNode(int val){
Node *p = (Node*)malloc(sizeof(Node));
p->data = val;
p->next = NULL;
return p;
}
Node *insert(Node *head, int pos,int val){
Node new_head, *p = &new_head,*node = getNewNode(val);
new_head.next = head;
for(int i = 0; i next;
node->next = p->next;
p->next = node;
return new_head.next;
}
void clear(Node *head){
if(head == NULL) return;
for(Node *p = head,*q;p; p = q){
q = p->next;
free(p);
}
return;
}
void output_linklist(Node *head){
int n = 0;
for(Node *p = head;p;p = p->next) n +=1;
for(int i = 0;i next){
printf("%3d",p->data);
printf("->");
}
printf("\n\n\n");
return;
}
int main(){
srand(time(0));
#define MAX_OP 20
Node *head = NULL;
for(int i =0; i < MAX_OP; i++){
int pos = rand()%(i + 1), val = rand()%100;
printf("insert %d at %d to linklist\n",val,pos);
head = insert(head,pos,val);
output_linklist(head);
}
return 0;
}
饼干爱折腾
中小型 MySQL,如何判断是否需要读写分离?
流量负载、性能接近瓶颈时考虑读写分离
饼干爱折腾
vue项目里面如何使用react的组件?
目前项目是使用的vue2,而需要开发一个er关系图,用到的是ANTV XFlow组件"https://xflow.antv.vision/zh-CN/docs/tutorial/solutions/er/" (https://link.segmentfault.com/?enc=LPYjuDxwAxvHQfepVFV47Q%3D%3D.KGus1rGjOdwB6wYAmySQ3%2FMB3e6N7k1Eu6LQX%2FIalVTfX%2FAiF0cg34yJ6a4qbmBFc3HsB5WKi8qw%2F7kFxf4pzA%3D%3D)
请教下,有什么好的方式可以将这个组件集成进去?
饼干爱折腾
有哪些好的css demo的网站?
个人觉得最好的 : "https://codepen.io/" (https://codepen.io/)
饼干爱折腾
表格列宽怎么可以根据数据列数来展示不同效果?
可以看看下面几个属性
"https://visactor.io/vtable/option/ListTable#autoFillWidth" (https://link.segmentfault.com/?enc=0dlM8v%2BBHr8KzFFNuat0Og%3D%3D.QCPrvG1jPkqMS%2BIM%2FL7mkfvx6l7pnoTaWZU1UgMo09OxmKlXRCAbuyFFAMtPb3d9dncUV1BgH2P2%2FbP8xaKOpg%3D%3D)
"https://visactor.io/vtable/option/ListTable#widthMode" (https://link.segmentfault.com/?enc=t1EVvbld5mM3CmfRaDiE2g%3D%3D.m44ysqVRTBPBjeeMMGa%2FyBBcOYHj1AjglozpgfJlvd49p8lYApzCEB7Spk6S0fMcKd%2FAF3kLfCUzyvpYN8BO4Q%3D%3D)('standard'%20%7C%20'adaptive'%20%7C%20'autoWidth')%20=%20'standard'
"https://visactor.io/vtable/option/ListTable-columns-text#minW..." (https://link.segmentfault.com/?enc=t7wTJtNHyJ5i8bPmdPqFAQ%3D%3D.CvQcoB4Gm%2FTfteADJSMmIdbLxXMVjmUlCBiNzNQzHCoA6mr32r5%2BtcFMpuPVlVN%2F6X%2FDbmBvRAT3gkF%2FlL1jDB0B2cSD6InxCrpM3CI2xHU%3D)
饼干爱折腾
vue3 中如果 ref 里面的值很多会不会影响性能?
const options = ref({
name1: 'name1',
name2: {
name2: 'name2',
name3: {
name2: 'name2',
name3: 'name3',
name4: 'name4',
name5: 'name5',
name6: 'name6',
},
name4: 'name4',
name5: 'name5',
name6: 'name6',
},
name3: 'name3',
name4: 'name4',
name5: 'name5',
name6: 'name6',
...
fm1: () => {
...
},
fm2: () => {
...
},
fm3: () => {
...
},
fm4: () => {
...
},
...
})
上面这个,我就定义了一个 "options" 里面有几十个属性和方法,这样会不会有影响。
还是说分成多个 "options" 更好
饼干爱折腾
pandas使用 DataFrame 自身的某一行修改另一行的值,被修改的那一行会被清空?
你是不是测试有问题
"df2.loc[df2['A'] == 'A1', ('B', 'C', 'D')] = df1.loc[df1['A'] == 'A1', ('B', 'C', 'D')]" 不加 values 也是一样的情况。
import pandas as pd
data1 = {
'A': ['A0', 'A1', 'A2', 'A3'],
'B': ['B0', 'B1', 'B2', 'B3'],
'C': ['C0', 'C1', 'C2', 'C3'],
'D': ['D0', 'D1', 'D2', 'D3']
}
data2 = {
'A': ['A1', 'A5', 'A6', 'A7'],
'B': ['B4', 'B5', 'B6', 'B7'],
'C': ['C4', 'C5', 'C6', 'C7'],
'D': ['D4', 'D5', None, 'D7']
}
df1 = pd.DataFrame(data1)
df2 = pd.DataFrame(data2)
print(df1)
print(df2)
df2.loc[df2['A'] == 'A1', ('B', 'C', 'D')] = df1.loc[df1['A'] == 'A1', ('B', 'C', 'D')]
print(df2)
# df2.loc[df2['A'] == 'A1', ('B', 'C', 'D')] = df2.loc[df2['A'] == 'A5', ('B', 'C', 'D')]
# print(df2)
饼干爱折腾
dolphinscheduler在docker中执行任务上传的附件下载不到怎么回事呢?
woker和api要在同一个服务器上, 目录要制定到同意路径, 不然就下不到, 或者配置文件服务器
饼干爱折腾
如何在旋转后的父元素中使用draggable拖动元素?
编辑2:在仔细阅读了jquery-ui的源代码,并充分理解了其原理后,我制作出了能够符合我的需求的代码:能够在旋转后的父元素中使用jquery-ui的draggable功能以实现拖动子元素的效果。我希望能分享给大家,或许有其他人有着和我类似的需求,可以提供给您作为参考。
需要写在最前面强调的是,这个功能有一定的局限性,例如旋转的父元素和拖拽的子元素必须都是position:absolute,并且一部分draggable的功能例如snap将可能无法正确工作。另外,由于涉及到了更多计算,这会影响到代码的运行效率。如果这些限制可以满足您的需求,请往下看。
为了完成这个功能,我们首先需要明确一点:jquery中的offset功能对于旋转后的元素而言,只会得到错误的结果,无一例外。如果您想要移动一个旋转后的元素,必须在这个元素外面嵌套一个父元素用于定位offset,并且移动的draggable绑定的对象也必须是这个父元素。不过,只要我们将其高度和宽度设定为0px,位置设定为absolute的话,就不需要担心这个多出来的父元素会影响到我们的元素结构。wrapper的用处是获取元素在旋转前左上角的offset,并结合角度等计算出旋转后的元素的offset,并以这个旋转后的offset来计算元素的位移值
对于我而言,我将其设置为:
HTML:
CSS:
.wrapper{
height:0px;
width:0px;
position:absolute;
}
js:
$(旋转的父元素).css({
"transform" : "rotate(45deg)",
//注意这里,我将父元素的中心设置为元素的中心,如果您需要以其他位置为中心进行旋转,请注意修改下方的return_playground_wrapperOffset()函数中有关中心点坐标和偏移量的部分
"transform-origin" : "center"
)
$(移动的子元素).parent(".wrapper").draggable()
随后,我们还需要一些准备工作,例如:
1.我们需要能够获取到“转动的父元素”所转动的角度,在这里我将其记录在父元素内:
$("#转动的父元素").attr("angle",转动的角度),并通过return_angle()函数获取这个值
2.我们需要一个额外的函数,用来求得“旋转的父元素”在旋转后的左上角的位置,我的函数如下:
function return_playground_wrapperOffset(){
//父元素wrapper的坐标:
var wrapper = $("#旋转的父元素").parent(".wrapper")
var wrapper_offset = $(wrapper).offset()
//中心点的坐标
var center_x = wrapper_offset.left + $(huabu).width()/2 * return_scale()
var center_y = wrapper_offset.top + $(huabu).height()/2 * return_scale()
//wrapper相对于中心点的偏移量
var delta_x = - $(huabu).width()/2 * return_scale()
var delta_y = - $(huabu).height()/2 * return_scale()
//旋转弧度
var radian = return_angle() * Math.PI / 180
//计算旋转后的相对坐标
var new_delta_x = delta_x * Math.cos(radian) + delta_y * Math.sin(radian)
var new_delta_y = - delta_x * Math.sin(radian) + delta_y * Math.cos(radian)
//将相对坐标加上中心点的坐标,得到旋转后的左上角顶点的坐标
var new_x = center_x + new_delta_y
var new_y = center_y + new_delta_x
return {left:new_x,top:new_y}
}
随后,我修改了jquery-ui的源代码,也就是jquery-ui.js的内容,修改的内容包括两个部分,首先是第约10006行的_refreshOffsets: function( event ) {……}
我将其修改为:
_refreshOffsets: function( event ) {
this.offset = {
top: this.positionAbs.top - this.margins.top,
left: this.positionAbs.left - this.margins.left,
scroll: false,
parent: this._getParentOffset(),
relative: this._getRelativeOffset()
};
//获取父元素转动的角度,并转化为弧度以供三角函数使用
var radian = return_angle() * Math.PI / 180
//旧的偏移量表示的是这个鼠标点击位置与元素左上角的距离,但由于其原理使用到了offset,因此其无法在旋转后正确工作
var old_left = event.pageX - this.offset.left
var old_top = event.pageY - this.offset.top
//不过,我们可以对错误的值进行偏转,依次得到鼠标相对于旋转后的子元素的偏移量,并将其以旋转后的子元素的Left和top的方式进行表示,之所以使用left和top的方式,是因为之后我们在移动元素时,实际操作的是元素的top和left值,这也是为什么在offset无法正确工作的情况下,我们能够通过一些修复来使得draggable能够正确工作,因为其实际的工作原理与offset无关,只是一部分值涉及到了offset的使用
var new_top = old_top * Math.cos(radian) - old_left * Math.sin(radian)
var new_left = old_top * Math.sin(radian) + old_left * Math.cos(radian)
this.offset.click = {
top: new_top,
left: new_left
};
},
随后我们还需要修改第约10380行的_generatePosition: function( event, constrainPosition )
{……}函数,修改后的函数如下所示:
_generatePosition: function( event, constrainPosition ) {
//一直到下一个注解前的内容都可以忽略
var containment, co, top, left,
o = this.options,
scrollIsRootNode = this._isRootNode( this.scrollParent[ 0 ] ),
pageX = event.pageX,
pageY = event.pageY;
if ( !scrollIsRootNode || !this.offset.scroll ) {
this.offset.scroll = {
top: this.scrollParent.scrollTop(),
left: this.scrollParent.scrollLeft()
};
}
if ( constrainPosition ) {
if ( this.containment ) {
if ( this.relativeContainer ) {
co = this.relativeContainer.offset();
containment = [
this.containment[ 0 ] + co.left,
this.containment[ 1 ] + co.top,
this.containment[ 2 ] + co.left,
this.containment[ 3 ] + co.top
];
} else {
containment = this.containment;
}
if ( event.pageX - this.offset.click.left containment[ 2 ] ) {
pageX = containment[ 2 ] + this.offset.click.left;
}
if ( event.pageY - this.offset.click.top > containment[ 3 ] ) {
pageY = containment[ 3 ] + this.offset.click.top;
}
}
if ( o.grid ) {
top = o.grid[ 1 ] ? this.originalPageY + Math.round( ( pageY - this.originalPageY ) / o.grid[ 1 ] ) * o.grid[ 1 ] : this.originalPageY;
pageY = containment ? ( ( top - this.offset.click.top >= containment[ 1 ] ||
top - this.offset.click.top > containment[ 3 ] ) ?
top :
( ( top - this.offset.click.top >= containment[ 1 ] ) ?
top - o.grid[ 1 ] : top + o.grid[ 1 ] ) ) : top;
left = o.grid[ 0 ] ? this.originalPageX +
Math.round( ( pageX - this.originalPageX ) / o.grid[ 0 ] ) * o.grid[ 0 ] :
this.originalPageX;
pageX = containment ? ( ( left - this.offset.click.left >= containment[ 0 ] ||
left - this.offset.click.left > containment[ 2 ] ) ?
left :
( ( left - this.offset.click.left >= containment[ 0 ] ) ?
left - o.grid[ 0 ] : left + o.grid[ 0 ] ) ) : left;
}
if ( o.axis === "y" ) {
pageX = this.originalPageX;
}
if ( o.axis === "x" ) {
pageY = this.originalPageY;
}
}
//此处开始我们的修正,首先仍然是获取旋转的父元素的旋转角度并转化为弧度
var radian = return_angle() * Math.PI / 180
//通过上面提到的函数,获取旋转后父元素的左上角此时的位置
var wrapper_offset = return_playground_wrapperOffset()
var old_top = pageY - wrapper_offset.top
var old_left = pageX - wrapper_offset.left
//进行修正,请不要忘记“- this.offset.click.left/top”
var new_left = old_left * Math.cos(radian) + old_top * Math.sin(radian)
- this.offset.click.left
var new_top = - old_left * Math.sin(radian) + old_top * Math.cos(radian)
- this.offset.click.top
//将这个函数返回的值修改为如下
return {
top: new_top ,
left: new_left
};
},
至此,我们完成了所有的修改,理论上无论您的父元素如何旋转,其都能正确地进行定位,另外,我建议您在进行修改之前将您的jquery-ui.js文件进行备份,以免错误或误差导致您的修改前的内容丢失。最后,如果我的代码能够帮助到你,或是给您启发,这是我的荣幸!
以下为原问题内容,其中提出的猜想没有参考价值,仅作为存档所用
首先我需要道歉,标题中的问题,实际上我已经解决了一部分,我希望得到回答的并不完全是我的题目。
我尝试在一个经过了transform:rotate(45deg) 的旋转的父元素中,使用jquery-ui的draggable拖动其中的子元素,然而jquery-ui的draggable并不支持transform属性,直接使用draggable是不可能的。
事实上,在这之前我也遇到过类似的问题,并且最后通过修改jquery-ui的源文件解决,这一次我也想进行同样的尝试。
我通过修改jquery-ui.js文件中,约10382行的内容,也就是
$.widget( "ui.draggable", $.ui.mouse, {
……
_generatePosition: function( event, constrainPosition ) {
……
}
中的内容,成功做到了鼠标的移动与对象的移动“同步”,也就是说是鼠标向左移动100px的距离,拖拽的对象也会向左移动100px的距离。只不过我遇到了一些难以解决的bug,因此我需要您的帮助。
我遇到的问题是:当拖拽开始时,对象会“瞬移”一段距离,我必须为position增添一些固定的值才能解决这个问题,然而我并不知道这些固定的值是如何产生的,以及为什么对象会“瞬移”,我希望能解决这些问题
以下是我的代码,其中#playground是我的容器元素,#ball是容器中的可拖拽元素
CSS:
#playground{
width:1000px;
height:1000px;
positition:absolute;
transform:rotate(45deg);
transform-origin:center center;
background-color:white;
}
#ball{
width:100px;
height:100px;
position:absolute;
}
JS:
//下面的是我修改jquery-ui后的代码,修改内容仅限_generatePosition最后的return内容,其余内容均未有任何改动
var old_top = pageY- this.offset.click.top - this.offset.relative.top - this.offset.parent.top +
(this.cssPosition === "fixed" ?
-this.offset.scroll.top :
(scrollIsRootNode ? 0 : this.offset.scroll.top ))
var old_left = pageX- this.offset.click.left - this.offset.relative.left - this.offset.parent.left +
(this.cssPosition === "fixed" ?
-this.offset.scroll.left :
(scrollIsRootNode ? 0 : this.offset.scroll.left ))
//以上两个值为原本函数中的返回值,我将其进行了一定的修改,以适配旋转后的主元素
var angle = 45
var radian = angle * Math.PI / 180
var new_left = old_top * Math.sin(radian) + old_left * Math.cos(radian)
var new_top = old_top * Math.cos(radian) - old_left * Math.sin(radian)
//这里我必须增添两个值才能使得#ball元素不会瞬移
//最终本函数会返回一个位置的值,并使用这个位置的值来修改被拖拽元素的位置,从而使得被拖拽元素能够与鼠标一同移动
return {
top: new_top + 450,
left: new_left - 450
};
我个人的猜想是:瞬移是因为position的初值不正确,最有可能是父元素角度变化导致了原本的old_left和old_top的值出现异常,但是我并没有那么深刻的理解,我不明白为什么这样的事情会发生我也不明白为什么最终我需要增加和减少“450”这个偏差值,我想知道这个偏差值是为什么会产生,如何获得的,因为我希望在后续的功能中增加其他的旋转角度
目前已知的信息是:这个偏差值会随着角度的变化而变化,也会随着#ball的height变化而变化,当角度在0-90°之间时,随着角度增大,或者height增大时,这个偏差值的数值也需要随之增大。有趣的是,width的变化似乎不会产生影响。
感谢你的任何建议,如果我没能描述清楚我的问题,我可以提供更多,谢谢您!
编辑1:经过多次的实验后,我大致得出了45°角时的偏差值规律为(1000 - 100)/2 ,也就是:(父元素的高度 - 子元素的高度
)/
2的值,这个结果让我感到很疑惑,为什么只有高度参与了这个偏差值的变化,宽度为什么不会参与?为什么要除以1/2?我正在尝试其他角度规律,有任何进展都愿意分享给大家,但我仍然希望能获得为什么会产生这样的变化的原因。
编辑2:我想我得到了top的偏差值的计算公式:
var offset_top = ($("#playground").height() - $(this.bindings).height()) * Math.pow(Math.sin(radian),2)
在任何角度下,这个top的偏差值都能准确奏效,但问题是left的偏差值却仍然是一个谜团,无论是" Math.pow(Math.sin(radian),2)"
还是 "Math.pow(Math.cos(radian),2)"
都不是一个完美的值,我感到十分困惑,并且我并不了解为什么这个偏差值会是这样生成的,尤其是将三角函数开平方这件事完全在我的意料之外,无论如何,我仍然需求帮助,谢谢您!
饼干爱折腾
如何根据离散的数据点获取线性的线段?
[
[
{
"id": 444810098964868900,
"distance": 0.20106235146522522,
"score": 0.20106235146522522,
"video_uuid": "夏洛特烦恼原片-5min",
"pts": 0,
"timeline": 0
}
],
[
{
"id": 444810098964868900,
"distance": 0.19771885871887207,
"score": 0.19771885871887207,
"video_uuid": "夏洛特烦恼原片-5min",
"pts": 0,
"timeline": 0
}
],
[
{
"id": 444810098964868900,
"distance": 0.17275215685367584,
"score": 0.17275215685367584,
"video_uuid": "夏洛特烦恼原片-5min",
"pts": 0,
"timeline": 0
}
],
[
{
"id": 444810098964868900,
"distance": 0.20370642840862274,
"score": 0.20370642840862274,
"video_uuid": "夏洛特烦恼原片-5min",
"pts": 0,
"timeline": 0
}
]
]
使用 python 把上面的 json 转成点图,把 json 是 "list[list[dict]]" 的,把 dict 里面的 pts 作为纵坐标,把
list 的 index 作为横坐标
然后我写了下面的代码
from mark import BASE_DIR
import json
# with
import json
import matplotlib.pyplot as plt
with open(BASE_DIR/'dev/graph/raw.json', 'r', encoding='utf-8') as file:
data = json.loads(file.read())
# 提取pts值
pts_values = [entry[0]["pts"] if entry else 0 for entry in data]
# 创建横坐标(使用列表的索引)
x_values = list(range(len(data)))
# 创建点图
plt.scatter(x_values, pts_values, marker='o', color='b', label='Pts Values')
# 添加标题和标签
plt.title('Pts Values vs. Index')
plt.xlabel('Index')
plt.ylabel('Pts Value')
# 显示图表
plt.legend()
plt.grid(True)
plt.show()
渲染出来的图如下
"图片.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241204/5a7563ec6d6e36cdccd7c9f765cbf6f1.png)
对于上面的图,我希望可以输出 "[0,900]->[0,900]" 和 "[900,1550]->[1200,1550]"
"图片.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241204/2a66c69f7c1fd21c0b325c0466231aee.png)
对于上面的图,我希望可以输出 "[0,900]->[0,900]" 和 "[1200,1550]->[1200,1550]"
"图片.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241204/7456510b480db4259c178733e673b4c6.png)
对于上面的图,我希望可以输出 "[0,600]->[0,600]" 和 "[600,1200]->[900,1500]"
也就是统计图像中有一共个多少个线段,并且输出这些线段的起点坐标到终点坐标
难点在于,这些线段不一定是强连续的,可能中间会断开一个点,这些不规则的点可能会变成干扰因素
我想的是怎么统计出所有线段,并且可以排除因为一些点没有在线段上导致的干扰
«忽略纵坐标为 0 的点,不纳入统计»
饼干爱折腾
[ts] 排他联合类型问题?
interface IChildBase {
points: number[];
}
interface IChildLine extends IChildBase {
type: 'line';
}
interface IChildCircle extends IChildBase {
type: 'circle';
}
type ChildShape = IChildCircle | IChildLine;
interface ITab {
children: ChildShape[];
}
// 用类型守卫来检查 children 的类型
function isLine(child: ChildShape): child is IChildLine {
return child.type === 'line';
}
function isCircle(child: ChildShape): child is IChildCircle {
return child.type === 'circle';
}
// 示例
const tab: ITab = {
children: [
{ type: 'circle', points: [1, 2, 3] },
{ type: 'line', points: [4, 5] }
]
};
tab.children.forEach(child => {
if (isLine(child)) {
console.log('This is a line.', child.points);
} else if (isCircle(child)) {
console.log('This is a circle.', child.points);
}
});
饼干爱折腾
pgsql 怎么 select 做错误处理?
PL/pgSQL 存储过程中,不支持直接使用 SELECT 查询返回结果,只能用 "SELECT
INTO" (https://link.segmentfault.com/?enc=JQEh7ThaXvdHVX%2F413ABbQ%3D%3D.HIFpX8h%2FZLiG30M%2FY0jtSmr2dAGdDNJl78zhNhoXxenSd82NOlW9KuZrhiGbs4dXzPwABkYhJ%2Bi9QN8oGWVSvA%3D%3D)
保存结果到变量;
可以看下 "PostgreSQL PL/pgSQL
教程" (https://link.segmentfault.com/?enc=pb6pQckvVY1XOhuVe1xqVQ%3D%3D.e6hY1%2BEwgpg64gaN6NS4hh2rQpGVX6onUwe9O5oMwyL%2BSfoRUOLqt9Xz%2Fvp0Qn%2BMH3mSpmntOkqpwfceT0fcSw%3D%3D),参考样例学习一下。
饼干爱折腾
[AMH] 当使用AMS3 远程备份时,面板上如何设置指定路径?
亲,ams3不支持设置目录,不想用多个存储空间的话,
或是备份时设置『名称标识』这样区分不同的备份文件。
饼干爱折腾
在el-input type="textarea"上使用v-html 样式丢失?
后端返回的数据里包含标签,需要解析标签后进行展示。因为展示实在多行文本框里展示 直接使用v-html,多行文本框样式也丢失了。
想到在插槽中展示,没找到el-input type="textarea"的插槽."image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241117/ba6f2055bb9fe52d5dd5198e85baf6bd.png)
***
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241117/2d52e8c5d51479646257d256bce668b2.png)
饼干爱折腾
我想hover的时候子元素出现。tailwind应该咋写?
我想hover的时候子元素出现。tailwind应该咋写
{imgUlrs.map((item, index) => {
return (
X
);
})}
就是实现一个鼠标放上去,出现一个遮罩层,然后有个删除的X.
加个group没问题了。我把map里面的提取成组件后,我hover其中一个元素,其他的元素也成block了。
饼干爱折腾
笔记本准备加装一根内存条,请大佬帮忙推荐一根笔记本内存条?
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241114/690e2629e1d3b41e8f057a64192ca250.png)
主要是和这样一致就行, 可以买个二手的
买个2400的,1200Mhz是指总线时钟频率 因为DDR内存是双向频率读写能同时进行,显示的只有单向频率1200MHZ, 你的任务管理器上也显示了
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241114/c2bc897cf77d8f078caa22c1541b0768.png)
饼干爱折腾
因为 vue 的 reactive 对象会自动对 ref 对象进行解包,所以导致了 ts 报错,有什么解决方法吗?
目前没什么好的方式, 你可以追踪下这两个issue:
"https://github.com/vuejs/core/issues/3478" (https://link.segmentfault.com/?enc=haNZ1J84ULgE6yq1PIRv4Q%3D%3D.PrI%2B8JhSr2B9im9%2B%2BH%2F1mtAq5ePl%2Bia9UKCtdZe3yV%2FWDuvyUzXE0oFnB7mGBKwt)
"https://github.com/microsoft/TypeScript/issues/43826" (https://link.segmentfault.com/?enc=oVynbBBgK3D2yrREblbG3g%3D%3D.zGE1I3U3sqsTZWxtbljoVcR31AOUvg992Kof0fe8i7E6iKFAoBOFC5sE3%2FdTNXaKkj8KbbGOiD4xY4Bpvqvp5w%3D%3D)
饼干爱折腾
1. CSS绘图功能实例展示?
css能画这种图吗,里面德橙色背景色?使用clip-path 裁切属性?求大神
https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241113/fc618d3930d4937889c49dd5afd6e398.png
饼干爱折腾
vue el-table 内嵌套 select 遇到问题?
想实现仅根据保存后的数据来控制select和按钮的状态,可以"加工一下后端返回的数据":每行数据新增一个属性rowDisable,默认为false;如果row.is_finished
等于 2 ,设置rowDisable为true。在渲染table中的 select 和 保存按钮
时,根据行rowDisable来决定是否禁用。这样,即使select值发生变化,也不会导致rowDisable值发生变化。
饼干爱折腾
web的pc版应用js库与移动版的区别?
1. zepto 10 年前就不维护了,及时更新知识很重要
2. 目前的 JS 库几乎不存在移动版与桌面版的区别,以后只会更少
3. 可以关注不同版本浏览器的差异,多看 MDN,拿不准就看看 caniuse.com
饼干爱折腾
视频切换音轨?
视频怎么实现切换音轨,实现这种效果,用了videojs一直报错
"image.png" (https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241108/9e3de3d66552a1cb83eed6f5799de91e.png)
饼干爱折腾
dom事件和元素等对应typescript的类型在哪查询?
dom事件和元素等对应typescript的类型在哪查询?
百度查过,通过代码测试过,没有找到官方的文档,都是经验,有没有官方的文档可以查相关的信息?
饼干爱折腾
Vue项目中public文件夹路径获取问题?
先看看是不是部署在子目录了
"https://cli.vuejs.org/zh/guide/html-and-static-assets.html#pu..." (https://link.segmentfault.com/?enc=WUIcXfKfeykuds2QtCziVQ%3D%3D.lsfXfNAH37lgWfnBLdnYMKPNNZOEiPctWovB%2FsmklgorrRNVc%2FSzdr4cTkIfG1iaY91NkBNVZJchxgQD9WppBlYiGeOxqwAImto%2B8lahByFZ3XMOZVo3K8XRYfTltBkN)
饼干爱折腾
请问有共享 Chrome 跟 Edge 的浏览器标签(书签)管理插件或是工具吗?
可以尝试一下青柠起始页,它可以登录存储标签页什么的,也就说你登录之后在任何浏览器都可以同步你保存的标签页,它还提供了备忘录功能。
饼干爱折腾
求解一类背包问题?
scipy(python)的优化工具包可以解决这类问题(整数线性规划)。
* "scipy 参考文档" (https://link.segmentfault.com/?enc=aZ9uPySmX4MIJVLqzWcK4Q%3D%3D.IQMdNRU8mtl%2BIC%2BhAUgPRY2ZnWvGdP77UIyVY%2FQBzV%2BDwZwkcY6jcSJcccgzZ0xQ1vDPDBpRZ5lf8QCx5q7eCdOeBVpfqN66tXWlbc6Klsg%3D)
饼干爱折腾
java 多线程的一个问题 ?
比如A B C 三个线程,A线程进入了 getTask()方法 , 那么 B 和 C
方法就必须在外面等着,A调用this.wait(),A就加入到this的等待房间,并释放锁了,B和C有个就进来了,然后重复A的过程,就这样他们三个都进到
this的等待房间了,addTask中有线程调用this.notifyAll(),那么就去房间里面去叫醒ABC三个线程他们先抢占锁,抢占到了就从this.wait()继续执行。
饼干爱折腾
echarts添加legend失效是由什么引起的?
比如这个"案例" (https://link.segmentfault.com/?enc=uU84nNSMD3twkBy%2BKaUf%2Fg%3D%3D.4HPU4YSlKv%2BiR98i42fys5VWxQaKjnDX7KnSVdBVFkt5ddP2p45Lsaufb6FCr0UpjcsftU8XQcKFt1fmnkXhJ4jg4oGdG%2BmdNdBApDZ9vTQ%3D)
饼干爱折腾
浏览器文件中转优化方式?
再浏览器中需要从A服务器下载一个500M的文件(甚至更大),然后上传到B服务器,目前使用xhr方式直接下载和上传,但在过程中很卡,内存占用也很高。能否优化成从A服务器下载的过程中直接拿到响应流读取数据,每次读取就直接往B服务器的上传的请求流中写入,那数据就不需要暂存在浏览器。
使用fetch api可以拿到响应流读取数据,但是好像没有api可以向请求流中写数据
饼干爱折腾
如何在GitHub中配置SSH密钥以正常拉取和提交代码?
github 已经配置了密钥在github里面,2周前使用正常,今天拉取代码发现保存,说没有权限
"image.png" (https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241025/fa72c3eb1f083b9e84d0bf472459d5e4.png)
上2周已经生成了密钥和公钥
"image.png" (https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241025/4123345407a1961fa55acda450f3cf50.png)
这个是我进行测试密钥的截图
"image.png" (https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241025/ae23792f015c2ca57bb117bda23520cc.png)
我通过github官网查看了密钥设置,我希望可以正常拉取代码及提交代码
饼干爱折腾
如何关闭IDEA每次打开都自动 indexing 的功能?
这个是索引你的项目, 比如像是点击跳转到函数,代码补全,方法提示等,这些都依赖于这个功能,你如果关掉的话,可能不方便你开发操作,你为什么想关掉这个功能呢
饼干爱折腾
请教TS的泛型条件约束问题?
修改如下
interface Base {
name: string;
age: number;
};
interface FixedInstance extends Base {}
interface FollowInstance extends FixedInstance {
sex: 1|2;
}
type NameType = "fixed"|"follow";
type FixedName = "fixed";
type FollowName = "follow";
const data: NameType = 'fixed';
type myType = typeof data;
type isFixed = myType extends FixedName ? true : false; // true
type isFollow = myType extends FollowName ? true : false; // false
// -----------cut---
function sellect(name: T, data: T extends FixedName ? FixedInstance : FollowInstance) {
return {
name, data
} as const;
}
const infodata: FixedInstance = { name: "levi", age: 18 };
const { name: myName, data: myData } = sellect("follow", infodata);
type dataType = typeof myData;
type dataisFixed = myType extends FixedName ? true : false; // false
type dataisFollow = myType extends FollowName ? true : false; // false
饼干爱折腾
cardview 内嵌的 linearlayout 无法实现圆角怎么办?
我的视图代码如下:
在"api level 29" 更低的设备上得到的效果是下面这种的:
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241016/2feaffd66a769917adcc9a6ac26d89ca.png)
在"api level 29" 或以上设备没问题,效果如下
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241016/d63f75fed2ee90adb8770d3c5f2e0072.png)
如何保证圆角在"api level 24" 以上显示效果一致?
饼干爱折腾
Python 数据库插件 Sqlalchemy 为什么不能关闭连接?
这是类定义,调用此类的地方,在最后,调用其def close(self) 方法。。。。。或者在Database类的析构函数调用close()方法
饼干爱折腾
nodejs 中 UTC 时间戳转化的问题?
各位好,koa/nodejs 中获取 UTC 时间,并转化为时间戳,我通过下面的代码实现的
const UTC = new Date().toUTCString();
console.log(UTC);
const UTCtimestamp = Date.parse(UTC);
console.log(UTCtimestamp);
现在的问题是,能够正确的打印出 UTC 即 UTC0 的时间,但在转化成时间戳后,却变成了本地时间的时间戳。
比如 UTC 是 Wed, 24 Jan 2024 06:02:07 GMT
但转化后的时间戳却是 1706076127000
自动 +8 了,请问该怎么不自动转化,而是显示 UTC0 本身的时间戳?
饼干爱折腾
vue如何实现页面装修的?
vue如何实现页面装修的
"7228ac257d4493ae722614f315563205.jpg" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241013/9d2c4ae4cd509ec1d488522321cc0c4e.png)
饼干爱折腾
docker-compose.yml文件部署MySQL时出现错误?
在Ubuntu中通过docker-compose部署MySQL时无法部署;docker-compose.yml文件如下:
version: '3'
services:
mysql:
restart: always
image: mysql:8.2
network_mode: bridge
container_name: mysql
environment:
MYSQL_ROOT_PASSWORD: root123
command:
--character-set-server=utf8mb4
--collation-server=utf8mb4_general_ci
--explicit_defaults_for_timestamp=true
--lower_case_table_names=1
--max_allowed_packet=128M
volumes:
- /etc/localtime:/etc/localtime:ro
- /data/docker/mysql/mysql:/var/lib/mysql
- /data/docker/mysql/etc:/etc/mysql:ro
ports:
- 3306:3306
我的步骤如下:
1.注释挂载,直接启动mysql 成功
2.复制容器中的/var/lib/mysql到宿主机我希望挂载的地方
3.复制/etc/mysql ,然后编写my.cnf放到宿主机/data/docker/mysql/etc/mysql/conf.d下
4.删除镜像
5.打开注释
错误如下:
2024-01-21 12:00:35+08:00 [Note] [Entrypoint]: Entrypoint script for MySQL Server 8.2.0-1.el8 started.
2024-01-21 12:00:35+08:00 [ERROR] [Entrypoint]: mysqld failed while attempting to check config
command was: mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_general_ci --explicit_defaults_for_timestamp=true --lower_case_table_names=1 --max_allowed_packet=128M --verbose --help --log-bin-index=/tmp/tmp.5xbHMoySK8
mysqld: Can't read dir of '/etc/mysql/conf.d/' (OS errno 2 - No such file or directory)
mysqld: [ERROR] Stopped processing the 'includedir' directive in file /etc/my.cnf at line 36.
mysqld: [ERROR] Fatal error in defaults handling. Program aborted!
饼干爱折腾
推荐几个好用的第三方埋点工具?
有没有好用的工具
饼干爱折腾
vue-router 版本 > v4.1.4 如何优雅传参?
"vue-router v4.1.4
更新日志" (https://link.segmentfault.com/?enc=bZ8uPqxDFgvr%2FhyB%2Br4Iwg%3D%3D.TCHW46hOoPeLP%2F3QNact4doBo6FRT%2B1R8VqHK70uRejdCuM9ASOVzzFTrlH6N2yKTdPNGIiROxbxraDmE8wVPWwSudaDFmyRh7l9T30wpTXMmH7iNcPMf6ZhQk7h0fkj)
官方似乎不再支持以下的写法了:
router.push({ name: 'somewhere', params: { oops: { a: { b: { c: 'gets removed'} } } })
这么写会提示: "Discarded invalid param(s)... "
官方推荐的替代方案:
1. 将数据放入pinia等存储中
2. path query
3. HistoryState
4. 将其作为新属性传递给to.meta 导航守卫
方案1感觉让代码变得过于复杂了。
方案2对于需要传递复杂的对象。而不是简单的字符串或数字的话似乎无法做到
方案4同1
方案3不太了解, 除了方案3, 请问有什么更优雅的写法吗?
饼干爱折腾
uniapp开发H5和APP封装接口请求?
用uniapp 写APP、怎么接口请求错误了,在H5上面是能请求成功的
const pre = "Bearer ";
const request = (options = {}) => {
let token = uni.getStorageSync("token");
options.header["Accept"] = "application/json, text/plain, */*";
options.header["Authori-zation"] = pre + uni.getStorageSync("token");
return new Promise((resolve, reject) => {
//获取接口的全连接
uni.request({
url: options.url, //仅为示例,并非真实接口地址。
method: options.type || "GET",
data: options.data || {},
header: options.header || {},
success: (res) => {
const { code, result, other, msg, status } = res.data;
if (status == 410000 || status == 410001 || status == 410002) {
uni.clearStorage();
resolve({ msg, status, result });
return
}
if (status !== 200 && options.loading) {
uni.showToast({
title: msg,
icon: "error",
});
resolve({ msg, status, result });
} else {
resolve({ result, other, msg, status });
}
},
complete: (e) => {
if (options.loading) {
uni.hideLoading();
}
},
});
});
};
const post = (
url,
data,
loading = true,
options = {
header: {},
}
) => {
options.type = "POST";
options.data = data;
options.url = url;
options["loading"] = loading;
options.header["content-type"] = "application/json";
return request(options);
};
export { post };
在手机模拟器上面报错的信息是:
{"errMsg":"request:fail abort statusCode:-1 Expected URL scheme 'http' or 'https' but was 'file'"}
饼干爱折腾
怎么更改echarts中刻度线之间的距离,改的小一点,用哪个属性?
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241011/e17d4a4a426fcaab1411415c9199e6d7.png)
饼干爱折腾
vscode插件开发,如何使用绝对路径导入js模块?
vscode插件开发,如何使用绝对路径导入js模块?
我尝试以绝对路径导入js模块,智能提示没有问题,但运行调试就报错,如何解决这个问题?以下是详情。
jsconfig.js配置代码如下
{
"compilerOptions": {
"module": "Node16",
"target": "ES2022",
"checkJs": true,
"lib": [
"ES2022"
],
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"],
}
},
"exclude": [
"node_modules"
]
}
导入js模块代码内容,所在文件路径:src/util/TestUtil.js
let test={
test123(){
},
test567(){
}
}
module.exports= {
test:test,
};
以绝对路径导入,调用const TestUtil =
require('@/util/TestUtil.js')代码导入,输入TestUtil加小数点,有智能提示的截图
https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241009/d65349b3731a887e0fea3260c88d0519.png
运行提示错误
Activating extension 'undefined_publisher.vscode-plugin-todo' failed: Cannot find module '@/util/TestUtil.js'
Require stack:
- e:\Workspace\vscodePlugins\vscode-plugin-todo\src\box\box.js
- e:\Workspace\vscodePlugins\vscode-plugin-todo\extension.js
- e:\Users\hasee\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\loader.js
- e:\Users\hasee\AppData\Local\Programs\Microsoft VS Code\resources\app\out\bootstrap-amd.js
- e:\Users\hasee\AppData\Local\Programs\Microsoft VS Code\resources\app\out\bootstrap-fork.js
- .
如何解决这个问题