一般建议是数字初始化为0，字符串初始化为空字符，数组初始化为空数组，对象初始化为null，对象为Null更容易判断该对象是否已经被赋值，不过一般区别不大， 但是如果这个对象开始需要参与到视图渲染的，初始化为null可能会导致视图渲染报错， 总之不是固定的

解决方案 Solution 在Vue 3.x 中使用VChart，分两种情况 1. 组合式API，具体可以"参考在线demo" (https://link.segmentfault.com/?enc=Gw4ibvScCvhY8ah4ywNv6g%3D%3D.aZA%2F2vnbPP%2F5yk0WjpISuZ1G%2BE6FfxwxzmipGzZpt%2FzdJLmB1nS8nRjciqyhgpQmn0Rlr87XUiNZbzJe07GOZbWm%2FymXLWYs6Fu096ulC%2BgRxOvzX5Udkst2JHV1mOTS) 2. 选项式API，具体可以"参考在线demo" (https://link.segmentfault.com/?enc=9NnUEwmvX57%2BzN%2BB1Qs7PA%3D%3D.QlrzRbrYwcWjoZoo07kXmpsnEuUuQ0OHYC3JCma2ux1iHIHP3g0F%2Bseql%2BJvJOpb%2FT%2BI7XG3HV9j2bG78pffOAiXr5ocNjJ%2B%2F966gLDUgd5afYOFSwdc617piVTjJTVn) 不同的图表，封装方式都是类似的 代码示例 Code Example * 组合式API import { onMounted, onBeforeUnmount, onUpdated } from "vue"; import { VChart, IChart, ILineChartSpec } from "@visactor/vchart"; interface LineChartProps { colors?: string[]; } const props = defineProps(); let chart: IChart; function parseSpec(chartProps: LineChartProps) { const colors = chartProps.colors ?? [ "#6690F2", "#70D6A3", "#B4E6E2", "#63B5FC", "#FF8F62", "#FFDC83", "#BCC5FD", "#A29BFE", "#63C4C7", "#F68484", ]; return { type: "line", data: { values: [ { type: "Nail polish", country: "Africa", value: 4229 }, { type: "Nail polish", country: "EU", value: 4376 }, { type: "Nail polish", country: "China", value: 3054 }, { type: "Nail polish", country: "USA", value: 12814 }, { type: "Eyebrow pencil", country: "Africa", value: 3932 }, { type: "Eyebrow pencil", country: "EU", value: 3987 }, { type: "Eyebrow pencil", country: "China", value: 5067 }, { type: "Eyebrow pencil", country: "USA", value: 13012 }, { type: "Rouge", country: "Africa", value: 5221 }, { type: "Rouge", country: "EU", value: 3574 }, { type: "Rouge", country: "China", value: 7004 }, { type: "Rouge", country: "USA", value: 11624 }, { type: "Lipstick", country: "Africa", value: 9256 }, { type: "Lipstick", country: "EU", value: 4376 }, { type: "Lipstick", country: "China", value: 9054 }, { type: "Lipstick", country: "USA", value: 8814 }, { type: "Eyeshadows", country: "Africa", value: 3308 }, { type: "Eyeshadows", country: "EU", value: 4572 }, { type: "Eyeshadows", country: "China", value: 12043 }, { type: "Eyeshadows", country: "USA", value: 12998 }, { type: "Eyeliner", country: "Africa", value: 5432 }, { type: "Eyeliner", country: "EU", value: 3417 }, { type: "Eyeliner", country: "China", value: 15067 }, { type: "Eyeliner", country: "USA", value: 12321 }, { type: "Foundation", country: "Africa", value: 13701 }, { type: "Foundation", country: "EU", value: 5231 }, { type: "Foundation", country: "China", value: 10119 }, { type: "Foundation", country: "USA", value: 10342 }, { type: "Lip gloss", country: "Africa", value: 4008 }, { type: "Lip gloss", country: "EU", value: 4572 }, { type: "Lip gloss", country: "China", value: 12043 }, { type: "Lip gloss", country: "USA", value: 22998 }, { type: "Mascara", country: "Africa", value: 18712 }, { type: "Mascara", country: "EU", value: 6134 }, { type: "Mascara", country: "China", value: 10419 }, { type: "Mascara", country: "USA", value: 11261 }, ], }, color: { type: "ordinal", domain: [], range: colors, }, title: { visible: true, text: "Stacked line chart", }, stack: true, xField: "type", yField: "value", seriesField: "country", legends: [{ visible: true, position: "middle", orient: "bottom" }], } as ILineChartSpec; } function createOrUpdateChart(chartProps: LineChartProps) { const container = document.getElementById("treemap-container"); if (container && !chart) { chart = new VChart(parseSpec(chartProps), { dom: container, }); chart.renderAsync(); return true; } else if (chart) { chart.updateSpec(parseSpec(chartProps)); chart.renderAsync(); return true; } return false; } onMounted(() => { createOrUpdateChart(props); }); onUpdated(() => { createOrUpdateChart(props); }); onBeforeUnmount(() => { if (chart) { chart.release(); } }); this is a demo of LineChart .treemap-container { width: 100%; height: 400px; } * 选项式API： import { defineComponent } from "vue"; import { VChart, IBarChartSpec, IChart } from "@visactor/vchart"; import type { PropType } from "vue"; interface BarChartProps { colors?: string[]; data?: any[]; } export default defineComponent({ props: { colors: Object as PropType, data: Object as PropType, }, setup() { let chart: IChart | null = null; const parseSpec = (chartProps: BarChartProps) => { const colors = chartProps.colors; return { type: "bar", data: [ { id: "barData", values: chartProps.data, }, ], xField: "name", yField: "value", color: { type: "ordinal", domain: [], range: colors, }, } as IBarChartSpec; }; const createOrUpdateChart = (chartProps: BarChartProps) => { const container = document.getElementById("barchart-container"); if (container && !chart) { chart = new VChart(parseSpec(chartProps), { dom: container, }); chart.renderAsync(); return true; } else if (chart) { chart.updateSpec(parseSpec(chartProps)); chart.renderAsync(); return true; } return false; }; const releaseChart = () => { if (chart) { chart.release(); chart = null; } }; return { createOrUpdateChart, releaseChart, }; }, mounted() { this.createOrUpdateChart({ colors: this.colors, data: this.data }); }, updated() { this.createOrUpdateChart({ colors: this.colors, data: this.data }); }, beforeUnmount() { this.releaseChart(); }, }); this is a demo of barchart .barchart-container { width: 100%; height: 400px; } 结果展示 Results 在线效果参考："https://codesandbox.io/s/viscator-vchart-vue-demo-gmcpq6" (https://link.segmentfault.com/?enc=nxyHSLjJmFNmcWpb549e%2Bg%3D%3D.GWUtzP85lzrqWZlGHYBO03LGjM9E67ZCWwlNLJCma%2FDUb6qaOqARcJAroU7B5mE4SfqwlIeaVTkbfOe%2BJFUeAg%3D%3D) https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250109/88d5528e53b811873d464835d5f7a95b.png 相关文档 Related Documentation github："https://github.com/VisActor/VChart" (https://link.segmentfault.com/?enc=KDARol6PQjC2mX1gzzldFQ%3D%3D.F6JTPY5wVoGlYgqz43xePycvg6wVxEaijguKzSNRcNRrZAm4WvnnNjxECrVeZpFh)

因为你添加药品信息模块后，再次打开文件会改变文件内容。这是因为在添加药品信息时，可能修改了文件中已有的数据。例如，如果药品编号为100的药品已经存在，但添加新药品时将编号设为101,所以文件内容就会发生变化。 如果你想要避免这种情况，可以在添加药品信息时，先读取文件内容，检查文件中是否有该药品信息，如果有，则更新药品信息;如果没有，则创建新的药品信息。这样可以保证文件内容与添加的药品信息一致。（这其实也是一般的大学c语言课程项目中的代码数据流程，先查询再更新） 当然，也有一种特殊情况，如果添加的药品信息格式与文件格式不符，也会导致文件内容变化。因此，在添加药品信息时，应该确保药品信息格式与文件格式一致，否则可能会导致文件内容变化。

在根组件APP.vue中的导航标签中设置了三个router-link，切换不同的link，如何保留上一个页面的数据？

背景 当前有两个服务，分别是user-service和order-service，nacos服务列表中无法发现两个服务 排查 Nacos v2.2.3 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250107/d4cc2405be99ba149a0886258d2f75bf.png) "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250107/be29104ef11bd1de529f3c827da88fa8.png) 依赖已引入，配置文件已配置addr 运行时未出现连接nacos的日志： "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250107/63f0dcb758cf64fb48da77dd8505261f.png) 希望大佬们可以帮忙看看是什么问题 问题程序链接 "https://oss-20001.oss-cn-qingdao.aliyuncs.com/cloud-demo.zip" (https://link.segmentfault.com/?enc=6%2FOVlnNQN0g6ArPNFEhSdQ%3D%3D.0g9NmqCJ0842nwi%2FjX60BOuj3t7hZ3d%2FyEq16OSRRIFHZHmT82St3LAbUvLgFiHS%2BI3jjj6mL7MZxTzDDZAVgw%3D%3D)

官网demo 在火狐浏览器也无法实现鼠标的放大缩小

在初始化时候，没有在src里加视频资源或者视频资源为空或视频资源无效没法播放。解决，检查资源是不是有效，可以解决。 这里有一个解决办法："【Vue】Video.js 提示no compatible source was found for this media" (https://link.segmentfault.com/?enc=DBh%2FWp2pzO1r4VwnW7CfhQ%3D%3D.jboFh7Up0Ck%2FvzCdjL0%2Fu7OryFCw0Hm3%2BT7PCiib9bGEDjBJnd2WddX%2FlyEYp%2BGj)

如何使用react-hook-form+zod实现动态表单验证？比如登陆时不需要输入邮箱，注册时需要输入邮箱 {variant === "Register" && ( 邮箱 {errors.email && ( {errors.email.message} )} )} 大概的样子： "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250102/4f41b5e304408bc9028e197271ab9de2.png) "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250102/17bcbde58926d38116e16fcd43ea9d1b.png) 以下是完整代码，无法实现对 "email" 项的校验 "use client"; import { useState } from "react"; import { useForm } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; import * as z from "zod"; const LoginFormSchema = z.object({ username: z .string() .min(3, { message: "用户名不得少于3个字符", }) .max(20, { message: "用户名不得多于20个字符", }), password: z .string() .min(8, { message: "密码不得少于8个字符", }) .max(20, { message: "密码不得多于20个字符", }), }); const RegisterFormSchema = z.object({ email: z.string().email({ message: "邮箱格式不正确", }), username: z .string() .min(3, { message: "用户名不得少于3个字符", }) .max(20, { message: "用户名不得多于20个字符", }), password: z .string() .min(8, { message: "密码不得少于8个字符", }) .max(20, { message: "密码不得多于20个字符", }), }); const FormSchema = z.union([LoginFormSchema, RegisterFormSchema]); type FormSchemaType = z.infer; const UserForm = () => { const [variant, setVariant] = useState("Login"); const { register, handleSubmit, formState: { errors, isSubmitting }, watch, } = useForm({ resolver: zodResolver(FormSchema), defaultValues: { username: "", password: "", }, }); const onSubmit = async (data: FormSchemaType) => { await new Promise((resolve) => setTimeout(resolve, 1000)); }; return ( {variant === "Login" ? "登录" : "注册"} {variant === "Register" && ( 邮箱 {errors.email && ( {errors.email.message} )} )} 用户名 {errors.username && ( {errors.username.message} )} 密码 {errors.password && ( {errors.password.message} )} {variant === "Login" ? "还没有账号？去" : "已有账号？去"} setVariant(variant === "Login" ? "Register" : "Login") } > {variant === "Login" ? "注册" : "登录"} 提交 {JSON.stringify(watch(), null, 2)} ); }; export default UserForm;

