感觉对了
微信小程序 使用getSystemInfo获取到了手机底部安全距离 怎么全局用呢 ?
该小程序有很多页面得按钮是position fixed 定位到底部得
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250112/2f0246feadf491ccfd24acb7305a9388.png)
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250112/a67cea7610397394f4b0681e2972f5a0.png)
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250112/549bd737700355d036e4bd07809128c3.png)
我在页面最外层加了padding 安全距离高度 但是是无效的 请教行业大佬们 我该怎么全局去配置所以页面得安全距离
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250112/ad8ab01737b3a46017b0e2a9ee08f6bc.png)
感觉对了
如何监听到清除功能的操作?
使用EasyExcel在浏览器构建了一个在线Excel表格,现在想在右键中除了复制粘贴外加入一些其他操作,请问用那些方式比较好用?
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250107/7729b4755c9f68b42fba97f48dfb8c02.png)
感觉对了
el-table-column的type属性不能动态变化吗?
不可以的,elementUi type属性是静态属性,无法直接用于动态变化
想要动态的话可以考虑:
1 使用 v-if/v-else 控制显示不同类型的列
2 根据需要动态生成 el-table-column 组件,然后将其渲染到 el-table 中。
和享受式没关系哈 是和每个column的key有关系,如果你一定想这么写的话,改变type的同时需要给它更换一个唯一的key来帮助他更新,例如:
js:
changType(row) {
this.ind++;
this.type = 'index'
},
感觉对了
scroll-behavior: smooth 的速率可以控制吗?
如题,我在我的网站中使用了 scroll-behavior:smooth
这个属性,但是滚动的速率并不满足我的设计需求,我们有相对应的办法去控制速度吗?
ps:吐槽一下 gpt 真的不靠谱
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250105/c4655303a0bd056f5d9d3ec4427c9b74.png)
感觉对了
ESM 的“异步”到底异步在哪里? 为什么import的模块都是同步执行,却说ESM是异步的?
ESM 的异步指的是加载过程(Load)是异步的,而不是说一个 ESM 里面的代码执行过程是异步的。
对于开发者来说确实基本没什么感知。除了像下面这样跟加载顺序有关的(实际上你的代码压根不应该依赖于这种加载顺序),大部分场景下都不影响你写代码。
// module-a.js
console.log('a');
module.exports = {};
// module-b.js
console.log('b');
module.exports = {};
// index.js
console.log(1);
const a = require('./module-a');
console.log(2);
const b = require('./module-b');
console.log(3);
// module-a.js
console.log('a');
export default {};
// module-b.js
console.log('b');
export default {};
// index.js
console.log(1);
import a './module-a';
console.log(2);
import b './module-b';
console.log(3);
上面的两段代码分别是 CommonJS 和 ESM 的,你可以分别自己建好三个文件运行看看输出的 1、2、3、a、b 的顺序,体会一下区别。
但结合"上一个问题" (https://segmentfault.com/q/1010000044199859)来看,感觉题主纠结的点现在变成“为什么
CommonJS 不能 require() 一个 ESM ”了。
***
先忽略 ESM,我们来看 CommonJS。
为啥要有模块?码农最朴素的愿望就是代码隔离+复用嘛,毕竟你肯定既不想所有代码都写在一个文件里、也不想相同功能的代码到处复制粘贴好几遍。那么文件 A
怎么引用文件 B 里的代码呢?一开始 JS 本身没提供这样的能力,于是上古时代各路大神们就只能自己想各种招数来实现这个事情。
上古时代的事情咱们按下不表,如果你感兴趣可以看我之前写的这篇 "《JavaScript
模块化的历史进程》" (https://segmentfault.com/a/1190000023017398)。咱们直接快进到 CommonJS。
CommonJS 里所谓的 "require()" 其实就是一个函数而已,只是这个函数是 Node
里内置的、全局的。那么这个函数干了啥,才实现了我们上面所提的“文件 A 引用文件 B 里的代码呢”?其实很简单,就两步:
function require(filePath) {
const content = fs.readFileSync(filePath);
return eval(content);
}
这里我们隐去了路径解析、依赖分析、模块缓存、模块实例化、解决循环引用、包装模块代码避免模块里的变量污染全局、解析模块代码的导出值使其变为函数的返回值等等这些“细枝末节”(其实都很重要,但跟我们要讨论的同步异步无关),剩下的最关键的两行代码其实就是上面这两行:
1. 读取文件内容;
2. 把上面读到的文件内容当作 JS 代码去执行一遍。
所以 CommonJS 里所谓的模块导入,其实就是执行一下 "require()" 这个函数,然后拿到它的返回值而已:
const modA = require('module-a');
const modB = require('module-b');
// use modA & modB
而这个过程,即所谓的模块加载 ,是同步的 —— 因为 "require()" 它是一个同步函数嘛。但是到了浏览器里,事情开始有了问题 —— Node
是基于运行在本地磁盘上考虑的,同步读取一个文件内容是可以被接受的;但浏览器里可是要从远程下载文件的,它可没有类似 "fs.readFileSync"
这种同步下载文件的 API(你可能会说 XMLHttpRequest 里不是支持同步发起 AJAX
么?确实,但代价是它请求过程中其他请求都阻塞、整个页面卡死、EventLoop 停止响应)。所以在浏览器里如果要实现 "require()",就只能是:
function require(filePath) {
return ajax({ url: filePath }).then((content) => eval(content));
}
但这样模块加载就变成异步的了,要用到这个模块的时候你就得:
require('module-a').then((modA) => {
require('module-b').then((modB) => {
// use modA & modB
});
});
于是大家就想,反正无论如何浏览器里都得变成异步的,干嘛非得继续用 "require()" 这种形式呢?就算用了它也跟 Node
里写法不兼容(一个是同步拿返回值即可、一个却得异步拿结果),不如干脆另起炉灶吧 。这才有了 ESM。
那么回到问题上来,为啥 CommonJS 不在 ESM 提出以后继续改进自身,让 "require()" 也能导入一个 ESM 呢?
原因很简单,因为做不到。
为啥做不到?第一点,前面提到了,"require()" 的实质是 Node 提供的一个内置的、全局的函数,它跟你自定义的 function 没什么区别。而
ESM 的 "import" 和 "export" 语法要求必须写在 Top-Level、是不能被函数包裹的,也就是说你不能这么写:
function foo() {
import modA from 'module-a';
import modB from 'module-b';
}
foo();
当然你也可以说这是先有鸡还是先有蛋的问题,如果 ESM 一开始设计成不是 Top-Level 的,是不是 CommonJS
就能去模拟了。那确实,但人家不是这么设计的不是?而且还有第二点问题,CommonJS 同样还是解决不了,那就是ESM 支持 Top-Level
Await :
// module.js
export const data = await fetch({ url: '/some-where' });
// index.js
import data from './module.js';
这 CommonJS 可就更抓瞎了,毕竟 CommonJS 提出的时候,连 Promise 都没有呢,别提什么 await
了。它怎么也想不到以后还有异步导出这种骚操作。
基于以上两点主要原因(当然还有对于命名导出的处理方式不同、循环引用的处理方式不同等等其他一些原因),因此 CommonJS 无法使 "require()"
支持导入一个 ESM,你只能用 "dynamic import" 这种方式来导入。
GitHub
上对此问题曾经有过一些讨论,感兴趣的话可以去看看:"https://github.com/nodejs/modules/issues/454" (https://link.segmentfault.com/?enc=jc1P1vhIWjxIL4pbk8pmag%3D%3D.9s%2BCssyCLR5aw9aeGFKogrADubz3gmCMhzENybBLWjIeel0eb4Jff4ZSg2FOfMZH)
P.S. 上述一些内容的措辞其实是不严谨的,只是为了方便你理解所以做了大量简化。
感觉对了
css "as each of the properties of the shorthand"是什么意思?
那么就拿常用 "padding" 来举例吧。
正常来说,如果要设置一个元素的 "padding" 值,你需要通过设置 "padding-top"、"padding-bottom"、"padding-left" 和 "padding-right" 来控制四个方向的值。
div {
padding-top: 1em;
padding-bottom: 1em;
padding-left: 1em;
padding-right: 1em;
}
是不是太麻烦了,换成 "padding" 这个简写属性怎么样?
div {
padding: 1em;
}
简写属性的目的很简单,把一些相关联的属性合在一起,然后根据参数数量来决定生效效果。比较常见的还有 "background"、"margin"。
参见:
* "https://developer.mozilla.org/zh-CN/docs/Web/CSS/padding" (https://link.segmentfault.com/?enc=oRqu7lgfwOszeFVqiWAlSg%3D%3D.indYqUN9PkMyrD4suFUfTq4JD63l3rFvI5q3VNmEZTwIl13CrftiOi1fxrLNob%2Bepa9KhyahCYLewVr6a6hjPg%3D%3D)
感觉对了
如何实现百分比条形和tgi图的组合?
如下图所示,我想使用前端图表库实现百分比条形图和tgi图的组合:
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250103/dbff634b7edde75c40604d72797fe381.png)
tgi图使用垂直方向的柱子来表示tgi数值,并用折线将不同的柱子链接。两个图表使用不同的坐标轴,请问该如何实现呢?
感觉对了
如何实现百分比条形和tgi图的组合?
如下图所示,我想使用前端图表库实现百分比条形图和tgi图的组合:
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250103/dbff634b7edde75c40604d72797fe381.png)
tgi图使用垂直方向的柱子来表示tgi数值,并用折线将不同的柱子链接。两个图表使用不同的坐标轴,请问该如何实现呢?
感觉对了
请问使用mockito单测,真的能测出问题吗?
用mockito写单测,内部用到的对象是mock的,感觉除了提高单测覆盖率,也不能测出什么问题呀?最近刚写单测,有些不太理解,请帮忙指教一下,谢谢!
感觉对了
echart中图列与圆环图重叠,怎么图列过多的情况下自适应?
建议你将图例分页,把legend的type属性改为scroll,不然你整个chart就很不可控,可参考
option = {
tooltip: {
trigger: 'item'
},
legend: {
type:'scroll',
top: '5%',
left: 'center'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct Search Engine' },
{ value: 580, name: 'Email Search Engine' },
{ value: 484, name: 'Union ds Search Engine' },
{ value: 300, name: 'Video ds Search Engine' },
{ value: 1048, name: 'Search Enine Search Engine' },
{ value: 735, name: 'Direc Search Engine' },
{ value: 580, name: 'Emil Search Engine' },
{ value: 484, name: 'Union ds Search Engine' },
{ value: 300, name: 'Video As Search Engine' },
{ value: 1048, name: 'Serch Enin Search Enginee' },
{ value: 735, name: 'Drct Search Engine' },
{ value: 580, name: 'Eail Search Engine' },
{ value: 484, name: 'Uion ds Search Engine' },
{ value: 300, name: 'Vdeo ds Search Engine' },
{ value: 735, name: 'Diect Search Engine' },
{ value: 580, name: 'Emi Search Engine' },
{ value: 484, name: 'Union ds Search Engine' },
{ value: 300, name: 'Vieo As Search Engine' },
{ value: 1048, name: 'Srch Enine Search Engine' },
{ value: 735, name: 'Darch Engine' },
{ value: 580, name: 'Earch Engine' },
{ value: 484, name: 'Uinch Engine' },
{ value: 300, name: 'Verch Engine' },
{ value: 484, name: 'Uiorch Engine' },
{ value: 300, name: 'Vdeo ds Search Engine' },
{ value: 735, name: 'Diarch Engine' },
{ value: 580, name: 'Emi Search Engine' },
{ value: 484, name: 'Uniorch Engine' },
{ value: 300, name: 'Vie Search Engine' },
{ value: 735, name: 'Dct Search Engine' },
{ value: 580, name: 'Eearch Engine' },
{ value: 484, name: 'Uinarch Engine' },
{ value: 300, name: 'Veo dsSearch Engine' }
]
}
]
};
感觉对了
使用:global在组件内去修改antd的全局样式,为何并没有生效?
我想要参考"此文档" (https://link.segmentfault.com/?enc=eX%2B1Wx7thAclwi5HvwfKQg%3D%3D.OJKtNENIlnQp7DFCxRPQml12gvkWkhGCPy2AJW12qwenaBb1DpM31uJ82dWjqOKZel1587dcDEUr2ETHmLnuRQ%3D%3D)使用
":gloabal" 去修改antd的Button的样式:
// CustomAntdButton/index.module.css
.myButton :global(.ant-btn-primary) {
background-color: red !important
}
// CustomAntdButton/index.tsx
import './index.module.css'
...
CustomButton
按钮
但是并没有任何改变:
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250102/31f46e375f2bdec08bfde6ff3431c6a3.png)
完整代码如下:
"https://codesandbox.io/s/fk7jnl" (https://link.segmentfault.com/?enc=qfxvb41Xus0dYsOFCFklJw%3D%3D.O1bK79mj7IgYPznyUiBMeuXfBg%2FqqUi78IgzBOqXAhc%3D)
请问要如何才能在组件内自定义Antd组件的样式呢?
感觉对了
创建了一个目录后再次去操作这个目录,出现了Failed to set datadir to '/data/xxx/' (OS errno: 13 - Permission denied)?
root权限的app执行了shell语句,并且指定用户为user1,要操作目录/father/execDir和这个user1的权限是一致的,不过这个/father/缺少了权限,少了结尾的x权限
感觉对了
ubuntu跑webstorm前台环境, 为何无法连接windows上IDEA的后台环境?
找到解决方式了,原因是ubuntu和windows系统的网络交互受限制,必须将ubuntu和windows两台主机放在同一个网段下,也就是至少连接一个路由器
。然后再分别从两台主机ping对方,结果都ping的通,成功连接。
感觉对了
mongodb 本地访问与远程访问的数据一致性问题?
各位大佬好,我的问题是这样:
我有一个服务器,我在服务器里自己安装了一个mongodb,假设外网访问是131.131.131.131:30303. 然后我在家里通过访问这个ip就能拿到。
而我在这个服务器上部署了一个服务,连接这个mongo使用的是127.0.0.1:30303。
但发生了异常:我在家里通过ip远程(程序访问)访问,拿回来700多的数据。 但是 在服务上的程序通过127访问mongo只能拿到500多的数据。
两套配置文件除了访问的ip不同以外,其他db名,用户名密码完全一致。
更神奇的是,我在服务器上把配置文件中mongo的访问ip也改成外网ip,依然只能拿到500多的数据。
我实在高不清这个现象和原因是什么,求各位大佬指点迷津!我用的是golang。 mongo-go-driver
感觉对了
前端如何向后端发送符合restful风格的url?
如果是前端工程化项目的话一般都用axios
直接用里面的方式发送请求即可
"https://axios-http.com/zh/docs/api_intro" (https://link.segmentfault.com/?enc=6wtvnOHkmyntFz3zBhdqCA%3D%3D.I8eSVutQBIPkIW0kHkMkBgAdsKT5a2YyvjWYaoIceKWboifZZW%2Fft3XBko7CYV3y)
感觉对了
怎么能判断出数据库连接池,线程获取连接的等待时间?
1. 使用数据库连接池的监控工具:许多数据库连接池都提供了监控工具,可以查看连接池的状态、连接数、等待线程等信息。你可以使用这些工具来监控连接池的使用情况,包括等待连接的线程和其等待时间。
2. 使用应用程序性能监控工具:一些应用程序性能监控工具(如New Relic、AppDynamics等)可以监控应用程序的性能,并提供连接池的相关指标。这些工具可以帮助你监控连接池的使用情况,包括等待连接的线程和其等待时间。
3. 使用线程分析工具:使用线程分析工具(如VisualVM、JProfiler等)可以监控应用程序的线程状态和执行情况。你可以使用这些工具来查看连接池相关的线程,包括等待连接的线程和其等待时间。
4. 在应用程序中添加日志输出:在连接池的代码中添加日志输出,记录连接申请和释放的时间戳,以及等待连接的线程信息。这样可以通过日志来监控连接池的使用情况,包括等待连接的线程和其等待时间。
感觉对了
自己编写的软件怎样可以实现监控http请求和响应相关数据?
想编写一个监控软件来监控客户端发出请求到响应回来过程中的相关指标
感觉对了
python项目注册nacos,健康实例数不稳定,是为什么?
使用Tornado框架,向2.0版本的nacos注册服务,然后每隔5秒发送心跳。注册服务,发送心跳都是用的V2版本的API。
可以成功注册,在日志也可以看到每隔5秒1次的心跳发送成功,但是在nacos的管理页面刷新实例列表,实例数和健康实例数一直在变,不稳定。
我会有4个服务节点注册到nacos, 实例数和健康实例数一直在1到4之前变化,每次刷新管理平台页面都不一样。
请问是什么原因呢?有没有人遇到过这个问题,,
https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241207/2d5d060d7cfd28448f750173cd3e42bc.png
nacos客户端类
import json, tornado.gen
import aiohttp
from libs.apollo.apollo_util import init_ip
from libs.apollo.client import AsyncApollo
import logging
import asyncio
logger = logging.getLogger(__name__)
DEFAULT_GROUP_NAME = "DEFAULT_GROUP"
class NacosException(Exception):
pass
class NacosRequestException(NacosException):
pass
class NacosClient(object):
def __init__(self, server_addresses, namespace=None, username=None, password=None):
self.server_list = server_addresses.split(',')
self.current_server = self.server_list[0]
self.namespace = namespace
self.username = username
self.password = password
self.server_offset = 0
self.service_ip = init_ip()
def change_server(self):
self.server_offset = (self.server_offset + 1) % len(self.server_list)
self.current_server = self.server_list[self.server_offset]
def get_server(self):
return self.current_server
def _build_metadata(self, metadata, params):
if metadata:
if isinstance(metadata, dict):
params["metadata"] = json.dumps(metadata)
else:
params["metadata"] = metadata
async def _async_post(self, url, **kwargs):
conn = aiohttp.TCPConnector(enable_cleanup_closed=True, ssl=False, limit=5)
async with aiohttp.ClientSession(connector=conn) as session:
async with session.post(url, timeout=10, **kwargs) as response:
return await response.json()
async def _async_put(self, url, **kwargs):
conn = aiohttp.TCPConnector(enable_cleanup_closed=True, ssl=False, limit=5)
async with aiohttp.ClientSession(connector=conn) as session:
async with session.put(url, timeout=10, **kwargs) as response:
return await response.json()
async def _async_delete(self, url, **kwargs):
conn = aiohttp.TCPConnector(enable_cleanup_closed=True, ssl=False, limit=5)
async with aiohttp.ClientSession(connector=conn) as session:
async with session.delete(url, timeout=10, **kwargs) as response:
return await response.json()
async def register(self, service_name, port, cluster_name='default', weight=1.0, metadata=None,
enable=True, healthy=True, ephemeral=True, group_name=DEFAULT_GROUP_NAME):
url = '/nacos/v2/ns/instance'
params = {
'ip': self.service_ip,
'port': port,
'serviceName': service_name,
'weight': weight,
'enable': enable,
'healthy': healthy,
'clusterName': cluster_name,
'ephemeral': ephemeral,
'groupName': group_name,
'namespaceId': self.namespace,
'username': self.username,
'password': self.password
}
self._build_metadata(metadata, params)
tries = 0
while True:
try:
response = await self._async_post(self.current_server + url, data=params)
logger.info(response)
if response['data'] == 'ok':
return 'ok'
except Exception as e:
logger.error(e)
tries += 1
if tries >= len(self.server_list):
raise NacosRequestException("All server are not available")
self.change_server()
async def deregister(self, service_name, port, cluster_name='default', ephemeral=True, group_name=DEFAULT_GROUP_NAME):
url = '/nacos/v2/ns/instance'
params = {
'serviceName': service_name,
'ip': self.service_ip,
'port': port,
'namespaceId': self.namespace,
'healthy': True,
'username': self.username,
'password': self.password,
'ephemeral': ephemeral,
'groupName': group_name,
'clusterName': cluster_name
}
tries = 0
while True:
try:
response = await self._async_delete(self.current_server + url, data=params)
logger.info(response)
if response['data'] == 'ok':
return 'ok'
except Exception as e:
logger.error(e)
tries += 1
if tries >= len(self.server_list):
raise NacosRequestException("deregister instance error!")
self.change_server()
async def send_beat(self, service_name, port, cluster_name='default', weight=1.0,
ephemeral=True, group_name=DEFAULT_GROUP_NAME):
url = '/nacos/v2/ns/instance/beat'
beat_data = {
'serviceName': f'{group_name}@@{service_name}',
'ip': self.service_ip,
'port': port,
'weight': weight,
'ephemeral': ephemeral,
'cluster': cluster_name
}
params = {
'serviceName': f'{group_name}@@{service_name}',
'beat': json.dumps(beat_data),
'groupName': group_name,
'namespaceId': self.namespace,
'username': self.username,
'password': self.password
}
tries = 0
while True:
try:
response = await self._async_put(self.current_server + url, data=params)
logger.info(response)
if response['code'] == 10200:
return 'ok'
except Exception as e:
logger.error(e)
tries += 1
if tries >= len(self.server_list):
return
self.change_server()
async def init_nacos_new():
host = await AsyncApollo.get_value('nacos_host', namespace='risk-model-nacos')
namespace = await AsyncApollo.get_value('nacos_namespace', namespace='')
username = await AsyncApollo.get_value('nacos_username', namespace='')
password = await AsyncApollo.get_value('nacos_password', namespace='')
return NacosClient(host, namespace, username, password)
nacos_client = asyncio.get_event_loop().run_until_complete(init_nacos_new())
async def register_instance(service_name):
logger.info('start register instance to nacos!')
await nacos_client.register(service_name, 8094)
async def deregister_instance(service_name):
logger.info('start deregister instance from nacos!')
await nacos_client.deregister(service_name, 8094)
async def send_heartbeat(service_name):
while True:
await nacos_client.send_beat(service_name, 8094)
logger.info('Send heartbeat successful')
await tornado.gen.sleep(5)
项目启动:
def start_app(args):
io_loop = tornado.ioloop.IOLoop.current()
app = Application(
urls, log_function=log_func, debug=CurrentConfig.DEBUG
)
app.listen(args.port, args.host, xheaders=True)
io_loop.spawn_callback(register_instance, name)
io_loop.spawn_callback(send_heartbeat, name)
io_loop.start()
感觉对了
钉钉宜搭,图片上传组件,仅拍照上传功能,打开相机后左上角有水印,这种水印功能是如何实现的?
https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241204/3cbc7d66e2b8f3ce4666f7274ee80cba.png
感觉对了
vite项目 同时配置了代理 和mock,那么当请求路径都匹配的时候 谁先被执行?
因为 mock 原理大致是直接在浏览器运行代码中拦截重写 XMLHttpRequest 类实现的,而 vite 服务器 proxy 是服务器级别的;mock
先被执行
感觉对了
spring shell component 无法使用 autowired 注入?
@ShellComponent
public class SeederCommand extends Command {
@Autowired
private UserRepository userRepository;
@ShellMethod(key = {"seed"}, value = "数据填充方法")
public void run() {
System.out.println(new Gson().toJson(this.userRepository.findAll()));
}
}
提示 "userRepository" 是 "null"。报错
感觉对了
mathematica画图?
请问这个函数用mathematica怎么画图呢?其中\( \delta
\)是自变量,其余字母都是未知参数。"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241201/3a7c023b77e6c0ee0edbc001023157f1.png)
感觉对了
AMH中的AMRewrite如何配置当用户使用大写url的时候自动访问小写的url?
如访问 域名/AboutUs/ 的时候 自动访问 域名/aboutus/
谢谢
感觉对了
如何解决格式化input的值导致光标位置?
export default {
inheritAttrs: false,
model: { event: 'filtered' },
props: {
value: { default: '' },
},
data() {
return {
oldFormattedValue: '' // 保存上一个格式化值
}
},
computed: {
innerValue: {
get() {
return this.value.replace(/\D/g, '').replace(/(\d{4})(?=\d)/g, '$1 ')
},
set(value) {
const newValue = value.replace(/\D/g, '');
this.$emit('filtered', newValue);
this.adjustCursorPosition(newValue);
this.oldFormattedValue = this.innerValue;
}
}
},
methods: {
adjustCursorPosition(newValue) {
const input = this.$refs.inputField.$el.querySelector('input');
const oldPos = input.selectionStart;
// 计算旧格式化值和新格式化值之间的差异
const oldFormattedValueDiff = this.oldFormattedValue.slice(0, oldPos).split(' ').length - 1;
const newFormattedValueDiff = this.innerValue.slice(0, oldPos + oldFormattedValueDiff).split(' ').length - 1;
const diff = newFormattedValueDiff - oldFormattedValueDiff;
// 调整光标位置
const newPos = oldPos + diff;
input.setSelectionRange(newPos, newPos);
}
}
}
感觉对了
如何设置外网请求内网的共享资源?
家里有个海康智存(NAS)外接了USB扩展柜,其中有2个6T硬盘,在海康智存上设置了USB共享,在 windows10,windows7 都可以通过
\192.168.66.120 访问到共享资源,同时也可以挂在到 centos7 上,家里做了 openwrt 作为主路由并通过 ddns
可以使用域名访问。我想要达到的效果是在 openwrt 上做端口转发,然后在外网可以通过访问域名+端口来访问到 192.168.66.120
共享出来的文件。比如我的域名是:home.xxxx.yy,我是否可以通过 \home.xxxx.yy:11544 来访问共享资源?我已经在 openwrt
上做了端口转发,将外网的 11544 转发到IP 192.168.66.120的445端口,但是访问失败。我用同样的方法已经设置了端口转发可以通过
home.xxxx.yy:3389 访问家里 win7系统,通过 home.xxxx.yy:22 访问家里的
centos7,那么问题来了,同样的方法设置的转发445端口就访问不通是什么问题?还是不可直接在本地资源管理器中通过 \home.xxxx.yy:11544
来访问内网?
感觉对了
如何筛选查询所有git commit 的文件有包含某个字串?
使用 "-G" 或者 "-S" 参数,来搜索 commit 中文件的差异部分。
git log --all -S userInfo
"S" 使用普通字符串进行搜索,"G" 可以使用正则表达式。
* "Git - git-log Documentation" (https://link.segmentfault.com/?enc=osPmPPr2efTfqwPaRJ0IlQ%3D%3D.QXaGtUW5KEXx7WLKnCuufl20GSI%2F7ronidJ2rNjyLWdPIdEjdVyBiDeFK%2F1Uh7u6xMtZOO52RwKFIQ%2BtwGQazfyY8IBwYhezkjRKl36kd78%3D)
感觉对了
jsPlumb连线后保存,数据还原连接点无法和原来保持一致,该如何设置?
呵呵,没有想到,竟然遇到一个用jsPlumb.js的人,被这个JS折磨了半个月,终于拿下了。这个JS库给人的感觉就像是echart.js那种,在那里配置都是可以生效的,有点恶心~
感觉对了
为什么输出的 vsnprintf 的返回值随着执行次数不同而变化呢?
va_list 在第一次调用的时候被消耗完了。
第二次调用的时候里面已经不是有意义的内容了。
如果要重新读的话,需要用 va_start 生成一个新的 va_list 。
感觉对了
业务场景下,后端获取前端用户ID的两种方案比较?
有个项目,后端需要通过获取前端登录的用户id去查询数据,有两种方案
1. 放到响应体中返回,后端去从返回的响应体中取
2. 把userid数据直接传给后端
请教一下大佬们,业务场景下哪种实现比较好?
感觉对了
js中的class继承怎么使用?
class Parent {
constructor() {}
fetch = (data) => {
console.log(1, data);
};
}
class Child extends Parent {
constructor(props) {
super(props);
}
// 改写
fetch = ((superfetch) => (data) => {
if (data) {
data.name = "test";
}
console.log(2, data);
superfetch(data);
})(this.fetch);
}
做了修改,应该可以满足你的方式。
参考的 =>
"https://stackoverflow.com/a/52823577/10378232" (https://link.segmentfault.com/?enc=dLKNHUUt%2F2yuTA9C8jbU5w%3D%3D.YYg7Vl5Z4pYBUZGF5ab9AhYVrhLd1KCS%2BIpT77fbNGE%2B8l8CpNdgAW1eLR7x8eLR)
感觉对了
php怎么把这个字符串转换为数组?
本人PHP初学者,遇到一个问题:
张三,23岁
李四,26岁
王五,28岁
怎么把这个转换为数组?
我希望是这样的:[{"张三":"23岁"},{"李四":"26岁"},{"王五":"28岁"}]
感觉对了
pnpm构建Monorepo项目的一些问题?
场景如下:有三个项目A,B,C,这三个项目的关系如下图
"image.png" (https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241027/50e868babe9f54235491f3a1cc4e3493.png)
1. A是一个核心项目,其最终会使用Electron打成一个独立的项目A.EXE
2. B项目是A项目的超集,在A的基础上会增加一部分功能,最终是一个B.WEB项目
3. C项目是B项目的超级,在B的基础上也会增加一部分功能,最终也会使用Electron打成一个独立的项目C.EXE
经过一番调研,前端打算使用pnpm构建Monorepo架构,初步设想如下:
root
├── package.json
├── pnpm-workspace.yaml
├── packages
├── common
├── package.json
├── utils
├── package.json
├── A
├── package.json
├── B
├── package.json
├── C
├── package.json
common用于存放那些共用的业务代码,a,b,c分别去依赖这个包。如果我把common包所需要vue、vue-router、pinia都安装到common里,然后a,b,c去依赖它,但是这个时候在a,b,c中导入vue就不行了,这跟我想的有点不一样哈(依赖不能传递吗?),所以我只能把它安装到根目录下
。安装到根目录下倒是跑起来了,不知道这样可以吗?刚接触到这个,前端也不是很熟,求大佬指导
"image.png" (https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241027/447ed0285015ffc072f28ecaf7812ccb.png)
大致了解了Monorepo架构,初步选项使用较为简单的pnpm
感觉对了
使用MyBatis批量插入数据,MyBatis拦截器失效?
找到原因了,在@Intercepts注解添加要拦截的StatementHandler方法即可
@Intercepts({
@Signature(type = Executor.class,method = "update",args = {MappedStatement.class, Object.class}),
@Signature(type = StatementHandler.class,method = "update",args = {Statement.class})
})
public class MyBatisAutoFillPlugin implements Interceptor {
// some code...
}
感觉对了
请问各位如何获取设备的安卓序列号?
"IMEI"在安卓10后就被静止获取了, "mac地址"安卓6就被禁止了
用来作为广告设备标识用可以用这几个:
"image.png" (https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241024/d67625d2ff68f2d32d6424b33eb78ae6.png)
如果是面向海外的可以用谷歌服务的也可以使用"GAID", 这个装了google play service的安卓手机上,可以获取到
感觉对了
鼠标悬浮效果背景图标被背景颜色遮挡怎么解决?
图片地址不一致
.tx_mmenu_together .donate-btn-header .lytop_search form .sc_btn input {
background: #fff url('../img/home/search.png') center center no-repeat;
}
.tx_mmenu_together .donate-btn-header .lytop_search:hover form .sc_btn input {
background: #1a75bc url('../img/home/search-.png') center center no-repeat;
}
感觉对了
vue3组合式api+ts,props嵌套传递,直接绑定到元素上,是响应式的嘛?
vue3组合式api+ts,props嵌套传递,没有用变量接收,直接绑定到元素上,当祖父级数据更新,父级和子级都会跟随响应式变化嘛?
祖父级给父级组件绑定选中行的数据,如下:
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241016/be2988701e85ef45078d212feba53e59.png)
父级组件直接将props.data绑定给子级组件,如下:
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241016/e28a426c1589abf88ee941bc42a076d2.png)
当祖父级数据更新,父级和子级都会跟随响应式变化嘛?
我知道当后代组件用变量接收props传递数据时,需要侦听props,才能响应式,这种直接props直接绑定到元素上传递的,会响应式变化嘛
感觉对了
如何在 Element UI 的日期选择器中添加清空和确认按钮?
elementui el-date-picker type='daterange'时,如何添加清空和确认按钮?
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241016/3916c0a91cbca15d54f879224c9839ab.png)
感觉对了
typescript 如何定义一个字段可能是多种类型的一种?
typescript 中一个字段是多个类型中的一种,这个字段的类型改如何定义呢?使用联合类型报错;
interface IText{
text:string;
}
interface IImage{
width:number;
height:number:
size:number;
}
interface IFile{
url:string;
name:string;
}
interface Message{
id:string;
payload:IText|IImage|IFile????
}
payload 可能是上面三种的一种,这个改如何定义呢?上面写法报错
感觉对了
请教一个正则的问题?
当前情况暂且可以满足:
'6.积尘/积泥/灰带 7.白色垃圾(果皮/纸屑/塑膜/烟头)8.积水'.match(/\d+\.[^\d]+/g)
// ['6.积尘/积泥/灰带 ', '7.白色垃圾(果皮/纸屑/塑膜/烟头)', '8.积水']
但若:
'6.积尘/积泥/灰带 7.白色垃圾(果皮/纸屑/塑膜/烟5头)8.积水'.match(/\d+\.[^\d]+/g)
// ['6.积尘/积泥/灰带 ', '7.白色垃圾(果皮/纸屑/塑膜/烟', '8.积水']
"头)"被截断了。如何修改呢?
字符串的格式:"\d+\.(我希望这里是任意字符,但也可以削减范围)+ *" 然后重复。
感觉对了
前端Vue导出PDF:解决文字截断问题?
前端Vue导出pdf文件,用的html2canvas和jspdf依赖,已经解决分页和字体内容模糊问题,但是会出现文字遭拦腰截断这种情况,有做过得相同经验么?https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241015/184c5d9d1a32c4e357564671d4e295d2.png
感觉对了
有没有什么办法可以给外链H5页面插入vconsoe呢?
你这是想要xss攻击呀老弟
感觉对了
如何通过JavaScript或CSS取消浏览器设置中的页首及页尾的默认勾选?
我认为这里已经是浏览器、甚至系统打印机的范畴,所以是无法用 JS、CSS 控制的。
感觉对了
vue3 弹窗组件没有注册,为什么可以直接使用?
定义在"components"文件下的子组件
内容
import { defineComponent, ref } from 'vue'
export default defineComponent({
// eslint-disable-next-line vue/multi-word-component-names
name: 'Login',
setup() {
const show = ref(true)
return {
show
}
}
})
然后在"views"文件夹中,直接使用,并没有"import"引入,也没有注册在"components"中为什么可以直接使用
?
import { defineComponent, onMounted, ref } from 'vue'
export default defineComponent({
name: 'Home',
components: {},
setup() {}
})
感觉对了
关于 nginx 中 location 下的 alias 配置的问题?
第一种,当访问 /about 时,他会去找文件 "htmlindex.html" 而不是预期的 "html/index.html"。
(很多文章都说要加上尾斜杠,实际也确实如此,但是 nginx 的官方手册中似乎没有提及。不过给出的示例里面都是有的)
第三种,按照手册上的说法,你应该使用捕获组。
«If alias is used inside a location defined with a regular expression then
such regular expression should contain captures and alias should refer to
these captures (0.7.40), for example:»
««location ~ ^/users/(.+.(?:gif|jpe?g|png))$ {
alias /data/w3/images/$1;
}»»
* "Module ngx_http_core_module" (https://link.segmentfault.com/?enc=dy6my4JwLll9s3GWDbUvBA%3D%3D.HmaSd6lXg9wiCjBPD3lvTe2rAxe7qAdUq4umQz4AJ4UArvl0dSEdGiXUzuR83zwn7UvhyjondUlrI2kpo2e35w%3D%3D)
感觉对了
js关于函数参数和实参是什么关系?
形参大概可以认为是拷贝了实参的值或者引用地址。这里x作为函数test的形参,在执行时,因为a是一个数组,所以x拷贝的是a的引用。
在第一个log中,控制台输出true,是因为此时x和a指向的是同一个地址;然后你通过重新赋值改变了x的指向,此时a仍然指向的是原地址,所以会有后面两个不同的打印结果。
感觉对了
为啥unique_ptr的移动比shared_ptr赋值要慢?
-O0 肯定是不行的,C++ 比速度一定要开优化。
不开优化的话,这里的 std::move 怎么说也是一个函数调用。多了一个函数调用就没法比了。
.L51:
mov rax, QWORD PTR [rbp-48]
mov rdi, rax
call std::remove_reference >&>::type&& std::move >&>(std::unique_ptr >&)
mov rdx, rax
lea rax, [rbp-120]
mov rsi, rdx
mov rdi, rax
call std::unique_ptr >::operator=(std::unique_ptr >&&)
add DWORD PTR [rbp-24], 1
.L50:
cmp DWORD PTR [rbp-24], 999999
jle .L51
另外,你这个 unique_ptr 的测试里还多了一个 delete ,因为在第二轮循环 u1 为 nullptr ,u 就被 delete 掉了。
感觉对了
盒子里的绝对定位元素发生预期外的像素偏移?
盒子里的绝对定位元素发生预期外的像素偏移
自定义的input checkbox的选择框样式,在不同的分辨率下,代码设置了居中但不居中(是选中时红色的小元素相对于外框不居中!!)
选中checkbox表现
"checkbox图片" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241011/cb18c05758c154a978b4ef5c12f837ee.png)
"checkbox图片" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241011/b68a90fb0e1f01bfd8bd4aa567ac40a9.png)
"checkbox图片" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241011/262468f7462d48d6a927d387f40f3788.png)
图片看可以看到是不居中的!!
尝试过不同的居中方式,还是会在不同的分辨率下会产生偏移,但是放大看确实居中的
代码
.clause-content {
display: flex;
flex-direction: row;
align-items: start;
}
.clause-input {
display: inline-block;
vertical-align: middle;
width: 15px;
height: 15px;
cursor: pointer;
position: relative;
background-color: #fff;
margin-right: 12px;
border: 1px solid rgba(237, 30, 14, 0.15);
}
.clause-input input {
opacity: 0;
}
.clause-input input:checked+i {
width: 10px;
height: 10px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -5px;
margin-top: -5px;
/* transform: translate(-50%, -50%); */
background-color: #ED1C24;
}
clause.
感觉对了
js工具库需要index.d.ts 实现.?
interface SingleOptions {
cache?: number
}
interface SingleFunc {
(...args: P): T extends Promise ? T : Promise
update(opt?: SingleOptions): void
clear(): void
}
export function singlePromise(
fn: (...args: P) => T,
opt?: SingleOptions
): SingleFunc
感觉对了
iOSapp如何使用Reachability解决app安装后首次运行网络授权的问题?
你需要在UIApplicationDelegate中监听网络状态的变化,使用 let monitor = NWPathMonitor()
monitor.pathUpdateHandler = { path in
if path.status == .satisfied {
print("Yay! We have internet!")
//发出通知
}
}
获取网络状态后,发出通知,在你需要刷新的页面接受通知。通知到了,刷新页面
感觉对了
前后端服务器分离时,前端如何上传图片到前端服务器?
给你提供个大概得思路
1.先要准备一个后台上传服务。用java、node等等都可以实现。
你这里提到了纯前端,我以node为例子,假设你的文件要保存到服务器的"/home/uploads"目录下
const http = require('http');
const fs = require('fs');
const path = require('path');
const formidable = require('formidable');
const server = http.createServer((req, res) => {
if (req.method === 'POST' && req.url === '/upload') {
const form = new formidable.IncomingForm();
form.parse(req, (err, fields, files) => {
if (err) {
console.error('文件解析失败:', err);
res.writeHead(500, {'Content-Type': 'text/plain'});
res.end('文件解析失败');
return;
}
const uploadDir = './uploads';
if (!fs.existsSync(uploadDir)) {
fs.mkdirSync(uploadDir);
}
const fileName = fields.fileName; // 获取前端传递过来的文件名
const filePath = path.join(uploadDir, fileName); // 使用前端传递的文件名
const writeStream = fs.createWriteStream(filePath);
fs.createReadStream(files.file.path).pipe(writeStream);
writeStream.on('close', () => {
console.log('文件上传成功:', filePath);
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('文件上传成功');
});
});
} else {
res.writeHead(404, {'Content-Type': 'text/plain'});
res.end('Not Found');
}
});
const PORT = 3000;
server.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});
2.配置nginx的转发。
转发上传接口、配置静态文件访问
#转发上传接口
location /upload {
proxy_pass http://localhost:3000/upload;
}
#配置静态文件访问
location /oss/ {
alias /home/upload/;
autoindex on; # 打开目录浏览功能,可选
}
3.前端axios上传
const formData = new FormData();
formData.append('file', file);
axios.post('/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
},
params: {
fileName: fileName // 将文件名作为请求参数传递给后端
}
})
4.你的文件地址就是你的nginx的domain+/oss/你的上传的文件名
***
我只是给你大概列个思路,具体代码你可以gpt或者网上找示例