这是我项目package.json的dependencies "dependencies": { ... "react-infinite-viewer": "^0.28.0" } 其中这个包的依赖关系如下 react-infinite-viewer依赖infinite-viewer，infinite-viewer依赖gesto， 我把gesto的代码修改了，我要怎么配置才可以在每次npm i react-infinite-viewer的时候使用修改后的gesto代码包 项目的实际情况：项目依赖包直接或间接依赖于gesto其实不止一个。 这意味着这是一个多个包在不同层级依赖gesto问题（但项目不直接使用gesto这个包）。 我曾试过使用下面这个方式: 修改项目package.json的dependencies "dependencies": { ... "react-infinite-viewer": "^0.28.0", "gesto":"file:packages/gesto" } 这种方式只能在项目的node_modules中安装修改后的代码，意味着我只能在项目中直接使用gesto才是修改后的代码，但我使用的是react-infinite-viewer，而react-infinite-viewer使用的还是原来的代码 myproject ->node_modules ->react-infinite-viewer ->node_modules ->infinite-viewer ->node_modules gesto // 这里安装的还是旧代码的gesto ... ->gesto // 这里是修改后的 使用pnpm或者lerna可以解决吗？要怎么配置 *** 补充：根据楼下大佬的回答，如果使用的是yarn的话，解决办法可以更简洁 只需配置resolutions即可 "resolutions": { "gesto":"file:packages/gesto", }, Yarn 的选择性依赖项解析功能与 npm-force-resolutions 的功能非常相似 但是，Yarn 的选择性依赖项解析功能是 npm-force-resolutions 的默认功能。不需要安装 npm-force-resolutions 可以使用。 "yarn 选择性依赖项" (https://link.segmentfault.com/?enc=6E8tSnx%2F8GF0Ga1IGN%2BrQA%3D%3D.at3YJte9vb9WOIaftTdhSnjsf%2F8AdlRGFB%2B0NudEG9AUmZTH%2BiEV6j%2BmhXsVhJxh2O8iIIe7wLDLVUDW6GtRyK6MoCC751dcSXbpvvT%2FY7BS2SIIT0ccqdDry4BdyFbf)

let socketInfo = 'xxxxxx' let ws = new WebSocket(socketInfo) let pingInterval = ref(null) // 心跳间隔ID let viewer = null let entity = null let polylineInitialized = false; // 轨迹线是否已初始化的标志 let polylineEntity = null; // 用于存储轨迹线实体 let pointEntity = null; const positionParams = []; // 用于存储所有的位置参数数据 const bufferLimit = 50; // 缓冲区大小限制 // 加载websocket function webValue() { // 初始Websocket const onOpen = () => { const data = JSON.stringify({ command: 1, serializeAlgorithm: 1, token: window.localStorage.getItem('token') }); ws.send(data); // 发送JSON字符串 // 设置心跳间隔为5秒 pingInterval.value = window.setInterval(() => { const pingMessage = JSON.stringify({ command: 2, serializeAlgorithm: 1 }); ws.send(pingMessage); }, 5000); }; // 接收websocket数据 const onMessage = async (event) => { const data = JSON.parse(event.data); if (data.data == undefined) { console.log('未响应'); } else { processPositionParams(data.data); updateCarModelPosition(positionParams);// 实时更新车辆移动位置 if (!polylineInitialized) { initializePolyline(positionParams); // 初始化轨迹线 polylineInitialized = true; // 标记轨迹线已初始化 } else { updatePolylinePosition(positionParams); // 更新轨迹线位置 } } }; // 封装处理返回的参数 function processPositionParams(data) { const targetingTypes = { 0x10: 'RTK', 0x11: 'UWB', 0x12: '融合' }; const newPositionParam = { TargetingType: targetingTypes[data.type], UID: data.uid, Angle: data.angle, Height: data.height, longitude: data.longitude, latitude: data.latitude }; positionParams.push(newPositionParam); // 超过缓冲区大小限制时移除最旧的位置参数数据 if (positionParams.length > bufferLimit) { positionParams.shift(); } const labelText = `终端ID:${data.uid},定位类型:${targetingTypes[data.type]}\n经度:${data.longitude},纬度:${data.latitude}\n角度:${data.angle},高度:${data.height}`; point(positionParams, labelText);// 更新实体点位置信息 } const onClose = () => { window.clearInterval(pingInterval.value); // 清除心跳间隔定时器 console.log('Websocket连接关闭'); webValue(); }; const onError = (error) => { console.log('Websocket连接错误'); ws.close(); window.clearInterval(pingInterval.value); // 清除心跳间隔定时器 webValue(); }; ws.addEventListener('open', onOpen); ws.addEventListener('message', onMessage); ws.addEventListener('close', onClose); ws.addEventListener('error', onError); } ------------------------------------- // 绘制车辆模型和轨迹点、轨迹线 let checkedPoint = ref(true); let checkedLines = ref(false); // 保存checkedPoint和checkedLines的值到LocalStorage function saveCheckedValues() { localStorage.setItem('checkedPoint', JSON.stringify(checkedPoint.value)); localStorage.setItem('checkedLines', JSON.stringify(checkedLines.value)); } // 从LocalStorage中获取checkedPoint和checkedLines的值 function loadCheckedValues() { const storedCheckedPoint = localStorage.getItem('checkedPoint'); const storedCheckedLines = localStorage.getItem('checkedLines'); if (storedCheckedPoint) { checkedPoint.value = JSON.parse(storedCheckedPoint); } if (storedCheckedLines) { checkedLines.value = JSON.parse(storedCheckedLines); } } // 监听checkedPoint和checkedLines的变化，并保存到LocalStorage watch([checkedPoint, checkedLines], saveCheckedValues, { deep: true }); // 在页面加载时加载checkedPoint和checkedLines的值 window.addEventListener('load', loadCheckedValues); // 车辆模型 let carModelData = null; let shouldFollowCar = false; // 标志位 function updateCarModelPosition(positions) { if (positions.length === 0) { return; } const latestPosition = positions[positions.length - 1]; const cartesian3 = Cesium.Cartesian3.fromDegrees(latestPosition.longitude, latestPosition.latitude, 0.4); if (!carModelData) { createCarModel(cartesian3, latestPosition.Angle); } else { carModelData.position = cartesian3; const headingPitchRoll = new Cesium.HeadingPitchRoll( Cesium.Math.toRadians(latestPosition.Angle + 90), Cesium.Math.toRadians(0), Cesium.Math.toRadians(0) ); carModelData.orientation = Cesium.Transforms.headingPitchRollQuaternion(cartesian3, headingPitchRoll); } } function createCarModel(cartesian3, angle) { const headingPitchRoll = new Cesium.HeadingPitchRoll( Cesium.Math.toRadians(angle + 90), Cesium.Math.toRadians(0), Cesium.Math.toRadians(0) ); const scaleByDistance = new Cesium.NearFarScalar(200, 120, 1200, 0.6); const distanceDisplayCondition = new Cesium.DistanceDisplayCondition(0, 10000); carModelData = viewer.entities.add({ position: cartesian3, orientation: Cesium.Transforms.headingPitchRollQuaternion(cartesian3, headingPitchRoll), model: { uri: "http://127.0.0.1:5501/car/scene.gltf", scale: 75, scaleByDistance, distanceDisplayCondition, }, id: 'carModel' // 添加id属性 }); } --------------------------------------------------------------- // 轨迹点 和 轨迹线 和 标签文字 let positionsArray = []; let entityList = []; function point(positions, labelText) { const cartesian3Array = []; positionsArray = positions.flatMap(pos => [pos.longitude, pos.latitude]); // 移除之前的实体点 for (const entity of entityList) { viewer.entities.remove(entity); } entityList = []; for (const position of positions) { let entityIndex = entityList.length; const cartesian3 = Cesium.Cartesian3.fromDegrees( position.longitude, position.latitude, 0.02 ); const pointLabel = new Cesium.Entity({ position: cartesian3, point: { pixelSize: 10, color: Cesium.Color.BLUE, show: checkedPoint.value, outlineColor: Cesium.Color.WHITE, distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 500), scaleByDistance: new Cesium.NearFarScalar(100, 1, 300, 0.5), outlineWidth: 1, }, // label: { // text: labelText, // font: '14pt monospace', // show: new Cesium.CallbackProperty(() => { // return entityIndex === entityList.length - 1; // }, false), // style: Cesium.LabelStyle.FILL_AND_OUTLINE, // outlineWidth: 2, // verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // pixelOffset: new Cesium.Cartesian2(0, -9), // scaleByDistance: new Cesium.NearFarScalar(300, 1, 1000, 0.4), //设置随图缩放距离和比例 // scale: 1, // fillColor: Cesium.Color.WHITE,//标签的文本填充颜色。 // outlineColor: Cesium.Color.WHITE,//标签的文本轮廓颜色。 // }, }); entityList.push(pointLabel); viewer.entities.add(pointLabel); cartesian3Array.push(cartesian3); } } -------------------------------------------------------- // 创建新的轨迹线 let polylineGeometry = null; let geometryInstance = null; function initializePolyline(positions) { const positionsArray = positions.flatMap(pos => [pos.longitude, pos.latitude]); const positionsInCartesian = Cesium.Cartesian3.fromDegreesArray(positionsArray); polylineGeometry = new Cesium.PolylineGeometry({ positions: positionsInCartesian, width: 5, distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 500), scaleByDistance: new Cesium.NearFarScalar(100, 10, 500, 1), }); geometryInstance = new Cesium.GeometryInstance({ geometry: polylineGeometry, attributes: { color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED) } }); const primitive = new Cesium.Primitive({ geometryInstances: geometryInstance, appearance: new Cesium.PolylineMaterialAppearance({ material: Cesium.Material.fromType(Cesium.Material.ColorType) }) }); viewer.scene.primitives.add(primitive); } // 更新轨迹线位置 function updatePolylinePosition(positions) { if (geometryInstance) { const positionsArray = positions.flatMap(pos => [pos.longitude, pos.latitude]); const positionsInCartesian = Cesium.Cartesian3.fromDegreesArray(positionsArray); polylineGeometry.positions = positionsInCartesian; geometryInstance.geometry = polylineGeometry; geometryInstance.show = checkedLines.value; } } ***