nft add table inet nat nft add chain inet nat prerouting { type nat hook prerouting priority 0 \; } nft add chain inet nat postrouting { type nat hook postrouting priority 100 \; } nft add set inet nat exclude_ips { type ipv4_addr; flags interval; } nft add element inet nat exclude_ips { 192.168.100.1 } nft add rule inet nat prerouting iif "eth0" tcp daddr != @exclude_ips dnat 192.168.100.1:1080 nft add rule inet nat postrouting oif "eth0" masquerade

"图片.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241229/30e04c86501a0c577a10aeb8d64f298f.png) 如图，在vue3组件里面js代码部分调用这个函数，需要使用setTimeout延迟一段时间才能获取到返回值、但是页面模板上又能直接使用这个返回值。为什么？

我有一个组件如下： export function MyComp() { const [data, setData] = useState(['1', '2', '3']) return ( { data.map(...) } ) } 我现在想要使用其他的地方对此组件MyComp的状态data做添加内容，请问应该如何做呢？是需要导出"setData"？

代码中对象作为函数的返回值，所以如果想约束对象，那么声名函数返回值的类型即可： type TabsWithBreadcrumbs = { title: string; breadcrumbs: string[]; key: string; children: React.ReactNode; }; interface TabsSlice { tabs: TabsWithBreadcrumbs[]; } export const createTabsSlice = (set: any, get: any): TabsSlice => ({ tabs: [ { title: "demo01", due: "2023-05-05" }, { title: "demo02", due: "2023-05-06" }, { title: "demo03", due: "2023-05-07" }, ], addTab: () => {}, removeTab: () => {}, });

