import-contacts 相关问题


Mongodb 集合数据在使用 Crow 的网页上显示为空白

我已经部署到铁路和mongodb集合名为contacts添加了josn文件。我希望在网页上显示联系人的数据。然后我通过在 hello 中创建 dockerfile 来添加 mongodb c++ 驱动程序...


未捕获类型错误:Buffer2 未定义

当我将 jsonwebtoken 导入到我的 React 项目中时,出现 Uncaught TypeError: Buffer2 is undefined 。 import jwt from jsonwebtoken 和 import {decode} from 'jsonwebtoken' 都会引发错误。 我正在使用


标识符“ChatFeed”已被声明

从 'react-chat-engine' 导入 { ChatEngine, ChatFeed }; 从 './components/chatFeed' 导入 ChatFeed; 导入'./App.css'; 常量应用程序 = () => { 返回( import { ChatEngine, ChatFeed } from 'react-chat-engine'; import ChatFeed from './components/chatFeed'; import './App.css'; const App = () => { return( <ChatEngine height="100vh" projectID="" userName="" userSecret="" renderChatFeed={(chatAppProps) => <ChatFeed {...chatAppProps} />} /> ); } export default App; 服务器运行时显示错误 SyntaxError: D:\PROJECTS\APPLICATION\chat_app\src\App.js: Identifier 'ChatFeed' has already been declared. (3:7) 1 | import { ChatEngine, ChatFeed } from 'react-chat-engine'; 2 | > 3 | import ChatFeed from './components/chatFeed'; | ^ 好吧,错误消息说明了一切,您声明了 ChatFeed 两次。 您可以通过以下方式修复它: 重命名您的组件,例如 import ChatFeedComponent from './components/chatFeed'; 将命名导入从 react-chat-engine 重命名为 import { ChatEngine, ChatFeed as ChatFeedComp } from 'react-chat-engine'; 当然,随意使用你喜欢的任何名称 错误消息显示您导入 ChatFeed 两次。 您可以修复它,从第一行删除 chatFeed 用这个 从“react-chat-engine”导入{ChatEngine}; 从 './components/ChatFeed' 导入 ChatFeed;


NG8001:“app-welcome”不是已知元素:

我的 Angular 应用程序遇到问题,收到错误 8001。我不知道如何处理它。谁能帮我这个?谢谢你! 应用程序组件.html {{标题}}&l... 我的 Angular 应用程序遇到问题,收到错误 8001。我不知道如何处理它。谁能帮我这个?谢谢! app.component.html <h1>{{ title }}</h1> <p>Congratulations! Your app is running. 🎉</p> <app-welcome></app-welcome> app.component.ts import { Component } from '@angular/core'; import { CommonModule } from '@angular/common'; import { RouterOutlet } from '@angular/router'; @Component({ selector: 'app-root', standalone: true, imports: [CommonModule, RouterOutlet], templateUrl: './app.component.html', styleUrl: './app.component.css' }) export class AppComponent { title = 'XYZCARS'; } welcome.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-welcome', templateUrl: './welcome.component.html', styleUrl: './welcome.component.css' }) export class WelcomeComponent { car = 'toyota'; } 我的项目最初没有 app.module.ts 文件。我自己添加了它并根据网上找到的一些信息进行了配置,但问题仍然存在并且仍未解决。谁能帮我解决这个问题吗? app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { WelcomeComponent } from './welcome/welcome.component'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent, WelcomeComponent ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } 如果您正在 Angular 17 中创建项目->使用这些命令 ng app --no-standalone 然后你就得到了 app.module.ts 文件。


使用 PowerShell 和 Import-Excel 模块仅读取 Excel 文件中的标题

是否可以使用 PowerShell 和 Import-Excel 模块仅读取 Excel 文件的标题? 我有一个包含多个工作表的 Excel 文件。其中之一仅包含标题,现在包含数据行。 啊...


React中react-router-dom最新版本如何实现延迟加载

我想使用Typescript在React中实现延迟加载。我收到打字稿错误。 常量应用程序 = () => { 返回 ( 我想使用 Typescript 在 React 中实现延迟加载。我收到打字稿错误。 const App = () => { return ( <RouterProvider router={createBrowserRouter( createRoutesFromElements( <Route> <Route path="/" element={<Outlet/>}> <Route index element={<Home />} /> <Route path="contact" element={<Contact />} /> <Route path="about" element={<About />} /> <Route path="*" element={<Navigate to="/" replace />} /> </Route> </Route> ) )} /> ) }; export default App; 下面的代码不起作用 <Route> <Route path="/" element={<Outlet/>}> <Route index lazy={() => import("./Home")} /> <Route path="contact" lazy={() => import("./Contact")} /> <Route path="about" lazy={() => import("./About")} /> <Route path="*" element={<Navigate to="/" replace />} /> </Route> </Route> const Home= lazy(() => import("./screens/home")); const About= lazy(() => import("./screens/about")); <Route> <Route path="/" element={<Outlet/>}> <Route index element={<Suspense fallback={<div>Loading...</div>}> <Home/> </Suspense> /> } /> <Route path="about" element={<Suspense fallback={<div>Loading...</div>}> <About/> </Suspense> /> } /> <Route path="*" element={<Navigate to="/" replace />} /> </Route> </Route>


ant design如何设置app宽字体

我正在使用 NextJS 14,我有以下内容: 全局.css: @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@100;200;300;400;500;600;700;800&display=swap'); @层r...


Matplotlib 图例用颜色映射?

总的来说,我对 matplotlib 真的很困惑。我通常只使用 import matplotlib.pyplot as plt。 然后执行 plt.figure()、plt.scatter()、plt.xlabel()、plt.show() 等操作。 但后来我


Quasar Vue Router 解析名为route的href

我正在尝试使用 vue router 构建 href 链接 我在routes.js中有以下内容 常量路由 = [ { 小路: ”/”, 组件:() => import("layouts/MainLayout.vue")...


TinyMCE 导入样式失败

我通过npm包和vite使用tinymce 6.8.3。 导入时 import 'tinymce/themes/silver';就像文档所说的那样,我收到了图中所示的错误。


如何指定列数据类型

我有以下代码: 将极坐标导入为 pl 从输入 import NamedTuple 类事件(NamedTuple): 名称:str 描述:str def event_table(num) -> 列表[事件]: 事件=[] ...


如何解决数字格式异常?

index.html 输入第一个数字: 输入第二个数字... index.html <!DOCTYPE html> <html> <body> <form action="add"> Enter 1st number:<input type="text" name="num1"><br> Enter 2st number:<input type="text" name="num1"><br> <input type="submit"> </form> </body> </html> AddServlet.java 这是 servlet 代码。 package com.adithya; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class AddServlet extends HttpServlet { public void service(HttpServletRequest req,HttpServletResponse res) throws IOException { int i=Integer.parseInt(req.getParameter("num1")); int j=Integer.parseInt(req.getParameter("num2")); int k=i+j; PrintWriter out=res.getWriter(); out.println("result is"+k); } } 我正在尝试获取结果,但它显示了如下所示的异常。我无法理解例外情况。 ** 例外** 这显示了这样的异常。我无法识别问题所在。 java.lang.NumberFormatException: Cannot parse null string java.base/java.lang.Integer.parseInt(Integer.java:630) java.base/java.lang.Integer.parseInt(Integer.java:786) com.adithya.AddServlet.service(AddServlet.java:19) javax.servlet.http.HttpServlet.service(HttpServlet.java:623) org.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:51) 我不明白这是什么错误。我试图从 2 天开始解决这个问题。请任何人帮助我解决这个问题。但它不起作用。 您有 2 个相同的名字 num1,并且您正在尝试呼叫不在场的 num2。 Enter 2st number:<input type="text" name="num1"><br> 关于: Enter 2st number:<input type="text" name="num2"><br>


ImportError:动态模块未定义模块导出函数(PyInit_m3d1cf20adb1014f04986e6a344a55bde)

这是我执行 import theano 时收到的错误消息: ImportError:动态模块未定义模块导出函数(PyInit_m3d1cf20adb1014f04986e6a344a55bde) 我正在使用 Python 3.5.2...


Angular Material 5 深色主题未应用于机身

我创建了一个“自定义”主题(使用 https://material.angular.io/guide/theming 上的主题文档,这非常糟糕),如下所示: @import '~@angular/material/theming'; @包括 mat-cor...


无法将 pygame 扩展链接到 python

我一直在尝试通过 pip install pygame 安装 pygame,但是在尝试 import pygame 时出现错误代码: 导入pygame ModuleNotFoundError:没有名为“pygame”的模块 Python 的数据和...


从 LLM 生成文本时打印出特殊标记

嗨,我有一个关于 llm 在生成答案时打印特殊令牌的问题。 这是一个例子: from utils.prompter import 提示符 # 从 utils.util 导入后处理,e2k_m...


使用unitpy得到错误的结果?

下面所有三个都打印相同的属性,但为什么最后一个语句打印 0 电子伏特? 导入 scipy from unitpy import U、Q、单位、数量 ... def print_properties(q): print(q.unit) ...


选中/取消选中 mat-checkbox 未正确返回 true 或 false

我正在使用 Angular 15 和 Angular Material 14,下面是我用来显示复选框列表的 HTML 代码 我正在 Angular 15 和 Angular Material 14 工作,下面是我用来显示复选框列表的 HTML 代码 <div *ngFor="let control of checkboxArray.controls;let i = index" > <mat-checkbox [formControl]="control" (input)="validateInputs(notificationForm)" [checked]="control.value" (change)="control.checked=$event.checked;onCheckedChange(i);"> {{ checkboxItems[i].name }} </mat-checkbox> </div> 下面是Angular中onCheckedChange函数的代码 onCheckedChange(index: number) { this.sortCheckboxArray(); const checkboxItem = this.checkboxItems[index]; const control = this.checkboxArray.at(index); if (control) { if (control.value) { this.lists.push(checkboxItem.id.toString()); } else { this.lists.pop(checkboxItem.id.toString()); } } this.updateSubscriberGroupsCount(); this.cdr.detectChanges(); } 当我选中复选框时,在这个 onCheckedChange 函数中,control.value 始终返回 false。哪里出了问题?无法理解.. 这是一个工作版本,复选框逻辑工作正常,希望有帮助! 我们需要使用control.value获取表单组,但我们还需要访问内部表单控件,然后获取复选框值! import { CommonModule } from '@angular/common'; import { Component } from '@angular/core'; import { FormArray, FormControl, FormGroup, ReactiveFormsModule, } from '@angular/forms'; import { bootstrapApplication } from '@angular/platform-browser'; import 'zone.js'; import { MatCheckboxModule } from '@angular/material/checkbox'; @Component({ selector: 'app-root', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatCheckboxModule], template: ` <form [formGroup]="form"> <div formArrayName="array"> <div *ngFor="let control of checkboxArray.controls;let i = index" [formGroupName]="i"> <mat-checkbox formControlName="test" style="margin-bottom: 15px;" (change)="onCheckedChange(i);"> {{ checkboxItems[i].name }} </mat-checkbox> </div> </div> </form> `, }) export class App { name = 'Angular'; form = new FormGroup({ array: new FormArray([]), }); lists = []; checkboxItems: any = []; ngOnInit() { this.add(); this.add(); this.add(); } add() { this.checkboxArray.push( new FormGroup({ test: new FormControl(false), }) ); this.checkboxItems.push({ name: 'test' }); } get checkboxArray() { return this.form.get('array') as FormArray; } onCheckedChange(index: number) { // this.sortCheckboxArray(); // const checkboxItem = this.checkboxItems[index]; const control = this.checkboxArray.at(index); if (control) { if (control.value.test) { console.log('checked'); // this.lists.push(checkboxItem.id.toString()); } else { console.log('not checked'); // this.lists.pop(checkboxItem.id.toString()); } } // this.updateSubscriberGroupsCount(); // this.cdr.detectChanges(); } } bootstrapApplication(App); 堆栈闪电战


不能在模块外部使用 Import 语句

我正在尝试运行我的内置生产版本代码。使用 Node 20.10、typescript 5 并且无法运行该构建版本。 下面是我的 package.json、tsconfig.json 文件。 { "name": "节点-


耶拿有没有办法看到OntClass来自导入的本体?

我有一个导入 bfo 的本体。在我的测试用例中,我只有一个类,它是实体的子类: 我有一个导入bfo的本体。在我的测试用例中,我只有一个类,它是 entity: 的子类 <rdf:RDF xmlns="http://my.ontology/ontologyTest#" xml:base="http://my.ontology/ontologyTest" xmlns:da="http://my.ontology/ontologyTest#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:obo="http://purl.obolibrary.org/obo/" xmlns:owl="http://www.w3.org/2002/07/owl#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:xml="http://www.w3.org/XML/1998/namespace" xmlns:xsd="http://www.w3.org/2001/XMLSchema#" xmlns:foaf="http://xmlns.com/foaf/0.1/" xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#" xmlns:skos="http://www.w3.org/2004/02/skos/core#" xmlns:terms="http://purl.org/dc/terms/"> <owl:Ontology rdf:about="http://my.ontology/ontologyTest"> <owl:imports rdf:resource="http://purl.obolibrary.org/obo/bfo/2019-08-26/bfo.owl"/> </owl:Ontology> <owl:Class rdf:about="http://my.ontology/ontologyTest#Event"> <rdfs:subClassOf rdf:resource="http://purl.obolibrary.org/obo/BFO_0000001"/> </owl:Class> </rdf:RDF> 当我打开本体时,我正在做: OntModel model = createModel("OWL_MEM"); FileManager.get().readModel(model, uri.toString()); Model _model = model.getRawModel(); model = new OntModelImpl(OntModelSpec.OWL_MEM, _model); ExtendedIterator classes = model.listClasses(); while (classes.hasNext()) { OntClass theOwlClass = (OntClass) classes.next(); if (thisClass.getNameSpace() == null && thisClass.getLocalName() == null) { continue; } ... } 我从我的本体中获取所有类(这里是Event),也从导入的本体中获取。 Jena 有没有办法知道 OntClass 是来自导入的本体并且未在我当前的本体中声明? 正如 UninformedUser 的评论中所说,感谢他,您可以执行以下操作: 列出所有导入本体的URI model.listImportedOntologyURIs() 列出导入本体的所有类model.getImportedModel(uri).listClasses() 在模型的所有类上创建一个迭代器,删除所有导入的类model.listClasses().filterDrop(importedClasses::contains) 因此,要打印模型的所有类而无需导入类: import java.util.HashSet; import java.util.Set; import org.apache.jena.ontology.OntClass; import org.apache.jena.ontology.OntModel; import org.apache.jena.ontology.OntModelSpec; import org.apache.jena.rdf.model.ModelFactory; import org.apache.jena.util.iterator.ExtendedIterator; OntModel model = ModelFactory.createOntologyModel(OntModelSpec.OWL_DL_MEM); model.read("file:///Users/von/tools/data.owl", "RDF/XML"); Set<OntClass> importedClasses = new HashSet<>(); for (String uri : model.listImportedOntologyURIs()) { importedClasses.addAll(model.getImportedModel(uri).listClasses().toSet()); } ExtendedIterator<OntClass> it = model.listClasses().filterDrop(importedClasses::contains); while (it.hasNext()) { OntClass cls = it.next(); System.out.println(cls); }


在 Zig 中的编译时改变全局数组

我正在尝试构建一个“静态”数据数组,并继续与编译时/运行时失败作斗争。这是我正在尝试的精简版本: const std = @import("std"); 变种


在同一目录中导入文件时发现“MODULE_NOT_FOUND”错误

在此输入图像描述 在此输入图像描述 无法从 users.js 文件导入 Users 数组 尝试使用 import 语句以及 with 进行导入 const Users = require('users')' // 这 ...


该表达式不可调用。类型 'typeof import("stripe")' 没有调用签名

我正在尝试将 Stripe 与 Strapi 集成。我的项目中有这行代码: const stripe = require(“stripe”)(“秘密密钥”); 但是,我遇到一条错误消息,上面写着“This


Flutter 是否会多次导入东西?

我正在 Flutter 中制作一个应用程序。我想知道在多个文件中导入相同的内容是否会对性能产生负面影响。例如: 文件 a.dart、b.dart 和 c.dart 使用 import 'package:


Adminjs 实现问题“无法在模块外部使用 import 语句”

我是 Node Express js 的新手。只是尝试使用express js 编写后端代码。现在我想在我的项目中添加adminjs。由于我是本节的新手,因此我遵循了


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"> &euro;{{ 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">&euro;</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">&euro;</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,我的表单值可用于更新商店和更新表单。这是我能想到的最好的


为什么这段代码在我的机器上即使传递参数也会产生错误

产生错误: 类型错误:compare() 缺少 1 个必需的位置参数:'b' 比较两个文件的结果 from difflib import 不同 open('file1.txt') 作为 file_1, open('file2.txt') 作为 fil...


使用单元IsolatedAsyncioTestCase测试fastapi路由时出现“运行时错误:事件循环已关闭”

考虑这个 mcve: 要求.txt: 快速API httpx 发动机 派丹提克[电子邮件] python-bsonjs uvicorn==0.24.0 主要.py: 导入异步 导入单元测试 从输入 import 可选 导入 motor.motor_asyn...


除非与特定版本的 python 一起使用,否则无法解析 Python 导入

所以我尝试用 nextcord 编写一个 Discord 机器人,但我遇到了一些问题。 nextcord import 仅适用于 python 版本 3.10.11 。如果我使用任何其他版本的 python,它无法解析导入


MazPhoneNumberInput Vue.js 上的自动对焦

我在表单中使用 MazPhoneNumberInput 组件(https://maz-ui.com/components/maz-phone-number-input): 我正在以这种方式使用 MazPhoneNumberInput 组件(https://maz-ui.com/components/maz-phone-number-input): <MazPhoneNumberInput v-model="phoneNumber" v-model:country-code="countryCode" show-code-on-list :preferred-countries="['DE', 'US', 'GB']" noFlags /> 并且想在手机输入上设置自动对焦。 MazPhoneNumberInput 组件本身没有 autofocus 属性,但它基于具有 autofocus 属性的 MazInput 组件(https://maz-ui.com/components/maz-input): 我尝试通过 javascript 使用 onMounted 方法设置焦点: import AppLayout from "@/Layouts/Auth/AppLayout.vue"; import MazPhoneNumberInput from 'maz-ui/components/MazPhoneNumberInput' import {ref, onMounted} from 'vue' const phoneNumber = ref() const countryCode = ref('DE') const focusInput = () => { phoneNumber.value.focus(); }; onMounted(focusInput); 但是没有成功。 如何在手机输入上设置自动对焦? 这可以使用 template ref 来完成,它可以访问组件的 DOM 元素。由于根元素只是多个其他元素的包装,因此需要额外的查询来获取实际的电话输入,然后您可以将其聚焦: onMounted(async () => { const phoneEl = phone.value.$el // MazPhoneNumberInput root DOM element const phoneInput = phoneEl.querySelector('input[type=tel]') // inner input DOM element await nextTick() // can focus after next DOM update phoneInput.focus() })


AWS 预注册 lambda 函数 - ReferenceError: require 未在 ES 模块范围中定义,您可以使用 import 代替

在我的 NextJS v14 项目中,我想在每次用户注册时创建一个 Dynamo 数据库记录。因此,我遵循了这个官方 AWS 教程,但我偶然发现了一些问题,例如: 当我运行放大时...


如何选择两个td并用bs4作为单行输出?

我想获取一些数据,但我很难选择两个 td 并将输出放在它们所属的同一行上。 HTML 示例: ፳ 我想获取一些数据,但我很难选择两个td并将输出放在它们所属的同一行。 HTML 示例: <tr> <td class ='verseNumCell'> ፳ </td> <td class ='verseConentCell'> ወትቤሎን ኢትስምያኒ ኖሔሚን ስምያኒ መራር እስመ መረርኩ ፈድፋደ ወብዙኀ ። </td> </tr> <tr> <td class ='verseNumCell'> ፳፩ </td> <td class ='verseConentCell'> አንሰ ምልእትየ ሖርኩ ወዕራቅየ አግብአኒ <span class='divineWord'>እግዚአብሔር</span> ለምንት ትብላኒ ኖሔሚን እንዘ <span class='divineWord'>እግዚአብሔር</span> አኅሰረኒ ወፈድፋደ አሕመመኒ ። </td> </tr> <tr> 我做了什么: import bs4 import requests import re url = "https://www.ethiopicbible.com/books/%E1%8A%A6%E1%88%AA%E1%89%B5-%E1%8B%98%E1%8D%8D%E1%8C%A5%E1%88%A8%E1%89%B5-1" parameters = {} response = requests.get(url, params=parameters) soup = bs4.BeautifulSoup(response.text, "html.parser") element_list = soup.find("div", class_="geezBibleChapterContainer").find_all("td") for element in element_list: text = element.get_text() text = os.linesep.join([s for s in text.splitlines() if s]) if not re.match(r'^\s*$', text): print(text) 我的输出: ፳ ወትቤሎን ኢትስምያኒ ኖሔሚን ስምያኒ መራር እስመ መረርኩ ፈድፋደ ወብዙኀ ። ፳፩ አንሰ ምልእትየ ሖርኩ ወዕራቅየ አግብአኒ እግዚአብሔር</span> ለምንት ትብላኒ ኖሔሚን እንዘ 我想得到什么: ፳ ወትቤሎን ኢትስምያኒ ኖሔሚን ስምያኒ መራር እስመ መረርኩ ፈድፋደ ወብዙኀ ። ፳፩ አንሰ ምልእትየ ሖርኩ ወዕራቅየ አግብአኒ እግዚአብሔር</span> ለምንት ትብላኒ ኖሔሚን እንዘ 我应该在单独的“汤”中选择 td 吗? 无需选择单元格,只需选择每一行并使用 get_text(separator=' ',strip=True): for row in soup.select('div.geezBibleChapterContainer tr'): print(row.get_text(' ',strip=True)) 什么导致: ፩ በቀዳሚ ገብረ እግዚአብሔር ሰማየ ወምድረ ። ፪ ወምድርሰ ኢታስተርኢ ወኢኮነት ድሉተ ወጽልመት መልዕልተ ቀላይ ወመንፈሰ እግዚአብሔር ይጼልል መልዕልተ ማይ ። ፫ ወይቤ እግዚአብሔር ለይኩን ብርሃን ወኮነ ብርሃን ። ፬ ወርእዮ እግዚአብሔር ለብርሃን ከመ ሠናይ ወፈለጠ እግዚአብሔር ማእከለ ብርሃን ወማእከለ ጽልመት ። ፭ ወሰመዮ እግዚአብሔር ለብርሃን ዕለተ ወለጽልመት ሌሊተ ወኮነ ሌሊተ ወጸብሐ ወኮነ መዓልተ ፩ ። ፮ ወይቤ እግዚአብሔር ለይኩን ጠፈር ማእከለ ማይ ከመ ይፍልጥ ማእከለ ማይ ወኮነ ከማሁ ። ፯ ወገብረ እግዚአብሔር ጠፈረ ወፈለጠ እግዚአብሔር ማእከለ ማይ ዘታሕተ ጠፈር ወማእከለ ማይ ዘመልዕልተ ጠፈር ። ፰ ወሰመዮ እግዚአብሔር ለውእቱ ጠፈር ሰማየ ወርእየ እግዚአብሔር ከመ ሠናይ ወኮነ ሌሊተ ወጸብሐ ወኮነ ካልእተ ዕለተ ። 示例 import requests import bs4 url = "https://www.ethiopicbible.com/books/%E1%8A%A6%E1%88%AA%E1%89%B5-%E1%8B%98%E1%8D%8D%E1%8C%A5%E1%88%A8%E1%89%B5-1" parameters = {} response = requests.get(url, params=parameters) soup = bs4.BeautifulSoup(response.text, "html.parser") for row in soup.select('div.geezBibleChapterContainer tr'): print(row.get_text(separator=' ',strip=True))


如何在node js中使用DOM更改文本内容

我想做的是 我想在输入错误密码时将标签更改为错误密码 但出现错误 ReferenceError:文档未定义 这是我的 HTML 文件 我想做的是 我想在输入错误密码时将 标签更改为错误密码 但出现错误 ReferenceError:文档未定义 这是我的 HTML 文件 <form action="/check" method="POST"> <label for="password">Password:</label> <input type="text" id="password" name="password" required> <input type="submit" value="Submit"> <p></p> </form> 这是我的 javascript 文件内容 import express from "express"; import {dirname} from "path"; import { fileURLToPath } from "url"; import bodyParser from "body-parser"; const __dirname = dirname(fileURLToPath(import.meta.url)); const app = express(); const port = 3000; const pass = "ILoveProgramming"; var enter = ""; app.use(bodyParser.urlencoded({extended:true})); function checker(req, res, next){ enter = req.body.password; console.log(enter); next(); } app.use(checker); app.get("/", (req,res) =>{ res.sendFile(__dirname +"/public/index.html"); }); app.post("/check",(req,res)=>{ if(pass === enter){ res.sendFile(__dirname+"/public/secret.html"); } else{ document.querySelector("p").textContent("The paswrd is wrong"); console.log("The password is incorrect"); } // console.log(enter); }); app.use(bodyParser); app.listen(port, () =>{ console.log(`server is live at ${port}`); }); 我对这一切都是新手所以把我当作一个没有任何经验的人 document对象是浏览器DOM API的一部分,它在服务器端不可用。在浏览器控制台上,它是 window 对象的属性。 window.document。 您正在尝试操作服务器上的 DOM,这是不可能的。您应该在浏览器接收并呈现 HTML 页面后在客户端处理 DOM 操作。为此,您应该在 HTML 文件内有一个 script 标签。 <script> // inside here you add your logic to access document <script/> script标签将在浏览器上执行,您可以访问此标签内的document对象


Apache POI 与 Apache Felix 的使用

我正在尝试将 Apache POI 导入 Atlassian Jira 插件以读取 excel 文件。 一开始,我开始只是添加 org.apache.poi 我正在尝试将 Apache POI 导入 Atlassian Jira 插件以读取 excel 文件。 一开始,我只是添加了 <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi</artifactId> <version>${poi.version}</version> </dependency> <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi-ooxml-schemas</artifactId> <version>${poi.version}</version> </dependency> <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi-ooxml</artifactId> <version>${poi.version}</version> </dependency> poi.版本是3.14 然后当我启动插件时它给出了 Unresolved constraint in bundle com.tezExtensions [165]: Unable to resolve 165.0: missing requirement [165.0] osgi.wiring.package; (osgi.wiring.package=com.sun.javadoc) 然后我用一些指令编辑了 pom,这些指令是我在另一个 StackOverflow 问题中找到的 Pax Exam 问题与 Apache POI 包装的捆绑包 <instructions> <Atlassian-Plugin-Key>${atlassian.plugin.key}</Atlassian-Plugin-Key> <!-- Add package to export here --> <Export-Package>com.sony.poc.api,</Export-Package> <_exportcontents> org.apache.poi.*;version=${poi.version}, org.openxmlformats.schemas.*;version=${poi.schema.version}, schemasMicrosoftComOfficeExcel.*;version=${poi.schema.version}, schemasMicrosoftComOfficeOffice.*;version=${poi.schema.version}, schemasMicrosoftComOfficePowerpoint.*;version=${poi.schema.version}, schemasMicrosoftComVml.*;version=${poi.schema.version}, org.etsi.uri.*;version=${poi.security.version} </_exportcontents> <!-- Add package import here --> <Import-Package> com.sun.javadoc;resolution:=optional, com.sun.tools.javadoc;resolution:=optional, org.apache.crimson.jaxp;resolution:=optional, org.apache.tools.ant;resolution:=optional, org.apache.tools.ant.taskdefs;resolution:=optional, org.apache.tools.ant.types;resolution:=optional, junit.framework.*;resolution:=optional, junit.textui.*;resolution:=optional, org.junit.*;resolution:=optional, org.apache.xml.security.*;resolution:=optional, org.apache.jcp.xml.dsig.internal.dom.*;resolution:=optional, org.springframework.osgi.*;resolution:="optional", org.eclipse.gemini.blueprint.*;resolution:="optional", *</Import-Package> <DynamicImport-Package> org.apache.xmlbeans.*, schemaorg_apache_xmlbeans.* </DynamicImport-Package> 使用此配置,我收到此错误; Unable to resolve 165.0: missing requirement [165.0] osgi.wiring.package; (osgi.wiring.package=org.apache.xml.resolver) 有人有想法吗? 终于找到解决办法了。 我已将它们添加为依赖项 <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi</artifactId> <version>${poi.version}</version> </dependency> <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi-scratchpad</artifactId> <version>${poi.version}</version> </dependency> <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi-ooxml</artifactId> <version>${poi.version}</version> <exclusions> <exclusion> <groupId>stax</groupId> <artifactId>stax-api</artifactId> </exclusion> <exclusion> <groupId>xml-apis</groupId> <artifactId>xml-apis</artifactId> </exclusion> </exclusions> </dependency> <dependency> <groupId>org.codehaus.woodstox</groupId> <artifactId>woodstox-core-asl</artifactId> <version>4.4.1</version> </dependency> 还将这些添加到 Import-Package 标签内部 *;resolution:=optional, com.ctc.wstx.stax.* 仅此而已。 我应该将 Atlassian Jira 的 pom.xml 放在哪里?


React CSS 导入

在我的 Home.js 中我有以下代码 从“反应”导入反应; 导入'./Home.css'; 常量文本变体 = {...} 常量主页 = () => { 返回 ( ... 在我的 Home.js 中,我有以下代码 import React from 'react'; import './Home.css'; const textVariants = {...} const Home = () => { return ( <div id='home' className='page'> <motion.div className='text-wrapper' variants={textVariants} initial='initial' animate='animate'> <motion.div className='text-container' variants={textVariants}> <motion.h1 variants={textVariants}>NAME</motion.h1> <motion.h2 variants={textVariants}>An enthusiatic university student</motion.h2> </motion.div> </div> ); }; export default Home; 在 Home.css 中, .text-wrapper { max-width: 1366px; height: 100%; } .text-container { height: 100%; width: 50%; padding-left: 10%; h1 { letter-spacing: 10px; font-size: 50px; margin-bottom: -5%; } h2 { font-size: 80px; } } 我有 About.js 和 About.css 以及以下内容, import './About.css'; const About = () => { return ( <div id='about' className='page'> <div className='text-container'> <h1>About Me</h1> </div> </div> ); }; 但是 About.js 应用了 Home.css 中的内容,即 .text-container。我该如何避免这种情况?我不知道为什么 Home.css 被应用到 About.js 即使我没有导入它。 在React js中,任何根组件中导入的css文件适用于整个项目。 css 类可以在项目层次结构中的任何位置访问。 我们无法避免这种情况,因为文件被应用于根目录。您必须为不同的组件使用特定的类名称。 专业提示:创建可重用的组件,以便您可以将相同的类应用于每个相同的组件..


链接到管理模板中的不同管理对象

我不想让js弄脏我的手。我有两个模型,汽车和模型。 如何在自定义管理模板中手动添加从汽车到其模型的链接? 我可以: 我不想让 js 弄脏我的手。我有两个型号,car和model。 如何在自定义管理模板中手动添加从汽车到其模型的链接? 我能做到: <a href="{% url 'admin:appname_carmodels_changelist' %}">access changelist</a> 但是我如何访问 pk=42 的模型呢?我试过: <a href="{% url 'admin:appname_carmodels_change' 42 %}">access changeform</a> 但我最终得到了NoReverseMatch at /admin/appname/carmodel/.../change/。这可能吗?还是我必须使用一些可以携带反向功能的extra_context? from django.urls import reverse from django.utils.html import format_html @admin.register(YourAPP) class AdminCustome(admin.ModelAdmin): list_display = ('id', 'link_to_other_obj',) def link_to_other_obj(self, obj): # foreign key is your other object(for example carmodel) related_obj = obj.foreign_key url = reverse('admin:appname_carmodels_change', args=[related_obj.id]) return format_html('<a href="{}">{}</a>', url, related_obj) link_to_other_obj.short_description = 'go_to_car_model_page'


react-hook-form useForm 每次在 Nextjs 页面路由上执行

嗨,我是 Nextjs(v14) 的新手。我想使用react-hook-form 实现多页面表单。 然而,似乎每次都会执行useForm,并且defaultValues是在页面路由中设置的(点击 嗨,我是 Nextjs(v14) 的新手。我想使用react-hook-form 实现多页面表单。 不过,好像每次都会执行useForm,并且在页面路由时设置defaultValues(点击<Link to=XX>)。 如何跨多个页面保存表单数据? 请帮助我。 这是我的代码。 _app.tsx return ( <div> <FormProvider> <Component {...pageProps} /> </FormProvider> </div> ); FormProvider.tsx export const FormProvider = ({ children, }: { children: React.ReactNode; }) => { const defaultValues: MyForm = { name: '', description: '' }; const form = useForm({ defaultValues, resolver: zodResolver(MyFormSchema), }); const onSubmit = () => console.log("something to do"); return ( <Form {...form}> <form onSubmit={form.handleSubmit(onSubmit)}>{children}</form> </Form> ); }; 您正在寻找的是跨多个页面维护的某种全局状态。对于这个例子,我将使用 React 的上下文 API,如果这不适合您的用例,您可以找到一些其他状态管理库。 首先,您需要创建一个全局上下文,并在表单提供程序中包含一个全局状态 // FormProvider.tsx import { createContext, useContext, useState } from 'react'; const FormContext = createContext(); // Exported to be used in other components export const useFormContext = () => useContext(FormContext); export const FormProvider = ({ children }) => { const [formData, setFormData] = useState({}); return ( <FormContext.Provider value={{ formData, setFormData }}> {children} </FormContext.Provider> ); }; 现在您需要用 FormProvider 包装您的应用程序 // You are already doing this part //_app.tsx return ( <div> <FormProvider> <Component {...pageProps} /> </FormProvider> </div> ) 现在你可以像这样使用它了。请记住,您将更新表单的全局状态,该状态将在您的所有页面上发生变化。 // In your form component import { useForm } from 'react-hook-form'; import { useFormContext } from '../path/to/formContext'; const MyFormComponent = () => { const { formData, setFormData } = useFormContext(); const { register, handleSubmit } = useForm({ defaultValues: formData, resolver: zodResolver(MyFormSchema), }); const onSubmit = (data) => { setFormData(data); // Handle form submission }; return ( <form onSubmit={handleSubmit(onSubmit)}> {/* Form fields */} </form> ); }; 您可以从其他页面访问数据的示例 // In another page or component import { useFormContext } from '../path/to/formContext'; const AnotherPage = () => { const { formData } = useFormContext(); // Use formData as needed };


在React中不显示服务器上的图像

这是代码 从“反应”导入反应; 从“react-dom/client”导入ReactDOM; const 标头 = () => { 返回 ( <... 这是代码 import React from "react"; import ReactDOM from "react-dom/client"; const Header = () => { return ( <div className="header"> <div className="logo-container"> <img className="logo" src="/assets/logo.jpg" /> </div> <div className="nav-items"> <ul> <li>Home</li> <li>About us</li> <li>Contact us</li> <li>Cart</li> </ul> </div> </div> ); }; const AppLayout = () => { return ( <div className="App"> <Header /> </div> ); }; const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<AppLayout />); 请帮助我,因为我是新反应。 我期待在服务器上显示图像 如果仍然不起作用,请尝试在上面的代码中添加 alt 标签 试试这个: 从“react”导入React; 从“react-dom/client”导入 ReactDOM; const Header = () => { return ( <div className="header"> <div className="logo-container"> <img className="logo" src={process.env.PUBLIC_URL + "/assets/logo.jpg"} alt="Logo" /> </div> <div className="nav-items"> <ul> <li>Home</li> <li>About us</li> <li>Contact us</li> <li>Cart</li> </ul> </div> </div> ); }; const AppLayout = () => { return ( <div className="App"> <Header /> </div> ); }; const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<AppLayout />);


如何控制列表元素抛出键盘事件

https://stackblitz.com/edit/react-o1ra7c 用户搜索结果后,用户尝试使用键盘事件箭头需要向下移动。 https://stackblitz.com/edit/react-o1ra7c 用户搜索结果后,用户尝试使用键盘事件箭头需要向下移动。 <div> <input onChange={handleSearchChange}/> <div css={countryDataCss}> {countryList?.map((country) => ( <div key={country.countryCode}> <span css={countryCss}>{country.countryName}</span> <span css={countryDialCodeCss}> {country.countryDialNo} </span> </div> ))} </div> </div> 您可以使用 javascirpt 事件 onkeydown,对于 React 来说是 onKeyDown,它提供了所需的行为,请检查下面的 stackblitz! import React from 'react'; import './style.css'; import { useState } from 'react'; export default function App() { const [searchText, setSearchText] = useState(''); const [selectedCountry, setSelectedCountry] = useState('SG'); const [activeIndex, setActiveIndex] = useState(0); const [selectedDialCode, setSelectedDialCode] = useState('+65'); const countryCodeListResponse = [ { countryCode: 'IND', countryDialNo: '+91', countryName: 'India' }, { countryCode: 'SG', countryDialNo: '+65', countryName: 'Singpare' }, ]; const [countryList, setCountryList] = useState(countryCodeListResponse); function handleSearchChange(e) { const searchText = e.target.value.toLowerCase(); if (countryCodeListResponse) { const updatedList = countryCodeListResponse .filter((el) => el.countryName.toLowerCase().includes(searchText)) .sort( (a, b) => a.countryName.toLowerCase().indexOf(searchText) - b.countryName.toLowerCase().indexOf(searchText) ); setSearchText(searchText); setCountryList(updatedList); } } const onSelectCountry = (code, dialCode) => { setSelectedCountry(code); setSelectedDialCode(dialCode); setSearchText(''); setCountryList(countryCodeListResponse); }; const onKeyDown = (event) => { console.log(event); switch (event.keyCode) { case 38: // arrow up if (activeIndex > 0 && activeIndex <= countryList.length - 1) { setActiveIndex((prev) => prev - 1); } break; case 40: // arrow down if (activeIndex >= 0 && activeIndex < countryList.length - 1) { setActiveIndex((prev) => prev + 1); } break; case 13: const country = countryList[activeIndex]; onSelectCountry(country.countryCode, country.countryDialNo); break; default: break; } }; return ( <div class="dropdown"> <div class="search"> <div> <span>{selectedCountry}</span> <span>{selectedDialCode}</span> </div> <input class="search-input" onKeyDown={(e) => onKeyDown(e)} placeholder="Search" value={searchText} onChange={handleSearchChange} /> </div> <div class="list"> {countryList?.map((country, index) => ( <div onKeyDown={(e) => onKeyDown(e)} className={index === activeIndex ? 'active' : ''} tabIndex="0" key={country.countryCode} onClick={() => onSelectCountry(country.countryCode, country.countryDialNo) } > <span>{country.countryName}</span> <span>{country.countryDialNo}</span> </div> ))} </div> </div> ); } 堆栈闪电战


Python 3.7 BeautifullSoup soup.find 错误 - find() 不接受关键字参数

我从 URL 获得了以下 HTML: 我从 URL 中获得了以下 HTML: <h4> \r\n \r\n\r\n <a href="/l"> \r\n <!-- mp_trans_rt_start id="1" args="as" 1 -->\r\n <span class="brandWrapTitle">\r\n <span class="productdescriptionbrand">Mxxx</span>\r\n </span>\r\n <span class="nameWrapTitle">\r\n <span class="productdescriptionname">Axxxname</span>\r\n </span>\r\n <!-- mp_trans_rt_end 1 -->\r\n </a> \r\n\r\n </h4> 我正在尝试使用 python 来查找类名: import urllib.request from bs4 import BeautifulSoup url = "https://link" user_agent = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.47 Safari/537.36' urlwithagent = urllib.request.Request(url,headers={'User-Agent': user_agent}) response = urllib.request.urlopen(urlwithagent) soup = response.read() product = soup.find("h4", attrs ={"class=": "productdescriptionname"}) print (product) Everythink 完美运行直到上线: product = soup.find("h4", attrs ={"class=": "productdescriptionname"}) 我收到如下错误: find() takes no keyword arguments 我不知道如何解决它 - 有很多信息,但没有任何作用:/ 在使用 BeautifulSoup 之前,您需要将其转换为 find 对象,否则它会使用 str.find 例如: soup = BeautifulSoup(response.read(), "html.parser") product = soup.find("h4", attrs ={"class": "productdescriptionname"}) print (product) 我认为这值得一提,如果 find 方法有问题,检查 type(soup) 是一个很好的方法来查明您是否正在使用正确的 bs4.BeautifulSoup 对象而不是 str。 我想在这里指出一件事,如果使用 soup.prettify() 使 html 可读。需要注意的是,.prettify() 将 bs4.BeautifulSoup 转换为 str。所以这应该单独使用,例如: soup = BeautifulSoup(response) # type(soup) --> bs4.BeautifulSoup print(soup.prettify()) # print readable html 不喜欢: soup = BeautifulSoup(response).prettify() # type(soup) --> str 我在网上读到的关于这个问题的另一件事是这样的:“你的 beautiful soup 版本可能不支持 find。”因此,我最终升级和降级了版本很多次,然后才意识到这是一个错误的陈述由业余爱好者制作。 在打印之前我已经为此奋斗了大约 45 分钟type(soup)。我希望这可以节省其他人的时间。 Может кому подойдет история такая повторял за автором ютуба и переписывал код для парсинга и вышла такая же ошибка как в вопросе искал читал, шерстил инет пока не начал перепроверять свой код в общем мой код с ошибкой: from requests import Session from bs4 import BeautifulSoup as BS from time import sleep headers = {'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 YaBrowser/23.11.0.0 Safari/537.36'} work = Session() work.get('https://quotes.toscrape.com/', headers=headers) response = work.get('https://quotes.toscrape.com/login', headers=headers) soup = BS(response.text, 'lxml') token = soup.find('from').find('input').get('') в чем здесь ошибка? вот в этой строке token = soup.find('from').find('input').get('') а именно soup.find('from') я решил скать ошибку методом исключения поэтому довел до такого состояния и понял что в странице нет тэга '来自' а есть тэг '形式' как только поменял на тэг 'form' ошибка с soup.find() - find() ушла может кому поможет


使用selenium在联合选择/列表元素中导航

我正在使用 beautifulSoup / selenium 进行一些网络抓取,但在使用某个下拉选择菜单时遇到了困难。粗略的 HTML 如下: 我正在使用 beautifulSoup / selenium 进行一些网络抓取,但在使用某个下拉选择菜单时遇到了困难。粗略的HTML如下: <div class="selection-box" alt="selection" title="selection" role="select" tabindex="0"> <select id="select" style="display: none;"> <option value="1">First</option> <option value="2">Second</option> <option value="3" selected="selected">Third</option> </select> <div class="current">Third</div> <ul class="options" style="display: none;"> <li class="search--option" alt="First option" title="First option" aria-label="First option" role="option" tabindex="0">First</li> <li class="search--option" alt="Second option" title="Second option" aria-label="Second option" role="option" tabindex="0">Second</li> <li class="search--option selected" alt="Third option" title="Third option" aria-label="Third option" role="option" tabindex="0">Third</li> </ul> 当我通过浏览器操作菜单时,它会发生如下变化: 包装 div 类更改为“选择框活动” ul 更改为“display: block” 一旦我选择了不同的选项,这两个选项就会再次颠倒,中间的 div 和所选的 li 项目也会相应变化 我想使用selenium来选择某个选项。到目前为止,我尝试了以下方法: from selenium.webdriver.support.ui import Select drpBrand = driver.find_element(By.ID, "select"); css = 'select#select' # css selector of the element js = """const data_options = Array.from(document.querySelectorAll('{css}')); data_options.forEach(a=>{{a.style='display:block;';}});""".format(css=css) driver.execute_script(js) drpBrand.select_by_visible_text("Third"); 这是使用各种线程的最佳方法(元素不可见:元素当前不可见并且可能无法操作 - Selenium webdriver,How to select a dropdown value in Selenium WebDriver using Java),但它仍然没有不工作。有任何想法吗?我想我还需要定位列表(除了选择之外)? 错误总是存在 selenium.common.exceptions.ElementNotInteractableException:消息:元素不可交互:元素当前不可见,可能无法操作 谢谢 如果我正确理解您的目标(选择下拉选项),我建议模拟本机用户行为并依赖可见元素。 下拉元素有选择器 .superstar-search--selection-box。 您应该等待它出现并单击它。 下拉选项有选择器 .superstar-search--option 。您应该等待此元素的可见性并过滤它们,例如,通过包含文本条件。 您可以通过将下拉打开选择器和下拉选项选择器定义为函数参数来构建比我编写的更复杂的函数。 from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.support.ui import WebDriverWait from selenium.webdriver.support import expected_conditions as EC driver = webdriver.Chrome() driver.get("https://www.wwe.com/superstars") wait = WebDriverWait(driver, 15) def select_dropdown_option_by_text(text): dropdown = wait.until(EC.presence_of_element_located((By.CSS_SELECTOR, '.superstar-search--selection-box'))) dropdown.click() options = wait.until(EC.visibility_of_all_elements_located((By.CSS_SELECTOR, '.superstar-search--option'))) expected_option = [element for element in options if element.text.lower() == text] expected_option[0].click() select_dropdown_option_by_text('all superstars')


QWebEngineView:html 文件中的 href 不起作用

我有一个 test.html 文件,例如: 我有一个 test.html 文件,例如: <!DOCTYPE html> <html> <head> </head> <body> <a style="padding-right:5px" target="_blank" href="data/">Datadir</a> </body> </html> 包含 test.html 的目录如下: test.html data\ a.txt b.txt 我使用“file:///remote/us01home19/ktc/public_html/testLocalHref/test.html”并在firefox和chrome中单击Datadir,结果如下: 和: 我写了一个pyside2代码来做同样的事情,代码如下: from PySide2 import QtCore, QtWidgets, QtWebEngineWidgets import os import sys class CustomWebEnginePage(QtWebEngineWidgets.QWebEnginePage): # Store second window. external_window = None def acceptNavigationRequest(self, url, _type, isMainFrame): print(url, _type, isMainFrame) if _type == QtWebEngineWidgets.QWebEnginePage.NavigationTypeLinkClicked: if not self.external_window: self.external_window = QtWebEngineWidgets.QWebEngineView() self.external_window.setUrl(url) self.external_window.show() return False return super().acceptNavigationRequest(url, _type, isMainFrame) class MainWindow(QtWidgets.QMainWindow): def __init__(self, *args, **kwargs): super(MainWindow, self).__init__(*args, **kwargs) self.browser = QtWebEngineWidgets.QWebEngineView() self.browser.setPage(CustomWebEnginePage(self)) # self.browser.setUrl(QtCore.QUrl("https://code.visualstudio.com")) self.browser.setUrl(QtCore.QUrl("file:///remote/us01home19/ktc/public_html/testLocalHref/test.html")) # self.browser.setUrl(QtCore.QUrl("file:///remote/tw_rnd1/ktc/prog/python/pyside2/WebEngine/data/aaa.ava.summary.html")) #self.browser.setUrl(QtCore.QUrl("file:///remote/tw_rnd1/ktc/prog/python/pyside2/WebEngine/data/aaa_ava_corners/C_1")) self.setCentralWidget(self.browser) if __name__ == '__main__': app = QtWidgets.QApplication(sys.argv) window = MainWindow() window.show() sys.exit(app.exec_()) 但是执行代码,我得到的结果如下: 但是点击Datadir,没有任何反应,甚至QWebEnginePage.acceptNavigationRequest也没有触发。有没有办法让 QWebEngine 的行为像 Firefox 和 Chrome 一样? 我尝试在 QWebEnginePage.acceptNavigationRequest 函数中添加打印消息来捕获点击 dataDir 信息,但似乎没有任何响应。 python版本:python-3.9.0, 操作系统版本:“CentOS Linux 7”, Qt 版本:“Qt_5.15” python 和 Qt 是自定义构建 我发现问题来自htmltarget =“_blank”在QWebEnginePage中不起作用,它可以通过在QtWebEngineWidgets中实现类函数createWindow来避免,例如: class CustomWebEnginePage(QtWebEngineWidgets.QWebEnginePage): # Store second window. external_window = None def acceptNavigationRequest(self, url, _type, isMainFrame): print(url, _type, isMainFrame) if _type == QtWebEngineWidgets.QWebEnginePage.NavigationTypeLinkClicked: if not self.external_window: self.external_window = QtWebEngineWidgets.QWebEngineView() self.external_window.setUrl(url) self.external_window.show() return False return super().acceptNavigationRequest(url, _type, isMainFrame) def createWindow(self, t): return self;enter code here


如果类型是从变量进行数据绑定,则通过 <object> 标签在 Angular 中显示 pdf 无法在 Chrome 中工作

我正在尝试通过 标签在 Chrome 中显示 pdf。 如果我手动编写类型,它会起作用: 不工作 但是... 我正在尝试通过 <object> 标签在 Chrome 中显示 pdf。 如果我手动写 type: 就可以了 <object [data]="getUrl(true)" type="application/pdf"> Not working </object> 但如果我从变量读取类型则不会: <object [data]="getUrl(true)" [type]="file.mimeType"> Not working </object> 为什么?这是一些非常奇怪的错误,还是我做错了什么可怕的事情。 这里是plunkr。 它可以在 Firefox 中运行(所有 4 个对象都会显示),但不能在 Chrome 中运行 (Version 74.0.3729.169 (Official Build) (64-bit)): 我遇到了同样的问题,但我不明白原因。 就我而言,我决定在基于 Blink 引擎的浏览器中使用“embed”元素而不是“object”元素。 <ng-template #blinkPlatformViewer> <embed [src]="getUrl(true)" [type]="file.mimeType"/> </ng-template> <object *ngIf="!isBlinkPlatform; else blinkPlatformViewer" [data]="getUrl(true)" [type]="file.mimeType"> Not working </object> import { Platform } from '@angular/cdk/platform'; import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'; export class FileContentComponent { constructor(private readonly sanitizer: DomSanitizer, private readonly platform: Platform) { } get isBlinkPlatform(): boolean { return this.platform.BLINK; } }


如何使用 Tailwind CSS 实用程序类使部分粘性

在我的 Next.js Web 应用程序中,我有一个页面,如下所示: 我想让该部分(用 标签包裹)以蓝色粘性突出显示,这样当我滚动时,它会保持在原来的位置,并且只有 m... 在我的 Next.js Web 应用程序中,我有一个页面,如下所示: 我想使该部分(包含在 <aside> 标签中)以蓝色粘性突出显示,这样当我滚动时,它会保持在原来的位置,并且只有主要部分(包含图表的部分)会滚动。 这是 layout.tsx 文件: import { dashboardConfig } from "@/config/dashboard"; import { MainNav } from "@/components/nav/main-nav"; import { DashboardNav } from "@/components/nav/dashboard-nav"; interface DashboardLayoutProps { children?: React.ReactNode; } export default async function DashboardLayout({ children, }: DashboardLayoutProps) { return ( <div className="flex min-h-dvh flex-col relative"> <header className="container z-40 bg-background"> <MainNav /> </header> <div className="container grid flex-1 gap-12 md:grid-cols-[200px_1fr] mt-32 mb-12 relative"> <aside className="hidden w-[200px] flex-col md:flex sticky top-0"> <DashboardNav items={dashboardConfig.sidebarNav} /> </aside> <main className="flex w-full flex-1 flex-col overflow-hidden"> {children} </main> </div> </div> ); } 请注意,我已将类 sticky 和 top-0 应用于我想要粘贴位置的部分。但它不起作用。 我做错了什么? 考虑通过 align-self: start 将 self-start 应用到粘性元素。默认情况下,它将具有 align-self: stretch,这将使其成为其父网格元素的完整高度,因此不会观察到粘性效果。通过应用 align-self: start,它的高度将仅与其内容一样高,如果存在垂直自由空间,则可以观察到粘性效果。 const dashboardConfig = { sidebarNav: '' }; const MainNav = () => 'MainNav'; const DashboardNav = () => 'DashboardNav'; function DashboardLayout({ children, }) { return ( <div className="flex min-h-dvh flex-col relative"> <header className="container z-40 bg-background"> <MainNav /> </header> <div className="container grid flex-1 gap-12 md:grid-cols-[200px_1fr] mt-32 mb-12 relative"> <aside className="hidden w-[200px] flex-col md:flex sticky top-0 self-start"> <DashboardNav items={dashboardConfig.sidebarNav} /> </aside> <main className="flex w-full flex-1 flex-col overflow-hidden"> {children} </main> </div> </div> ); } function App() { return ( <DashboardLayout> <div class="h-[200vh]"></div> </DashboardLayout> ); } ReactDOM.createRoot(document.getElementById('app')).render(<App/>); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdn.tailwindcss.com/3.4.1"></script> <div id="app"></div>


如何从当前打开的 HTML 网站中的元素获取数据?

我发现自己需要深入研究开放网站的 HTML 代码,并从 标签获取一些数据,特别是其中的背景图像元素的值。这个元素改变... 我发现自己需要深入研究开放网站的 HTML 代码,并从 <div> 标签获取一些数据,特别是其中的 background-image 元素的值。该元素会根据页面上执行的操作而发生变化。现在我需要找出如何让我的代码从 Firefox 中打开的选项卡返回该特定元素的值。最简单的方法是什么? 我看了美丽汤,但我不知道还需要搭配什么。据我所知,它对于解析 HTML 数据很有用,但对于首先获取该数据却没有用。 您可以使用 requests 来获取页面的 HTML 内容,如下所示: import requests from bs4 import BeautifulSoup def scrape_website(url): # Send an HTTP request to the URL response = requests.get(url) # Check if the request was successful (status code 200) if response.status_code == 200: # Parse the HTML content of the page soup = BeautifulSoup(response.content, 'html.parser') # Extract data based on HTML structure (replace with your own logic) divs = soup.find_all('div') for div in divs: print(div.text) else: print(f"Failed to retrieve the page. Status code: {response.status_code}") 这里我们向站点发送一个 HTTP 请求,如果响应是 200(等于 ok ),我们将响应中的 HTML 数据发送到变量并使用 Beatiful Soup 解析它。您需要将解析代码更改为最适合您的代码,但此时您可以询问 Chat-GPT。


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

我有一个父子组件设置来测试 v-model。当您输入值时,子级会更新父级,但最初不会。 家长: 从“vue”导入{ref}; 导入文本输入...</desc> <question vote="0"> <p>我有一个父子组件设置来测试 v-model。当您输入值时,子级会更新父级,但最初不会。</p> <p>家长:</p> <pre><code>&lt;script setup&gt; import { ref } from &#39;vue&#39;; import TextInput from &#39;./TextInput.vue&#39;; const size = ref(1); const color = ref(&#39;red&#39;); &lt;/script&gt; &lt;template&gt; &lt;TextInput v-model:size=&#34;size&#34; v-model:color.capitalize=&#34;color&#34; /&gt; &lt;div :style=&#34;{ fontSize: size + &#39;em&#39;, color: color }&#34;&gt; &lt;!-- Question 1: this line shows &#34;red&#34; but &#34;Red&#34; is what I want initially --&gt; &lt;p&gt;{{ size }} {{ color }}&lt;/p&gt; &lt;/div&gt; &lt;/template&gt; </code></pre> <p>子:TextInput.vue</p> <pre><code>&lt;script setup&gt; import { ref } from &#39;vue&#39;; const size = defineModel(&#39;size&#39;); const [color, modifier] = defineModel(&#39;color&#39;, { 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; } }); &lt;/script&gt; &lt;template&gt; &lt;input v-model=&#34;size&#34;&gt; &lt;input v-model=&#34;color&#34;&gt; &lt;/template&gt; </code></pre> <p>问题2: 如果我在defineModel中省略“color”(“color”,{...,我会收到以下错误</p> <p>[Vue warn]:无关的非 props 属性(颜色、colorModifiers)被传递给组件但无法自动继承,因为组件渲染片段或文本根节点。</p> <pre><code>at &lt;TextInput size=1 onUpdate:size=fn color=&#34;red&#34; ... &gt; at &lt;ComponentVModel&gt; at &lt;App&gt; </code></pre> <p>如果我只保留</p> <pre><code>&lt;input v-model=&#34;color&#34;&gt; </code></pre> <p>line,为了让它不是片段,根本不更新。</p> </question> <answer tick="false" vote="0"> <p>问题 1:在调用子元素中的 v-model setter 之前,<pre><code>&lt;p&gt;</code></pre> 元素中的大写不会发生。 <strong>设置器是同步回父级的设置器</strong>。由于在输入接收到来自用户的一些文本之前不会调用设置器,因此父级中的 <pre><code>&lt;p&gt;</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>


如何在本机反应中强制 TextInput 增长而 multiline={false} ?

<TextInput ref={inputRef} value={text} style={styles.textInput} returnKeyType="next" placeholder={"placeholder"} scrollEnabled={false} blurOnSubmit={false} onFocus={onFocusInput} textAlignVertical="center" onContentSizeChange={onChangeContentSizeChange} onChangeText={onInputChangeValue} onBlur={onInputBlur} onKeyPress={onInputKeyPress} onSubmitEditing={() => NextScript(id)} multiline={false} numberOfLines={5} /> 逻辑是我想要 onSubmitEditing 带我到下一个 TextInput 字段,并且我需要文本来包装输入的多个文本。如果我启用 multiline,一旦按下回车键,它会在进入下一个输入之前进入下一行,这就是我试图避免的。 是否可以用onSubmitEditing完全取代回车键?每当我按下回车键时,它都会尝试在移动到下一个TextInput之前输入换行符,因此它会创建一个糟糕的用户界面,其中文本在重新定位然后进入下一行之前会稍微向上移动。 如果我将 blurOnSubmit 设置为 true,它会停止,但键盘会在提交时关闭。 如果我将 multiline 设置为 false,它会停止但不会换行。 我创建了一个示例,onKeyPress将允许您在按下回车键时聚焦下一个文本字段。 import { Text, SafeAreaView, StyleSheet, TextInput } from 'react-native'; export default function App() { return ( <SafeAreaView style={styles.container}> <TextInput multiline={true} placeholder={'PLACEHOLDER'} onKeyPress={(e) => { if (e.nativeEvent.key == 'Enter') { console.log('ENTER'); //focusNextTextField(); } }} style={{ borderColor: '#000000', borderWidth: 1 }} /> </SafeAreaView> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignContent: 'center', padding: 8, }, }); 我也面临同样的问题。后来我找到了解决办法。 自定义文本输入处理:您需要一个自定义逻辑来处理文本输入及其在按“Enter”键时的行为。您将以编程方式控制文本换行和导航到下一个输入字段,而不是依赖多行的默认行为。 用 onSubmitEditing 替换 Enter 键:要覆盖“Enter”键的默认行为,您可以使用 onKeyPress 事件。检测何时按下“Enter”键并以编程方式触发 onSubmitEditing 函数。 维护文本换行:由于 multiline={false} 禁用自动文本换行,因此您需要实现一种方法来根据输入的内容大小或字符数手动处理文本换行。 以下是如何实现这一点的概念示例: import React, { useState, useRef } from 'react'; import { TextInput, StyleSheet } from 'react-native'; const CustomTextInput = () => { const [text, setText] = useState(''); const nextInputRef = useRef(null); const onInputKeyPress = (e) => { if (e.nativeEvent.key === 'Enter') { // Replace the Enter key functionality // Call the function you would have in onSubmitEditing handleEnterKeyPress(); } }; const handleEnterKeyPress = () => { // Logic to navigate to next TextInput // Focus the next input field if (nextInputRef.current) { nextInputRef.current.focus(); } // Additional logic if needed to handle text wrapping }; return ( <TextInput value={text} style={styles.textInput} onChangeText={setText} onKeyPress={onInputKeyPress} blurOnSubmit={false} // prevent keyboard from closing // other props /> ); }; const styles = StyleSheet.create({ textInput: { // styling for your text input }, }); export default CustomTextInput;


使用python的mechanize自动网站登录

我正在尝试自动登录一个网站,该网站的登录表单具有以下 HTML 代码(摘录): 我正在尝试自动登录一个网站,其登录表单具有以下 HTML 代码(摘录): <tr> <td width="60%"> <input type="text" name="username" class="required black_text" maxlength="50" value="" /> </td> <td> <input type="password" name="password" id="password" class="required black_text" maxlength="50" value="" /> </td> <td colspan="2" align="center"> <input type="image" src="gifs/login.jpg" name="Login2" value="Login" alt="Login" title="Login"/> </td> </tr> 我正在使用python的mechanize模块进行网页浏览。以下是代码: br.select_form(predicate=self.__form_with_fields("username", "password")) br['username'] = self.config['COMMON.USER'] br['password'] = self.config['COMMON.PASSWORD'] try: request = br.click(name='Login2', type='image') response = mechanize.urlopen(request) print response.read() except IOError, err: logger = logging.getLogger(__name__) logger.error(str(err)) logger.debug(response.info()) print str(err) sys.exit(1) def __form_with_fields(self, *fields): """ Generator of form predicate functions. """ def __pred(form): for field_name in fields: try: form.find_control(field_name) except ControlNotFoundError, err: logger = logging.getLogger(__name__) logger.error(str(err)) return False return True return __pred 不知道我做错了什么...... 谢谢 该网站有可能在登录期间使用java脚本进行回发。我记得很清楚,对于 ASP .Net 站点,您需要获取隐藏表单字段,例如 VIEWSTATE 和 EVENTTARGET 并将它们发布到新 Page 。 您为什么不发送问题网站的链接?之后就变得相对容易弄清楚了 尝试使用 Selenium 和 PhantomJS from selenium import PhantomJS import platform if platform.system() == 'Windows': # .exe for Windows PhantomJS_path = './phantomjs.exe' else: PhantomJS_path = './phantomjs' service_args = [ # Proxy (optional) '--proxy=<>', '--proxy-type=http', '--ignore-ssl-errors=true', '--web-security=false' ] browser = PhantomJS(PhantomJS_path, service_args=service_args) browser.set_window_size(1280, 720) # Window size for screenshot (optional) login_url = "<url_here>" # Credentials Username = "<insert>" Password = "<insert>" # Login browser.get(login_url) browser.save_screenshot('login.png') print browser.current_url browser.find_element_by_id("<username field id>").send_keys(Username) browser.find_element_by_id("<password field id>").send_keys(Password) browser.find_element_by_id("<login button id>").click() print (browser.current_url) browser.get(scrape_url) print browser.page_source browser.quit() ''' python 和 pycharm 设置路径变量 点维辛检查 包管理器 python 如何安装新版本 python最新版本 - python 3.7.2 用户环境变量 蟒蛇 pyton 中的命令行 '''


在使用 TypeScript 进行 React 时,输入字段在“值”处给出错误

从“react”导入{SetStateAction,useState} const 登录表单 =() =>{ const [名称,setName] = useState(); const [全名,setFullname] = useState import { SetStateAction, useState } from "react" const Loginform =() =>{ const [name, setName] = useState<String | null>(); const [fullname, setFullname] = useState<String | null>(); const inputEvent =(event: { target: { value: SetStateAction< String |null | undefined >; }; })=>{ setName(event.target.value) } const Submit = ()=>{ setFullname(name) } return <> <h1>Enter Your Name </h1> <input type="text" placeholder="Enter your name" onChange={inputEvent} value={name}/> <button onClick={Submit}>Submit</button> <h1>Hi {fullname==null? "Guest" :fullname}</h1> </> } export default Loginform <input type="text" placeholder="Enter your name" onChange={inputEvent} value={name}/> 上一行中的“value”属性显示错误 这是错误详细信息: (property) React.InputHTMLAttributes<HTMLInputElement>.value?: string | number | readonly string[] | undefined Type 'String | null | undefined' is not assignable to type 'string | number | readonly string[] | undefined'. Type 'null' is not assignable to type 'string | number | readonly string[] | undefined'.ts(2322) index.d.ts(2398, 9): The expected type comes from property 'value' which is declared here on type 'DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>' 也尝试写 return as any。或者尝试添加 string[],但出现错误。 进行以下调整: 将 String 替换为 string,因为原始 Typescript 类型是小写的 (number, string, boolean, etc) TypeScript 报告此错误,因为属性值不接受 null 作为值,而是接受 undefined。将代码更新为: const [name, setName] = useState<string>() 这会使用 string 作为默认类型来初始化状态。 初始状态隐式地被视为 undefined,因为如果未显式提供,TypeScript 会将类型的默认值设置为 undefined。 为了简单起见,您不需要解构事件。使用内联函数,如下例所示: <input type="text" placeholder="Enter your name" onChange={(e) => setName(e.target.value)} value={name}/> 我使用你的代码创建了一个 CodeSanbox,它似乎只需要很少的修改就可以正常工作。 您可以在这里找到沙盒 这是我想出的代码 import { SetStateAction, useState } from "react"; const Loginform = () => { const [name, setName] = useState<string | null>(); const [fullname, setFullname] = useState<string | null>(); const inputEvent = (event: { target: { value: SetStateAction<string | null | undefined> }; }) => { setName(event.target.value); }; const Submit = () => { setFullname(name); }; return ( <div> <h1>Enter Your Name </h1> <input type="text" placeholder="Enter your name" onChange={inputEvent} value={name} /> <button onClick={Submit}>Submit</button> <h1>Hi {fullname == null ? "Guest" : fullname}</h1> </div> ); }; export default Loginform;


如何在C#中正确导入不同项目的Proto文件?

我的解决方案中有 2 个项目 /Common/Common.csproj /数据/Data.csproj 我的 Data.csproj 中有一个 Proto 文件: 我的解决方案中有 2 个项目 /通用/Common.csproj /数据/Data.csproj 我的 Data.csproj 中有一个 Proto 文件: <Protobuf Include=".\Protos\UserService.proto" GrpcServices="Server" /> 看起来像这样: service UserService { rpc AddUser (UserRequest) returns (SimpleResponse); } .... 现在应该从 Common 导入 SimpleReponse,所以我在这个项目中的路径 /Common/Protos/common.proto 中创建了一个 common.proto,我想导入它: 导入“common.proto”; 服务用户服务{ rpc AddUser(UserRequest) 返回(SimpleResponse); } .... 然后 Rider 显示 SimpleResponse 仍为红色,以及 common.proto 导入。当我快捷键 Space + .它会向我显示我所做的“添加到原始导入”。 因此,在全局设置中,路径现在已正确设置 - 原型和响应不再是红色,我可以按 F12 来查看它们。当我现在尝试构建时,我仍然收到错误: 我尝试在csproj中添加路径 <Protobuf Include="..\Common\Protos\common.proto" Link="..\Common\Protos\common.proto" /> 但仍然是同样的错误。 有什么想法吗? 从不同项目导入原始文件非常棘手,我发现这个解决方案非常费力。所以我想与社区分享 我正在使用微服务架构,我希望我的消息 ProtoFiles 应该在 SharedProto 项目中并在不同的项目中使用它们 假设我在 SharedProto 中有消息 Proto 文件 SharedProto --Protos ----company_dto.proto ----branch_dto.proto ---- ... company_dto.proto的内容 syntax = "proto3"; option csharp_namespace = "SharedProto.Protos"; package sharedproto.protos; // *** DTO message CompanyDto { int32 Id = 1; string Code = 2; string Name = 3; string Logo = 4; string Website = 5; } SharedProto.csproj 的内容 .... <ItemGroup> <Protobuf Include="Protos\company_dto.proto" GrpcServices="None"> <Protobuf Include="Protos\branch_dto.proto" GrpcServices="None"> </ItemGroup> .... 我拥有服务原型的项目组织 Organization ... --Protos ----company_rpc.proto ----branch_rpc.proto ... 我想将 comapany_dto.proto(属于 SharedProto 项目的一部分)导入到 comapany_rpc.proto(属于 Organization 项目的一部分)。让我们看看 .csproj 文件,因为所有的技巧都在这里: 组织.csproj的内容 <ItemGroup> <ProjectReference Include="..\SharedProto\SharedProto.csproj"> <GlobalPropertiesToRemove></GlobalPropertiesToRemove> </ProjectReference> </ItemGroup> <ItemGroup> <!-- DTOs --> <Protobuf Include="..\SharedProto\Protos\company_dto.proto" ProtoRoot=".." GrpcServices="None" Link="Protos\company_dto.proto" /> <Protobuf Include="Protos\company_rpc.proto" AdditionalImportDirs="../SharedProto" GrpcServices="Server" /> </ItemGroup> 如果您看到上面的 Organzation.csproj 文件,那么您需要了解一些非常重要的要点,以避免 file not found error 从其他项目导入 proto 文件。 ProtoRoot=".." 和 Link="Protos\company_dto.proto" 之后,将此 AdditionalImportDirs="../SharedProto" 添加到要导入文件的 <Protobuf Include=.... 上。但是,在这些设置之后,您可以在其他项目中导入 SharedProto 文件,在我的例子中它是组织项目。看看吧 company_rpc.proto内容 syntax = "proto3"; import "google/protobuf/empty.proto"; import "Protos/company_dto.proto"; package organization.companyrpc; // *** Rpc-Service service CompanyRpcService { // Retrieve All rpc GetAllCompanies (google.protobuf.Empty) returns (GetCompanyListResponse){ } .... } // Response: Retrieve All message GetCompanyListResponse { repeated sharedproto.protos.CompanyDto DtoRows = 1; string Message = 2; } 如果您看到我的company_rpc.proto文件,您就会了解我如何导入它(import "Protos/company_dto.proto";)以及我如何使用它(sharedproto.protos.CompanyDto DtoRows) 记住这个sharedproto.protos来自company_dto.proto文件中的包名称 上述设置适用于我的 .net core grpc 2.60.0 和 .net core 8


© www.soinside.com 2019 - 2024. All rights reserved.