project-setup 相关问题

将 Inno Setup Pascal Script TColor 转换为 HTML 十六进制颜色

Inno Setup Pascal Script 有颜色变量，如 Delphi 中的 clBtnFace、clYellow。我想知道如何将这些 TColor 转换为 HTML 十六进制颜色。例如，如果我将 clBtnFace 转换为...

我尝试通过 Inno Setup 6.2.2 创建安装程序，但遇到一个问题：更改语言时，安装程序图标在任务栏中不可见。这仅发生在 Windows 10 中。...

我正在使用以下文档学习放大器 https://docs.amplify.aws/angular/start/getting-started/installation/ https://docs.amplify.aws/angular/start/getting-started/setup/ 但同时

提取 MS Project 计划中过滤器的详细信息，特别是使用哪些字段

我能够从 MS Project 计划中提取组、表、视图和自定义字段的详细信息。我可以获得过滤器的名称，以及是否应显示摘要行，但我找不到任何内容...

如何修复构建gradle失败

这是错误代码构建文件 'C:\Users\SSAFY\Desktop\jae\pjt1\sub1\sculpture-project ackend_sculpture uild.gradle' 行：19 评估根项目“ssafy”时出现问题。 > org.gradle.api.

Eclipse Kepler 中缺少动态 Web 项目选项 [重复]

Eclipse 中新项目的“动态 Web 项目”选项未显示在列表中。虽然“web”文件夹显示了“static web project”选项，但没有“Dyn...

如何使用诗歌从 test.pypi.org 安装软件包？

我想在我的项目中使用包的预发布版本（https://test.pypi.org/project/delta-spark/2.1.0rc1/）。我正在使用诗歌来管理我的 pyproject.toml。我该怎么做呢？换句话说...

Inno Setup 安装程序中嵌入 CMD（在自定义页面上显示命令输出）

我创建了一个输入页面，该页面使用从这些输入创建的变量来执行命令行应用程序。当然，cmd 窗口会在我的屏幕上弹出。我想知道有什么办法可以...

clickup api 中优先级不是整数

我正在使用clickuppython调用clickup API。当我在 Clickup 仪表板中设置优先级（例如高）时，出现此错误回溯（最近一次调用最后一次）：文件“C:\PROJECT\Clickup\main.py”...

找不到参数的方法compile() [project ':react-native-version-check']