不是，至少我的 Windows 11 是可以同时复制文字和图片的。 比如你打开这个"网页" (https://link.segmentfault.com/?enc=nU6hvlkdVQDCQoU18d5%2FrQ%3D%3D.bUO%2BNygSfu7jbOOOf%2Bei5uVvmBsSVhlU3ZaisjDNXxZ7IbFK3R8wlmeNp0pVCZGXS5ZQaBHqbuwjwq82vtLl7rx5N842G7lvX%2B76Rw7UO%2Bg%3D)，同时选中文字和图片并复制，然后你打开"思否提问的页面" (https://segmentfault.com/ask)、Microsoft Word 或微信，粘贴，你会发现图片和文字都被粘贴上了。 当然，如果你打开记事本或 VS Code 并粘贴，则只有文字会被粘贴上。 «另外，在 Office 中，或从（较新的）浏览器复制内容到 Office 中，还可以保留格式，比如下面这个："源表格" (https://link.segmentfault.com/?enc=kRbrdeVBfodOImzYjy6QgA%3D%3D.%2Br1I%2FIrC6OFkRVKpCeECfSmAYy9vHON%2BfRSGi1SxWcDHw20C3InX6BFfY5C0vNVi8KZ7fUD29YYRWG8KUXU5o%2FbVM3%2BSUl8bq8pA7CiOTpQ%3D) | Office 中 ---|--- "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241221/b7e5787e572816bb066abe5d2641391d.png) | "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241221/002755f41b9555e23d717ee15db21233.png)»

看具体使用需求，如果一显示该组件就要调用，就在组件的created周期里面调用

"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241215/a1df93ee0cd122ba480eddbcf5d45d87.png)红色圈出来的部分的颜色变化是怎么做到的？ 视频我放到这里了"https://www.bilibili.com/video/BV1zp4y1M7M4/?vd_source=b52b50..." (https://www.bilibili.com/video/BV1zp4y1M7M4/?vd_source=b52b5063a68efa265446a630f3001100)

这个不复杂，不需要太多元素去构建，可以自己实现，参考下面代码 "https://jsrun.net/R2xKp/edit" (https://link.segmentfault.com/?enc=F14Ed2wDdV7CRYypNJonig%3D%3D.1PGXdFpSwh%2FDl7Cr6ygjuPYtyoZBDIRLUdss5LYWiX8%3D) 里面滑块指针我图省事直接用三角形代替了，你可以设置成一个字体、图片、或css去画五边形

因为 \( y = \sqrt{1-x^2} \), 显然 \( -1 < x < 1 \), 换算过来就是 \( -1 < cos(\theta) < 1 \) , 自然得到 \( 0 < \theta < \pi \) 注意：cos 是周期函数，由周期函数定积分性质可以取第一个周期中满足的上下限计算就行

页面采用flex上下布局, 上面高度固定,下面通过 flex: 1; 自动撑开, 然后 overflow-y: auto; 超出显示滚动条; 需要通过 leader-line 划线的内容主要在下面部分, 所以滚动后需要通过 "position()" 来更新线条位置,现在遇到如下问题: 1. 滚动到最下面,划线会覆盖在上面的内容; 2. 滚动页面后,折线"grid"的圆角就失效了,该如何处理呢? 问题一: https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241213/2268d6524fd68ec85b86acfb4371235d.png 问题二: https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241213/a38f87af2a0040140308efac5d8fecd2.png demo 地址: "https://codepen.io/qingyun1029/pen/JjwxrmE" (https://codepen.io/qingyun1029/pen/JjwxrmE) 链接打不开,直接复制如下内容,保持为 html 文件即可: Document html, body{ height: 100%; overflow: hidden; margin: 0; border: 0; padding: 0; } .wrapper{ height: 100%; overflow-y: hidden; display: flex; flex-direction: column; } .top{ height: 200px; background: #e3e3e3; } .content{ height: 0; flex: 1; overflow-y: auto; padding: 0 50px; } .node-warpper{ background: rgba(255, 0, 0, 0.172); margin: 20px; } .node{ border: 1px solid blue; height: 30px; line-height: 30px; margin: 10px; } top 区域 node-1 node-2 node-3 node-4 let node1 = document.getElementById('node-1') let node2 = document.getElementById('node-2') let node3 = document.getElementById('node-3') let node4 = document.getElementById('node-4') let line1 = new LeaderLine({ start: node1, end: node2, path: 'grid', startSocket: 'right', endSocket: 'right', color: 'blue', size: 5 }) let line2 = new LeaderLine({ start: node2, end: node3, path: 'grid', startSocket: 'left', endSocket: 'left', color: 'blue', size: 5 }) let line3 = new LeaderLine({ start: node3, end: node4, path: 'grid', startSocket: 'right', endSocket: 'right', color: 'blue', size: 5 }) let showEffectName = 'draw' // 动画参数 let animOptions = { duration: 1000, //持续时长 timing: 'ease-in' // 动画函数 } line1.show(showEffectName, animOptions) line2.show(showEffectName, animOptions) line3.show(showEffectName, animOptions) let scrollView = document.getElementById('content') scrollView.addEventListener('scroll',function(){ //滚动div,更新线条位置 line1.position() line2.position() line3.position() //将折线替换成圆角 let elmsPath1 = document.getElementById(`leader-line-${idx + 1}-line-path`); elmsPath1.setAttribute('d', addArc(elmsPath1.getAttribute('d'), 10)); let elmsPath2 = document.getElementById(`leader-line-${idx + 1}-line-path`); elmsPath2.setAttribute('d', addArc(elmsPath2.getAttribute('d'), 10)); let elmsPath3 = document.getElementById(`leader-line-${idx + 1}-line-path`); elmsPath3.setAttribute('d', addArc(elmsPath3.getAttribute('d'), 10)); }, false); //将折线替换成圆角 var elmsPath = document.getElementById('leader-line-1-line-path'); elmsPath.setAttribute('d', addArc(elmsPath.getAttribute('d'), 10)); var elmsPath2 = document.getElementById('leader-line-2-line-path'); elmsPath2.setAttribute('d', addArc(elmsPath2.getAttribute('d'), 10)); var elmsPath3 = document.getElementById('leader-line-3-line-path'); elmsPath3.setAttribute('d', addArc(elmsPath3.getAttribute('d'), 10)); //替换成圆角方法 function addArc(pathData, radius) { var reL = /^L ?([\d.\-+]+) ([\d.\-+]+) ?/, newPathData, curXY, curDir, newXY, newDir, sweepFlag, arcXY, arcStartXY; function getDir(xy1, xy2) { if (xy1.x === xy2.x) { return xy1.y

在vue2中，通过设置name即可 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241213/03db425df634fb4f8232947038ec8074.png) 请问，我如何在vue3中给该页面设置name，并且获取该页面的name信息 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241213/cc9e19e0815d463fa46b6b95df150fd5.png)

在学习js中，学到事件冒泡，有些不理解的地方希望大佬能够解答一下 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241211/43fc334dc40dd2536a112e832ac068ed.png) 蓝色div为父级，里面有一个红色div块，都有点击事件，当点击红色div时输出box和root，将父级的点击事件也触发了。 关于事件冒泡的解释是说事件由内到外的传播直到根节点，这个能理解，但是为什么要有这个事件冒泡的机制呢。这个为了什么？

