无敌英俊大师兄
低代码的页面渲染器是怎样实现的?
想了解下基于低代码平台的页面渲染器是怎么实现的(根据页面渲染器生成一个页面),有没有开源的项目可以参考下。
注:技术栈VueJs
无敌英俊大师兄
如何给el-tab的el-tab-pane的label添加未读消息红点?
可以通过具名" slot" 来实现自定义标签页的内容
我的行程
显示不全是我环境的问题, 一般使用不会
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250106/8957778b23e375fb1b8aa5128df371ec.png)
无敌英俊大师兄
socketio 能和WEB服务共用同一个端口吗?
这种情况应该使用反向代理会比较简单。
«之前web服务和socketio都是独立的,比如一个 80,一个9092»
这里我的理解是,80端口是一个程序,可能提供了web或者api接口,然后9092端口使用了socketio实现了一个长链接的服务。原来客户端上连接socketio的时候直接通过9092端口去访问的,但是现在只能对外暴露一个80端口了,所以原来的两个服务需要共用一个80端口。
官方文档上也有关于反向代理的描述:"https://socket.io/zh-CN/docs/v4/reverse-proxy/" (https://link.segmentfault.com/?enc=6feghJM95g85A4WVMGGP8g%3D%3D.zRRxX8Wtm1T8Ozt9Y7fq2CXybbrklM8C1%2BvtbVgpYqVcXoSw8WVE6Q57llHmtXG1)
用nginx举例子,设置一个规则把/socket.io/开头的请求代理到原来的9092端口,其他路径的请求转发到原来的80端口的程序就可以了。
socketio它只是websoket和http的封装吧,处理这个和 websocket/http 是一样的吧,没什么区别。
可以参考原来的官网的配置文件,大概的配置是这样的:
http {
server {
listen 80;
root /var/www/html;
location / { #这里是默认的,没有匹配上/socket.io/的都使用这个后端,转发到这里
proxy_pass http://localhost:9091;
}
location /socket.io/ { #这里匹配socketio的请求,转发给9092。
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
proxy_pass http://localhost:9092;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
}
}
无敌英俊大师兄
vue vite框架用iframe嵌入public/x.html时,总是跳转到项目首页,怎么办?
尝试在iframe嵌入的项目做免登录吧.
无敌英俊大师兄
rocketmq怎么实现当队列数据量过多,就不要再发送消息了?
这三个方法:消息积压监控:你可以用 RocketMQ 提供的工具或者控制台来监控队列的消息积压情况。达到一定的阈值,你可以手动停止发送消息。
流控制:RocketMQ 提供了一些内置的流控制机制,你可以配置里面的参数来实现自动的流控制,防止消息的积压。用API获取队列状态:你可以用
RocketMQ 的 API
来获取队列的状态信息,包括队列的大小、消息的积压数量这些。然后,你可以根据这些信息来决定要不要继续发送消息。关于扩展逻辑的话,生产者可以用 RocketMQ
的 API 来感知到队列里的积压消息数量。,你可以根据你的需求去自定义扩展逻辑也行,更灵活一些。
无敌英俊大师兄
el-tooltip如何设置不在body中?
想让他在子元素下,根据子元素定位,不在body下
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241230/48b9cf71f95cccef78e47d12ce5f62da.png)
无敌英俊大师兄
普通用户绑定了不同的uid,通过模拟器进行不同uid发送websocket,然后管理员用户就可以看见不同uid的车辆在上面跑?
用对象来存全部车辆模型,这样的话你可以根据每个WebSocket消息里的UID来跟踪和更新每个车辆模型。还有就是更新updateCarModelPosition和createCarModel函数
大致思路:
let currentUserUID = "YOUR_CURRENT_USER_UID";
const onMessage = async (event) => {
const data = JSON.parse(event.data);
if (data.data && data.data.uid) {
const uid = data.data.uid;
const userRole = data.data.userRole; // 获取用户角色
// ... 其他代码
// 根据用户角色和UID来更新或创建车辆模型
if (userRole === 'ROOT' || (userRole === 'USER' && uid === currentUserUID)) {
updateCarModelPosition(uid, positionParams);
}
}
};
// ... 其他代码不变
无敌英俊大师兄
请问python的列表生成式怎样插入多个值?
你如果是要把
[1,2,3]
变成
[0,1,0,2,0,3]
以下可以实现
b = [x for item in zip([0] * len(a),a) for x in item]
无敌英俊大师兄
go int 类型为什么不能和 float 直接比较?
如果你觉得"1"比"1.2"小,那"33554431"和"33554432.99"呢?"1234567999"和"1234567888.88"呢?
后两个问题在C语言中用32位浮点数计算,结果是相等。原因是整数与浮点数直接比较,或是通过字面量给浮点类型赋值,C语言会进行一个隐式转换,而最终转换的结果有时候会不符合直觉,比如像上面两个例子那样。"1234567999"和"1234567888.88"最后都是"1234567936.000000"。
这个问题通常在整数大于"1<<25"时出现,因为32位浮点数尾数只有23位置,能表示24的整数,超过这个数就会面临精度丢失的问题,比如"33554433(1<<25+1)",最后会转换成"33554432.00"。
Go作为新时代的C语言,希望语言尽可能简单,不要有隐式转换,不要有函数重载。希望你自己显式转换,避免隐藏的问题
无敌英俊大师兄
React种,请问比如props有更新,应该再哪里进行打印呢?是某个生命周期方法内吗?
请问我比如props有更新,我应该再哪里进行打印验证更新呢?是某个生命周期方法内吗?
const TabsWithBreadcrumbs = (props: TabsProps) => {
// 请问我比如props有更新,我应该再哪里进行打印呢?是某个生命周期方法内吗?
return (...)
}
无敌英俊大师兄
问个问题,使用高德地图开发定位的时候,需要转坐标系吗?
问个问题,使用高德地图开发,比如使用地理解析api,获取到的经纬度或使用的经纬度需要转成火星坐标,再进行地理解析api的调用吗?
无敌英俊大师兄
为什么uniapp的tabBar图标不显示?
要用绝对路径/static/index.png
无敌英俊大师兄
fastapi 请求过多一般缓存方案是什么?
写太多:
* 扩容 DB 硬扛,水平扩容或者垂直扩容
* 写缓冲就用外部 message queue,比如 rabbitmq、kafka。别想着用进程内的 queue,一 kill 就丢数据,就完蛋
读太多:读缓存就用外部的 redis 或者进程内的各种数据结构,不怕 kill
无敌英俊大师兄
CSS样式:如何将从左到右过渡的渐变色让他从上向下越来越浅,这种效果如何做?
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241212/7c26cae5e8147abf43cda1b0aeb7cfd6.png)
搜索框与轮播图下的背景色效果该如何做?
无敌英俊大师兄
vue中动态给dom元素添加伪元素?
对于动态控制伪元素样式的解决方法之一:CSS变量。
// template
// style
.exp{
--border-color: green;
border-color: var(--border-color);
}
无敌英俊大师兄
这种工商银行公众号上的页面的具体地址怎么查看?
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241210/cdfe99c89ece1ca3a4ea1eea801fe4e3.png)
无敌英俊大师兄
ts类型implements后类型为never?
因为 "ts" 不知道 "e" 究竟是 "PageA" 还是 "PageB",所以传入的参数必需同时对两种情况都有效,只能取两个实现的并集
无敌英俊大师兄
有哪些支持自动布局的流程图js库?
1、JointJS 是一个强大的图形库,支持流程图、组织结构图等。
2、mxGraph 是一个基于 JavaScript 的流程图库,提供了自动布局和丰富的定制选项。
3、GoJS 是一个功能强大的 JavaScript 图形库,支持各种类型的图表,包括流程图。
4、Draw2D 是一个基于 SVG 的图形库,支持流程图和其他类型的图表。
5、Mermaid 是一个用于绘制流程图、时序图等的纯 JavaScript 库。它的语法简单且易于使用。
6、Cytoscape.js 是一个用于图形可视化的强大库,支持自动布局,并且可以用于创建复杂的网络图和流程图。
无敌英俊大师兄
golang slice切片扩容问题?
package main
import "fmt"
func main() {
s3:=make([]int,2,10)
fmt.Println(s3)
Test2(s3)
fmt.Println(s3)
s4:=s3[0:10]
fmt.Println(s4)
}
func Test2(s []int){
s=append(s,6)
s=append(s,6)
s=append(s,6)
fmt.Println(s)
}
得出的结果是:
[0 0]
[0 0 6 6 6]
[0 0]
[0 0 6 6 6 0 0 0 0 0]
请问一下,第三个结果为什么是[0 0],而不是 [0 0 6 6 6] 呢,
在Test2 函数中,使用append的时候,并没有扩容,添加的数据还在底层数组的容量中, 那为啥在 Test2函数之后 s3是[0 0]
即使是在原有的容量基础上扩容,那为啥 s4:=s3[0:10] 是[0 0 6 6 6 0 0 0 0
0],按理来说在函数中扩容之后和外面的没关系了,那s4 应该是[0 0]才对
无敌英俊大师兄
创建项目时没有安装路由,自己安装后页面不显示高亮?
你的路由配置文件的后缀名是否正确?看起来像是编辑器没有正确识别到当前文件语言类型。所以没有代码高亮。
先检查文件后缀名是否正确。如果正确,并且编辑器没有自动识别语言的话,在编辑右下角一般都会有有一个选择文件格式地方,选择正确的语言类型就好了。
"图片.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241202/27d9e201d42eacb9452c95b8a4e5e9b6.png)
无敌英俊大师兄
如何使用python对markdown文档图片地址批量处理?
import re
def process_markdown_content(content):
img_pattern = re.compile(r'!\[([^\]]*)\]\((\./[^)]+)\)')
# 对每个链接进行处理
def replacer(match):
description = match.group(1)
old_path = match.group(2)
# 改图片链接为新的文件夹
new_path = old_path.replace('./', './new_folder/')
return f''
# 替换原链接为新链接
new_content = img_pattern.sub(replacer, content)
return new_content
# 示例
markdown_content = '''
Here is some markdown content.


'''
new_content = process_markdown_content(markdown_content)
new_content
无敌英俊大师兄
如何让Excel文件和网站服务器交互呢?
首先Excel文件当做计算器的话,可以考虑使用Excel组件来复用Excel文件。大多数Excel组件都有公式计算引擎,可以挑选与Excel兼容比较好的组件来使用。
下来有两个方向可以参考:
1. 做网站可以考虑纯前端的 Excel 组件 "SpreadJS" (https://link.segmentfault.com/?enc=72BT%2FyMuA5N9PQO4yn3WtQ%3D%3D.%2BaD2dbg5VJ6zlQL153ucWJrrZPw0rFTrVa%2BFL92T%2Flyj34AGF2CfYc0N8m4bq34d),来解决问题,这种方案,会通过JS 加载Excel文件,SpreadJS提供了 类 Excel的UI,如果还希望使用Excel界面,这是个不错的选择。
2. 也可以考虑把 Excel 文件放在服务端,使用 "GcExcel" (https://link.segmentfault.com/?enc=kpaDb4QU%2FVoRnC6kKATnkw%3D%3D.aFmX5iqM6gHSynYVBkXt4ahgnJHwk3WxqjmbP2EFAeQb6CVWmwz%2FZugHPm12krsQED5vyhlBAhEyspMq%2FH8kUXR9sBiJK0NmgT99DvsG5do%3D) 来解决。服务端计算,可以满足大数据量,以及数据安全的需求。但是相应的网站的UI就需要自己实现。
无敌英俊大师兄
Tauri 打包程序运行时会带一个终端,该怎么处理?
调用cmd时传入一个flag:
#[cfg(target_os = "windows")]
use winapi::um::winbase::CREATE_NO_WINDOW;
fn foo() {
let mut cmd = Command::new(cmd);
// ...
cmd.args(args);
#[cfg(target_os = "windows")]
cmd.creation_flags(CREATE_NO_WINDOW);
}
无敌英俊大师兄
[AMH] 当使用AMS3 远程备份时,面板上如何设置指定路径?
大大,有个问题请教下,当我有多个不同的备份,想要保存至一个S3存储桶中,且保存至设置好的不同个目录,AMH面板该如何操作?
无敌英俊大师兄
Ant Design Vue TreeSelect 组件渲染重复人员报错解决?
你渲染的主键换一下,使用部门-用户id,这样就可以避免掉冲突了,取值的时候,就用split截断获取后面的用户id就行
无敌英俊大师兄
如何选择能跑模型的硬件?
我只是跑模型:不是大规模生产训练,( 比如 "yolo v8" 做做图片验证或者 "text2sql")关于使用 "python"
跑模型的电脑配置:现在我使用的是 "Mac Mini M2" 芯片:但是速度很慢 所以想买个带英伟达显卡的电脑:笔记本最好 单硬件这东西不懂
我至少要买到哪种型号以上才能在现有的 "M2" 芯片上有明显提升
无敌英俊大师兄
如何将js数组中对象的属性值相等的对象组合成一个新的数组元素,然后返回一个新的数组?
你可以看看是否满足你需求,reduce的别样用法
算了,我更新一下,直接给groupId取掉了,你看第二次的,第一次我还保留
const arr = [
{ title: '标题1', url: 'url', groupId: -1 },
{ title: '标题2', url: 'url', groupId: 123 },
{ title: '标题3', url: 'url', groupId: 123 },
{ title: '标题333', url: 'url', groupId: 123 },
{ title: '标题4', url: 'url', groupId: -1 },
{ title: '标题5', url: 'url', groupId: 456 },
{ title: '标题6', url: 'url', groupId: 456 },
]
const res = arr.reduce((previous, current) => {
const len = previous.length
const last = len && previous[len - 1]
if (last.groupId === current.groupId) {
// 如果标题4上面还有一个groupId为123的走这个
if (last.group) {
last.group.push({ ...current })
}
else {
previous[len - 1] = {
groupId: last.groupId,
group: [{ ...last }, { ...current }]
}
}
} else {
previous.push(current)
}
return previous
}, [])
console.log(res)
/*
[
{ "title": "标题1", "url": "url", "groupId": -1 },
{
"groupId": 123,
"group": [
{ "title": "标题2", "url": "url", "groupId": 123 },
{ "title": "标题3", "url": "url", "groupId": 123 },
{ "title": "标题333", "url": "url", "groupId": 123 }
]
},
{ "title": "标题4", "url": "url", "groupId": -1 },
{
"groupId": 456,
"group": [
{ "title": "标题5", "url": "url", "groupId": 456 },
{ "title": "标题6", "url": "url", "groupId": 456 }
]
}
]
*/
-----第二次-----
const arr = [
{ title: '标题1', url: 'url', groupId: -1 },
{ title: '标题2', url: 'url', groupId: 123 },
{ title: '标题3', url: 'url', groupId: 123 },
{ title: '标题333', url: 'url', groupId: 123 },
{ title: '标题4', url: 'url', groupId: -1 },
{ title: '标题5', url: 'url', groupId: 456 },
{ title: '标题6', url: 'url', groupId: 456 },
]
const res = arr.reduce((previous, current) => {
const len = previous.length
const last = len && previous[len - 1]
if (last.groupId === current.groupId) {
// 如果标题4上面还有一个groupId为123的走这个
if (last.group) {
const { groupId: _2, ...currentData } = current
last.group.push({ ...currentData })
}
else {
const { groupId: _1, ...firstData } = last
const { groupId: _2, ...currentData } = current
previous[len - 1] = {
groupId: last.groupId,
group: [{ ...firstData }, { ...currentData }]
}
}
} else {
if (current.groupId === -1) delete current.groupId
previous.push(current)
}
return previous
}, [])
console.log(res)
/*
[
{ "title": "标题1", "url": "url"},
{
"groupId": 123,
"group": [
{ "title": "标题2", "url": "url" },
{ "title": "标题3", "url": "url" },
{ "title": "标题333", "url": "url" }
]
},
{ "title": "标题4", "url": "url" },
{
"groupId": 456,
"group": [
{ "title": "标题5", "url": "url" },
{ "title": "标题6", "url": "url" }
]
}
]
*/
无敌英俊大师兄
pip 安装了 selenium,但是无法在 import webdriver 中找到?
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241113/f71c45e8a85ba548221ecec15a1defcb.png)
这里查看下是否自动化软件包(我这个是pycharm软件)。有时候pip命令会安装失败,可以直接在这里搜索指定软件包版本进行安装。
无敌英俊大师兄
uvicorn 报错:Error loading ASGI app. Could not import module 'app'.?
上一个问题解决后出现的连锁问题:
"https://segmentfault.com/q/1010000044426482" (https://segmentfault.com/q/1010000044426482)
uvicorn 开启服务报错 "Error loading ASGI app. Could not import module "app"."
目录结构:
my_app_name
├── py
│ └── python.exe 等
├── main.py
├── app.py
└── run.bat
run.bat
@echo off
REM 用 python.exe 调用 run.py 并传递所有输入参数
.\py\python.exe main.py %*
main.py
import sys
import getopt
import uvicorn
import pathlib
from multiprocessing import freeze_support
if __name__ == "__main__":
freeze_support()
uvicorn.run('app:app', host="0.0.0.0", port=8000, reload=True, workers=1)
app.py
from fastapi import FastAPI
app = FastAPI()
@app.post("/xxx")
# 以下略
运行run.bat
报错:
"ERROR: Error loading ASGI app. Could not import module "app"."
我认为还是路径的问题,但我没有找到解决方案,
相似问题在 "https://stackoverflow.com/questions/60819376/fastapi-throws-an-error-error-loading-asgi-app-could-not-import-module-api" (https://link.segmentfault.com/?enc=G%2FiMWai5UIU4rn5ITOqWCQ%3D%3D.WMHqRgxearEZb0TQEucB2TQnMP5oAAZw01WarJ4SMSH9fpntxVanzvvLzQpoK%2B920hpEi%2FplrNsIHVn%2BKjMAQa%2BK7md1m3eC6sU8PIwzuuWg0OXulCwKkwulxvyujFpPGRfY%2B4Sez0%2B8Dp3Q8YSaN%2B3BqXnHqbBsxmfpro0im6M%3D)
但和我这不太一样
请问这该怎么办?
谢谢
无敌英俊大师兄
滚动翻页时,js添加的img为什么懒加载失败?
不建议使用这个包,这个包已经很久没有维护了,其使用的方案也过于老套(向前兼容更强),其使用方案为在一开始的时候就选择了所有图片,并将图片所在位置信息
top/left 记录到了内存,然后监听 scroll 事件,当滚动的距离命中后就开始加载图片。
如果页面上存在 CLS(布局偏移)时就会导致滚动到了位置,却不进行加载图片的情况。
还有在配合 Swiper 使用时也会存在图片不加载。
以及部分情况下,图片处于 display: none ,后又 display: block
的时候,也会造成图片滚动到了实际位置不显示,或者需要滚动过头后才显示。
现在更推荐使用基于 "Intersection
Observer" (https://link.segmentfault.com/?enc=1%2BC%2Fzh0oUAn8f0xpZe55Og%3D%3D.DsRoKXh6SI33gQ3b%2F0%2FHihkI%2FjOmrBw3xXGJYZc1G3yeGk99GenazbqrNHpuzFH7KJUvey20d1CCTDv1MebDZizMImnSk2KTljrEyiXHhk4%3D)
的懒加载包,这个会更加准确。且性能也更好。
比如:"lazysizes" (https://link.segmentfault.com/?enc=Rbbm4FNl008sSPKTkT8Xzg%3D%3D.ULJKUgt281iV6uZgLHffFomaXB9JClWHc3MhtjHJkEObtf4wYKbwbfo1sVS3OtdA)。
"image.png" (https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241105/0abf84ddb886839673966abfcf11de21.png)
* "GitHub - aFarkas/lazysizes: High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration." (https://link.segmentfault.com/?enc=RZR%2B3AIKUG%2BJPjjn56TL%2Fw%3D%3D.4M8isgHkRDrsoZSgL5wzcZRd2MxN9gKJTaKZ%2F9%2BsXAIXEcIVvckKr%2Fs5W%2FgumH8%2B)
* "IntersectionObserver API | Can I use... Support tables for HTML5, CSS3, etc" (https://link.segmentfault.com/?enc=V39HMsExhgdWzYDA6AS3OQ%3D%3D.kPzH0Euruja45Sn5vAtG0LOXfKwl6nsNwRB4lO6TvxCI4%2FnQcf0NHvC4g3xnCMSnHJ7tltw62QHAaPByuNGE9Q%3D%3D)
无敌英俊大师兄
Next.js中fetch为什么总是发起两次请求?
手动关闭严格模式,即不使用React.StrictMode包裹组件
nextjs中通过配置中的reactStrictMode来设置
next.config.js
module.exports = {
...
reactStrictMode: false,
}
无敌英俊大师兄
请教一个关于OSS存储图片的问题?
请教大家一个关于oss的问题,比如图片上传这种静态资源,我们一般都是放在oss或者本地,放在本地的好处是省钱,操作方便,但是缺点就是访问太慢,如果首屏十几个大图片要加载,对于一个1~2M带宽的服务器来说,那真是慢到家了。
改进的方法一般都是采用OSS来管理图片,但是OSS收费,虽然有免费额度,我之前咨询过阿里云OSS和七牛云OSS,两者每月都有免费的流量额度,但是七牛云貌似要比阿里云送的要多些。
我的疑问是:
1、OSS上的图片流量是怎么计费的,上行(上传)不收费,下行(下载/访问)收费?
2、如果一个图片大小1M,我访问一次就需要消费掉1M大小额度的流量么?
3、如果访问同一个资源N次,那么消费的流量 是乘倍的增加的么?
4、假如访问同一个资源N次,所消耗的流量是N倍的话,那别人拿到OSS的访问路径岂不是能给你刷死?怎么解?
5、OSS的开通方式是什么样的呢?比如说1、
我只想开通100G/月这样的流量套餐,一个月花费个30块钱,要是用不完转到下月,用完那OSS就给我停了,下月继续用,就像手机卡流量一样。2、我开通了OSS这个功能之后,流量我就管不住了。别人一晚上刷我100G
我也是没办法。
6、还是接上条说,OSS后台可以设置流量阈值么?比如每天要是超过多少M就禁用这种?可以手动增加IP黑名单么?可以智能增加IP黑名单么(比如同一个IP连续几百次调用肯定有问题啊,这种连想都不用想肯定要拉黑的)?
7、你们上传图片都是原图还是压缩(尽可能保证原画质)之后的呢?
8、现在七牛云和阿里云对于用户的免费额度是多少呢?
9、你们的项目(公司或者自己的)对于这种静态资源图片都是怎么处理的呢?
可能有的同学会说可以给资源加上一个过期时间,我感觉是不可取的,因为一般情况下数据库都是保存的可访问的url,如果搞过期时间,每次访问列表还需要访问oss生成一个新的链接,麻烦和性能不说,感觉有没有从根本上避免这个问题。
因为我看到过好几篇同学发帖吐槽过,一页之间OSS被狂刷,损失几百上千的帖子,感觉这确实是个很大的问题,但是貌似确实也没有一个防盗刷很好的解决方法。
无敌英俊大师兄
Dockerfile 安装 Redis 和 MongoDB 常见问题?
你用的应该是php的官方镜像为基础镜像吧, 他的redis安装是有个问题,你可以尝试这样解决
FROM php:7-fpm
RUN apt-get update \
&& apt-get install -y libmcrypt-dev mysql-client \
&& apt-get install -y zip unzip git \
&& apt-get install -y vim
RUN git clone -b php7 https://github.com/phpredis/phpredis.git /usr/src/php/ext/redis
RUN docker-php-ext-install mcrypt pdo_mysql session json mbstring redis
RUN curl -sS https://getcomposer.org/installer | php \
&& mv composer.phar /usr/local/bin/composer
WORKDIR /var/www
无敌英俊大师兄
使用SignalR进行前后端通讯时的跨域问题?
跨域配置没毛病,你withUrl里设置"/api"开头就可以了,前面全写的话没走代理
无敌英俊大师兄
在.NET中使用Vant组件的多选下拉菜单出现问题的解决方法?
"{ text: '内容1' }" 你这内容都一样。试试不一样的内容呢?
无敌英俊大师兄
react项目build之后的index.html有问题,怎么解决?
react项目build之后的index.html有问题,怎么解决?
用create-react-app创建的项目,想要学习下打包上线,npm run start的时候是没问题的,可以正常原型,npm run
build生成了文件夹build,打开build中的静态文件index.html,能够引用到对应的js文件和css文件,但是空白,控制台报了这个错误
"image.png" (https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241028/541952ac62c806312f6b2c03f5efd91c.png)
打开audit.js文件是报了这句错误
"image.png" (https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241028/5463d071a58144b0bab0829518a7909c.png)
但是实际上index.js中是使用了App组件,而App组件是使用了IndexRouter组件,IndexRouter组件中有一个路由的拦截,通过了确定有token了才进入主页面,才会加载侧边栏中的这个Audit组件
App.js
import IndexRouter from './router/IndexRouter'
import "./App.css"
import { Provider } from 'react-redux'
import { store,persistor } from './redux/store'
import { PersistGate } from 'redux-persist/integration/react'
function App() {
return
}
export default App
IndexRouter.js
import React from 'react'
import { HashRouter, Route, Switch,Redirect } from 'react-router-dom'
import Login from '../views/login/Login'
import NewsSandBox from '../views/sandbox/NewsSandBox'
import Detail from '../views/news/Detail'
import News from '../views/news/News'
export default function IndexRouter() {
return (
localStorage.getItem("token") ? :
} />
)
}
查询了网上没有类似的问题,可以提供点思路吗?
"image.png" (https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241028/ec8ae3a8f2ec24f39e2c947296c17963.png)
这个相对路由打包之前也在package.json做了homepage修改,也确实是使用了hashrouter
补充
NewsRouter
import React, { useState, useEffect } from 'react'
import { Route, Switch, Redirect } from 'react-router-dom'
import Home from '../../views/sandbox/home/Home'
import UserList from '../../views/sandbox/user-manage/UserList'
import RoleList from '../../views/sandbox/right-manage/RoleList'
import RightList from '../../views/sandbox/right-manage/RightList'
import Nopermission from '../../views/sandbox/nopermission/Nopermission'
import NewsAdd from '../../views/sandbox/news-manage/NewsAdd'
import NewsDraft from '../../views/sandbox/news-manage/NewsDraft'
import NewsPreview from '../../views/sandbox/news-manage/NewsPreivew'
import NewsUpdate from '../../views/sandbox/news-manage/NewsUpdate'
import NewsCategory from '../../views/sandbox/news-manage/NewsCategory'
import Audit from '../../views/sandbox/audit-manage/Audit'
import AuditList from '../../views/sandbox/audit-manage/AuditList'
import Unpublished from '../../views/sandbox/publish-manage/Unpublished'
import Published from '../../views/sandbox/publish-manage/Published'
import Sunset from '../../views/sandbox/publish-manage/Sunset'
import axios from 'axios'
import { Spin } from 'antd'
import { RadiusUprightOutlined } from '@ant-design/icons'
import { connect } from "react-redux"
import { HashRouter } from 'react-router-dom/cjs/react-router-dom.min'
const LocalRouterMap = {
"/home": Home,
"/user-manage/list": UserList,
"/right-manage/role/list": RoleList,
"/right-manage/right/list": RightList,
"/news-manage/add": NewsAdd,
"/news-manage/draft": NewsDraft,
"/news-manage/category": NewsCategory,
"/audit-manage/audit": Audit,
"/audit-manage/list": AuditList,
"/publish-manage/unpublished": Unpublished,
"/publish-manage/published": Published,
"/publish-manage/sunset": Sunset,
"/news-manage/preview/:id": NewsPreview,
"/news-manage/update/:id": NewsUpdate
}
function NewsRouter(props) {
const [backRouterList, setbackRouterList] = useState([]);
useEffect(() => {
Promise.all([
axios.get("/rights"),
axios.get("/children")
]).then(res => {
// console.log(res)
setbackRouterList([...res[0].data, ...res[1].data])
// console.log(backRouterList)
})
}, []);
const { role: { rights } } = JSON.parse(localStorage.getItem("token"))
const checkRoute = (item) => {
// console.log(item)
return LocalRouterMap[item.key] && (item.pagepermisson || item.routepermisson)
}
const checkUserPermission = (item) => {
return rights.includes(item.key)
}
return (
{/*
{
backRouterList.map(item => {
if(checkRoute(item) && checkUserPermission(item)){
return
}
return null
})
}
{/* { console.log(backRouterList)} */}
{/* {
backRouterList.length > 0 &&
}
*/} */}
{
backRouterList.map(item => {
if (checkRoute(item) && checkUserPermission(item)) {
return
}
return null
})
}
{/* { console.log(backRouterList)} */}
{
backRouterList.length > 0 &&
}
)
}
const mapStateToProps = ({ LoadingReducer: { isLoading } }) => {
return {
isLoading
}
}
export default connect(mapStateToProps)(NewsRouter)
NewsSandBox
import React,{useEffect} from 'react'
import SideMenu from '../../components/sandbox/SideMenu'
import TopHeader from '../../components/sandbox/TopHeader'
import Nprogress from 'nprogress'
import "nprogress/nprogress.css"
import { Layout, theme } from 'antd'
import "./NewsSandBox.css"
import NewsRouter from '../../components/sandbox/NewsRouter'
const { Content } = Layout;
export default function NewsSandBox() {
const {
token: { colorBgContainer },
} = theme.useToken();
Nprogress.start();
useEffect(() => {
Nprogress.done();
});
return (
)
}
无敌英俊大师兄
在宏定义中如何添加__FUNCTION__?
在宏定义中如何添加__FUNCTION__?
代码如下:
#include
void _LOG(const char* strFormat, ...) {
printf("res=%s\n", strFormat);
}
#define LOG(strFormat, ...) _LOG(__FUNCTION__ ":" strFormat, ##__VA_ARGS__) //在这里添加__FUNCTION__后编译会报错,添加其它字符串就不会报错。
int main() {
LOG("%s", "Hello, world!");
return 0;
}
尝试将__FUNCTION__改为字符串就不会报错。
无敌英俊大师兄
如何理解Integer.parseInt源码?
今天在研究Java中"Integer.parseInt"的源码时,对于"int multmin = limit / radix;"这一句代码不太理解,请教一下为什么通过" result Character.MAX_RADIX) {
throw new NumberFormatException("radix " + radix +
" greater than Character.MAX_RADIX");
}
boolean negative = false;
int i = 0, len = s.length();
int limit = -Integer.MAX_VALUE;
if (len > 0) {
char firstChar = s.charAt(0);
if (firstChar < '0') { // Possible leading "+" or "-"
if (firstChar == '-') {
negative = true;
limit = Integer.MIN_VALUE;
} else if (firstChar != '+') {
throw NumberFormatException.forInputString(s, radix);
}
if (len == 1) { // Cannot have lone "+" or "-"
throw NumberFormatException.forInputString(s, radix);
}
i++;
}
int multmin = limit / radix;
int result = 0;
while (i < len) {
// Accumulating negatively avoids surprises near MAX_VALUE
int digit = Character.digit(s.charAt(i++), radix);
if (digit < 0 || result < multmin) {
throw NumberFormatException.forInputString(s, radix);
}
result *= radix;
if (result < limit + digit) {
throw NumberFormatException.forInputString(s, radix);
}
result -= digit;
}
return negative ? result : -result;
} else {
throw NumberFormatException.forInputString(s, radix);
}
}
无敌英俊大师兄
解决PNG图片加载错误的方法?
写了"setup"就不用写"export default"了吧?
"image.png" (https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241022/ba18cca71ffd6b75c16c9095f5a7c59b.png)
无敌英俊大师兄
tyescript 中使用 interface 做类型映射报错而换成 type 定义就可以了?
"1704200427581.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241016/3aa2516344941f970013777707b1d79d.png)
如上图所示遇到个奇葩的问题使用 interface 定义映射报错,然而使用 type 同样的定义方式没有问题,使用的 typescript 版本是
"typescript": "^4.6.3"。这个是什么原因导致的呢,是哪里出现了问题呢?
无敌英俊大师兄
uniapp项目H5转小程序有方案吗?
现在的H5项目用uniapp写的、用到了动态组件、还有一些插件、商城的购买流程、分享等。
能不能直接把H5项目转成小程序,像这些动态组件的话只能删除再去写小程序的写法,请问有没有什么插件可以直接转的。
或者有类似经验的可以分享一下,谢谢
无敌英俊大师兄
动态绑定src后,img标签不显示图片,点击右键加载后才显示图片?
我写过类似的媒体文件, 像是 "Video", 给 "src" 绑定一个动态变量, 变量改变时不会触发更新, 没看源码, 应该是有内部机制, 必须手动
dom.src = 'new url' 才会触发更新
无敌英俊大师兄
网络测速需要前端如何设计?
问题背景:
我们研发的一款 app 需要测不同 bssid 的网速,来提示用户采用最佳速度的网络。
现在的实现方式:
1.前端先切换到对应的 bssid 网络上
2.后端提供了一个函数 speedTest,前端可以传递字节数,然后后端会创建相对应大小的垃圾数据返回给前端,后端 go 代码实现也比较简单。假设前端传递
100MB 的数据给后端。
func handleSpeedTest(c *gin.Context) {
sizeRaw := c.Query("size")
size, err := strconv.ParseInt(sizeRaw, 10, 64)
if err != nil {
c.JSON(http.StatusBadRequest, gin.H{"error": fmt.Sprintf("invalid size: %s", err)})
return
}
ctx := c.Request.Context()
c.Header("Content-Type", "application/octet-stream")
c.Header("Cache-Control", "no-cache")
const chunkSize = 256 * 1024
data := make([]byte, chunkSize)
for writtenSize := int64(0); writtenSize < size; writtenSize += chunkSize {
if size-writtenSize < chunkSize {
data = make([]byte, size-writtenSize)
}
select {
case <-ctx.Done():
return
default:
_, _ = c.Writer.Write(data)
}
}
}
3. 由于网络情况的特殊性,在网络较差的情况下,前端不可能等到 100MB 全部返回才提示用户,所以在前端做了一个超时处理,5s 之内取消这个请求,通过 5s 内接收到的数据除于/5s 得出网速。(使用 axios 和 new AbortController)
问题:
1.前端有能力主动取消请求,并且获得已经传输的数据吗?
2.前端这边如何去设计来达成需求呢?
无敌英俊大师兄
扫二维码关注公众号后自动给你发送一条小程序链接消息,这种应该怎么实现?
参照这篇文章"如何关注公众号以后自动推送小程序?" (https://link.segmentfault.com/?enc=z0c1Pmxdg5F%2FkJRHRgogtQ%3D%3D.Je4valaziuIUa35tkVmA9XpfZPzEq3ONweq1P4Ejygn2oiHG%2BVrrNWcG4TsN3plQhiDAuLQHtc4Llz%2F2bc%2BzD3PrvVK9DPbPcdRapatk9kC0I06MVE2CpB1w729DncM2)
无敌英俊大师兄
谷歌浏览器直接切换英文页面不显示?
给html标签添加了translate="no"试试
"https://juejin.cn/post/7300929241948749859" (https://link.segmentfault.com/?enc=bzN1r8yrqHBziLy05XVUiw%3D%3D.U%2B%2B5oq7Qh9vhc5Z3rME48LY5Aa3%2FQyxe4CIMJAedDJArQvrg%2FlUOMFuHmvWsojGp)
无敌英俊大师兄
如何替换JavaScript对象数组中的键和值,同时保持顺序,求大佬指导?
"Javascript" 中对象的键的顺序遵循数字键的升序和非数字键的插入顺序。也就是说,"JS"
会把看起来像数字的键提前并按升序排序,剩下的按插入顺序排序,如:
const obj = { k1: 'v1', k2: 'v2', '1': '1', '0': '0' }
// 0 1 k1 k2
所以只要键不是数字就可以
function replaceObjKeyWithOrder(
obj: T,
kOld: keyof T & string,
kNew: string,
) {
const entries = Object.entries(obj),
entry = entries.find(([k]) => k === kOld)
entry && (entry[0] = kNew)
return Object.fromEntries(entries)
}
const tableData = [
{
A: "12A",
B: "12B",
},
{
A: "13A",
B: "13B",
},
],
newTableData = tableData.map((v) => replaceObjKeyWithOrder(v, "A", "D"))
console.log("before:", tableData)
console.log("after:", newTableData)
before: [ { A: "12A", B: "12B" }, { A: "13A", B: "13B" } ]
after: [ { D: "12A", B: "12B" }, { D: "13A", B: "13B" } ]
无敌英俊大师兄
为啥unique_ptr的移动比shared_ptr赋值要慢?
为啥unique_ptr的移动比shared_ptr赋值要慢?
在Modern Effective
C++中,提倡使用unique_ptr代替裸指针,因为unique_ptr的大小和性能与裸指针基本一致但更安全,而shared_ptr由于由原子变量的存在性能更差,但是同步赋值试下来,unique_ptr的移动很慢。
#include
#include
#include
#include
int main()
{
#define COUNT 100000000
using MyType = int;
decltype(auto) u = std::make_unique();
decltype(auto) s = std::make_shared();
decltype(auto) r = new MyType;
decltype(auto) u1 = std::move(u);
decltype(auto) s1 = s;
decltype(auto) r1 = r;
auto start = std::chrono::high_resolution_clock::now();
auto finish = std::chrono::high_resolution_clock::now();
std::chrono::duration elapsed = finish - start;
start = std::chrono::high_resolution_clock::now();
for (int i = 0; i < COUNT; ++i) r = r1;
finish = std::chrono::high_resolution_clock::now();
elapsed = finish - start;
std::cout << "ptr: " << elapsed.count() << "s\n";
start = std::chrono::high_resolution_clock::now();
for (int i = 0; i < COUNT; ++i) u = std::move(u1);
finish = std::chrono::high_resolution_clock::now();
elapsed = finish - start;
std::cout << "unique_ptr: " << elapsed.count() << "s\n";
start = std::chrono::high_resolution_clock::now();
for (int i = 0; i < COUNT; ++i) s = s1;
finish = std::chrono::high_resolution_clock::now();
elapsed = finish - start;
std::cout << "shared_ptr: " << elapsed.count() << "s\n";
}
运行结果:
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241011/52bfcd2cf2fbdf9488c3412b47f92130.png)
无敌英俊大师兄
Typescript继承,子类有没有方便一点的构造器使用方法?
正常父类的构造器里会用到一些单例工具类,而且这种后续还会增加。例如:
export class ClassA {
constructor(
public s1: ServiceA,
public s2: ServiceB,
public s3: ServiceC,
) {
}
}
export class ClassB extends ClassA {
constructor(
public s1: ServiceA,
public s2: ServiceB,
public s3: ServiceC,
) {
super(s1, s2, s3);
}
}
子类必须调父类构造器,这种传参代码,每次复制粘贴。主要是后续增加一个参数,每个子类都得改过去。
就不能设计成子类默认就有一样的构造器,已经隐式调用了super,别让人手写
无敌英俊大师兄
苹果的Vision Pro网页交互?
为啥额外做什么适配?里面浏览网页,就是内置的浏览器,
里面的那个浏览器/version pro底层交互层面,
已经做了将手势转换成鼠标的点击的适配,
哪里还需要这么高级的应用层来做适配😅
(此处的""高级""和C语言这种""低级""的语言对应)
无敌英俊大师兄
如何简化正则?
function excludeSubstring(inputString, substringToDelete) {
const regex = new RegExp(
`(^\\b${substringToDelete}\\b,*)|(,*\\b${substringToDelete}\\b)`
);
return inputString.replace(regex, "");
}
// 举例
'12,34,56'.replace(/(^12,*)|(,*12)/,'')
如何简化这个正则呢?
或者是否有其他实现方式(正则)?