我已经实现了react-native的VersionCheck，从文档本身完成了设置，但在运行应用程序时出现错误。错误无法找到参数的方法compile() [项目...

C# 中的国际象棋引擎 - 糟糕的走法

我目前正在尝试自己编写国际象棋引擎。我写了一个简单的 AlphaBeta Minimax 和 MaterialBalance 评估（链接如下）。我正在使用 SebLagues Chess Challenge Project 进行编程...

根据自定义脚本的退出代码在 InnoSetup 的完成页面上显示自定义错误

我正在使用以下 InnoSetup 代码来运行 PowerShell 脚本并将其输出重定向到自定义进度页面：在 Inno Setup 自定义向导页面上创建一个按钮来中断从以下位置执行的程序...

致命错误C1034：stdio.h：未指定包含文件的搜索路径。 GraalVM Native Image 没有编译我的项目

GraalVM 没有编译我的项目，我尝试了以下方法： PS D:\Documents\Intellij Idea Projects\Project> ./gradlew.bat nativeRun 配置项目：项目：=>“com.user.Project”Java 模块任务：

Rust 中的库 crate 和二进制 crate 有什么区别？

在阅读官方书籍时，我偶然发现了包裹和板条箱。为了创建一个新项目，我运行了以下命令： $ 货物新我的项目创建了二进制（应用程序）“my-project”包 $ ls...

如何修复通过 JavaScript 中的 addEventListener 为 3D 元素分配函数？

我正在尝试使用“第一只狗”和“第二只狗”下的“.project-img”类对照片进行动画处理，方式与第一张照片相同。但是，我的代码使用 forEach 将 addEventListener 分配给...

描述资源路径位置类型禁用下载外部资源。 pom.xml /ContactManager 第 3 行语言服务器

在我的pom文件中显示这样的错误如何解决这个问题我的错误就像描述资源路径位置类型 cvc-elt.1.a：找不到元素“project”的声明。 pom.xml /

Alpine.js 和 jQuery DataTables，x-on：在表内触发时单击功能不全

我的 Laravel 和 Alpine.js 刀片页面中有此表。名字我的 Laravel 和 Alpine.js 刀片页面中有此表。 <table id="projects-table"> <thead> <tr> <th>name</th> <th>actions</th> </tr> </thead> <tbody> @foreach($projects as $project) <tr> <td>{{ $project->name }}</td> <td><button x-data="{}" x-on:click="$dispatch('open-modal', 'edit-project')">edit</button></td> </tr> @endforeach </tbody> </table> 有了它，我有了这个 JavaScript 代码，可以将其转换为 jQuery DataTable document.addEventListener('DOMContentLoaded', function () { new DataTable('#projects-table'); }); 现在发生的情况是，当我单击 button 内的 td 时，我的模式不会触发当表不是 DataTable 时，一切正常。基本上发生了什么（可能），当 jQuery 操作元素时，@click 事件不会触发。有任何已知的修复方法吗？感谢所有帮助。解决方案是将表包含在由 Alpine 控制的标签中，并在 Alpine 启动后初始化 DataTable： <div x-data> <table id="projects-table">  </table> </div> <script> document.addEventListener('alpine:init', () => { new DataTable('#projects-table') }); </script> 通过这种方式，Alpine 可以检测到 DOM 何时被 DataTables 更改，然后重建他的引用。否则，在您的具体情况下，您可以使用 vanilla JS 发送自定义事件并保持其他内容不变：  <td> <button onclick="window.dispatchEvent(new CustomEvent('open-modal', { detail: 'edit-project' }))"> Edit </button> </td>   <div x-data="{isOpen: false}" x-show="isOpen" @open-modal.window="isOpen = true"> I'm open! <div>

PySpark 分区镶木地板需要很长时间才能加载，即使使用指定的模式

设置：我有一个包含约 1300 个分区 parquet 文件的文件夹（例如 C:\Project Data\Data-*.parquet），其中 * 是一个计数器，每个文件大小约为 8MB。所有文件都具有相同的架构。我是茹...

Vue 3如何获取$children的信息

这是我在 Tabs 组件中使用 VUE 2 的旧代码：创建（）{ this.tabs = this.$children; } 标签： .... 这是我在 Tabs 组件中使用 VUE 2 的旧代码： created() { this.tabs = this.$children; } 标签： <Tabs> <Tab title="tab title"> .... </Tab> <Tab title="tab title"> .... </Tab> </Tabs> VUE 3：如何使用组合 API 获取有关 Tabs 组件中子项的一些信息？获取长度，迭代它们，并创建选项卡标题，...等？有任何想法吗？（使用组合API）这是我现在的 Vue 3 组件。我使用 Provide 来获取子 Tab 组件中的信息。 <template> <div class="tabs"> <div class="tabs-header"> <div v-for="(tab, index) in tabs" :key="index" @click="selectTab(index)" :class="{'tab-selected': index === selectedIndex}" class="tab" > {{ tab.props.title }} </div> </div> <slot></slot> </div> </template> <script lang="ts"> import {defineComponent, reactive, provide, onMounted, onBeforeMount, toRefs, VNode} from "vue"; interface TabProps { title: string; } export default defineComponent({ name: "Tabs", setup(_, {slots}) { const state = reactive({ selectedIndex: 0, tabs: [] as VNode<TabProps>[], count: 0 }); provide("TabsProvider", state); const selectTab = (i: number) => { state.selectedIndex = i; }; onBeforeMount(() => { if (slots.default) { state.tabs = slots.default().filter((child) => child.type.name === "Tab"); } }); onMounted(() => { selectTab(0); }); return {...toRefs(state), selectTab}; } }); </script> 选项卡组件： <script lang="ts"> export default defineComponent({ name: "Tab", setup() { const index = ref(0); const isActive = ref(false); const tabs = inject("TabsProvider"); watch( () => tabs.selectedIndex, () => { isActive.value = index.value === tabs.selectedIndex; } ); onBeforeMount(() => { index.value = tabs.count; tabs.count++; isActive.value = index.value === tabs.selectedIndex; }); return {index, isActive}; } }); </script> <template> <div class="tab" v-show="isActive"> <slot></slot> </div> </template> 哦伙计们，我解决了： this.$slots.default().filter(child => child.type.name === 'Tab') 对于想要完整代码的人：标签.vue <template> <div> <div class="tabs"> <ul> <li v-for="tab in tabs" :class="{ 'is-active': tab.isActive }"> <a :href="tab.href" @click="selectTab(tab)">{{ tab.name }}</a> </li> </ul> </div> <div class="tabs-details"> <slot></slot> </div> </div> </template> <script> export default { name: "Tabs", data() { return {tabs: [] }; }, created() { }, methods: { selectTab(selectedTab) { this.tabs.forEach(tab => { tab.isActive = (tab.name == selectedTab.name); }); } } } </script> <style scoped> </style> 标签.vue <template> <div v-show="isActive"><slot></slot></div> </template> <script> export default { name: "Tab", props: { name: { required: true }, selected: { default: false} }, data() { return { isActive: false }; }, computed: { href() { return '#' + this.name.toLowerCase().replace(/ /g, '-'); } }, mounted() { this.isActive = this.selected; }, created() { this.$parent.tabs.push(this); }, } </script> <style scoped> </style> 应用程序.js <template> <Tabs> <Tab :selected="true" :name="'a'"> aa </Tab> <Tab :name="'b'"> bb </Tab> <Tab :name="'c'"> cc </Tab> </Tabs> <template/> 我扫描子元素的解决方案（在对 vue 代码进行大量筛选之后）是这样的。 export function findChildren(parent, matcher) { const found = []; const root = parent.$.subTree; walk(root, child => { if (!matcher || matcher.test(child.$options.name)) { found.push(child); } }); return found; } function walk(vnode, cb) { if (!vnode) return; if (vnode.component) { const proxy = vnode.component.proxy; if (proxy) cb(vnode.component.proxy); walk(vnode.component.subTree, cb); } else if (vnode.shapeFlag & 16) { const vnodes = vnode.children; for (let i = 0; i < vnodes.length; i++) { walk(vnodes[i], cb); } } } 这将返回子组件。我对此的用途是我有一些通用的对话框处理代码，用于搜索子表单元素组件以咨询其有效性状态。 const found = findChildren(this, /^(OSelect|OInput|OInputitems)$/); const invalid = found.filter(input => !input.checkHtml5Validity()); 如果你复制粘贴与我相同的代码然后只需向“选项卡”组件添加一个创建的方法，该方法将自身添加到其父级的选项卡数组中 created() { this.$parent.tabs.push(this); }, 使用脚本设置语法，您可以使用useSlots：https://vuejs.org/api/sfc-script-setup.html#useslots-useattrs <script setup> import { useSlots, ref, computed } from 'vue'; const props = defineProps({ perPage: { type: Number, required: true, }, }); const slots = useSlots(); const amountToShow = ref(props.perPage); const totalChildrenCount = computed(() => slots.default()[0].children.length); const childrenToShow = computed(() => slots.default()[0].children.slice(0, amountToShow.value)); </script> <template> <component :is="child" v-for="(child, index) in childrenToShow" :key="`show-more-${child.key}-${index}`" ></component> </template> 我对 Ingrid Oberbüchler 的组件做了一个小改进，因为它不支持热重载/动态选项卡。在 Tab.vue 中： onBeforeMount(() => { // ... }) onBeforeUnmount(() => { tabs.count-- }) 在 Tabs.vue 中： const selectTab = // ... // ... watch( () => state.count, () => { if (slots.default) { state.tabs = slots.default().filter((child) => child.type.name === "Tab") } } ) 我也遇到了同样的问题，在做了很多研究并问自己为什么他们删除了$children之后，我发现他们创建了一个更好、更优雅的替代方案。这是关于动态组件的。 (<component: is =" currentTabComponent "> </component>). 我在这里找到的信息： https://v3.vuejs.org/guide/component-basics.html#dynamic-components 希望这对你有用，向大家问好！！我发现这个更新的 Vue3 教程使用 Vue 插槽构建可重用的选项卡组件对于与我相关的解释非常有帮助。它使用 ref、provide 和ject 来替换我遇到同样问题的this.tabs = this.$children;。我一直在遵循我最初发现的构建选项卡组件（Vue2）的教程的早期版本创建您自己的可重用 Vue 选项卡组件。根据 Vue 文档，假设您在 Tabs 组件下有一个默认插槽，您可以直接在模板中访问该插槽的子级，如下所示： // Tabs component <template> <div v-if="$slots && $slots.default && $slots.default()[0]" class="tabs-container"> <button v-for="(tab, index) in getTabs($slots.default()[0].children)" :key="index" :class="{ active: modelValue === index }" @click="$emit('update:model-value', index)" > <span> {{ tab.props.title }} </span> </button> </div> <slot></slot> </template> <script setup> defineProps({ modelValue: Number }) defineEmits(['update:model-value']) const getTabs = tabs => { if (Array.isArray(tabs)) { return tabs.filter(tab => tab.type.name === 'Tab') } else { return [] } </script> <style> ... </style> 并且 Tab 组件可能类似于： // Tab component <template> <div v-show="active"> <slot></slot> </div> </template> <script> export default { name: 'Tab' } </script> <script setup> defineProps({ active: Boolean, title: String }) </script> 实现应类似于以下内容（考虑一组对象，每个部分一个，带有 title 和 component）： ... <tabs v-model="active"> <tab v-for="(section, index) in sections" :key="index" :title="section.title" :active="index === active" > <component :is="section.component" ></component> </app-tab> </app-tabs> ... <script setup> import { ref } from 'vue' const active = ref(0) </script> 另一种方法是使用 useSlots，如 Vue 文档（上面的链接）中所述。在 3.x 中，$children 属性已被删除并且不再受支持。相反，如果您需要访问子组件实例，他们建议使用 $refs。作为数组 https://v3-migration.vuejs.org/writing-changes/children.html#_2-x-syntax 在 3.x 版本中，$children 已被删除且不再受支持。使用 ref 访问子实例。 <script setup> import { ref, onMounted } from 'vue' import ChildComponent from './ChildComponent .vue' const child = ref(null) onMounted(() => { console.log(child.value) // log an instance of <Child /> }) </script> <template> <ChildComponent ref="child" /> </template> 详细信息：https://vuejs.org/guide/essentials/template-refs.html#template-refs 基于@Urkle的回答： /** * walks a node down * @param vnode * @param cb */ export function walk(vnode, cb) { if (!vnode) return; if (vnode.component) { const proxy = vnode.component.proxy; if (proxy) cb(vnode.component.proxy); walk(vnode.component.subTree, cb); } else if (vnode.shapeFlag & 16) { const vnodes = vnode.children; for (let i = 0; i < vnodes.length; i++) { walk(vnodes[i], cb); } } } 除了已接受的答案之外：而不是 this.$root.$children.forEach(component => {}) 写 walk(this.$root, component => {}) 这就是我让它为我工作的方式。

如何在VUE中使用参数访问v-model值

我想使用参数访问 v-model 值，我尝试下面的代码我想使用参数访问 v-model 值，我尝试下面的代码 <template> <div v-for="(item, idx) in data"> <input :id="item" :v-model="item"></input> <button @click="submitTest(item)"> testbtn </button> </div> </template> <script setup> var data = {'test1': 'val1', 'test2': 'val2'} function submitTest(itemParam){ alert(itemParam.value) } </script> 实际上在submitTest函数（警报行）中，它不访问输入标签v-model，而是访问itemParam（字符串值本身）值。我想要的是使用由项目参数传递的参数访问输入“项目值”。我尝试了上面的代码，结果，它实际上访问了“itemParam”字符串值本身，而不是传递参数。在Vue.js中，您应该使用v-model进行双向数据绑定。 v-model 指令是绑定数据以形成输入并更新用户输入数据的便捷简写。但是，它不能直接用作 prop 或作为参数传递。相反，您可以传递整个对象并在方法中使用它。以下是修改代码的方法： <template> <div v-for="(item, idx) in data" :key="idx"> <input :id="item" v-model="item.value"></input> <button @click="submitTest(item)">testbtn</button> </div> </template> <script setup> const data = ref([ { id: 'input1', value: '' }, { id: 'input2', value: '' }, // ... other items ]); function submitTest(item) { alert(item.value); } </script> 在此示例中，数据数组中的每个项目都是一个具有 id 和 value 属性的对象。 v-model 指令绑定到 item.value。当您单击按钮时，将使用整个项目对象调用 SubmitTest 函数，您可以从那里访问 value 属性。确保在设置脚本中使用 ref 创建对数据数组的反应性引用。注意： :key="idx" 添加到中，为循环中的每个项目提供唯一的键。这有助于 Vue.js 在数组更改时高效更新和重新渲染组件。

VueJS [电子邮件受保护] 组件 v-model 最初不会更新父级

我有一个父子组件设置来测试 v-model。当您输入值时，子级会更新父级，但最初不会。家长：从“vue”导入{ref}；导入文本输入...</desc> <question vote="0"> <p>我有一个父子组件设置来测试 v-model。当您输入值时，子级会更新父级，但最初不会。</p> <p>家长：</p> <pre><code><script setup> import { ref } from 'vue'; import TextInput from './TextInput.vue'; const size = ref(1); const color = ref('red'); </script> <template> <TextInput v-model:size="size" v-model:color.capitalize="color" /> <div :style="{ fontSize: size + 'em', color: color }">  <p>{{ size }} {{ color }}</p> </div> </template> </code></pre> <p>子：TextInput.vue</p> <pre><code><script setup> import { ref } from 'vue'; const size = defineModel('size'); const [color, modifier] = defineModel('color', { set(value) { if(modifier.capitalize) { return value.charAt(0).toUpperCase() + value.slice(1); } return value; }, //only this forces color to upper case on start in the input get(value) { if(modifier.capitalize) { return value.charAt(0).toUpperCase() + value.slice(1); } return value; } }); </script> <template> <input v-model="size"> <input v-model="color"> </template> </code></pre> <p>问题2：如果我在defineModel中省略“color”（“color”，{...，我会收到以下错误</p> <p>[Vue warn]：无关的非 props 属性（颜色、colorModifiers）被传递给组件但无法自动继承，因为组件渲染片段或文本根节点。</p> <pre><code>at <TextInput size=1 onUpdate:size=fn color="red" ... > at <ComponentVModel> at <App> </code></pre> <p>如果我只保留</p> <pre><code><input v-model="color"> </code></pre> <p>line，为了让它不是片段，根本不更新。</p> </question> <answer tick="false" vote="0"> <p>问题 1：在调用子元素中的 v-model setter 之前，<pre><code><p></code></pre> 元素中的大写不会发生。 <strong>设置器是同步回父级的设置器</strong>。由于在输入接收到来自用户的一些文本之前不会调用设置器，因此父级中的 <pre><code><p></code></pre> 元素将显示初始值，在您的情况下为“红色”。</p> <p>问题 2：defineModel 根据第一个参数字符串“color”声明一个 prop。该道具旨在匹配父级<strong>上的</strong>v模型的参数，即<pre><code>v-model:color</code></pre>。从defineModel中删除“颜色”意味着父v模型必须从<pre><code>v-model:color</code></pre>更改为<pre><code>v-model</code></pre></p> </answer> </body></html>

Spring boot + slf4j + log4j + 类 org.apache.logging.slf4j.SLF4JLoggerContext 无法转换为类

我有Spring boot 2.3.1 pom.xml 我有Spring boot 2.3.1 pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.3.1.RELEASE</version> <relativePath/>  </parent> <groupId>logger</groupId> <artifactId>logger</artifactId> <version>0.0.1-SNAPSHOT</version> <name>logger</name> <description>Demo project for Spring Boot</description> <properties> <java.version>11</java.version> <lombok.version>1.18.12</lombok.version> <log4j.version>1.2.17</log4j.version> <slf4j.version>1.7.30</slf4j.version> </properties> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> <exclusions> <exclusion> <artifactId>logback-classic</artifactId> <groupId>ch.qos.logback</groupId> </exclusion> </exclusions> </dependency> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <version>${lombok.version}</version> <scope>provided</scope> </dependency> <dependency> <groupId>org.slf4j</groupId> <artifactId>slf4j-log4j12</artifactId> <version>${slf4j.version}</version> </dependency> <dependency> <groupId>log4j</groupId> <artifactId>log4j</artifactId> <version>${log4j.version}</version> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build> </project> 班级 @Slf4j @SpringBootApplication public class LoggerApplication { public static void main(String[] args) { log.info("++++++++++++++++++++++++TEST+++++++++++++++++++++++++++++"); SpringApplication.run(LoggerApplication.class, args); } } 应用程序.属性 logging.config=classpath:log4j.properties log4j.properties log4j.rootLogger=INFO, console log4j.appender.console=org.apache.log4j.ConsoleAppender log4j.appender.console.Target=System.out log4j.appender.console.layout=org.apache.log4j.PatternLayout log4j.appender.console.layout.conversionPattern=%d{yyyy-MM-dd HH:mm:ss,SSS} %-5p - %m%n 我尝试寻找解决方案，查看论坛上的类似主题，尝试各种排除依赖项的选项。线程“main”中的异常 java.lang.ClassCastException：类 org.apache.logging.slf4j.SLF4JLoggerContext 无法转换为类 org.apache.logging.log4j.core.LoggerContext （org.apache.logging.slf4j.SLF4JLoggerContext 和 org.apache.logging.log4j.core.LoggerContext 位于未命名模块中加载器“应用程序”）位于我还尝试排除一些依赖项 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> <exclusions> <exclusion> <artifactId>logback-classic</artifactId> <groupId>ch.qos.logback</groupId> </exclusion> <exclusion> <groupId>log4j</groupId> <artifactId>*</artifactId> </exclusion> <exclusion> <groupId>org.slf4j</groupId> <artifactId>*</artifactId> </exclusion> <exclusion> <groupId>org.apache.logging.log4j</groupId> <artifactId>*</artifactId> </exclusion> </exclusions> </dependency> 但又出现错误，但现在无法再格式化日志了。 2021-01-13 19:12:15,881 信息 - ++++++++++++++++++++++++测试+++++++++++++++++++++++++++++++ 错误 StatusLogger 无法识别的格式说明符 [d] 错误 StatusLogger 无法识别的转换说明符 [d] 从转换模式中的位置 16 开始。错误 StatusLogger 无法识别的格式说明符 [线程] 错误 StatusLogger 无法识别的转换说明符 [线程] 从转换模式中的位置 25 开始。错误 StatusLogger 无法识别的格式说明符 [级别] 错误 StatusLogger 无法识别的转换说明符 [level] 从转换模式中的位置 35 开始。 ... 错误 StatusLogger 无法识别的格式说明符 [n] 错误 StatusLogger 无法识别的转换说明符 [n] 从转换模式中的位置 56 开始。警告：不支持 sun.reflect.Reflection.getCallerClass。这会影响性能。任何人都可以有任何想法如何解决它吗？我找到了解决这个问题的方法。事实证明，问题出在其中一个私有库（elastik 的附加程序）的冲突上。我执行了命令： mvn dependency:tree 然后找到传递依赖项，并将它们排除在所有类的路径上，以排除日志记录所需的库冲突。 pom.xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> <exclusions> <exclusion> <artifactId>logback-classic</artifactId> <groupId>ch.qos.logback</groupId> </exclusion> <exclusion> <artifactId>log4j-to-slf4j</artifactId> <groupId>org.apache.logging.log4j</groupId> </exclusion> </exclusions> </dependency> <dependency> <artifactId>springfox-boot-starter</artifactId> <groupId>io.springfox</groupId> <version>3.0.0</version> <exclusions> <exclusion> <groupId>org.slf4j</groupId> <artifactId>slf4j-api</artifactId> </exclusion> </exclusions> </dependency> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <version>${lombok.version}</version> <scope>provided</scope> </dependency> <dependency> <groupId>log4j</groupId> <artifactId>log4j</artifactId> <version>${log4j.version}</version> </dependency> <dependency> <groupId>org.apache.logging.log4j</groupId> <artifactId>log4j-core</artifactId> <version>${version.log4j.core}</version> </dependency> <dependency> <groupId>org.slf4j</groupId> <artifactId>slf4j-log4j12</artifactId> <version>${slf4j.version}</version> </dependency>

嵌套 useFetch 导致 Nuxt 3 中的 Hydration 节点不匹配

在 Nuxt 3 页面内，我通过从 pinia 存储调用操作来获取帖子数据： {{ 发布数据 }} {{ 帖子内容... 在 Nuxt 3 页面内，我通过从 pinia 商店调用操作来获取帖子数据： <template> <div v-if="postData && postContent"> {{ postData }} {{ postContent }} </div> </template> <script setup> const config = useRuntimeConfig() const route = useRoute() const slug = route.params.slug const url = config.public.wpApiUrl const contentStore = useContentStore() await contentStore.fetchPostData({ url, slug }) const postData = contentStore.postData const postContent = contentStore.postContent </script> 那是我的商店： import { defineStore } from 'pinia' export const useContentStore = defineStore('content',{ state: () => ({ postData: null, postContent: null }), actions: { async fetchPostData({ url, slug }) { try { const { data: postData, error } = await useFetch(`${url}/wp/v2/posts`, { query: { slug: slug }, transform(data) { return data.map((post) => ({ id: post.id, title: post.title.rendered, content: post.content.rendered, excerpt: post.excerpt.rendered, date: post.date, slug: post.slug, })); } }) this.postData = postData.value; if (postData && postData.value && postData.value.length && postData.value[0].id) { const {data: postContent} = await useFetch(`${url}/rl/v1/get?id=${postData.value[0].id}`, { method: 'POST', }); this.postContent = postContent.value; } } catch (error) { console.error('Error fetching post data:', error) } } } }); 浏览器中的输出正常，但我在浏览器控制台中收到以下错误： entry.js:54 [Vue warn]: Hydration node mismatch: - rendered on server:  - expected on client: div at <[slug] onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > at <Anonymous key="/news/hello-world()" vnode= {__v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, …} route= {fullPath: '/news/hello-world', hash: '', query: {…}, name: 'news-slug', path: '/news/hello-world', …} ... > at <RouterView name=undefined route=undefined > at <NuxtPage> at <Default ref=Ref< undefined > > at <LayoutLoader key="default" layoutProps= {ref: RefImpl} name="default" > at <NuxtLayoutProvider layoutProps= {ref: RefImpl} key="default" name="default" ... > at <NuxtLayout> at <App key=3 > at <NuxtRoot> 如何解决这个问题？我尝试在 onMounted 中获取帖子数据，但在这种情况下 postData 和 postContent 保持为空 onMounted(async () => { await contentStore.fetchPostData({ url, slug }) }) 您可以使用 ClientOnly 组件来消除该警告。请参阅文档了解更多信息。该组件仅在客户端渲染其插槽。

Pinia 对象在 Vue 中的 foreach 后失去反应性

我有这个嵌套的foreach BalanceItemList.vue ... 我有这个嵌套的 foreach BalanceItemList.vue <template> <div v-for="category in categoryItemsStore.balanceCategories" :key="category.id" class="mt-5"> <div class="border-black border-b bg-gray-200"> <span class="font-bold w-full">{{ category.name }}</span> </div> <div v-for="balanceItem in category.balance_items" :key="balanceItem.id"> {{ balanceItem.total = 500 }} <balance-item :balance-item="balanceItem" @update-balance-item="update"/> </div> <div> <balance-item-create :category="category.id" @create-balance-item="update"/> </div> <div v-if="categoryItemsStore.totals[category.id]" class="grid grid-cols-4-b t-2 ml-2"> <div :class="category.is_positive ? '': 'text-red-600' " class="col-start-4 border-t-2 border-black font-bold"> €{{ categoryItemsStore.totals[category.id].total }} </div> </div> </div> </template> 我像这样检查了“balanceItem”的反应性 {{ balanceItem.total = 500 }} 它在商店中更新，但随后我有了我的平衡项目组件： BalanceItem.vue <script setup> import {reactive} from "vue"; import {useForm} from "@inertiajs/vue3"; import NumberInput from "@/Components/NumberInput.vue"; import {UseCategoryItemsStore} from "@/Stores/UseCategoryItemsStore.js"; const categoryItemStore = UseCategoryItemsStore() const props = defineProps({balanceItem: Object, errors: Object}) let item = reactive(props.balanceItem); const form = useForm(item); const emit = defineEmits(['update-balance-item']) const submit = () => { form.post(route('balance-item.update'), { preserveScroll: true, onSuccess: () => { props.balanceItem.total = 500 categoryItemStore.updateBalanceItemsTotals(form) emit('update-balance-item') } }) } </script> <template> <form @submit.prevent="submit"> <div class="grid grid-cols-4-b"> <span>{{ item.name }}</span> <NumberInput v-model="form.count" autofocus class=" mr-4 mt-1 block" type="number" @update:model-value="submit" /> <div :class="item.item_category.is_positive ? '' : 'text-red-600'" class="flex place-items-center"> <div class="pt-1 mr-1">€</div> <NumberInput v-model="form.amount" :class="form.errors.amount ? 'border-red-600' : ''" autofocus class="mt-1 mr-4 w-5/6" type="text" @update:model-value="submit" /> </div> <div :class="item.item_category.is_positive ? '' : 'text-red-600'" class="flex place-items-center"> <div class="pt-1 mr-1 w-5/6">€</div> <NumberInput v-model="form.total" autofocus class="mt-1 block" disabled style="max-width: 95%" type="text" /> </div> </div> </form> </template> 这是我测试反应性的商店。如果我增加输入的数字，则项目的计数保持不变 UseCategoryItemsStore.js import {defineStore} from "pinia"; import {ref} from "vue"; export const UseCategoryItemsStore = defineStore('UseCategoryItemsStore', () => { const balanceCategories = ref([]) const totals = ref([]) function getBalanceItems() { axios.get(route('balance-item.index')).then((response) => { balanceCategories.value = response.data // console.log(balanceCategories.value) }) } function getTotals() { axios.get(route('balance-item.totals')).then((response) => totals.value = response.data) } function getData() { getTotals() getBalanceItems() } function updateBalanceItemsTotals(selectedItem) { balanceCategories.value.forEach((category) => { category.balance_items.forEach((item) => { if (item.id === selectedItem.id) { // item.total = item.count * item.amount console.log(item) } }) }) } getTotals() getBalanceItems() return {balanceCategories, totals, getBalanceItems, getTotals, getData, updateBalanceItemsTotals} }) 在此测试中，我执行“props.balanceItem.total = 500”。但如果我检查商店，它不会更新。看来将“balanceItem”分配给一个道具会失去与我的 Pinia 商店的反应性。我可以使用“form.total = form.count * form.amount”手动更新我的表单，但这对我来说似乎很老套，我想使用 Pinia 商店的反应性。我考虑过根据“BalanceItem”获取 Pina 项目，但这似乎也很棘手。谁知道为什么失去反应性？我有laravel 10.39、vue3.2.41和pinia 2.1.17惯性0.6.11。到目前为止我知道的所有最新版本。我像这样更新我的表格和商店： <script setup> import {useForm} from "@inertiajs/vue3"; import NumberInput from "@/Components/NumberInput.vue"; import {UseCategoryItemsStore} from "@/Stores/UseCategoryItemsStore.js"; const categoryItemStore = UseCategoryItemsStore() const props = defineProps({balanceItem: Object, errors: Object}) let item = categoryItemStore.getItemById(props.balanceItem); let form = useForm(item); const emit = defineEmits(['update-balance-item']) const submit = () => { form.post(route('balance-item.update'), { preserveScroll: true, onSuccess: () => { item = categoryItemStore.updateItem(form) form = useForm(item) emit('update-balance-item') } }) } </script> 我将此功能添加到我的商店： import {defineStore} from "pinia"; import {ref} from "vue"; export const UseCategoryItemsStore = defineStore('UseCategoryItemsStore', () => { const balanceCategories = ref([]) const totals = ref([]) function getBalanceItems() { axios.get(route('balance-item.index')).then((response) => { balanceCategories.value = response.data // console.log(balanceCategories.value) }) } function getItemById(item) { let category = balanceCategories.value.find((category) => { return category.id === item.item_category_id }) return category.balance_items.find((item_from_store) => { return item_from_store.id === item.id }) } function updateItem(form) { const item = getItemById(form) item.count = form.count item.amount = form.amount item.total = item.count * item.amount return item } function getTotals() { axios.get(route('balance-item.totals')).then((response) => totals.value = response.data) } function getData() { getTotals() getBalanceItems() } getTotals() getBalanceItems() return {balanceCategories, totals, getBalanceItems, getTotals, getData, getItemById, updateItem} }) 假设如果帖子获得 200，我的表单值可用于更新商店和更新表单。这是我能想到的最好的

为什么每次我尝试将应用程序从 Anypoint Studio 部署到 CloudHub 时，我的 pom.xml 文件都会更新？

我的 pom.xml 文件中有以下部分用于我正在执行的虚拟项目： org.mule.tools.maven mule-maven-插件我正在做的一个虚拟项目的 pom.xml 文件中有以下部分： <plugin> <groupId>org.mule.tools.maven</groupId> <artifactId>mule-maven-plugin</artifactId> <version>${mule.maven.plugin.version}</version> <extensions>true</extensions> <configuration> <classifier>mule-application</classifier> </configuration> </plugin> 每当我尝试直接从 Studio 将应用程序部署到 CloudHub 时，上面的部分就会更改为以下部分： <plugin> <groupId>org.mule.tools.maven</groupId> <artifactId>mule-maven-plugin</artifactId> <version>${mule.maven.plugin.version}</version> <extensions>true</extensions> <configuration> <classifier>---- select project type ----</classifier> </configuration> </plugin> 然后部署失败并出现以下错误： Publication status: error [INFO] ------------------------------------------------------------ [INFO] Steps: [INFO] - Description: Publishing asset [INFO] - Status: error [INFO] - Errors: [The asset is invalid, Error while trying to set type: app. Expected type is: rest-api.] [INFO] ......................................... [INFO] ------------------------------------------------------------------------ [INFO] BUILD FAILURE [INFO] ------------------------------------------------------------------------ [INFO] Total time: 02:33 min [INFO] Finished at: 2024-01-08T14:11:31+05:30 [INFO] ------------------------------------------------------------------------ [ERROR] Failed to execute goal org.mule.tools.maven:exchange-mule-maven-plugin:0.0.17:exchange-deploy (default-exchange-deploy) on project super-biodata-sapi: Exchange publication failed: Publication ended with errors: [The asset is invalid, Error while trying to set type: app. Expected type is: rest-api.] -> [Help 1] 这可能是什么原因？以下是一些细节： Anypoint Studio版本：7.16.0 Maven版本：3.8.8 Mule 运行时版本：4.4.0 Mule Maven 插件版本：3.8.0/4.0.0（两者都尝试过） Java版本：OpenJDK 11.0.9 我以前使用过 Anypoint Studio 7.15，在那里完全相同的项目没有任何问题。但更新后，我遇到了很多问题。我还尝试使用“rest-api”而不是“mule-application”。然后，首先在部署开始时，“rest-api”更改为“mule-application”，然后再次更改为“----选择项目类型----”，最后失败。我怀疑存在混乱。您提到您正在尝试将 Mule 4 应用程序部署到 CloudHub，但对资产的引用和错误消息与将资产发布到 Any point Exchange 相关。 CloudHub是一个部署和执行Mule应用程序的云平台。 Anypoint Exchange 是资产存储库，包括 REST API 的定义，但不包括 Mule 4 应用程序，也不用于执行任何操作。有关有效资产的详细信息，请参阅文档。由于 mule-application 不是发布到 Exchange 的有效资产类型（对于 Mule 4），那么 Studio 似乎试图让您更改为有效的资产类型。如果您尝试部署到 CloudHub，请参阅文档了解不同的方法。

Tailwind 和 CSS 动画环偏移缩小

<div class="flex flex-col items-center justify-center rounded-xl bg-[#101638] px-5 pb-8 pt-7"> <div class="relative mb-5 cursor-pointer"> <img class="mx-auto max-w-[90px] rounded-full p-1 ring ring-offset-8 ring-offset-[#101638] hover:ring-offset-0 ring-[#133e8d] md:max-w-[114px]" src="/images/Avatar1.png" alt="Bordered avatar"> <div class="absolute bottom-1 right-2 rounded-full bg-blue-600 px-2 py-1 ring-4 ring-[#0d1129]"> <svg class="svg-inline--fa fa-message-dots text-white" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="message-dots" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path class="" fill="currentColor" d="M0 64C0 28.7 28.7 0 64 0H448c35.3 0 64 28.7 64 64V352c0 35.3-28.7 64-64 64H309.3L185.6 508.8c-4.8 3.6-11.3 4.2-16.8 1.5s-8.8-8.2-8.8-14.3V416H64c-35.3 0-64-28.7-64-64V64zM128 240a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm128 0a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm160-32a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"></path> </svg> </div> </div> <div> <h1 class="font-bold">First Name</h1> </div> <div> <h1>Name</h1> </div> <div> <h1 class="text-[#636da8]">Project Mngr</h1> </div> </div> 如何为任何 css/tailwind 解决方案的偏移环的过渡设置动画？例如，这 2 个缩略图，左边的缩略图悬停在其上，右边的缩略图是初始状态。我希望它在缩略图悬停时有一个缩小的动画，而不是我当前的动画，因为它非常突然您可以考虑应用包含 transition-property 的 box-shadow CSS 值，例如 transition 或 transition-all Tailwind 类，以及非 0 transition-duration，上述类名也设置了： <script src="https://cdn.tailwindcss.com/3.4.1"></script> <div class="flex flex-col items-center justify-center rounded-xl bg-[#101638] px-5 pb-8 pt-7"> <div class="relative mb-5 cursor-pointer"> <img class="mx-auto max-w-[90px] rounded-full p-1 ring ring-offset-8 ring-offset-[#101638] hover:ring-offset-0 ring-[#133e8d] md:max-w-[114px] transition" src="https://picsum.photos/90/90" alt="Bordered avatar"> <div class="absolute bottom-1 right-2 rounded-full bg-blue-600 px-2 py-1 ring-4 ring-[#0d1129]"> <svg class="svg-inline--fa fa-message-dots text-white" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="message-dots" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path class="" fill="currentColor" d="M0 64C0 28.7 28.7 0 64 0H448c35.3 0 64 28.7 64 64V352c0 35.3-28.7 64-64 64H309.3L185.6 508.8c-4.8 3.6-11.3 4.2-16.8 1.5s-8.8-8.2-8.8-14.3V416H64c-35.3 0-64-28.7-64-64V64zM128 240a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm128 0a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm160-32a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"></path> </svg> </div> </div> <div> <h1 class="font-bold">First Name</h1> </div> <div> <h1>Name</h1> </div> <div> <h1 class="text-[#636da8]">Project Mngr</h1> </div> </div> 否则，您可以考虑通过 transition-property: box-shadow Tailwind 类应用 transition-duration: 150ms; 和 transition-[box-shadow]（以及其他属性）以仅转换 box-shadow： <script src="https://cdn.tailwindcss.com/3.4.1"></script> <div class="flex flex-col items-center justify-center rounded-xl bg-[#101638] px-5 pb-8 pt-7"> <div class="relative mb-5 cursor-pointer"> <img class="mx-auto max-w-[90px] rounded-full p-1 ring ring-offset-8 ring-offset-[#101638] hover:ring-offset-0 ring-[#133e8d] md:max-w-[114px] transition-[box-shadow]" src="https://picsum.photos/90/90" alt="Bordered avatar"> <div class="absolute bottom-1 right-2 rounded-full bg-blue-600 px-2 py-1 ring-4 ring-[#0d1129]"> <svg class="svg-inline--fa fa-message-dots text-white" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="message-dots" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path class="" fill="currentColor" d="M0 64C0 28.7 28.7 0 64 0H448c35.3 0 64 28.7 64 64V352c0 35.3-28.7 64-64 64H309.3L185.6 508.8c-4.8 3.6-11.3 4.2-16.8 1.5s-8.8-8.2-8.8-14.3V416H64c-35.3 0-64-28.7-64-64V64zM128 240a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm128 0a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm160-32a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"></path> </svg> </div> </div> <div> <h1 class="font-bold">First Name</h1> </div> <div> <h1>Name</h1> </div> <div> <h1 class="text-[#636da8]">Project Mngr</h1> </div> </div>

.NET MAUI、ios UseSafeArea 不工作 StackLayout、VerticalStackLayout 和 Grid

<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Test.Views.Activities.ActivityMapList" xmlns:maps="clr-namespace:Microsoft.Maui.Controls.Maps;assembly=Microsoft.Maui.Controls.Maps" xmlns:sensors="clr-namespace:Microsoft.Maui.Devices.Sensors;assembly=Microsoft.Maui.Essentials" xmlns:ios="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls" ios:Page.UseSafeArea="False" Shell.NavBarIsVisible="False" Style="{StaticResource Key=DefaultPage}"> <ContentPage.Content> <StackLayout> <maps:Map VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"> <x:Arguments> <MapSpan> <x:Arguments> <sensors:Location> <x:Arguments> <x:Double>36.9628066</x:Double> <x:Double>-122.0194722</x:Double> </x:Arguments> </sensors:Location> <x:Double>0.01</x:Double> <x:Double>0.01</x:Double> </x:Arguments> </MapSpan> </x:Arguments> </maps:Map> </StackLayout> </ContentPage.Content> </ContentPage> StackLayout 或 Grid 内的地图控件，iOS 的 SafeArea 为 false，如图所示。你有什么解决办法吗？我需要在地图上使用网格或堆栈布局默认情况下.NET MAUI 将考虑安全区域。所以使用特定于平台的UseSafeArea就是禁用安全区域。目前，将 UseSafeArea 设置为 false 不会改变行为（尽管应该如此），这是一个错误。另请参阅 MAUI github 上的问题：https://github.com/dotnet/maui/issues/5856 您还可以设置 IgnoreSafeArea 属性来实现相同的目的。但是，它不再在 .NET 7 中工作，请参阅以下问题：https://github.com/dotnet/maui/issues/12823 要解决您的问题，您需要将 IgnoreSafeArea="True" 添加到您的 Grid 或 StackLayout 并将 ios:Page.UseSafeArea="False" 添加到您的页面。这应该不是必需的，但这是对我有用的解决方法。有关在 iOS 上禁用安全区域的文档可以在此处找到：https://learn.microsoft.com/en-us/dotnet/maui/ios/platform-specifics/page-safe-area-layout?view=net-毛伊岛-7.0 您可以设置 Page Padding 值来实现。在OnAppearing方法中，设置页面的safeInsets，如下代码： protected override void OnAppearing() { base.OnAppearing(); DeviceSafeInsetsService d = new DeviceSafeInsetsService(); double topArea = d.GetSafeAreaTop(); double bottomArea = d.GetSafeAreaBottom(); var safeInsets = On<iOS>().SafeAreaInsets(); safeInsets.Top = -topArea; safeInsets.Bottom = -bottomArea; Padding = safeInsets; } 要获取 topArea 和 bottomArea 值，您应该编写平台代码。答案末尾附有有关此内容的更详细教程。首先你可以在Project文件夹中生成一个新的类文件并将其更改为部分类。生成两个部分方法。 public partial class DeviceSafeInsetsService { public partial double GetSafeAreaTop(); public partial double GetSafeAreaBottom(); } 然后在iOS平台生成部分文件并实现。该文件位于 Project/Platform/iOS 文件夹中，我想提一下的是，该文件是一个部分文件，因此命名空间应与上面的文件相同。生成此文件时，请删除命名空间中的 .Platforms.iOS 后缀。 public partial class DeviceSafeInsetsService { public partial double GetSafeAreaBottom() { if (UIDevice.CurrentDevice.CheckSystemVersion(11, 0)) { UIWindow window = UIApplication.SharedApplication.Delegate.GetWindow(); var bottomPadding = window.SafeAreaInsets.Bottom; return bottomPadding; } return 0; } public partial double GetSafeAreaTop() { if (UIDevice.CurrentDevice.CheckSystemVersion(11, 0)) { UIWindow window = UIApplication.SharedApplication.Delegate.GetWindow(); var TopPadding = window.SafeAreaInsets.Top; return TopPadding; } return 0; } } 更多信息，您可以参考如何在.NET MAUI中编写特定于平台的代码和MauiPlatformCode示例代码希望它对你有用。

如何将 Div 布局转换为基于 CSS 样式的 HTML 表格？

我正在开发一个项目，需要使用、、、和将使用元素设计的复杂布局转换为 HTML 表格我正在开发一个项目，需要将使用 <div> 元素设计的复杂布局转换为使用 <table>、<tr>、<td>、<colspan> 和 <rowspan> 标签的 HTML 表格。布局当前使用 CSS 进行样式设置，我希望在将其转换为表格格式时保留相同的结构和外观。输入：我有一系列 <div> 元素，以表格格式表示标题和数据单元格。每个 <div> 都有多个类属性，对应于定义其位置和大小的特定 CSS 样式。这是当前基于 div 的布局的片段： <div class="c x1b y41 wf h14">Project</div> <div class="c x20 y43 w10 h6">2023</div> <div class="c x21 y43 w11 h6">2022</div> <div class="c x23 y43 w12 h6">2021</div> <div class="c x1e y43 w13 h6">2020</div> <div class="c x20 y41 w14 h9">Amount</div> <div class="c x26 y41 w15 h9">Ratio</div> <div class="c x21 y41 w16 h9">Amount</div> <div class="c x28 y41 w17 h9">Ratio</div> <div class="c x23 y41 w18 h9">Amount</div> <div class="c x29 y41 w19 h9">Ratio</div> <div class="c x1e y41 w1a h9">Amount</div> <div class="c x2a y41 w1b h9">Ratio</div> <div class="c x1b y44 wf h6">Income</div> <div class="c x20 y44 w14 h6">9.6</div> <div class="c x26 y44 w15 h6">100.00</div> <div class="c x21 y44 w16 h6">377.78</div> <div class="c x28 y44 w17 h6">100.00</div> <div class="c x23 y44 w18 h6">293.47</div> <div class="c x29 y44 w19 h6">100.00</div> <div class="c x1e y44 w1a h6">210.66</div> <div class="c x2a y44 w1b h6">100.00</div> CSS 样式：布局由这些 CSS 样式控制，它们规定了 div 的尺寸和位置： .h14 {height: 41.215200px;} .h6 {height: 20.280000px;} .h9 {height: 20.311200px;} .w10 {width: 116.095200px;} .w11 {width: 116.251200px;} .w12 {width: 116.376000px;} .w13 {width: 122.959200px;} .w14 {width: 55.099200px;} .w15 {width: 60.216000px;} .w16 {width: 58.188000px;} .w17 {width: 57.283200px;} .w18 {width: 61.152000px;} .w19 {width: 54.600000px;} .w1a {width: 61.963200px;} .w1b {width: 60.372000px;} .wf {width: 73.008000px;} .x1b {left: 112.450000px;} .x1e {left: 537.830800px;} .x20 {left: 186.914000px;} .x21 {left: 303.641000px;} .x23 {left: 420.511000px;} .x26 {left: 242.801000px;} .x28 {left: 362.609000px;} .x29 {left: 482.287000px;} .x2a {left: 600.262000px;} .y41 {bottom: 490.373000px;} .y43 {bottom: 511.303000px;} .y44 {bottom: 469.313000px;} 预期结果：我想将此布局转换为 HTML 表格。预期的表结构应类似于以下内容： <table border="1"> <tr> <td rowspan="2">Project</td> <td colspan="2">2023</td> <td colspan="2">2022</td> <td colspan="2">2021</td> <td colspan="2">2020</td> </tr> <tr> <td>Amount</td> <td>Ratio</td> <td>Amount</td> <td>Ratio</td> <td>Amount</td> <td>Ratio</td> <td>Amount</td> <td>Ratio</td> </tr> <tr> <td>Income</td> <td>9.6</div></td> <td>100.00</td> <td>377.78</td> <td>100.00</td> <td>293.47</td> <td>100.00</td> <td>210.66</td> <td>100.00</td> </tr> </table> 尝试：我尝试了多种方法来解析 div 并应用它们的样式来创建表格，但没有一种方法有效。我已经尝试使用 JavaScript 动态读取 CSS 属性并将它们作为属性应用到表格单元格，但我在维护布局完整性方面遇到了问题，尤其是在跨越行和列时。问题：任何人都可以提供有关如何考虑 CSS 样式以编程方式将这种基于 div 的布局转换为 HTML 表格的指导或解决方案吗？如果您能帮助解析 CSS 以定义表中适当的 <colspan> 和 <rowspan> 值，我们将不胜感激。如果您只想让它看起来像表格而不是语义。您可以尝试使用网格和固定数量的列来执行此操作，例如使用grid-template-columns: repeat(10, 1fr)。

ESLint：解析错误：意外的标记：

大家好我正在将我的 vue3 项目从 js 迁移到 typescript，我遇到了这个问题：这是我在 .vue 文件中的代码 const toto = (msg: string) => { </desc> <question vote="7"> <p>大家好，我正在将我的 vue3 项目从 js 迁移到 typescript，我遇到了这个问题：</p> <p><a href="https://i.stack.imgur.com/y5tG8.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL3k1dEc4LnBuZw==" alt=""/></a></p> <p>这是我在 .vue 文件中的代码</p> <pre><code><script setup lang="ts"> const toto = (msg: string) => { console.log(msg) } </script> </code></pre> <p>这是我的 eslintrc.js</p> <pre><code>module.exports = { 'env': { 'browser': true, 'es2021': true }, 'extends': [ 'eslint:recommended', 'plugin:vue/vue3-essential' ], 'parserOptions': { 'ecmaVersion': 13, 'sourceType': 'module' }, 'plugins': [ 'vue' ], 'rules': { 'vue/multi-word-component-names': 'off', 'vue/object-curly-spacing': [2, 'always'], 'vue/html-closing-bracket-spacing': [2, { 'selfClosingTag': 'always' }], 'vue/max-attributes-per-line': [2, { 'singleline': { 'max': 1 }, 'multiline': { 'max': 1 } }], 'semi': [2, 'never'] } } </code></pre> </question> <answer tick="true" vote="10"> <p>您需要配置 eslint 以支持 typescript，因为 eslint 不支持开箱即用。首先，您需要安装<a href="https://www.npmjs.com/package/@typescript-eslint/parser" rel="nofollow noreferrer">@typescript-eslint/parser</a>，然后安装<a href="https://www.npmjs.com/package/@typescript-eslint/eslint-plugin" rel="nofollow noreferrer">@typescript-eslint/eslint-plugin</a>。安装完这些后，请按如下方式更新您的配置 - </p> <pre><code>module.exports = { 'env': { 'browser': true, 'es2021': true, node: true }, 'extends': [ 'eslint:recommended', 'plugin:vue/vue3-essential' ], 'parserOptions': { 'ecmaVersion': 12, 'sourceType': 'module', parser: '@typescript-eslint/parser' }, 'plugins': [ 'vue', '@typescript-eslint' ], 'rules': { 'vue/multi-word-component-names': 'off', 'vue/object-curly-spacing': [2, 'always'], 'vue/html-closing-bracket-spacing': [2, { 'selfClosingTag': 'always' }], 'vue/max-attributes-per-line': [2, { 'singleline': { 'max': 1 }, 'multiline': { 'max': 1 } }], 'semi': [2, 'never'] } } </code></pre> </answer> <answer tick="false" vote="1"> <p>就我而言，问题是我使用解析器选项作为数组，而不是字符串：</p> <pre><code> parserOptions: { - parser: ['@typescript-eslint/parser'], + parser: '@typescript-eslint/parser', }, </code></pre> </answer> <answer tick="false" vote="0"> <p>如果你在项目中同时使用 JS 和 TS，此配置有帮助</p> <pre><code> overrides: [ { files: ['*.vue'], parser: 'svelte-eslint-parser', parserOptions: { parser: { // Specify a parser for each lang. ts: '@typescript-eslint/parser', js: 'espree', typescript: '@typescript-eslint/parser' } } } ], </code></pre> </answer> <answer tick="false" vote="-1"> <p>我在节点 v12.22.9 上遇到了这个问题。通过升级到 v14.21.2，我不再遇到解析错误。您可以使用命令升级/安装</p> <pre><code>nvm install v14.21.2 </code></pre> </answer> </body></html>

为什么springinitializr让项目继承spring-boot-starter-parent而不是使用spring-boot-dependency

当使用 spring initalizr 创建项目时，pom.xml 继承自 spring-boot-starter-parent：当使用 spring initalizr 创建项目时，pom.xml继承自spring-boot-starter-parent: <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>3.1.3</version> <relativePath/>  </parent> <groupId>com.example</groupId> <artifactId>demo</artifactId> <version>0.0.1-SNAPSHOT</version> <name>demo</name> 与在spring-boot-dependencies中指定<dependencyManagement/>相比，这似乎不太灵活，因为如果我们需要使用生成的结构作为多模块项目的子模块，或者使用公司范围的父模块，我们需要将BOM移动到提到的部分： <dependencyManagement> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-dependencies</artifactId> <version>${spring-boot.version}</version> <type>pom</type> <scope>import</scope> </dependency> </dependencies> </dependencyManagement> 使用 spring-boot-starter-parent 作为父级而不是在创建时立即声明 <dependencyManagement/> 部分是否有任何具体原因？有人投票决定关闭问题，坚称这是基于意见的，但事实并非如此。插件配置的存在（顺便说一句，乍一看这些配置的目的是为了修复maven插件的一些“小故障”，但是，其中一些配置不再需要了，例如：https://github.com/maven-plugin）。 com/JetBrains/kotlin/pull/1501）并不是以下之间的唯一区别： <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>3.1.3</version> <relativePath/>  </parent> 和 <dependencyManagement> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-dependencies</artifactId> <version>${spring-boot.version}</version> <type>pom</type> <scope>import</scope> </dependency> </dependencies> </dependencyManagement> 在第一种情况下，maven 项目通过父子关系继承 dependencyManagement，因此，由于 spring-boot 团队通过 properties 部分定义依赖项版本，子项目也可以通过 properties 部分覆盖依赖项版本，例如如果我们的目标是更改 spring-framework 的版本而不更改 spring-boot 的版本，我们可以定义如下内容： <properties> <spring-framework.version>6.0.15</spring-framework.version> </properties> 这显然在第二个配置的情况下不起作用 - maven 只是从 independentBoM 导入 dependencyManagement 部分。尚不清楚哪种方法“更灵活”（我们更愿意同时避开这两种方法），但是它们与依赖管理的角度也不同。

在具有 Open Liberty Dev 模式的 Maven 项目中使用本地库

我有一个 Maven 项目，它构建了一个部署到 Open Liberty 的战争。我正在使用 Liberty maven 插件： io.openliberty.tools 我有一个 Maven 项目，它构建了一个部署到 Open Liberty 的战争。我正在使用 Liberty maven 插件： <plugin> <groupId>io.openliberty.tools</groupId> <artifactId>liberty-maven-plugin</artifactId> <version>3.9</version>  </plugin> 我正在利用开发模式并且它运行良好。但是，我想在 Dev 模式下使用本地 jar 文件库。我期望我能够将 jar 文件放置在项目中的特定位置，并且 Liberty 开发模式会自动拾取它们 - 类似于自动拾取 server.xml 的方式src/main/liberty/config。我的 server.xml 设置为在此处查找库：${shared.config.dir}/lib/global，因此我尝试将罐子放入 src/main/liberty/shared/config/lib/global 中，但这不起作用。我看到的另一种选择是使用 Libity 插件的 copyDependencies 配置。有一些推荐的方法可以实现我想做的事情吗？理想情况下，我想要最简单的解决方案，既适用于 liberty dev 模式，也适用于 vanilla maven 构建 (mvn package)。这里的类似问题利用了 copyDependencies 配置，但具体来说，我正在寻找本地 jar 的最佳解决方案（是的，我可以使用系统范围的 Maven 坐标或在本地安装 jar）如何在 Maven 构建期间将外部依赖项复制到 Open Liberty 谢谢好问题，稍微概括一下问题，您可能可以使用三种方法： 1.使用资源插件 <build> <resources>  <resource> <directory>${project.basedir}/src/main/resources</directory> </resource>  <resource> <directory>${project.basedir}/mylib</directory> <targetPath>${project.build.directory}/liberty/wlp/usr/shared/lib/global</targetPath>  <filtering>false</filtering> </resource> </resources> 由于开发模式在其“生命周期”中调用 resources:resources 目标，因此可以在没有任何插件配置的情况下进行配置（使用“/project/build/resources”（在 XPath 术语中）元素），并使用您的 <targetPath>可以复制到任何位置。 2.添加到config目录（src/main/liberty/config）除了src/main/liberty/config/server.xml处的主服务器XML配置文件之外，您还可以将其他文件和目录放在那里，所有文件和目录都将通过开发模式复制过来。所以你可以创建，例如src/main/liberty/config/mylib/my.jar，它会被复制到target/liberty/wlp/usr/servers/defaultServer/mylib/my.jar。然后，您可以从 server.xml 将此位置引用为相对于服务器配置目录的 "mylib/my.jar"。（这不太适合要求复制到“.../shared/lib/global”的原始用例，但可能适合其他查看此问题的人）。 3.添加系统范围的依赖项这在原来的问题中已经提到过。我不太喜欢这个解决方案。为了完整起见，我会提及它，但请您自行查找详细信息。这可能会很有趣。

用 Bootsrap 制作的网站右侧的空间不会消失吗？

无论我做什么，我用 Bootsrap 制作的网站右侧的空白都没有消失。如果有解决办法请告诉我无论我做什么，我用 Bootsrap 制作的网站右侧的空白都没有消失。如果有解决办法请告诉我 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Contact | Enba Camping</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> <link rel="stylesheet" href="style/style.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> </head> <body> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>  <div class="container-fluid"> <div class="row"> <div class="col-sm-12 p-0"> <nav class="navbar navbar-expand-lg bg-body-tertiary p-0 "> <div class="container-fluid bg-dark "> <a class="navbar-brand text-light mb-2" href="index.html">Enba Camping</a> <button class="navbar-toggler btn btn-light btn btn-outline-light bg-light m-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon "></span> </button> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="navbar-nav ms-auto"> <a class="nav-link text-light text-center" aria-current="page" href="index.html">Home</a> <a class="nav-link text-light text-center" href="aboutus.html">About us</a> <a class="nav-link active text-light text-center" href="contact.html" aria-disabled="true">Contact</a> </div> </div> </div> </nav> </div> </div> </div>   <div class="container-fluid p-0 bg-dark text-light"> <div class="row"> <div class="col-sm-6 ps-0"> <img src="images/lesly-derksen-F4fH5dAfZnE-unsplash.jpg" alt="" class=" d-block w-100 c-img "> </div> <div class="col-sm-6 d-flex justify-content-center align-items-center "> <div class="text-center"> <h2 class="fw-bold display-4 ">Bize Ulaşın</h2>  <div class="mb-3"> <label for="exampleFormControlInput1" class="form-label">Adınız</label> <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Name"> </div> <div class="mb-3"> <label for="exampleFormControlInput1" class="form-label">Email Adres</label> <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Email Address"> </div> <div class="mb-3"> <label for="exampleFormControlTextarea1" class="form-label">Mesajınız</label> <textarea class="form-control" id="exampleFormControlTextarea1" placeholder="Message" rows="3"></textarea> </div> <div class=" gap-2 d-md-block "> <button class="btn btn-light " type="button">Send</button> </div> </div> </div> </div> </div>   <div class="container mt-sm-5"> <div class="row text-center "> <h1 class="d-flex justify-content-center">Mekanlarımız</h1> <hr> <div class="col-sm-4 mb-2"> <div class="card"> <img src="images/card2.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Orman İçi Karavan Parkı</h5> <p class="card-text">Ormanın içinde konumlanan karavan parkımız, tam anlamıyla bir doğa kaçamağı sunuyor. Ormanın huzurlu atmosferinde kendinizi kaybedin. Karavanınızla konforlu bir konaklama deneyimi yaşayın.</p> <a href="#" class="btn btn-dark">Rezervasyon için tıklayınız </a> </div> </div> </div> <div class="col-sm-4 mb-2"> <div class="card"> <img src="images/card3.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Orman İçi Çadırlı Kamp</h5> <p class="card-text">Orman içi çadırlı kamp alanımız, doğa severler için bir cennet. Gölgeli ağaçlar arasında konumlanan çadırlarımızda, kuş cıvıltıları ve huzur içinde bir konaklama deneyimi sizi bekliyor.</p> <a href="#" class="btn btn-dark">Rezervasyon için tıklayınız</a> </div> </div> </div> <div class="col-sm-4 mb-2"> <div class="card"> <img src="images/card1.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Dağ Evi </h5> <p class="card-text">Dağ evimiz, şehrin gürültüsünden uzak,huzurlu bir konaklama imkanı sunuyor. Ferah odalarımızda dağ manzarasının keyfini çıkarabilir, gölet kenarındaki aktivitelerle vakit geçirebilirsiniz.</p> <a href="#" class="btn btn-dark">Rezervasyon için tıklayınız</a> </div> </div> </div> </div> </div>   <div class="row my-4"> <div class="col-sm-12"> <h1 class="d-flex justify-content-center">Galeri</h1> <hr> </div> <div class="col-sm col-6 mb-1"><img src="images/galeri/hichem-meghachou-7I-Rj_E9ihI-unsplash.jpg" alt="" class="w-100 img-thumbnail"> </div> <div class="col-sm col-6 mb-1"><img src="images/galeri/jimmy-conover-J_XuXX9m0KM-unsplash.jpg" alt="" class="w-100 img-thumbnail"> </div> <div class="col-sm col-6 mb-1"><img src="images/galeri/josh-campbell-UbbjVyibFuc-unsplash.jpg" alt="" class="w-100 img-thumbnail"> </div> <div class="col-sm col-6 mb-1"><img src="images/galeri/shelby-cohron-ESNV6KmLJMg-unsplash.jpg" alt="" class="w-100 img-thumbnail"> </div> <div class="col-sm col-6 mb-1"><img src="images/galeri/tegan-mierle-fDostElVhN8-unsplash.jpg" alt="" class="w-100 img-thumbnail"> </div> <div class="col-sm col-6 mb-1"><img src="images/galeri/toa-heftiba-x9I-6yoXrXE-unsplash.jpg" alt="" class="w-100 img-thumbnail"> </div> </div>   <div class="bg-dark text-light"> <div class="container"> <footer class="pt-5 mt-5 "> <div class="row "> <div class="col-6 col-md-2 mb-3"> <h5>Section</h5> <ul class="nav flex-column "> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Home</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Features</a> </li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Pricing</a> </li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">FAQs</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">About</a> </li> </ul> </div> <div class="col-6 col-md-2 mb-3"> <h5>Section</h5> <ul class="nav flex-column"> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Home</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Features</a> </li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Pricing</a> </li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">FAQs</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">About</a> </li> </ul> </div> <div class="col-6 col-md-2 mb-3"> <h5>Section</h5> <ul class="nav flex-column"> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Home</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Features</a> </li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Pricing</a> </li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">FAQs</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">About</a> </li> </ul> </div> <div class="col-md-5 offset-md-1 mb-3"> <form> <h4> Abone Ol ve Doğanın Güzelliklerini Kaçırma!</h4> <p class="fs-6">Doğanın kucaklayıcı atmosferine adım atmak, huzurla dolu anlar yaşamak ve Enba Camping'in sunduğu özel fırsatları kaçırmamak için hemen abone ol! Sitemize abone olarak, doğanın gizemli güzellikleri, özel indirimler ve etkinliklerden ilk sen haberdar olacaksın.</p> <p class="fs-6"> Unutulmaz anılar biriktirmek ve doğanın kollarında huzurlu bir deneyim yaşamak için abone ol, Enba Camping'in eşsiz dünyasına adımını at! 🏕️✨ </p> <div class="d-flex flex-column flex-sm-row w-100 gap-2"> <label for="newsletter1" class="visually-hidden">Email address</label> <input id="newsletter1" type="text" class="form-control" placeholder="Email address"> <button class="btn btn-primary" type="button">Subscribe</button> </div> </form> </div> </div> <div class="d-flex flex-column flex-sm-row justify-content-between border-top"> <p>© 2023 Company, Inc. All rights reserved.</p> <ul class="list-unstyled d-flex"> <li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"> <use xlink:href="#twitter"></use> </svg></a></li> <li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"> <use xlink:href="#instagram"></use> </svg></a></li> <li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"> <use xlink:href="#facebook"></use> </svg></a></li> </ul> </div> </footer> </div> </div>  </body> </html> 和CSS .jumb { vertical-align: inherit; } p { font-size: 24px; } .c-item { height: 480px; } .c-img { height: 100%; object-fit: cover; filter:brightness(0.9) } 这里。我不希望页面左右移动。我想让它适合全屏，但容器结构溢出了请将这段代码添加到您的 CSS 文件中。然后，它就会起作用。 .row{ margin-right: 0px; }

project-setup 相关问题

最新问题