我爱上班
React中使用@emotion/css时VSCode语法高亮和注释问题如何解决?
react 中 使用 @emotion/css 这种 css in js的 会导致我vscode 语法解析出问题 颜色 还有 注释 都有问题了,
需要装什么插件 解决?
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250121/65443a37ef2ffd91d8fa16ac7e2b16d1.png)
安装了好几个 关于 react 或 css injs 的 vscode 插件都不行 (typescript-styled-plugin 也试过 不行)
这个是正常的
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250121/32d402fd10107707016c6c7dde6dff9d.png)
我爱上班
ts循环赋值断言也报错?
挺有意思的一个问题。
首先要指出,题主这种写法,在 TS 3.4 之前是不会报错的。而在 TS 3.5 之后引入了一项名为 "Fixes to Unsound Writes to
Indexed Access
Types" (https://link.segmentfault.com/?enc=C7ijwGKrq6jAIdi734Cjfw%3D%3D.RwL1N1h2X2jNOf%2BP1XxQzerDaCiwG6s8hjCtYmampklg1XTxc6iv%2Bw6UXgQnTjyHKDIEFXyr%2FeFB%2BzSiIDIrJVy1MX%2B%2FfvOJmgsWqXPOv8Fr1Oua3e9nlHUMjnrUqaCWjnfPJGpp13pGcDiayvR%2FsA%3D%3D)
的破坏性变更后,才会报错。
相关的讨论有很多,比如
"#30769" (https://link.segmentfault.com/?enc=r1XpR1vXVQfOWT7qBzupTg%3D%3D.5vrc9tZrSLK%2BkeCAqKtmjRCyaUI8BxXgdK%2Bus3qICGpkYrWnmS1SnnFQfGDg%2BcYGEwylx34RA9DnF45lCL7%2FbQ%3D%3D)、"#33834" (https://link.segmentfault.com/?enc=0i0Gl1Sot7KV6LgadjfKgA%3D%3D.4uDkaD9XlN0j%2F2zIZuxpbp13UwjGFx3yESgHO4TlJvGCJEe7%2FYIBkr4bCPwvM4u%2BYsCuUxnceA1ZVfdZjWf29Q%3D%3D)。
那么为什么 TS 要把这种写法视为一种错误呢?
其实如果你只是取值(即 Read),是没问题的:
let v = obj[key as keyof PersonType]; // ok
此时 "v" 的类型会推断为 "string | number",也就是 "PersonType" 中所有属性的联合类型 。
问题出现在赋值(即 Write)上。
我们可以看出,其实 "PersonType" 上每个属性的类型,是确定的,要么是 "string"、要么是 "number",并不真的存在一个属性的类型是 "string | number"。因此我们在尝试下面的写法时,才会得到错误,这是符合预期的:
person.name = 16; // error
person.age = '曜'; // error
但如果你用了索引属性去赋值,那么就会出现:
let key = 'name';
person[key as keyof PersonType] = 16;
let key = 'age';
person[key as keyof PersonType] = '曜';
就打破了上面这种预期,也就是所谓的 Unsound Writes 。
因此 TS 3.5 之后引入了这项破坏性变化,当你尝试这么做的时候,会把类型收窄为所有属性的交叉类型
,只有满足此交叉类型的,才能正确赋值。具体到本题中得到的交叉类型也就是 "string & number",但很显然,没有任何类型 "T" 是能满足 "T extends string & number" 的,因此得到了 "never",故而抛出题中的异常。
***
改法有很多种,但我只推荐用泛型。
除非你这个 "cloneObj" 专门针对 "PersonType" 编写的,否则我建议你这么写:
function cloneObj>(obj: T) {
const newObj = {} as T;
for (const key of Object.keys(obj)) {
newObj[key as keyof T] = obj[key as keyof T];
}
return newObj;
}
我爱上班
webpack tailwindcss raw-loader 后样式无法被打包?
如果要解析,非入口文件的html css 或者其他文件。可以在 "tailwind.config.js" 中配置
module.exports = {
purge: ['src/*.html','src/base/*.html'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};
这个叫 "purge" 的配置项就可以配置其他的文件
我爱上班
go 有没有能持久化的分布式定时任务库?
写了个基于kratos的服务,基本需求是:可以增删管理定时任务(如配置每天、每周发个统计报告),支持分布式结构,持久化任务。加分项包括:注册回调、结果和日志记录、失败重试等。
看kratos已经支持的transport有两个:asynq和machinery,但似乎都不满足需要基本的持久化任务需求,machinery甚至还不能删除已经添加的任务。
// RegisterPeriodicTask register a periodic task which will be triggered periodically
func (server *Server) RegisterPeriodicTask(spec, name string, signature *tasks.Signature) error {
//check spec
schedule, err := cron.ParseStandard(spec)
if err != nil {
return err
}
f := func() {
//get lock
err := server.lock.LockWithRetries(utils.GetLockName(name, spec), schedule.Next(time.Now()).UnixNano()-1)
if err != nil {
return
}
//send task
_, err = server.SendTask(tasks.CopySignature(signature))
if err != nil {
log.ERROR.Printf("periodic task failed. task name is: %s. error is %s", name, err.Error())
}
}
//scheduler基于github.com/robfig/cron/v3
_, err = server.scheduler.AddFunc(spec, f)
return err
}
考虑到服务可能会重启,那么添加过的任务如何恢复呢?如果没有这样的库,考虑基于"github.com/go-co-op/gocron"
自己封装一个,配置的任务保存在redis中,服务启动的时候全量初始化,之后订阅对应的主题,再通过分布式锁来保证执行的唯一性,这样是否可行?
我爱上班
C语言添加药品信息模块添加进去和文件格式不符并且再次打开文件会改变文件内容?
#include
#include
#include
#define MEDICINE_FILE "medicine.txt" //药品文件名
typedef struct medicine
{
char drug_name[100]; //药品名
int drug_number; //药品编号
float price; //售价
int num; //药品剩余数量
} medicine;
struct med
{
medicine medicine_array[500]; //存放药品的数组
int size; //数组已使用的大小
} med;
//与药品操作相关函数
void showMenu(); //打印菜单
void read_medicine_file(); //从文件中读入药品信息
void add_medicine(); //添加药品信息
void show_medicine(); //查看所有药品信息
void drug_name_del(); //按名称删除药品信息
void drug_number_revise(); //按编号修改药品信息
int drug_number_find(int num); //按编号查找药品信息,返回下标
void show_drug_number_find(); //输出查找到的药品信息
int drug_name_find(char *name); //按姓名查找药品信息,返回下标
void show_drug_name_find(); //按姓名查找药品信息,并将药品信息输出
void save_medicine(); //保存药品信息到文件
int main(int argc, char *argv[])
{
int select = 15;
read_medicine_file(); //读取文件中药品的信息
while (1)
{
showMenu(); //打印菜单
while (scanf("%d", &select) != 1 || select 10)
{
printf("输入有误,请重新输入\n");
scanf("%*[^\n]%*c"); //将输入缓冲中所有数据丢弃
}
switch (select)
{
case 0:
//退出程序
exit(0);
break;
case 1:
//添加药品信息
add_medicine();
break;
case 2:
//查看所有药品信息
show_medicine();
break;
case 3:
//按名称删除药品信息
drug_name_del();
break;
case 4:
//按编号修改药品信息
drug_number_revise();
break;
case 5:
//按编号查找药品信息,并将药品信息输出
show_drug_number_find();
break;
case 6:
//按名称查找药品信息,并将药品信息输出
show_drug_name_find();
break;
}
}
return 0;
}
//打印菜单
void showMenu()
{
printf("-----------欢迎来到药房管理系统------------\n");
printf("-------------------------------------------\n");
printf("请输入你要选择的编号:\n");
printf("1、添加药品信息\n");
printf("2、查看所有药品信息\n");
printf("3、按名称删除药品信息\n");
printf("4、按编号修改药品信息\n");
printf("5、按编号查找药品信息\n");
printf("6、按姓名查找药品信息\n");
printf("0、退出本系统\n");
printf("-------------------------------------------\n");
}
//从文件中读入药品信息
void read_medicine_file()
{
FILE *fp = fopen(MEDICINE_FILE, "r");
if (fp == NULL)
{
med.size = 0;
memset(&med.medicine_array, 0, sizeof(med.medicine_array));
}
else
{
while (fscanf(fp, "%s %d %f %d", med.medicine_array[med.size].drug_name,
&med.medicine_array[med.size].drug_number,
&med.medicine_array[med.size].price,
&med.medicine_array[med.size].num) != EOF)
{
med.size++;
}
}
fclose(fp);
}
//添加药品信息
void add_medicine()
{
int flag = 0;
int num; //保存编号用于去重
printf("请输入你要添加的药品的数量\n");
int n, i;
while (scanf("%d", &n) != 1 || n < 0)
{
printf("输入有误,请重新输入\n");
scanf("%*[^\n]%*c");
}
for (i = 0; i < n; ++i)
{
printf("第%d个药品的信息\n", i + 1);
printf("--------------------\n");
printf("请输入药品姓名\n");
scanf("%s", med.medicine_array[med.size].drug_name);
printf("请输入药品编号\n");
med.medicine_array[med.size].drug_number = 0;
do
{
while (scanf("%d", &num) != 1)
{
printf("输入有误,请重新输入!\n");
scanf("%*[^\n]%*c");
}
int ret = drug_number_find(num);
if (ret != -1)
{
printf("该编号已经存在,请重新输入\n");
}
else
{
med.medicine_array[med.size].drug_number = num;
break;
}
} while (1);
printf("请输入药品售价\n");
while (scanf("%f", &med.medicine_array[med.size].price) != 1)
{
printf("输入有误,请重新输入!\n");
scanf("%*[^\n]%*c");
}
printf("请输入药品数量\n");
while (scanf("%d", &med.medicine_array[med.size].num) != 1)
{
printf("输入有误,请重新输入!\n");
scanf("%*[^\n]%*c");
}
flag = 1;
med.size++;
}
if (flag == 1)
save_medicine(); //保存到文件
}
//查看所有药品信息
void show_medicine()
{
int i;
for (i = 0; i < med.size; ++i)
{
printf("%s\t\t\t%d\t\t\t%.1f\t\t\t%d\n", med.medicine_array[i].drug_name,
med.medicine_array[i].drug_number,
med.medicine_array[i].price,
med.medicine_array[i].num);
}
}
//按姓名删除药品信息
void drug_name_del()
{
int flag = 0;
int i, j, n;
char name[100];
printf("请输入你要删除的药品数量\n");
while (scanf("%d", &n) != 1 || n < 0)
{
printf("输入有误,请重新输入\n");
scanf("%*[^\n]%*c");
}
for (i = 0; i < n; ++i)
{
printf("第%d个药品的姓名\n", i + 1);
printf("--------------------\n");
printf("请输入要删除的药品姓名\n");
scanf("%s", name);
int ret = drug_name_find(name);
if (ret != -1)
{
flag = 1;
printf("删除成功,删除的信息为\n");
printf("%s\t\t\t%d\t\t\t%.1f\t\t\t%d\n", med.medicine_array[ret].drug_name,
med.medicine_array[ret].drug_number,
med.medicine_array[ret].price,
med.medicine_array[ret].num);
for (j = ret; j < med.size - 1; j++)
{
med.medicine_array[j] = med.medicine_array[j + 1];
}
med.size--;
}
else
{
printf("未找到该药品,删除失败\n");
}
}
if (flag == 1)
save_medicine();
}
//按编号修改药品信息
void drug_number_revise()
{
int flag = 0;
int i, j, n, number; //保存要修改的编号
int num; //保存新编号,用于去重
printf("请输入你要修改的药品数量\n");
while (scanf("%d", &n) != 1 || n < 0)
{
printf("输入有误,请重新输入\n");
scanf("%*[^\n]%*c");
}
for (i = 0; i < n; ++i)
{
printf("第%d个药品的编号\n", i + 1);
printf("--------------------\n");
printf("请输入要修改的药品编号\n");
while (scanf("%d", &number) != 1)
{
printf("输入有误,请重新输入\n");
scanf("%*[^\n]%*c");
}
int ret = drug_number_find(number);
if (ret != -1)
{
flag = 1;
printf("找到该编号的药品,该药品信息为\n");
printf("%s\t\t\t%d\t\t\t%.1f\t\t\t%d\n", med.medicine_array[ret].drug_name,
med.medicine_array[ret].drug_number,
med.medicine_array[ret].price,
med.medicine_array[ret].num);
printf("请输入新信息\n");
printf("请输入药品新姓名\n");
scanf("%s", med.medicine_array[ret].drug_name);
printf("请输入药品编号\n");
med.medicine_array[ret].drug_number = -1; //将该药品编号改为-1防止新输入的编号和当前编号相同,导致无法成功输入该编号
do
{
while (scanf("%d", &num) != 1)
{
printf("输入有误,请重新输入!\n");
scanf("%*[^\n]%*c");
}
int res = drug_number_find(num);
if (res != -1)
{
printf("该编号已经存在,请重新输入\n");
}
else
{
med.medicine_array[ret].drug_number = num;
break;
}
} while (1);
printf("请输入药品售价\n");
while (scanf("%f", &med.medicine_array[ret].price) != 1)
{
printf("输入有误,请重新输入!\n");
scanf("%*[^\n]%*c");
}
printf("请输入药品数量\n");
while (scanf("%d", &med.medicine_array[ret].num) != 1)
{
printf("输入有误,请重新输入!\n");
scanf("%*[^\n]%*c");
}
printf("修改成功!\n");
}
else
{
printf("未找到该编号的药品\n");
}
}
if (flag == 1)
save_medicine();
}
//按编号查找药品信息,返回下标
int drug_number_find(int number)
{
int i;
for (i = 0; i < med.size; ++i)
{
if (number == med.medicine_array[i].drug_number)
{
return i;
}
}
return -1;
}
//输出查找到的药品信息
void show_drug_number_find()
{
int number;
printf("请输入要查找的编号编号\n");
while (scanf("%d", &number) != 1)
{
printf("输入有误,请重新输入\n");
scanf("%*[^\n]%*c");
}
int ret = drug_number_find(number);
if (ret == -1)
{
printf("未找到\n");
}
else
{
printf("找到了,信息为\n");
printf("%s\t\t\t%d\t\t\t%.1f\t\t\t%d\n", med.medicine_array[ret].drug_name,
med.medicine_array[ret].drug_number,
med.medicine_array[ret].price,
med.medicine_array[ret].num);
}
}
//按姓名查找药品信息
int drug_name_find(char *name)
{
int i;
for (i = 0; i < med.size; ++i)
{
if (strcmp(name, med.medicine_array[i].drug_name) == 0)
return i;
}
return -1;
}
//按姓名查找药品信息,并将药品信息输出
void show_drug_name_find()
{
char name[100];
printf("请输入你要查找的药品姓名\n");
scanf("%s", name);
int ret = drug_name_find(name);
if (ret == -1)
{
printf("未找到\n");
}
else
{
printf("找到了,药品信息为\n");
printf("%s\t\t\t%d\t\t\t%.1f\t\t\t%d\n", med.medicine_array[ret].drug_name,
med.medicine_array[ret].drug_number,
med.medicine_array[ret].price,
med.medicine_array[ret].num);
}
}
//保存药品信息到文件
void save_medicine()
{
int i;
FILE *fp = fopen(MEDICINE_FILE, "w");
if (fp == NULL)
{
return;
}
for (i = 0; i < med.size; ++i)
{
fprintf(fp, "%s %d %f %d\n", med.medicine_array[i].drug_name,
med.medicine_array[i].drug_number,
med.medicine_array[i].price,
med.medicine_array[i].num);
}
fclose(fp);
}
文件
999感冒灵 1 14.9 200
氯雷他定片 2 65.0 150
肠炎宁片 3 28.0 150
布洛芬胶囊 4 29.8 230
板蓝根颗粒 5 23.8 300
我爱上班
css中多行省略号不生效的问题?
为什么全是字母多行省略不生效
.item {
width: 100px;
overflow:hidden;
text-overflow:ellipsis;
display: -webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;
}
abcdefghijhlmnljjasufoqwhfesadhfjasdflasdjfalsfjla;skdnfvkasldjlsafpwqeuriwehfklsdahvjsahdf
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250105/5047e0528e38bd4da79de6508feb82c4.png)
文字多行省略生效
.item {
width: 100px;
overflow:hidden;
text-overflow:ellipsis;
display: -webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;
}
哈哈哈哈哈哈哈哈哈哈哈哈哈红红火火恍恍惚惚
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250105/8b8229a2e4b65c15c7af24631b677c3c.png)
我爱上班
html标签,浏览器将换行代码解析到了外边成了text节点,如何解决?
问题:代码放在code标签中,但是浏览器将其解析到了外边成了text节点。
通过在txt文件中存储文章正文,使用时读取txt文件显示。
测试文件(txt文件)
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241225/53d9254cbb6df19bff23258b7ecc5344.png)
前端发起请求,后端读取文件返回正文,前端显示
$("#article-content").html(article_content);
结果如下
"R~KIYA4KAT}R)UOSFW2%4VW.jpg" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241225/e71d964abfd5c4fdc1ff94dca1dd407d.png)
"OAEA71JPS4{@8I96NQN1Z`W.jpg" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241225/822afad1d4930c05c7b27678c34db6d7.png)
原始代码引用了highlight.js、并添加了显示行号和语言的功能,去除掉以上功能结果如下
https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241225/5230938584a55eb7b1071798bd8f9d71.png
这一问题如何解决?非常感谢!
我爱上班
F12检视一个元素的时候,鼠标一动 这个元素就会消失,那么如何定位到这个元素的html源码位置?
假设有一个下拉列表, 点击后弹出下拉框,我想在源码中定位到这个下拉框的位置,但是一动鼠标 这个下拉框就 关闭消失了,根本无法通过
“鼠标点击元素”的方式定位到源码位置。
我爱上班
如何避免 React Context 的重复渲染?
代码如下,请问在只更新 Box1 的 count 的值时,如何避免 Box2,Box3,Box4 的重复渲染?
import React, { memo, useCallback, useContext, useRef } from "react";
const Context = React.createContext({});
export default function App() {
const [count, setCount] = React.useState(0);
const [flag, setFlag] = React.useState(false);
const add = useCallback(() => setCount((v) => v + 1), []);
const toggle = useCallback(() => setFlag((v) => !v), []);
const contextValue = { count, add, flag, toggle };
return (
);
}
const Box1 = memo(() => {
const { count } = useContext(Context);
const ref = useRef(true);
ref.current = !ref.current;
return (
Box1 count:{count}
);
});
const Box2 = memo(() => {
const { flag } = useContext(Context);
const ref = useRef(true);
ref.current = !ref.current;
return (
Box2 flag:{flag}
);
});
const Box3 = memo(() => {
const { add } = useContext(Context);
const ref = useRef(true);
ref.current = !ref.current;
return (
Box3 add
);
});
const Box4 = memo(() => {
const { toggle } = useContext(Context);
const ref = useRef(true);
ref.current = !ref.current;
return (
Box4 toggle
);
});
我爱上班
问个问题,使用高德地图开发定位的时候,需要转坐标系吗?
要的, 官方的API文档:
«"https://lbs.amap.com/api/javascript-> api-v2/guide/transform/co..." (https://link.segmentfault.com/?enc=SS5dPxGzMTJv5PIUqZbrAg%3D%3D.%2FjMUzhYn%2BUUlx8tKJtSLmJhS3Upd6Aa0XvVjGuKMna2rjV5R7jCr8dNB%2FyoVRvto65S%2BtxHDEg053In7NfZ%2FUBNVZls74Y5B%2FHdwrjHPGjM%3D)
"https://lbs.amap.com/api/javascript-> api/guide/transform/coord..." (https://link.segmentfault.com/?enc=jBR0f0GDtR5bU3dtxGu6OQ%3D%3D.ly%2FaL%2BdtsXl%2BfuxTZx%2BIeLa42qoInnizXRJAkAsdkMsi%2FU2NTcfJ%2BYZC8OKGtIRfpN4vMxViUHDoIPQeTbPsm5gcIhh7a%2BH%2FQDImsnYQppo%3D)»
我爱上班
vs2022编写c语言时出现断言问题,但是我又没有设置这个所报错误的变量?
vs2022中编写了一个c语言程序,但是出现断言问题
**但是我又没有设置断言所报错误的变量,所以想请问一下该怎么解决!或者说我该怎么去debug这个错误,但是我的程序又能正常运行,就很奇怪,虽然它是报了断言的错误的程序。我是大概知道他是某个依赖的,但是我所写的这个代码是一个简版词法分析程序,大概分两部分,然后我在不同的文件写了这两个部分,然后合在一起便触发了断言,所以暂且不知道是哪个报得,所有我描述的详细一点,就是指条路让我好去debug
"所报断言" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241218/fbfbedd55692f796c62beba4b05fb10c.png)
打开debug看了堆栈,但是跳出来的是库,然后报错,没有跳转到我写的代码,还是不知道我哪个函数传的值不符合他的规范。就只知道c的值不符合,可以我调用的哪个函数传的值是他这个。
"堆栈所显示的" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241218/8216966a8df011157d703f3225bf633a.png)
"断言" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241218/a34c36f7c7437a41fe2ccf60b5857250.png)
"堆损坏" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241218/2eadb5ba776fed3a233ef28a6e7549a9.png)
"传入文件的内容" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241218/f0ba86359eb87bceade6633e2dc33101.png)
"判断字符/实现简单词法分析" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241218/111523f608fbb22f884d2e3ef0cd1d29.png)
我爱上班
使用浏览器时,有时候会修改一些网址自带的页面,但是下次访问时又会回到原来的页面,求一个浏览器插件,能保持我当时修改过后的页面?
"https://tampermonkey.net/" (https://link.segmentfault.com/?enc=l3CgPbT2KNT6OCZWgzFAoA%3D%3D.k94KoTKrbaTjJy5z9%2FQ6E7UsTijUboEdiPeLjaLl7po%3D),在这里面写个
js 脚本把那些元素删掉就行了。
或者参照这篇文章:"https://chrome-developer.pages.dev/en/docs/devtools/overrides/" (https://link.segmentfault.com/?enc=CiqlxvLxSD0NzogjYdgzVQ%3D%3D.HhG%2BVzMICncKu1wCCrYKktAL2XZ1rx6kJieVcNZpGuHRAomxwDvz66Av7UKFkk7skSmiiuEdzubNSPAZDeQPMA%3D%3D)
我爱上班
用Typora软件 ,使用markdown编写 文章 标题序号 自动生成的问题?
最近用Typora软件 编辑文章,发现一个非常不方便的地方,一篇文章写好之后,大纲目录章节的编号都是 手动输入的,不是软件自动生成的。
如果,文章写好之后,我后期要 修改章节目录结构,比如,我如下图这样,新插入一个1级标题,那么,后面所有级别的标题序号,我都需要手动去修改,这样就非常麻烦了,
请问哪位大神知道,有没有什么好办法解决这个问题?
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241217/34ea8cb00b4d1ccd1923d0b01c37824b.png)
我爱上班
antd--Tooltip三角星变成了方形,这是为什么?
在使用antd@5.8.4版本(react@18.2.0)中的tooltip组件时,不知道配置了什么新建项目的时候一切正常,突然发现tooltip组件的小三角变成了方形,使用的方式从官网实例抄下来的。
大佬们帮忙看看
"20e6e62aacbde5efc0b3b63fa502d66.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241217/f379668061a3ab978bdfe833ee347072.png)
"dae1907493ae1d1104ab2f03f2cb134.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241217/eccd2668df7c64923e94576ce6e08bd4.png)
我爱上班
请问jdbc的sql查询结果是否包含字段数据类型?
数据库字段类型为date,用jdbc查询,返回的结果会包含数据库字段的类型吗?然后用java.sql.date类型对象接收?
我爱上班
前端如何实现线上签名功能?
可以用sign-canvas插件实现
我爱上班
全局的原生webSocket写在什么位置?
用自定义Hook:
// useWebSocket.js
import { useState, useEffect } from 'react';
function useWebSocket(url) {
const [data, setData] = useState(null);
const [socket, setSocket] = useState(null);
useEffect(() => {
const ws = new WebSocket(url);
setSocket(ws);
ws.onmessage = (event) => {
setData(JSON.parse(event.data));
};
return () => {
ws.close();
};
}, [url]);
return { data, socket };
}
export default useWebSocket;
在你的组件里用Hook:
import useWebSocket from './useWebSocket';
function MyComponent() {
const { data, socket } = useWebSocket('ws://example.com/socket');
// ...
}
或者用Context API:
// WebSocketContext.js
import React, { useState, useEffect, createContext } from 'react';
export const WebSocketContext = createContext();
export function WebSocketProvider({ children }) {
const [data, setData] = useState(null);
const [socket, setSocket] = useState(null);
useEffect(() => {
const ws = new WebSocket('ws://example.com/socket');
setSocket(ws);
ws.onmessage = (event) => {
setData(JSON.parse(event.data));
};
return () => {
ws.close();
};
}, []);
return (
{children}
);
}
然后在你的组件里:
import React, { useContext } from 'react';
import { WebSocketContext } from './WebSocketContext';
function MyComponent() {
const { data, socket } = useContext(WebSocketContext);
// ...
}
我爱上班
package.json里面的start命令调用工具的区别?
问题一
«以上几个命令哪个是库,哪个是ts的内置命令»
* nodemon 是一个第三方库,用于监视文件更改并自动重启 Node.js 应用程序。
* ts-node 是一个用于运行 TypeScript 代码的库,它允许你直接运行 TypeScript 代码而不需要先编译成 JavaScript。
* ts-node-esm 和 ts-node-dev 则是对 ts-node 进行了一些扩展和改进,以支持不同的功能。
问题二
«我部署上线之后,如果使用nodemon命令就会部署失败,如果使用另外几个命令就可以部署成功,为什么?»
在部署上线时,使用 nodemon
会导致部署失败的原因可能是因为生产环境中通常不需要实时监视文件更改并重启应用程序,这样的行为可能会带来安全风险或性能损耗。另外两个命令提供了更适合生产环境的方式来运行
TypeScript 代码。
问题三
«这些命令有什么区别?推荐哪一个?»
这些命令的区别主要在于它们的特性和功能。
* nodemon 用于开发环境,它可以自动检测文件更改并重启应用程序,以提高开发效率。
* ts-node 可以直接运行 TypeScript 代码,无需手动编译成 JavaScript。
* ts-node-esm 和 ts-node-dev 则在此基础上提供了更多的功能扩展,例如对 ES 模块的支持和额外的开发便利功能。
问题四
«还有没有其他的类似的命令,有没有其他的推荐?»
其他类似的命令包括 tsc(TypeScript 编译器)、babel-node(用于运行使用 Babel
转换的代码)、pm2(进程管理器,可用于部署和监控 Node.js 应用程序)等。根据你的项目需求和部署环境,选择合适的工具和命令来管理和运行你的
Node.js 应用程序。
我爱上班
本地包打包并在 demo 项目中引入无效?
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241126/83bbae4274c1caec8260b44148e4a0a3.png)
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241126/f0cafed982be25058a48d47195d85de4.png)
如图,在 monorepo 中使用了 "tailwindcss" 后作为一个案例打包,并且按需生成了 "dist/style.css"
文件,但在演示项目中引入 "css" 文件时并没有生效也没有报错。
button
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241126/fbce7336d035b77b48b936ec48c792d1.png)
而后在演示项目也引用 "tailwindcss" 才得以生效,但显然这并不符合需求。
希望得到的结果是演示项目不需要使用 "tailwindcss" 就能让组件库的样式生效。
问题应该如何解决?
是否是我代码或配置有问题?请求大佬支援
"Pavilion UI
项目地址" (https://link.segmentfault.com/?enc=7b4uPUV0vUUKvbcSP2iJmg%3D%3D.1Kgc42lyUSUQiDsqXe2WYMfikV0%2FzecGiZDEYDKRUDYz4Jk6EOdu92V%2BNBgrCl8c)
我爱上班
关于vue文件中的路径跳转问题?
你可以通过配置jsconfig.js去跳转,可通过vuejs生成模版的jsconfig.js
npx jsconfig.json --template=vuejs
我爱上班
ant-form-item 如何添加解释信息?
文档看漏了,使用"tooltip" 的话 "ant-design-vue"版本至少需要"4.0.4"。
我爱上班
怎么快速或同时把 .less 文件转成.css 文件,然后压缩成.min.css?
您可以使用Less编译器将.less文件转换为.css文件。如果您想要输出压缩的CSS,可以使用Less编译器的-x选项1。以下是一些常见的方法:
1.使用Less编译器的-x选项将.less文件转换为压缩的.css文件。例如,以下命令将styles.less转换为styles.min.css:
"lessc styles.less -x -o styles.min.css"
2.使用Gulp或Grunt等构建工具自动化此过程。这些工具可以帮助您自动编译、压缩和优化您的CSS文件。
3.使用在线工具,如"Less to CSS
Converter2" (https://link.segmentfault.com/?enc=flV0HVP4L9gqvDeoyx%2BgGQ%3D%3D.2Pr%2FwYtmS8x3qfmwdUxTU62tgBM0UCZz3IMZqISQVF5rijOvpGeHfkr1Z8hkSih4),将.less文件转换为.css文件并压缩它们。
我爱上班
React 组件中如何自动更新图表数据?
解决方案 Solution
在VChart中,可以调用updateSpec或者updateData进行图表更新。
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241116/cb8f39280e6e956174bcb06ce9cebc01.png)
你可以在初始化图表实例时,在React组件中使用ref保存图表实例。随后使用useEffect,将deps设置为数据更新的依赖项,在回调函数中调用图表实例的updateData实现数据更新。
VChart还提供了React-VChart封装:
"https://www.visactor.io/vchart/guide/tutorial_docs/Cross-term..." (https://link.segmentfault.com/?enc=WPHESt56YPew1gCHqpMWJA%3D%3D.DQZWMS2ss21JUNfAOVL%2BYfsKAI9eKZrTpxAeXGHTnO8XEfmrAby2d3b%2BbApixFvLYh3PtcBvR3yLgdhVVWqLnjI64YPEUdEEIpk%2FyZqFcJjTV7wtuplX5CYgAI3IGiHf)
你可以参考下面的代码示例,使用React-VChart实现图表数据更新。
代码示例 Code Example
代码参考 Code Example
点击 Update the data of bar chart 按钮,可以实现更新图表数据。
import "./styles.css";
import { BarChart } from "./BarChart";
import { LineChart } from "./LineChart";
import { AreaChart } from "./AreaChart";
import { getBarData } from "./bar-data";
import { useState } from "react";
const colorMaps = {
default: [
"#6690F2",
"#70D6A3",
"#B4E6E2",
"#63B5FC",
"#FF8F62",
"#FFDC83",
"#BCC5FD",
"#A29BFE",
"#63C4C7",
"#F68484"
],
red: [
"#c12e34",
"#e6b600",
"#0098d9",
"#2b821d",
"#005eaa",
"#339ca8",
"#cda819",
"#32a487"
]
};
export default function App() {
const [barData, setBarData] = useState(getBarData());
const [colors, setColors] = useState(colorMaps.default);
const handleUpdateBarData = () => {
setBarData(getBarData());
};
const handleUpdateColors = () => {
if (colors === colorMaps.default) {
setColors(colorMaps.red);
} else {
setColors(colorMaps.default);
}
};
return (
Update the data of bar chart
update colors
A Bar Chart
A Line Chart
A Area Chart
);
}
结果展示 Results
在线效果参考:"https://codesandbox.io/s/visactor-vchart-react-demo-forked-js..." (https://link.segmentfault.com/?enc=6szSCkxNIGtkJnQWYJ3kvw%3D%3D.taqdAxg74y8sOG75Zwo24utb22JZkeM%2FugItChmmUvUgOWjiu9eKugpzWAAQHIHW88q3sLyef7MBvrMXh8am3ck91XKzPidbmSCWJNjtT5Q%3D)
"Sep-07-2023 11-08-34.gif" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241116/309dea3e7eb103bab8391a28962bd552.png)
相关文档 Related Documentation
react-vchart教程:"https://www.visactor.io/vchart/guide/tutorial_docs/Cross-term..." (https://link.segmentfault.com/?enc=pyF82Xzvf7H1nqlA14huoA%3D%3D.oRCEIVN1TUpah9T4QX1rdw8LZjipXZYFrq04Hk5a8%2BsdU%2FbmYuOoRMPcFH6Dvl0RylA4QJqUZySZ2l%2BF77QzbXjGyxuHDuVvKQGBKO9ZEAWnZs%2BPZDqJDXhkpg7nO0mj)
github:"https://github.com/VisActor/VChart" (https://link.segmentfault.com/?enc=L9%2BVV10W3Kds1YrHBqrvzg%3D%3D.lWlMz07%2BX3SbJdm5qEBwUBD%2F5KDpPJLhEaJP781bIe8WdMMSYBOSDq6Dzf0lTG%2B9)
我爱上班
如何将二维数组写入Excel?
你可以使用java Excel 相关的第三方组件实现
引入Maven依赖:
org.apache.poi
poi
3.17
org.apache.poi
poi-ooxml
3.17
Java将数据写入Excel,把这个方法封装了WriteToExcel
import org.apache.poi.xssf.usermodel.XSSFCell;
import org.apache.poi.xssf.usermodel.XSSFRow;
import org.apache.poi.xssf.usermodel.XSSFSheet;
import org.apache.poi.xssf.usermodel.XSSFWorkbook;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
public class WriteToExcel {
private static XSSFWorkbook workbook;
private static XSSFSheet sheet;
private static XSSFRow row;
private static XSSFCell cell;
private static File file;
//创建sheet页
public static void setSheet(String sheetName) {
workbook = new XSSFWorkbook();
sheet = workbook.createSheet(sheetName);
}
//创建表头
public static void createHead(List headList) {
//创建表头,也就是第一行
row = sheet.createRow(0);
for (int i = 0; i > contentList) {
//创建表内容,从第二行开始
for (int i = 0; i > getContent() {
List> contentList = new ArrayList();
List content1 = new ArrayList();
content1.add("张三");
content1.add("18");
List content2 = new ArrayList();
content2.add("李四");
content2.add("20");
contentList.add(content1);
contentList.add(content2);
return contentList;
}
public static void main(String[] args) {
//表头测试数据
List headList = new ArrayList();
headList.add("昵称");
headList.add("年龄");
List> contentList = getContent();//内容测试数据
setSheet("WorkSheet"); //创建sheet页
createHead(headList); //设置表头
createContent(contentList); //设置内容
writeToFile("D://work.xls"); //写入文件
}
}
我爱上班
Python 循环为何跳过初始值问题?
while里面你先执行了 "i+1",自然没有10了。你 "print" 起码是从11开始的。
我爱上班
如何使用crypto-js进行AES解密,没有iv密钥偏移量?
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241112/5739ba4df517cc7a9ba10f8bf10aa1df.png)
你这分组模式一个是 ECB、一个是 CBC,那能对吗?
CBC 一定要 iv,实在就是没有那就填充 16 字节的 0;ECB 不需要 iv。
我爱上班
如何在AMH面板中新建纯静态站点?
AMH面板如何新建一个纯静态的站点,如宝塔面板添加站点选择的纯静态,就是只需要Nginx,不需要php、mysql之类的。
"image.png" (https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241110/b1180f18c8573667c09243cb62b8b312.png)
尝试新建LNMP运行环境,但都是强制需要要选择php和mysql的。
我爱上班
JS H5 Video 屏幕为什么是绿色问题???
麻烦出具一下具体代码
我爱上班
如何在Excel里创建表单控件?
如何在Excel里创建表单控件?
如何使用POI在Excel里创建表单控件呢,如果POI不行的话,是否有其他的替代方案呢?
我爱上班
amh是否支持redis-stack?
请问 amh能否支持redis-stack
我爱上班
微信小程序 onReachBottom事件 上拉加载翻页多几次,触发就会慢很多?
你每次加载后,是新数据和旧数据拼接的列表吗?另外,有没有考虑做防抖
我爱上班
如何在Vue2的render方法中限制样式作用域?
可以试试写个单文件组件,然后在这个组件的style标签上设置scoped,标签内@import样式文件
我爱上班
go 是不是对 map 集合的键值获取进行了特殊处理?
type Person struct {
name string
}
person := Person{
name: "chang",
}
map1 := make(map[Person]int)
map1[person] = 4
name, ok := map1[person] // 可以
name := map1[person] // 可以
name, ok := 1 // 编译错误
name := 1, 2 // 编译错误
如果按照单纯的赋值来看,要求变量数量和值的数量要一样,但是在 map 取键值时可以不一样,有点像 for range 循环中可以忽略其中的值。
go 是不是也对 map 集合的键值获取进行了特殊处理? 如果是有什么情况也使用了类似的特殊处理
我爱上班
微信H5下单支付接口里面的APPID填什么?
我的是网站 不是公众号和小程序 没有APPID怎么办?
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241015/fe286aff5b86f1c3a5769ef0ef739e77.png)
我爱上班
java jasonobject.put时 字符串莫名被截断?
解决了.. 帮大家排个雷. 这是idea怕你看的累 只显示993个. 你点进去value属性还是传了正常的长度.
我爱上班
[Typescript]用类属性包装ref,则修改类属性会触发响应式吗?
点击按钮,触发 "onClick",运行 "foo.value++",调用 "setter",运行 "this.ref?.value = nv",触发视图更新
我爱上班
如何实现一个自定义宽度和间距的虚线边框?
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241010/7f1009ccf25652d70b0f7e83f0e32285.png)
如上图所示
该边框每个元素的宽度为8px,高度为1px,间距为2px,radius为4px
要如何实现?
看到网上比较多的方案是 border-image 引入切片的图片来实现,有什么不需要引入图片纯代码的方法吗?
我爱上班
vscode编辑部分文件时指定css代码的颜色混乱,请问如何解决?
可能是主题的bug, 使用这两个主题可以解决
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241007/1d2d89d5b1822d8236fca84089d1380b.png)
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241007/88f5a72d29e07eb32150aa88c4865d03.png)
我爱上班
WGCLOUD服务接口监控,响应状态码是500但是没有发送通知是怎么回事?
WGCLOUD服务接口监控,响应状态码是500但是没有发送邮件通知是怎么回事?
我爱上班
如何在不影响用户界面的情况下实现控制台乱码?
看起来是用自定义字体的方式(大众点评也用)
具体可以参考下面这几个链接
"https://blog.csdn.net/zhuxiao5/article/details/102618216/" (https://link.segmentfault.com/?enc=DmdXeiejU%2FBhtg1kf9oK%2Bw%3D%3D.skJ%2FTS2Wme3walAzF4gJbUnDmw4I3WVoeNLCd6%2FmwAAYst1OvpLtBGxA5Jgvzkw6dI9P5HxTLjcymM2JVOfYXg%3D%3D)
"https://blog.csdn.net/weixin_39942108/article/details/111790432" (https://link.segmentfault.com/?enc=NC7PtljJf%2FCd6i48CfKU9A%3D%3D.oSSa6Am8mPuZLzOZIhN%2BfnFQmH2llELKNwE5DHgLxPkiHtKrj9M1pf6sX7MBCHu%2FE2xGCSvIl8G6mQF8ycs%2Fqw%3D%3D)
我爱上班
git回退之后push失败?
你原先的版本是 v0,提交几次之后到了 v1,然后发现有问题,reset 回到 v0,修好之后在提交,此时的版本是什么?
不是 v1,而是 v1'。(或者你理解成 v2 也行)
v1' 和 v1 是两个不同的路线,当然不能直接 push。此时你可以选择 push -f,但是不推荐,可能会搞丢中间的提交。
也是因为存在很大风险,所以一些仓库会保护分支,禁止 -f。你后面的错误可能是因为这个导致的。
我爱上班
如何解决Node.js环境中npm安装Vue时的错误?
nodeJS 安装配置好后好后 使用npm 安装vue等 总是报错
"使用npm 报错" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241006/5981694a5232abce2499499ad4227e83.png)
希望npm 能正常使用
我爱上班
如何使用Autocomplete实现颜色选择?
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241006/0a1729b5e7408be1a334dcdc462aea8d.png)大佬们,想实现这么个效果,然后下拉框中是可以切换的颜色选择,只想在输入框中用一小块区域来显示颜色变化,请问咋实现呢~求助
希望能得到些实现的灵感和想法~
我爱上班
Docker中Redis容器IP地址固定为127.0.0.1怎么解决?
看你的截图,配置文件里面host填写的是容器名字,然后错误提示也是java程序给的异常,提示连接不到127.0.0.1:6379这个地址。
按理说这里应该解析到的是容器内部的地址,通常应该是172.x.x.x这样的IP。
你试试启动一个新容器 "docker run --network heima -it --rm busybox sh",然后在进入容器后,试试ping一下myredis或者mysql,看看ping命令解析到的IP是什么。我感觉这里可能是程序哪里有问题,不像是redis或者docker的问题。
正常情况下,在执行ping的时候肯定是能ping通的,因为都在一个heima的网络下。ping的IP也应该是对应的容器内的IP,肯定不可能会是127.0.0.1这个地址。那么问题大概就是java程序的问题了,我猜可能是读错配置文件了,或者在哪里写死了。
我爱上班
VUE开发中,很多NPM第三方包没有TS版本的?
使用vue3+ts开发,发现有些第三方NPM包没有TS版本的只有JS的。怎么办?
我爱上班
C# 用try catch包起来执行后继续报错什么原因?
catch块中的代码用于处理捕获到的异常,可以进行日志记录、错误处理等操作,截图中使用了throw会将捕捉到的异常抛出到调用栈的上一级(相当于没有捕获).
如果想不报错注释throw即可.
我爱上班
移动端浏览器高度与地址工具栏关系详解?
可以使用 "dvh"、"svh" 之类的值。
具体可以参考我的这个问答 "移动端 body 高度为100vh
时,实际高度超过了视窗高度。" (https://segmentfault.com/q/1010000020155101#1020000044034717)
我爱上班
这个excel汇总的功能怎么实现?
"http://www.chunshu.net/angpu/" (https://link.segmentfault.com/?enc=QxG6f%2FgIB0TpbrEdrfGVgA%3D%3D.C6Dyx%2BayRdg9KF5hLuywrEM0xqwuH6Gi2JjONm0UR0o%3D)临时人员考勤记录.xlsx
第一个表中有“业务员”列,在第二个表中怎么统计出每个业务员在某天出现的次数,时间通过申请时间中包包含这个日期就算一天。上面链接可以直接下载excel文件。
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241001/e75df492533c90975e3cd32101470140.png)
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241001/8937ad904176921811e2c25a6609e809.png)
我爱上班
如何在React项目中通过下拉框切换来动态修改浏览器URL?
react 项目,切换下拉框时,修改浏览器路由
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241001/e5e9e97e8463aed62577f57264f1103a.png)
切换下拉框时,浏览器的url 地址对应修改
我爱上班
webpack 打包后,部分低版本浏览器报错无法识别axios?
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240928/c1b1a7c255bd10ff5fc099a0295e183c.png)
axios 版本从最高降到1.6.0 还是无法显示出页面,是否是"babel"的配置有问题呢?
.baelrc
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"browsers": [
"ie >=9",
"chrome >= 48",
"android >= 4.4",
"ios >= 9",
"safari >= 7"
]
},
"useBuiltIns": "usage",
"corejs": 3.37
}
]
],
"plugins": ["@babel/plugin-transform-runtime"]
}
webpack.config.js
module: {
rules: [
{
test: /\.m?js$/, // 匹配 .js 或 .mjs 文件
exclude: /node_modules/, // 排除 node_modules 目录(可选,根据实际情况调整)
use: {
loader: 'babel-loader',
},
},
]
}
package.json
{
"scripts": {
"babel": "npx babel src --out-dir lib",
"dev": "npx webpack --config webpack.config.js --mode dev",
"watch": "npx webpack --config webpack.config.js --mode dev --watch",
"start:dev": "npx cross-env envMode=dev webpack serve --open --mode development",
"start:test": "npx cross-env envMode=test webpack serve --open --mode development",
"build:test": "npx cross-env envMode=test webpack --config webpack.config.js --mode development",
"build:stage": "npx cross-env envMode=stage webpack --config webpack.config.js --mode production",
"build": "npx cross-env envMode=prod webpack --config webpack.config.js --mode production",
"analyze": "npx cross-env envMode=prod webpack --config webpack.config.js --mode production --analyze"
},
"devDependencies": {
"@babel/core": "^7.24.4",
"@babel/plugin-transform-runtime": "^7.24.3",
"@babel/preset-env": "^7.24.4",
"@vue/compiler-sfc": "^3.4.25",
"autoprefixer": "^10.4.19",
"babel-cli": "^6.26.0",
"babel-loader": "^9.1.3",
"clean-webpack-plugin": "^4.0.0",
"css-loader": "^7.1.1",
"dotenv": "^16.4.5",
"html-webpack-plugin": "^5.6.0",
"image-minimizer-webpack-plugin": "^4.0.0",
"imagemin": "^8.0.1",
"imagemin-gifsicle": "^7.0.0",
"imagemin-jpegtran": "^7.0.0",
"imagemin-optipng": "^8.0.0",
"imagemin-svgo": "^10.0.1",
"mini-css-extract-plugin": "^2.9.0",
"postcss": "^8.4.38",
"postcss-loader": "^8.1.1",
"postcss-px-to-viewport": "^1.1.1",
"sass": "^1.75.0",
"sass-loader": "^14.2.1",
"style-loader": "^4.0.0",
"vue-loader": "^17.3.1",
"webpack": "^5.91.0",
"webpack-bundle-analyzer": "^4.10.2",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^5.0.4"
},
"dependencies": {
"axios": "^1.6.0",
"core-js": "^3.37.0",
"default-passive-events": "^2.0.0",
"jquery": "^3.7.1",
"vconsole": "^3.15.1",
"vue": "^3.4.25",
"weixin-js-sdk": "^1.6.5"
}
}