"00a0173f64da65b06e35ccfe3063a05.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250111/19d42f9a02ed70fa2fb1f3280dec2dfe.png) 地图配置，我想在这里写v-for

请问下有 api 能清空一个已经 render 的图表吗？期望清空图表中的图形，但是保留轴等组件。

"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250106/80d945a9b45cbb5aaf9c063d612c917b.png)第一列想动态改变为index或者selection，但是不生效

想要保持页面在edge浏览器里不被休眠，要如何弄呐。

AMH主机面板我没用过, 但是看这个报错是因为没有安装mysql8.0, 看了一下AMH官网, 推荐纯净安装 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250103/207b936ebe0187b6cc608c2bb4416d8d.png)

解决方案 Solution 你可以配置指标卡 "indicator"。指标卡默认显示在图表中间，你可以配置一个 y 方向的偏移量。indicator 也支持多行文本，以及分别设置样式： indicator: [ { visible: true, title: { style: { text: 'Normal', dy: 100, fill:'rgb(99,110,124)', fontSize: 40, fontWeight: 800 } }, content: [ { visible: true, style: { fontSize: 20, dy: 100, fill:'rgb(193,200,204)', fontWeight: 800, text: 'Quality' } } ] } ], 代码示例 Code Example 代码参考 Code Example const pointerPath = "M-0.020059 -0.978425 C-0.018029 -0.9888053 -0.013378 -1 0 -1 C0.01342 -1 0.01812 -0.989146 0.0201 -0.978425 C0.02161 -0.9702819 0.0692 -0.459505 0.09486 -0.184807 C0.10298 -0.097849 0.1089 -0.034548 0.11047 -0.018339 C0.11698 0.04908 0.07373 0.11111 0.00002 0.11111 C-0.07369 0.11111 -0.117184 0.04991 -0.110423 -0.018339 C-0.103662 -0.086591 -0.022089 -0.9680447 -0.020059 -0.978425Z"; const circlePath = "M1 0 C1 0.55228 0.55228 1 0 1 C-0.552285 1 -1 0.55228 -1 0 C-1 -0.552285 -0.552285 -1 0 -1 C0.55228 -1 1 -0.552285 1 0Z"; const spec = { type: "gauge", data: [ { id: "id0", values: [ { type: "目标A", value: 0.6 } ] } ], radiusField: "type", angleField: "value", seriesField: "type", outerRadius: 0.8, innerRadius: 0.7, startAngle: -225, endAngle: 45, indicator: [ { visible: true, offsetY: '50%', title: { style: { text: "Normal", fill: "rgb(99,110,124)", fontSize: 40, fontWeight: 800 } }, content: [ { visible: true, style: { fontSize: 20, fill: "rgb(193,200,204)", fontWeight: 800, text: "Quality" } } ] } ], gauge: { type: "circularProgress", cornerRadius: 10, progress: { style: { fill: { gradient: "conical", stops: [ { offset: 0, color: "#4FC6B4" }, { offset: 1, color: "#31679E" } ] } } }, track: { style: { fill: "#ccc" } } }, pointer: { width: 0.5, height: 0.5, style: { path: pointerPath, fill: "#5A595E" } }, pin: { style: { path: circlePath, fill: "#888" } }, pinBackground: { width: 0.08, height: 0.08, style: { path: circlePath, fill: "#ddd" } } }; 结果展示 Results 在线效果参考："https://codesandbox.io/s/gauge-indicator-tvh2hd" (https://link.segmentfault.com/?enc=JE55%2BLwpu8KmJ2C8g%2BcGGg%3D%3D.ak%2BaIBaa8uTClf3%2BIO4g4SRfFPb5Fz6hPDUYC7SEMe8%2B2ZnDxplOYhCImlmJYAFg) "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250101/b6370c568fd8f685f0e88c6bd62a262e.png) 相关文档 Related Documentation 相关教程："https://visactor.io/vchart/guide/tutorial_docs/Chart_Concepts..." (https://link.segmentfault.com/?enc=6lVY7465Fm924mfodzixLw%3D%3D.j6Mh7OA9Jk3ILxh7CD1H6IJP0fMx%2FwN2DZDWj0%2FQwWAiFd069KN9NA3aBIAE3GjxEjMgIhZQs5URM2CJFyNoYRKxYNicJdnyzE42n2q5YwY%3D) 相关 api："https://visactor.io/vchart/option/gaugeChart#indicator.offsetY" (https://link.segmentfault.com/?enc=B0tX2Mg02jJoDiNwfxLpTw%3D%3D.m4YVWzjSjJWrOuwgXT1Pk2YzsmgE5%2BYm0Azy3OvFGTJAq0CLjM7dsT7N8nHg0dcSZZtAaCZ8xu0%2B%2FEfZC7rw0Q%3D%3D) github："https://github.com/VisActor/VChart" (https://link.segmentfault.com/?enc=HBAEu2UPTsrkQWqqKkermA%3D%3D.iYLzblWX3iCOLg3bMHHIsq4wCIA%2BMgxSExmyisYkZhUVWbvgQNPVJ0S5QCzrhzHe)

这听上去就是一个递归，然后修改自己的状态。 然后我看了一下 ai 的答案，不忍直视。 这里遍历的话可以考虑深度优先遍历 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241231/643468c190f179da2a589325a4ba3a2c.png) 看上去遍历没问题 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241231/d83e50579ed1a998e411fea4690b9280.png) 遍历的时候做两个状态判断一下就可以了 *** 但是我没有从上往下覆盖，所以会出现这种情况 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241231/04e77e5d7911dee8822667b7af8f3fb0.png) 到此就完成了你所需要的功能，不过这个需求一般 tree 组件都支持 *** 可以在计算的时候，用计算值计算，可以直接向上继承 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241231/7de673280bea11881496a31c5bc17f54.png)