最近在学微服务的分布式事务，不太明白为什么在微服务这种分布式系统中，原有的单体acid会出现问题 希望大佬们可以讲一下原理和思想

给添加了阻尼感, 就是有快渐慢 插件教程链接: «"https://www.fly63.com/nav/3947" (https://link.segmentfault.com/?enc=pz2Bqxyk2TNC%2BH5vb2%2By%2Fw%3D%3D.8Ay%2FLSsZ1exVl9GZ4CB%2FqizehFXP2zbXgw4Yv8gb2wM%3D)"https://ai2news.com/blog/3301036/" (https://link.segmentfault.com/?enc=KN1DbZiVQKQFRsOO9oj4Mw%3D%3D.zE1xeEyE%2Bdlb4ln273QZS86DbpRZ8aquQ0g5Oq7D8caOodmEw7ebaR7MXRSmzeYn)» 插件官网: «"https://lenis.studiofreight.com/" (https://link.segmentfault.com/?enc=Q08WAo2rLznBU11JEchRcA%3D%3D.kUAUK7q4xKPMcRC9eo6lSwXvX9Js1RyoylZoyVjwSVrHcQ7SdOfdyf7mTdADd3VE)»

1. 手动创建vue组件的方法： const Comp = Vue.extend(Test) new Comp({ propsData: { a: 1 } }).$mount('#app') 2. 手动销毁组件的方法 // 获取到组件所在的DOM元素 const el = document.querySelector('#test') // 获取当前组件实例 el.__vue__.$destroy() el.parentElement.removeChild(el) 在组件销毁后，仍然能检测到大量的"detached DOM",检测过没有全局的事件绑定，有哪位大佬遇到过类似的问题，望不吝赐教！

分类结构（三级）如下 «"D" > "E" > "F" [ "F" 含 "Area" 信息 ] "F" 总的数量级约是 6位数» 表结构 > User [ U_id, ... ] > D [ D_id, D_name ... ] `// D 表` > E [ E_id, D_id, E_name ... ] `// E 表` > F [ F_id, D_id, E_id, F_name, F_area ... ] `// F 表` > P [ P_id, U_id, D_id, E_id, F_id, A_code ... ] `// 授权表` U_id, D_id, E_id, F_id 为 0 时，视为授权模式中的 `-`，即全部授权 A_code = "" 时，视为授权模式中的 `-`，即全部授权 授权模式（7种） > [1] - - - - // 授权所有 D , E , F > [2] D - - - // 授权 D，包括 D 下所有 E 和 F > [3] D E - - // 授权 D > E，包括 E 下所有 F > [4] D E F - // 授权 D > E > F > [5] - - - A // 授权 Area，包括 所有属于 Area 的 F，跨 D，跨 D > E > [6] D - - A // 授权 D 下的 Area ，含D 下所有 在 Area 的 F，跨 D > E > [7] D E - A // 授权 D > E 下的 Area ，含E 下所有 在 Area 的 F 考虑有以下情况： > 用户通过授权模式 - - - A ，可以获得 部分 D, E, F 的授权 > 用户通过授权模式 D - - A ，可以获得 部分 E, F 的授权 > 用户通过授权模式 D E - A ，可以获得 部分 F 的授权 > 当有 D > E，且 D > E 下没有 F 时，如果有对应授权，也需要选出 D 和 E MySQL 如何获取以下列表 > **重点** 某个 User 被授权的 F 列表 数量级可能有 4位数，需要分页，最终结果应该是去重的 > 某个 User 被授权的 E 列表 > 某个 User 被授权的 D 列表 遇到的问题 «"D列表" 和 "E列表" 可以通过多次 SQL 分别获取，然后在代码中合并记录到数组 "F列表" 就不太合适了，一是数量有点多，二是要分页»

通过百度： 1. 我知道java volatile可以保证可见性和有序性。 2. 我知道java单例实现：double-check模式需要加上volatile， 但是为什么需要加上volatile？百度好像有两种意见。 基于可见性 的考虑，参考："https://www.bilibili.com/video/BV1gX4y1a7sH?p=11&vd_source=80..." (https://www.bilibili.com/video/BV1gX4y1a7sH?p=11&vd_source=801503831f64778f7f89c8223c80acac) 作者的意思：没有加上volatile，不同的线程间的缓存副本无法可见，导致重复多次初始化。 基于有序性 的考虑，参考："https://blog.csdn.net/qq_44842835/article/details/132166785" (https://link.segmentfault.com/?enc=SdiGpHN2ojNGS8Oa9U7fYQ%3D%3D.AuPlZZ%2FhXC2zfEwzN6xuTUWkJWNs%2FPY2HdjAjBgUm%2FB4JgipF0ibnfPpt0CIbrtA6BGZMUuEZKlSKRJQs3Bnhg%3D%3D) 作者的意思：对象实例化可以简单分为三步：1、分配内存 2、初始化对象 3、将对象的引用赋值给instance。因为指令重排，顺序可以变成1->3->2，因此其他线程很可能获得一个未完全初始化的实例。 请问上述两种观点谁对谁错？能否能通过java代码来证明和实现？

const arr = [...] const condition: Record = { 2: [], 3: [31, 33] } const r = arr.reduce((p, c) => { if (c.id in condition) { if (c.children) { const [a, b] = c.children.reduce( ( [a, b], cc, ) => (condition[c.id].includes(cc.id) ? [a, [...b, cc]] : [[...a, cc], b]), [[], []] as typeof arr[], ) if (a.length) p[0].push({ ...c, children: a }) p[1].push({ ...c, children: b }) } else p[1].push(c) } else p[0].push(c) return p }, [[], []] as typeof arr[]) console.log(r)

问题遇到的现象和发生背景 有没有懂的，macOS下Android Studio的模拟器无法联网（WIFI）大家怎么解决的啊？我发现他没法连接本机WIFI，倒是可以启用SIM卡的LTE流量，而且还自带2G流量，搞不懂这是什么情况，啥原理啊？模拟器怎么可以使用SIM连4G流量呢？4G可以正常上网！ 图1 | 图2 ---|--- https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241122/f7311d7496f3c40a76393a9bd5c7b91e.png | https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241122/e7b0292c0d2922679bbc8d419088250a.png 操作环境、软件版本等信息 Android Studio 版本：Android Studio Giraffe | 2022.3.1 Patch 3 macOS版本：14.0 尝试过的解决方法 网上搜了一圈，都没解决问题，什么该DNS、IPv6设为仅本地啥的都试过 我想要达到的结果 连接电脑本机WIFI

如何在网页上实现对于3D CAD文件的解析预览？ 比如常用的机械设计文件格式，solidworks、UG、CATIA等

class=["'].*?\bprimary\b.*?["']

如果没理解错的话,你要进行网站流量分析的话,可以直接使用 第三方的网站数据分析,比如百度统计,这玩意还不用收费,免费注册使用就行了 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241119/7daf225d689959fe12f42c3799728b5e.png)

假设我有一个这样的网站"https://www.itsoffbrand.com/" (https://link.segmentfault.com/?enc=n6%2BkR6GQgb4upAnUMn8dew%3D%3D.gcv9cknyjBzjEAJLstK2VrSF7e6bZFcXDknJqclwfX0%3D) 里面的特效我很喜欢。有办法把代码弄出来吗？ 有办法把代码弄出来吗？

针对文件流的进行单独处理 "image.png" (https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241111/17e902666f22b744e39ca97acaf70b06.png)

elasticsearch 如何将一个搜索需要实现？ 举例说明： 我有一个数据表内容如下： id,title 1 这是一个关于美国人的故事 2 英国人23年都吃什么 3 美国有多少个州 4 哪个国家的黑人多 5 美国2023年失业人数 6 23年失业的英国人数 然后我要搜索以下几个词（或者我想搜索上表中能分出词的相关关键词） 黑人，美国，23年失业人数 以上该如休建表的索引，才能实现搜索相关词返回靠谱结果，网上看了不少视频也没整明白到底该如何实现，求大佬们白话说明

java 中 ， 还有 "int.class" 这种写法 ？ int 不是基本类型吗 ？？

"image.png" (https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241103/e37ce8c0c29f46b4c1c8a7ef2015f0a4.png) "image.png" (https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241103/7e08cffe9e732be2f36d756a134c2e3a.png) "image.png" (https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241103/06b0c7ded466df50027b1e2e558b18b3.png) "dependencies": { "@ant-design/icons-vue": "^7.0.1", "@antv/l7": "^2.19.10", "@antv/l7-maps": "^2.19.10", "@vue/shared": "^3.3.8", "@vueuse/core": "^10.6.0", "@vueuse/shared": "^10.6.0", "ant-design-vue": "^4.0.6", "axios": "^1.6.1", "core-js": "^3.33.2", "dayjs": "^1.11.10", "echarts": "^5.4.3", "echarts-liquidfill": "^3.1.0", "lodash-es": "^4.17.21", "normalize.css": "^8.0.1", "nprogress": "^0.2.0", "pinia": "^2.1.7", "pinia-plugin-persistedstate": "^3.2.0", "regenerator-runtime": "^0.14.0", "vue": "^3.3.4", "vue-router": "^4.2.5", "vue-types": "^5.1.1", "vue3-count-to": "^1.1.2" }, "devDependencies": { "@rushstack/eslint-patch": "^1.3.3", "@tsconfig/node18": "^18.2.2", "@types/lodash-es": "^4.17.11", "@types/node": "^18.18.5", "@types/nprogress": "^0.2.3", "@types/postcss-pxtorem": "^6.0.3", "@types/qs": "^6.9.10", "@vitejs/plugin-vue": "^4.4.0", "@vitejs/plugin-vue-jsx": "^3.0.2", "@vue/eslint-config-prettier": "^8.0.0", "@vue/eslint-config-typescript": "^12.0.0", "@vue/tsconfig": "^0.4.0", "autoprefixer": "^10.4.16", "eslint": "^8.49.0", "eslint-plugin-vue": "^9.17.0", "less": "^4.2.0", "less-loader": "^11.1.3", "npm-run-all2": "^6.1.1", "postcss-pxtorem": "^6.0.0", "prettier": "^3.0.3", "ts-node": "^10.9.1", "tsconfig-paths": "^4.2.0", "typescript": "~5.2.0", "unplugin-vue-components": "^0.25.2", "vite": "^4.4.11", "vite-plugin-windicss": "^1.9.1", "vue-tsc": "^1.8.19", "windicss": "^3.5.6" }, 为什么在 "vue" 文件里不报错？ 类型提示都有的啊。

将自定义属性定义为角度属性 @property --rotate-angle { syntax: ''; inherits: false; initial-value: 0deg; } @keyframes rotate { 0% { --rotate-angle: 0deg; } 100% { --rotate-angle: 360deg; } } #el { rotate: var(--rotate-angle); animation: rotate 3s linear; }

要么是断线要么是内存不足编译太慢，建议用默认的极速安装方式安装好amh， amh安装后再软件商店安装mysql-5.7，或是用mysql-generic-5.7版本免编译的。 2G以下内存如果还有其它占用，可能就无法编译mysql-5.7。

为什么要猜呢？直接性能面板看下有没有触发布局就可以了，下面这个我是在"append"之后打印了"document.body.offsetHeight"的执行栈，这里为什么会触发布局正是因为你获取了"offsetHeight"，你试想下如果浏览器不强制重新布局重绘一次你的程序怎么能获取到正确的值？所以你不能用这样来检测。如果你不做操作"append"之后立即"remove"你会发现执行栈里就没有布局这一任务 "截屏2023-12-23 18.08.42.png" (https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241026/33022eebe0e9186db8a34039f3fc364b.png)

win11 "go run ."会生成exe文件到缓存目录，每次都弹出防火墙很烦，能不能指定生成目录？ 谢谢

现在市面上的零基础教程，我觉得最大的问题是，对于初学者来说，他们大多只是学会了各种语言的语法，但是在学了之后基本都不知道应该怎么用编程解决问题。所以教用什么语言怎么学语法写算法反而是最不重要的（在开始阶段)。 我会拿现实的例子。讲网络、讲项目开发流程、讲分工。 用一个能看得到用得到的例子，讲这个产品如何开发，怎么开发、用到了哪些东西，是通过什么方法实现的，它的优点和不足，应该怎么做，给他演示怎么debug、怎么添加一个新功能、怎么百度解决问题。给他讲不同编程语言的异同，怎么把不同的东西结合起来。 *** 项目+问题驱动 配合 实践演示。能知道编程能解决什么问题，能学会怎么用编程解决问题，应该是入门第一步。

解决了，需求是前端要导出，但因各种原因没法直接调服务2的导出接口，需要服务1中转一下。 服务1接收到前端请求后，调用服务2的controller，服务2正常执行，服务1拿到数据转成byte[]，然后写入到outputStream中就可以了 服务2公用导出方法 /** * 导出Excel * * @param response 响应实体 * @param fileName 文件名 * @param exportList 数据列表 * @param clazz 映射类 */ public static void exportExcel(HttpServletResponse response, String fileName, List exportList, Class clazz) { ServletOutputStream out = null; try { out = response.getOutputStream(); } catch (IOException e) { e.printStackTrace(); } ExcelWriterBuilder builder = new ExcelWriterBuilder(); builder.file(out).excelType(ExcelTypeEnum.XLSX).autoCloseStream(true).head(clazz); ExcelWriter writer = builder.build(); WriteSheet sheet = EasyExcel.writerSheet().build(); writer.write(exportList, sheet); response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"); try { response.setHeader("content-Disposition", "attachment;filename=" + URLEncoder.encode(fileName, "UTF-8")); response.setHeader("Pragma", "public"); response.setHeader("Cache-Control", "no-store"); response.addHeader("Cache-Control", "max-age=0"); out.flush(); } catch (UnsupportedEncodingException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); } finally { writer.finish(); try { out.close(); } catch (IOException e) { e.printStackTrace(); } } } 服务1中转接口 @Resource private RestTemplate restTemplate; public void export(@RequestBody Map paramMap,HttpServletResponse response) { // 构建请求实体信息 HttpEntity requestEntity = RestTemplateHttpUtils.buildHttpEntity(paramMap); String url = "xxxxxxxxxxx"; ServletOutputStream outputStream = null; InputStream inputStream = null; try { outputStream = response.getOutputStream(); byte[] bytes = restTemplate.postForObject(url, requestEntity, byte[].class); /// 将Excel流文件字符串转换为字节数组输入流 inputStream = new ByteArrayInputStream(bytes); byte[] buffer = new byte[1024]; int bytesRead; // 循环读取输入流的数据并写入输出流 while ((bytesRead = inputStream.read(buffer)) != -1) { outputStream.write(buffer, 0, bytesRead); } outputStream.flush(); } catch (Exception e) { e.printStackTrace(); } finally { try { outputStream.close(); inputStream.close(); } catch (IOException e) { throw new RuntimeException(e); } } }

当处理FTP服务器上的文件时，如果服务器上的文件名包含了非UTF-8编码的字符（比如GBK编码的字符），而你尝试用UTF-8编码去解析这些文件名时，确实会遇到编码错误。这个问题在跨平台或跨语言环境的文件传输中非常常见。 为了解决这个问题，你可以尝试以下方法： 使用FTP服务器的默认编码： 一些FTP客户端库允许你指定或检测FTP服务器的默认编码。例如，使用ftplib库时，你可以尝试检测FTP服务器的编码，并使用该编码来处理文件名。但是，ftplib并不直接支持这种特性，你可能需要扩展它或寻找其他库。 尝试多种编码： 如果你可以确定服务器上可能使用的几种编码（比如UTF-8和GBK），你可以尝试用这些编码去解码文件名，直到成功为止。 使用第三方库： 有些第三方库可能提供了更好的编码支持或错误处理机制。例如，paramiko是一个提供SSH和SFTP功能的Python库，它可能更好地处理编码问题。 升级FTP服务器： 如果可能的话，升级FTP服务器以支持UTF-8编码是一个长期的解决方案。这样可以确保所有上传和下载的文件名都使用统一的编码格式。 避免使用特殊字符： 限制上传的文件名只使用ASCII字符可以避免编码问题。这可以通过文件上传的客户端来实现，确保在上传前对文件名进行清理或转换。 自定义错误处理： 在解码文件名时，你可以捕获UnicodeDecodeError异常，并尝试使用不同的编码来解码，或者简单地忽略或替换无法解码的字符。 下面是一个简单的例子，展示了如何使用ftplib库并尝试多种编码来解码文件名： import ftplib def decode_filename(filename, encodings=['utf-8', 'gbk']): for enc in encodings: try: return filename.decode(enc) except UnicodeDecodeError: pass # 如果所有编码都尝试过了还是失败，可以抛出一个异常或返回原始字节 return filename ftp = ftplib.FTP('ftp.example.com') ftp.login('user', 'passwd') dir_list = ftp.nlst('/path/to/directory') for raw_filename in dir_list: filename = decode_filename(raw_filename) print(filename) # 根据文件名下载文件... ftp.quit()

大佬们，这样写在c++中会产生什么问题啊？ OpenGL::VertexStruct& OpenGL::CreateTorus(int prec, float inner, float outer) { VertexStruct* v = new VertexStruct; return (*v); } OpenGL::VertexStruct&torus = OpenGL::CreateTorus(); delete (&torus);

导出PDF好说，可以直接 "html2image" 来处理。 如果你期望导出为Excel并且可编辑的话， 得考虑用 "ExcelJS" (https://link.segmentfault.com/?enc=cZpazCADpma1Df3xLmxc0Q%3D%3D.0H7UAZFkNugoEXZaP5kMImYQ%2BbgvwFck%2BEBsRPF%2Bv9IQdUg8i3Oh%2B4AjWTjnJoazJE%2BgqnPLvySUUT8E1apYw1cOlSHNcSGBRHX6WTXCuDc%3D)。 但样式就需要你自己重写了，没办法直接套用页面中的"el-table" 的CSS样式。

"https://nuxt.com/modules/swiper" (https://link.segmentfault.com/?enc=uKAetFi7tLzI8U2ACTfYfw%3D%3D.1hxf4kJPSfPEe8Ursi9rmQW3CTvXJkXoOMQ1gbmFB24%3D) # npm npm install nuxt-swiper # yarn yarn add nuxt-swiper #pnpm pnpm add nuxt-swiper // nuxt.config.ts import { defineNuxtModule } from 'nuxt' export default defineNuxtConfig({ modules: ['nuxt-swiper'] swiper: { // Swiper options //---------------------- // prefix: 'Swiper', // styleLang: 'css', // modules: ['navigation', 'pagination'], // all modules are imported by default } }) {{ slide }}

echaets柱状图 每一列多项展示 但是有空值时 怎么让图表依旧保持居中？ "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241014/347b09346c7a20a8657743c349f04a75.png)

猜测，客户端不适配MySQL8.2的服务端通讯协议。建议下载官方的MySQL Workbench试试

直接"export default new Vue()" 或是挂原型"Vue.prototype.$myBus = new Vue()" 或者全局"window.myBus = new Vue()"

这算是一个 设计规范 和 "支持粒度" 的问题，通过 "ConfigProvider" 注入的国际化只负责控制 "antd" 这一层的国际化，没有集成组件依赖的"包"中的国际化，所以需要由用户手动引入这部分。如果看过 "antd" 的源码，那么你会发现，"antd"中的部分组件其实也只是封装了另一个库("react-component")中的组件，具体实现并不在 "antd" 这里就用 "DatePicker" 举例，它是基于 react-component 中的 "picker" 实现的，包名叫 "rc-picker"，而 "rc-picker" 中日期相关的处理都是通过 "dayjs" 这个库来完成的，包括"国际化" 这里就存在如下依赖关系 "DatePicker -> rc-picker -> dayjs"，从设计上来说，DatePicker 只需要把 rc-picker 当成一个黑盒，不需要关注里面的实现，不管 rc-picker 选择用 dayjs 还是 moment，亦或者其他的日期工具库，"antd" 都无需关心。 换个说法，假设 antd 集成了 dayjs，那么如果后续 rc-picker 将 dayjs 替换成了其他库，那么 antd 也得跟着改，这种"隐晦的依赖关系"产生的"耦合"会带来不小的维护成本。 至于这个问题，可以提供一个可复现的在线demo，我测了下是可以的 «"另外还有一个问题想请教，为什么这个ConfigProvider直接包裹在App外面不可以，要包在RouterProvider或者Provider里才生效。"»

多个axios请求怎么按顺序实现？我写的是哪里出问题了，打印的res值都是来自第一个post请求的返回结果，第二个get请求里的res值没有获取到？ axios({ method: 'POST', url: 'https://openspeech.bytedance.com/api/v1/tts_async/submit', headers: { 'Content-Type': 'application/json', 'Resource-Id': 'volc.tts_async.default', 'Authorization': 'Bearer;CiWImuQXN_xzNTZ5YyC5r' }, data: { "appid": "5565218", "reqid": nanoid(30), "text": '这是一段测试文字！', "format": "wav", "voice_type": "BV705_streaming" } }).then(function (res) { console.log('post', res.data) return axios({ method: 'GET', headers: { 'Content-Type': 'application/json', 'Resource-Id': 'volc.tts_async.default', 'Authorization': 'Bearer;CiWI1f4XN_xzNTZ5YyC5r' }, url: `https://openspeech.bytedance.com/api/v1/tts_async/query?appid=5568&task_id=${res.data.task_id}` }) }).then(function (res) { console.log('get', res.data) }).catch(err => { console.log('get:err') }) 把第二个then放里面也是一样， axios({ method: 'POST', url: 'https://openspeech.bytedance.com/api/v1/tts_async/submit', headers: { 'Content-Type': 'application/json', 'Resource-Id': 'volc.tts_async.default', 'Authorization': 'Bearer;CiWImuQZhWXN_xzNTZ5YyC5r' }, data: { "appid": "556218", "reqid": nanoid(30), "text": '这是一段测试文字！', "format": "wav", "voice_type": "BV705_streaming" } }).then(function (res) { console.log('post', res.data) axios({ method: 'GET', headers: { 'Content-Type': 'application/json', 'Resource-Id': 'volc.tts_async.default', 'Authorization': 'Bearer;CiWImuQC1f4XN_xzNTZ5YyC5r' }, url: `https://openspeech.bytedance.com/api/v1/tts_async/query?appid=556218&task_id=${res.data.task_id}` }).then(function (res) { console.log('get', res.data) }) }).catch(function (err) { console.log(err) }) 前端新手，请多指教