一个很普通的表单，动态校验了两个表单项，提交时newForm.validateFields()。结果出现重复的报错提示，控制台也报错key重复。 控制台报错信息：Warning: Encountered two children with the same key, "请输入用户邮箱". Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version. "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250101/8c5600fdbe3025964c247f421bc7ab76.png) 代码： const handleOk = () => { newForm .validateFields() .then(async (values) => { //省略 ({ validator(_, value) { if(value && phone.test(value)) { return Promise.resolve(); } if(!value){ return Promise.reject(new Error("请输入用户手机号")); } return Promise.reject(new Error("请输入正确格式的手机号")); }, }), ]}> //剩余代码省略

之前看到一个相关文章，你可以参考下。 "https://juejin.cn/post/7267728538567114789" (https://link.segmentfault.com/?enc=e3D5TTPFlHJPQLxP0oq80A%3D%3D.1SoqzKlkA8FZlsrZUqdjdbcL6Az%2BwkqcQjsBBAZ2MCD%2BptaX2NrFqe7bXYj76Gk8)

1.一般充值成功后都会把充值日期和到期时间两个时间存起来，这样方便判断身份也方便给用户展示会员到期时间 2.校验的时候一般也不会让前端传userId给后端，基本都是后端根据请求头里的token等信息直接可以解析出当前用户ID，这时候后端可以写一个通用的拦截器根据到期时间来判断下是否开通以及是否过期

求教一个正则表达式，字符串 >{ABC_EFG}. 或者 >ABC_EFG. 都能匹配，简而言之，就是花括号要么都出现，要么都不出现。>{ABC_EFG. 和 >ABC_EFG}. 都是不匹配。

场景是这样的，一张新建/编辑页，编辑页的数据是接口获取的。页面里的表单元素里有一些复杂的计算逻辑，请问： 1.计算逻辑是写在methods里，然后表单元素change或者input的时候调用它，还是直接写在computed里计算它？ 2.我一开始是这么写的，computed计算出需要的结果a,b,c,d（且这四个值又能通过表单元素被修改，如input）。然后watch监听a,b,c,d的变化，赋值给表单元素绑定的值。但是发现一个问题，在编辑页的时候，由于表单数据是接口获取的，在接口获取到后，computed会计算，从而watch监听到，此时假设a后端返回的值是人为修改后的数值1，但是实际被computed计算成了2，就导致页面展示数据是计算后的。这就有问题。该如何解决？ 3.如果写在change或者input里感觉就会比较恶心，需要考虑的情况复杂，尤其是涉及到多个值联动的情况。

你可以将 "Dropdown" 变成受控组件，即使用 "open" 属性控制 "Dropdown" 的展开和收起。 const App: React.FC = () => { const [open, setOpen] = useState(false); return ( { setOpen((v) => !v); }} > Click e.preventDefault()}> Click me ); }; 希望对你有所帮助！

约定俗称罢了 如果uniapp里一定要用$PB，不能叫PB的话 可能是uniapp框架的开发人员把约定俗称的东西,强制加了约束

比如我用 "sweetalert2"，能不能禁止它会在头部加载的样式，我全部自己写，默认的样式不要，行不行 import swal from "sweetalert2"; swal.fire({ title: 'Here is a message!' });

文件系统监控： from watchdog.observers import Observer from watchdog.events import FileSystemEventHandler class MyHandler(FileSystemEventHandler): def on_modified(self, event): # 当文件或目录被修改时调用 print(f'Event type: {event.event_type} path : {event.src_path}') # 这里你可以更新你的数据库 observer = Observer() event_handler = MyHandler() observer.schedule(event_handler, path='/aaa/bbb/ccc', recursive=True) observer.start() observer.join()

我想制作一个非常精简的折线图，尽可能的节省空间，快速有效地传达数据的趋势和变化。 因此我期望这个折线图除了这线段以外，不再需要坐标轴、标签、图例等组件。

除开简单的轮播实现，焦点切换效果就是使用 "transform:scale()" 来实现缩放，搭配 "transition" 来实现补间效果。 如果简单的用CSS来实现的话，就是默认缩放（"transform:scale(0.8)"），当前激活卡片取消缩放（"transform:scale(1)"）。但是这样的话，就只有一个缩放效果。和问题中的GIF会差一点。 如果可以使用JS的话，原理也是一样的，可以通过当前激活的下标来给激活卡片的前1后1做不一样的缩放比例。 "横向循环焦点图片展示 -Swiper中文网" (https://link.segmentfault.com/?enc=LaRm3WAXUvpvyG2mlpwPcQ%3D%3D.o4DA5XKIZS3yCQWtuBmA5bpNA6VuhoVVN0hm6bfjeuShxXS8Sox33tZzcymEO3ES) "图片.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241214/c82fbe2eb9c4ad1861cde940c75fc7f3.png) "transform - CSS：层叠样式表 | MDN" (https://link.segmentfault.com/?enc=VOqbK251GeTUC0Sb1pkYdQ%3D%3D.EmL%2FKosNrTmJFbwpD%2FWlXdMH8UPKDvyJlI%2Bexsn294neE24QJe9lJCjpoyI5DB8qent6d4jti%2BCnLQj1HwV7zg%3D%3D) "transition - CSS：层叠样式表 | MDN" (https://link.segmentfault.com/?enc=p83BjRB76tqigKEBgcwZ5Q%3D%3D.OVSa5gKh3uw7wrcHpWxHC%2FHRHDDyysDNZ9M2y52sA921WIWxInnbQNnLfEEsskDs9regQuVLPHy9raCp%2FRrlOg%3D%3D)

"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241210/dccba1c6b187e5fe869dc266a92348b5.png) 如图，试过用appendTo:"#main"也是没有效果，为什么呢。求大佬解答

export default { data() { return { dates: [], } }, computed: { pickerOptions({ dates }) { // 构造一个map 存储已选中的日期 let datasMap = new Map( dates.map((item, index) => { return [item.getTime(), index] }) ) return { disabledDate: (date) => { // 选择超过两个日期时增加禁用条件 if (dates && dates.length >= 2) { // 对于已选中的日期返回false 未选中的日期返回true return !datasMap.has(date.getTime()); } return false } } } } }

最近部门有需求打算把jenkins持续集成应用起来。 所以查阅了一些资料，把jenkins环境搭建起来，跑了一下简单的小流程：源码拉取、maven编译打包、（后续可能会制作为docker镜像 -> 选择性将镜像推到docker私服 -> 搭建模拟运行环境） 但其实我有一些困惑，主要是感觉 jenkins 是一个可有可无的存在。 jenkins主要是为了解决“谁的”、“什么问题”呢？ 有多少项目是实际在用的？ 欢迎分享下经验，谢谢

我想问为什么接口在 "500" 之后依然会进行跳转呢？难道不是 "catch" 然后弹窗报错了么？ const Api_Common = async (Path: string, Function: string, Params: any = {}) => await axios .post(`host`, Params) .then((data: Response) => data.data.Response) .catch((e) => { return ErrorState.dispatch(Publish(e.response.data.Error)) }) const Api_Account_Register = (mobile: string, password: string, captcha: string) => Api_Common( Path, "account_register", { mobile: mobile, password: password, captcha: captcha }) Api_Account_Register( mobile, password, code ) .then(() => messageApi.success('注册成功').then(() => navigate('/首页')))

在 Python 中，创建一个线程通常需要占用一些额外的内存，具体的内存占用量取决于多个因素，包括操作系统、Python 版本、线程数等。

如图，需要显示地名，但是太密太多了，怎么设置显示少一点？ 设置zoom不行，会到一个市的视角，就想目前这个样子的视角去看，但是地名太多了 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241203/9072fad680168ee05807670fc8423559.png)

// **.ts function a() { console.log(this); } a(); 执行命令 "ts-node **.ts " 正常输出"this" // **.ts import './**' function a() { console.log(this); } a(); 执行命令 "ts-node **.ts " 输出"undefined" 这是为什么？可以避免吗？

ts这里提示了一个错误，代码已经可以正常运行，只是这里有一个错误 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241125/3cbc300ba825c594ca8dd6bda72e2f86.png) 下面是我的tsconfig的配置 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241125/2606d4cec862dbad1ff3698e5a32b29e.png)

例如8为分界，少于8个字符就显示字符拼接几个空格，'aaaaa'，显示'aaaaa '，5个a拼接3个空字符串，代码尽可能少，如何做呢

前端文件： /src/app/api/compress/route.ts "use client"; import { useState } from "react"; export default function UploadForm() { const [file, setFile] = useState(); const onSubmit = async (e: React.FormEvent) => { // 阻止表单提交行为 e.preventDefault(); if (!file) return; try { const data = new FormData(); data.set("file", file); const res = await fetch("/api/upload", { method: "POST", body: data, }); // handle the error if (!res.ok) throw new Error(await res.text()); } catch (e: any) { // Handle errors here console.error(e); } }; return ( setFile(e.target.files?.[0])} /> ); } 后端文件：src/app/api/upload/route.ts import { writeFile } from "fs/promises"; import { NextRequest, NextResponse } from "next/server"; export async function POST(request: NextRequest) { const data = await request.formData(); const file: File | null = data.get("file") as unknown as File; if (!file) { return NextResponse.json({ success: false }); } const bytes = await file.arrayBuffer(); const buffer = Buffer.from(bytes); // 这里是你要进行保存的文件目录地址 const path = `/tmp/${file.name}`; await writeFile(path, buffer); console.log(`open ${path} to see the uploaded file`); return NextResponse.json({ success: true }); } 报错内容： "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241119/d5913eda154dc8bc7ca8a126cac160ef.png) 麻烦各位熟悉Next的大佬看一下 问题代码的GitHub地址："https://github.com/AnsonZnl/next-upload" (https://link.segmentfault.com/?enc=SmytvjbrvZ0qBwjpnetgxw%3D%3D.cbnEIAIxz1qdiRABZXCLixe%2ByZqrZ3hA%2Fm2KqHPaj2rCh8OyG6xH5p4D%2FW8cokdQ)

找回来了兄弟们 使用"ctrl+shift+p"快捷键，搜索本地记录 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241116/f0088d7e85a6f002f5df92c530c2a953.png) 然后再查到对应文件就可以了，不过只能找到文件，文件夹要自行重新创建

https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241115/e396234471d6a09908d96dce12e80724.png 其中 #ifdef APP-PLUS 和 #endif 是条件编译的注释。如果条件不符合注释内的代码在编译后就会被删除。目前由于编辑器是无法识别编译注释的,所以会因为重复的变量声明所报错。 有没有相关的扩展或者是方法、设置等可以让编辑器识别这些注释,并且防止报错?

提供的代码看起来没有问题，是不是有可能因为没办法撑满一屏所以出现了这个问题？ 考虑给 "scrolltolower" 函数增加一个 "allLoaded" 的判断，如果全部加载完成之后就不再触发。下拉刷新的时候再给 "allLoaded" 设置 "false"。 *** Edit 大概找到问题了，"preLoadScreen" 为啥是 "currentPage * 4" ？有什么特别的处理吗，改成 "4" 不可以吗？ 如果需要每次加载多屏的数据，不应该在 "getWishInfo" 方法中请求数据时设置 "pageSize" 吗？

如果你是用的linux系统，可能直接用docker会是一个比较好的选择。 *** 其实我觉得你可以直接去下载embed版的python，不是安装版的python。 下载了之后解压，直接执行里面的python.exe，配合一个bat脚本，就能满足你的需求(打包进一个文件夹)。 具体步骤： 下载 "https://www.python.org/ftp/python/3.11.6/python-3.11.6-embed-..." (https://link.segmentfault.com/?enc=Hlao1r45PcVu%2Fgh9Fu16xw%3D%3D.mXAzDNGFtaVRQrrCBmxLHP%2Fe7VHGEQwt1EEV8Gg9jJrOSuT1ddrLMJieAn%2BwD0o1NWAa5uQceOGd6T%2F1ee4hGLnGlU%2BJNH227sOsTu82ihw%3D) 然后解压 D:/yourapp/。 然后下载 "https://bootstrap.pypa.io/get-pip.py" (https://link.segmentfault.com/?enc=KbJ8oq%2FuaFLh8Xi72FRykw%3D%3D.7%2FxYq6iXveZUJO4FokZtbh96PFqbmsfmsB9SoD2BfLINmupQ7sdPaTXeIFcSbwOO) 到一个位置，和执行安装pip "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241112/799ef4abc3c780d9f6efcdd81a8d6974.png) "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241112/d5e1332dd3ab2e3febae81fa4fe137bb.png) 编辑 python311._pth 这个文件，取消这里的注释 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241112/1e108822fd6fefe03842e7324dff3aa4.png) 用pip安装你的依赖包。 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241112/7d67bea5efefb90048b32863b7045ec5.png) 然后准备你的代码，忽略这里的伪代码。。。 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241112/93fb9cc6b66bf05734bc5761fb8c94dd.png) 以及这个bat脚本； @echo off REM 用 python.exe 调用 run.py 并传递所有输入参数 .\python-3.11.6-embed-amd64\python.exe .\code\run.py %* 最后的效果就是： "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241112/0abbab8d782a6662297059b0cde34b65.png) 现在你可以的把 yourapp 这个文件夹复制到其他的电脑上运行了。

p { font-weight: bold; } li:nth-child(3n) { border: 2px solid orange; margin-bottom: 1px; } Track & field champions: Adhemar da Silva Wang Junxia Wilma Rudolph Babe Didrikson-Zaharias Betty Cuthbert Fanny Blankers-Koen Florence Griffith-Joyner Irena Szewinska Jackie Joyner-Kersee Shirley Strickland Carl Lewis Emil Zatopek Haile Gebrselassie Jesse Owens Jim Thorpe Paavo Nurmi Sergei Bubka Usain Bolt "image.png" (https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241111/ea9196cb6dcf6aabf5aacc291cd1507a.png) «"https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-> child" (https://link.segmentfault.com/?enc=Bqr2q2rXsatjdm3SlqKAAQ%3D%3D.%2BnAdteY5yYzer0WtbBtJq29jNhjzF9xYyeuQCzU%2BXiEAC00NKdGqFBzQL893qsaVmqxOnp1H1%2FNcn7l%2Ff6MWQQ%3D%3D)»

//List 内容 [ti:我本闺中一钗裙] [oti:我本闺中一钗裙] [jz:黄梅戏] [jm:女驸马] [ojm:女驸马] [offset:-1] [by:制作者] [ver:驸马公主合唱] [keys:民女，洞房] [00:04.99]（驸马）：我本闺中一钗裙 [00:31.93]（公主白）：此话当真 [00:34.19]（驸马）：公主请看耳环痕 [00:59.33] /** * 解析唱段内容 * * @param changDuan 唱段对象 * @param line 当前需要解析的内容 即上面 List 每一行内容 * @param patternMap 唱段正则表达式 可以正则匹配上面 List 内容 * @throws ParseLrcException */ private static void parseLrcContent(ChangDuan changDuan, String line, Map patternMap) throws ParseLrcException { if (matcher(line, patternMap, LrcConstants.LrcRegEnum.TITLE.name())) { changDuan.setName(getChangDuanInfoContent(line, LrcConstants.LrcRegEnum.TITLE.getStartIndex())); } else if (matcher(line, patternMap, LrcConstants.LrcRegEnum.ORIGIN_TITLE.name())) { changDuan.setOriginName(getChangDuanInfoContent(line, LrcConstants.LrcRegEnum.ORIGIN_TITLE.getStartIndex())); } else if (matcher(line, patternMap, LrcConstants.LrcRegEnum.JUMU.name())) { changDuan.setJuMu(getChangDuanInfoContent(line, LrcConstants.LrcRegEnum.JUMU.getStartIndex())); } else if (matcher(line, patternMap, LrcConstants.LrcRegEnum.ORIGIN_JUMU.name())) { changDuan.setOriginJuMu(getChangDuanInfoContent(line, LrcConstants.LrcRegEnum.ORIGIN_JUMU.getStartIndex())); } else if (matcher(line, patternMap, LrcConstants.LrcRegEnum.OFFSET_REG.name())) { changDuan.setOffset(Integer.parseInt(getChangDuanInfoContent(line, LrcConstants.LrcRegEnum.OFFSET_REG.getStartIndex()))); } else if (matcher(line, patternMap, LrcConstants.LrcRegEnum.JU_ZHONG.name())) { changDuan.setJuZhong(getChangDuanInfoContent(line, LrcConstants.LrcRegEnum.JU_ZHONG.getStartIndex())); } else if (matcher(line, patternMap, LrcConstants.LrcRegEnum.BEIZHU.name())) { changDuan.setBeiZhu(getChangDuanInfoContent(line, LrcConstants.LrcRegEnum.BEIZHU.getStartIndex())); } else if (matcher(line, patternMap, LrcConstants.LrcRegEnum.VERSION.name())) { changDuan.setVersion(getChangDuanInfoContent(line, LrcConstants.LrcRegEnum.VERSION.getStartIndex())); } else if (matcher(line, patternMap, LrcConstants.LrcRegEnum.KEYS.name())) { changDuan.setSearchKeys(getChangDuanInfoContent(line, LrcConstants.LrcRegEnum.KEYS.getStartIndex())); } else if (matcher(line, patternMap, LrcConstants.LrcRegEnum.BY.name())) { changDuan.setMaker(getChangDuanInfoContent(line, LrcConstants.LrcRegEnum.BY.getStartIndex())); } else { throw new ParseLrcLineException(line); } } 上段代码是用于将List解析成ChangDuan 想请教一下这个代码写的咋样，能否优化，我就是觉得if else太多了。

那直接上 Apollo 配置中心 * 统一配置中心管理微服务的配置 * 支持已发布的配置回滚 * 完善的权限管理、操作审计日志 * 可以方便的看到配置在被哪些实例使用 * 配置发布后热更新 * 动态路由、动态限流 "image.png" (https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241104/538d6019a995b71924bab2dc1b3a36a6.png)

寻找windows锁住鼠标跟键盘工具 目前不想要用户能动现场的看板电脑的键盘跟鼠标，想要按特定按键或是输入密码才能解除

在面板上翻页显示16个图片和信息，如何设置div内的模块靠左显示，模块内容按行显示，设置了float没有效果 "image.png" (https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241103/62fd7d3e3465eb3865e043295e01ffe7.png) 中间部分里面的图片，文字显示在图片下方 "image.png" (https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241103/0924c0ce3fd1ba0b30953356b4010014.png) 第二页图片靠左显示 Title ul{ padding: 0; position: relative; top: 70%; left: 45%; overflow: hidden; list-style: none; border: 0px solid #c1c1c1; display: inline-block; margin-top: 5px; height: 30px; } li{ float: left; padding: 5px; color: #273346; font-size: 15px; cursor: pointer; } li:hover{ font-weight: bold; background: #C1C1C1; } .active{ background: #CCE8FF; } //定义变量 let data = [ { id: 1, name: '小岚', age: 25, gender: '女', src:'https://vebaike.com/uploads/202309/1695222065Xi0uLws5_s.png' }, { id: 2, name: '小懒', age: 25, gender: '女', src:'https://vebaike.com/uploads/202309/1695222065Xi0uLws5_s.png' }, { id: 3, name: '小烂', age: 25, gender: '女', src:'https://vebaike.com/uploads/202309/1695222065Xi0uLws5_s.png' }, { id: 4, name: '小澜', age: 25, gender: '女', src:'https://vebaike.com/uploads/202309/1695222065Xi0uLws5_s.png' }, { id: 5, name: '小蓝', age: 25, gender: '女', src:'https://vebaike.com/uploads/202309/1695222065Xi0uLws5_s.png' }, { id: 6, name: '小兰', age: 25, gender: '女', src:'https://vebaike.com/uploads/202309/1695222065Xi0uLws5_s.png' }, { id: 7, name: '小栏', age: 25, gender: '女', src:'https://vebaike.com/uploads/202309/1695222065Xi0uLws5_s.png' }, { id: 8, name: '小揽', age: 25, gender: '女', src:'https://vebaike.com/uploads/202309/1695222065Xi0uLws5_s.png' }, { id: 9, name: '小览', age: 25, gender: '女', src:'https://vebaike.com/uploads/202309/1695222065Xi0uLws5_s.png' }, { id: 10, name: '小斓', age: 25, gender: '女' , src:'https://vebaike.com/uploads/202309/1695222065Xi0uLws5_s.png'}, { id: 11, name: '小榄', age: 25, gender: '女' , src:'https://vebaike.com/uploads/202309/1695222065Xi0uLws5_s.png'}, { id: 12, name: '小岚', age: 25, gender: '女', src:'https://vebaike.com/uploads/202309/1695222065Xi0uLws5_s.png' }, { id: 13, name: '小岚', age: 25, gender: '女', src:'https://vebaike.com/uploads/202309/1695222065Xi0uLws5_s.png' }, { id: 14, name: '小岚', age: 25, gender: '女', src:'https://vebaike.com/uploads/202309/1695222065Xi0uLws5_s.png' }, { id: 15, name: '小岚', age: 25, gender: '女', src:'https://vebaike.com/uploads/202309/1695222065Xi0uLws5_s.png' }, { id: 16, name: '小岚', age: 25, gender: '女', src:'https://vebaike.com/uploads/202309/1695222065Xi0uLws5_s.png' }, { id: 17, name: '小岚', age: 25, gender: '女', src:'https://vebaike.com/uploads/202309/1695222065Xi0uLws5_s.png' }, { id: 18, name: '小岚', age: 25, gender: '女', src:'https://vebaike.com/uploads/202309/1695222065Xi0uLws5_s.png' }, { id: 19, name: '小岚', age: 25, gender: '女', src:'https://vebaike.com/uploads/202309/1695222065Xi0uLws5_s.png' }, ]; var nodeEle = document.createElement('div'); nodeEle.id = "listpage"; document.documentElement.appendChild(nodeEle);//元素加入body const newnodeDiv = document.getElementById("listpage"); newnodeDiv.innerHTML = ''; newnodeDiv.setAttribute('style', '' + 'position:fixed;' + //'right:0px;' + 'top:0px;' + 'left:0px;' + // 'left:620px;' + // 'bottom:240px;' + //'left:' + newwid + 'px;' + //'top:'+ newhei + 'px;' + //'bottom:'+ he + 'px;' + 'width:1277px;' +//最大宽度 'height:592px;' +//最大高度 //'height:auto;' + 'overflow:auto;' + //'overflow-wrap: break-word;' + 'font-size:14px!important;' + //'padding:40px;' + 'border-radius:5px!important;' + //'border:none;' + //'border:1px solid #ccc!important;' + 'border:1px solid #a9a9a9!important;' + 'background-color:#fff!important;' + 'z-index:2147483647!important;' +//显示最顶层 ''); var div0 = document.createElement('div'); div0.innerText = '封面'; div0.style.width= '1500px'; newnodeDiv.appendChild(div0); var newDiv = document.createElement('div'); newDiv.id = "List"; newDiv.style.height = 'auto'; newDiv.style.width = '1500px'; newnodeDiv.appendChild(newDiv); let div = document.getElementById("List"); currentPage = 1, pageCount = 12, list = null, li = null; function paginationByJS(data, div, currentPage, pageCount, list, li) { //拿到我们的总页码 function getTotalPage(data, pageCount){ if (Math.ceil(data.length / pageCount) 0 && !data.length && !totalPge > 0 && !pageCount > 0) { return console.error('您传入的参数有误'); } //当前页在头尾的情况 if (currentPage === 1) { return (totalPge === 1)? { begin: 0, end: data.length - 1 } : { begin: 0, end: pageCount -1 } } if (currentPage === totalPge){ begin = ((currentPage -1) * pageCount); end = data.length -1; return { begin, end } } //在中间的情况 if (currentPage > 1 && currentPage parseInt(i.innerText) === currentPage)).classList.add('active'); } //返回渲染数组 function getRenderList(){ let temp = getArrIndex(currentPage, data, getTotalPage(data, pageCount), pageCount); return data.slice(temp.begin, temp.end + 1); //slice方法取头不拿尾 } //第一次创造列表数据 function createBtn(totalPage){ //let ul = document.getElementsByTagName('ul')[0]; var newUl = document.createElement('ul'); newUl.id = "ul-list"; //let ul = document.getElementsByTagName('ul'); newnodeDiv.appendChild(newUl); const ul = document.getElementById("ul-list"); //每次都至少显示五个 当前 当前的前2个 当前的后2个 for (let i =1; i 6 && totalPage > 7){ li.innerText = '...'; ul.appendChild(li); li = document.createElement('li'); li.innerText = totalPage; ul.appendChild(li); li = document.createElement('li'); li.innerText = '>'; ul.appendChild(li); break; } ul.appendChild(li); //到头了您 if (i === totalPage){ li = document.createElement('li');li.innerText = '>'; ul.appendChild(li); } } } function btnControl(totalPage, currentPage) { //小于7 就直接全部排出来就ok 不用搞这些花里胡哨的 if (totalPage { //实际页码改变的按钮 index = parseInt(i.innerText); return (index !== 1 && index !== totalPage && index.toString() !== 'NaN'); }), headFlag = list[2], endFlag = list[list.length - 3]; //控制插入 '...' if (currentPage > 4 && headFlag.innerText !== '...'){ li = document.createElement('li'); li.innerText = '...'; list[0].parentElement.insertBefore(li, headFlag); } if ((currentPage > 1) && endFlag.innerText !== '...'){ li = document.createElement('li'); li.innerText = '...'; list[0].parentElement.insertBefore(li, list[list.length - 2]); //加入之前的所以是 list.length-2 } //控制删除 '...' if (currentPage = totalPage && endFlag.innerText === '...'){ endFlag.parentNode.removeChild(endFlag); } //关键的控制 基于他们展示时当前页 和 头尾 在边界位置以及普通位置的情况来做考虑 //在中间的时候 以currentPage为中心 前后2格 if (before > 1 && after ': currentPage = currentPage === totalPage? totalPage : currentPage + 1; break; case '...': break; default: currentPage = parseInt(target.innerText); } } } function displayData() { let arr = getRenderList(), p;//最后得到的数据 div.innerHTML = ''; //重置div内容区域 arr.forEach(i =>{ var div1 = document.createElement('div'); var img1 = document.createElement('img'); var s1 = document.createElement('span'); var s2 = document.createElement('span'); img1.src = i.src; img1.style.width = '240px'; s1.innerText = i.name; s2.innerText = i.age; div1.appendChild(img1); div1.appendChild(s1); div1.appendChild(s2); div.appendChild(div1); }); //展示一下 } //这个是事件的监听函数 function pagination(target){ let totalPage = getTotalPage(data, pageCount); //兼容拿到事件 arrowControl(target, totalPage); btnControl(totalPage, parseInt(currentPage)); isActive(); displayData(); } //首次注册生成第一页数据和分页栏 function firstInit() { createBtn(parseInt(getTotalPage(data, pageCount))); isActive(); displayData(); } window.onload = function () { firstInit(); Array.from(document.getElementsByTagName('li')).forEach(i => i.onclick = function (e) { pagination(e) }); } } paginationByJS(data, div, currentPage, pageCount, list, li)

使用CSS怎么实现这个效果 https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241030/4e664e10865c0c7d2a69d6d7e25e87c6.png

给Excel设置边框可以使用"Free Spire.XLS for Java" (https://link.segmentfault.com/?enc=bjgLsyfYnPxTbWb8esQAVQ%3D%3D.AdmFF%2FFR6aIn7n3eoMPWSANbbWqxyjp3td1woE7gC22F9cYt%2F5zkNf32m5YTVdVEPPOKE%2B302pOzijE%2FkxjQOw%3D%3D)，上、下、左、右、对角线边框等都可以设置 import com.spire.xls.*; import java.awt.*; public class SetBorders { public static void main(String[] args) { //创建Workbook类的对象 Workbook wb = new Workbook(); //加载Excel工作簿 wb.loadFromFile("sample.xlsx"); //获取第2个工作表 Worksheet sheet = wb.getWorksheets().get(1); //获取单元格，设置内边框、外边框 CellRange range1 = sheet.getCellRange("B2:G11"); range1.borderInside(LineStyleType.Thin, Color.orange); range1.borderAround(LineStyleType.Medium, Color.green); //获取单元格，分别设置上、下、左、右边框 CellRange range2 = sheet.getCellRange("B13:G20"); range2.getBorders().getByBordersLineType(BordersLineType.EdgeTop).setLineStyle(LineStyleType.Thin); range2.getBorders().getByBordersLineType(BordersLineType.EdgeTop).setColor(Color.red); range2.getBorders().getByBordersLineType(BordersLineType.EdgeBottom).setLineStyle(LineStyleType.Thin); range2.getBorders().getByBordersLineType(BordersLineType.EdgeBottom).setColor(Color.GREEN); range2.getBorders().getByBordersLineType(BordersLineType.EdgeLeft).setLineStyle(LineStyleType.Thin); range2.getBorders().getByBordersLineType(BordersLineType.EdgeLeft).setColor(Color.blue); range2.getBorders().getByBordersLineType(BordersLineType.EdgeRight).setLineStyle(LineStyleType.Thin); range2.getBorders().getByBordersLineType(BordersLineType.EdgeRight).setColor(Color.YELLOW); //设置单元格中的对角线边框 CellRange range3 = sheet.getCellRange("F23:F25"); range3.getBorders().getByBordersLineType(BordersLineType.DiagonalDown).setLineStyle(LineStyleType.Thin); CellRange range4 = sheet.getCellRange("F30:F32"); range4.getBorders().getByBordersLineType(BordersLineType.DiagonalUp).setLineStyle(LineStyleType.Thin); //保存文档 wb.saveToFile("SetBorders.xlsx",FileFormat.Version2013); wb.dispose(); } }

我看了一下答案，需要有一句 "text.innerText = 'You enter the store.'" "image.png" (https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241026/e4c58aefcae9c57f81a202b558d483a1.png) 结合上下文好像也挺明确的 "image.png" (https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241026/722feb7eb5b6d1426dfc764f7bb79bbc.png) *** 不过这个校验漏洞还是蛮多的

解决了，少加了一个"namespace" spring: cloud: sentinel: transport: dashboard: localhost:8080 datasource: ds-flow: nacos: ## nacos的地址 server-addr: ${server.nacos.addr} namespace: ${server.nacos.ns} ## 配置ID data-id: sentinel-service ## 配置分组，默认是DEFAULT_GROUP group-id: DEFAULT_GROUP ## 默认提供两种内置的值，分别是 json 和 xml (不填默认是json) data-type: json ## rule-type设置对应得规则类型，总共七大类型，在com.alibaba.cloud.sentinel.datasource.RuleType这个枚举类中有体现 rule-type: flow

echarts通过websocket频繁更新散点图数据，数据量大的时候达到三四千左右，页面出现卡顿现象，鼠标一直在转。无法准确选中数据tooltip，页面卡死。 版本更新到最新版，页面销毁清除均无效

用OSS 图片直接上传到OSS，图片量不大的话可以买最小的资源包，一个月十来块钱。这些OSS服务商都会提供完整的SDK，开发起来很方便。如果是自用图床的话建议将bucket设置为私有，避免恶意请求和访问。如果追求访问速度的话可以搭配CDN使用。具体的介绍和使用文档可以看看各大云服务商的官网。

Nginx如何解决跨域问题 问题简述： docker启动的nginx，修改配置文件default.conf，允许跨域不生效。 平台：MacOS M1pro 问题描述： 我使用Vue实现了一个前端项目，使用Nginx静态资源代理监听80端口，向本地后端服务"http://localhost:9000/" (https://link.segmentfault.com/?enc=Odimf7RAe5AHbdEjjFqkfA%3D%3D.Ba3Gq2I9usenkw8dS34%2F1ZSZNASGm%2Fqg2FU936%2FdsSY%3D)发送Get请求 // 跨域访问后端项目 axios.get("http://localhost:9000/hello") .then(function (response) { console.log(response) }) go语言实现的后端项目核心代码，启动服务监听9000端口 func handler(w http.ResponseWriter, r *http.Request) { _, err := fmt.Fprintf(w, "Hello, 第一条消息") if err != nil { return } } func main() { http.HandleFunc("/hello", handler) err1 := http.ListenAndServe(":9000", nil) if err1 != nil { return } } *** 将Vue项目打包为dist，复制到docker容器的"/usr/share/nginx/html"目录中，配置文件为： server { listen 80; listen [::]:80; server_name localhost; #access_log /var/log/nginx/host.access.log main; location / { #允许跨域请求的域，* 代表所有 add_header 'Access-Control-Allow-Origin' *; root /usr/share/nginx/html; index index.html index.htm; } error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; } } 启动过程略过，可以发现跨域错误 "image.png" (https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241024/ab3ccfea933eb8b5a17e9626311f654d.png) 直接使用浏览器访问9000端口是正常的： "image.png" (https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241024/ab3ad902206c92499c1b3f5b7b1eadbe.png) 如何在Nginx解决跨域问题，我已经了解前端虚拟代理、后端允许跨域方法。 本问题只讨论nginx如何允许跨域。 已经尝试的方法如下，已确定修改配置文件后重启nginx。 方法一： #access_log /var/log/nginx/host.access.log main; location / { root /usr/share/nginx/html; index index.html index.htm; #允许跨域请求的域，* 代表所有 add_header 'Access-Control-Allow-Origin' *; } 方法二： location / { add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Credentials' 'true'; if ( $request_method = 'OPTIONS' ) { return 200; } root /usr/share/nginx/html; index index.html index.htm; } 方法三：增加always location / { add_header Access-Control-Allow-Origin * always; add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS' always; add_header 'Access-Control-Allow-Credentials' 'true' always; if ( $request_method = 'OPTIONS' ) { return 200; } root /usr/share/nginx/html; index index.html index.htm; } 网络上可以直接搜索到的方法基本都尝试过，求大佬解答，并进一步讨论相关理论（从Nginx实现方法角度） 特别强调，本项目使用Docker启动容器，因此容器向localhost分发流量的域名为host.docker.internal

JavaScript箭头函数 let x = [1,2,3,4,5,6,7,8]; x.sort( (a,b) = > b-a ); console.log(x); 实现逆序的原理是什么？ 求大佬解惑

正规一点的网站，都会有多个环境，比如生产环境（正式环境），staging，dev，不同分支等等。 服务器暂时不能访问就是服务挂了，是事故。 不同公司有不同的发布流程，不过一般来说，一个功能或者 bug 修复从启动到上线要经历很长时间，历经不同环境。比如： 1. 开发完成，本地环境自测。 2. 提交 PR/MR，线上自动生成测试环境，邀请测试人员参与。 3. 一个开发周期完成，全部功能上线测试环境，跑自动化测试、冒烟测试等。 4. 上线正式环境前，先上 staging 给大家预览 5. 最后部署到生产环境，交给全部用户 最后一步，有时候也会用灰度发布。因为产品太庞大，很难每次都跑全量回归，就会先推给一部分用户，看他们的数据表现基本正常，再推给全部用户。 有时候，预览环境或者某个大版本的测试环境也会长期向内部人员，或者某些特定普通用户开放，主要是为了收集反馈信息。类似游戏里的各种体验服、测试服。 所以大部分情况下，普通用户不会被发布过程影响到。 目前很多云平台，比如 Vercel、CF 都实现了这些功能，每个分支都有独立的测试环境，用起来很方便。自家的基建，使用一个构建工具配合 K8S 也可以搞，方案很成熟。

两个项目都用到了一个页面，现在是a,b项目两份一样的代码，有什么好的方法把两个项目的这个页面都用，一份代码吗 如题，有什么好的办法

const orderMixin = { computed: { types() { return this.$store.state.types; } }, created() { this.$store.dispatch('updateTypes'); } } const store = new Vuex.Store({ state: { types: [] }, actions: { updateTypes (ctx) { if(!ctx.state.types.length) { // fetch } } } }) export default { name: 'A', mixins: [orderMixin], }