当前位置: 首页 > news >正文

【前端】项目中遇到的问题汇总(长期更新)

一、联调交互类

1、出现一个数据在当前页面进行了修改,另外一个页面的同一数据并未同步更改

当前的数据经过调用接口修改更新以后,if(code == 200) 将当前数据存入store.dispatch, 然后另一个地方获取该数据,直接获取存入的数据,这样就可以同步显示了

let XXX=computed(() => { return store.getters.***}        //直接XXX.数据拿到就是同步的

2、给菜单项加权限,不显示管理员独有的菜单项

利用filter来传,但是不能直接在菜单的数组使用,这样会出现管理员打开页面没有该菜单项,需要二次刷新页面才出现,后也尝试在onMounted里写,结果仍需要二次刷新才出现

最后的解决方法1:

//template里传MenuList
let managerMenu= computed(() => {return store.getters.managerMenu;
});//过滤掉管理员的菜单项,if里的条件看接口怎么定义、怎么存数据的
const menu = [{……}];
const menuList = computed(() => {if(managerMenu.value.length == 0) {return menu.fliter((item) => {return item.path != "XXX";});}else return menu
});

方法2:

//menu里不放管理员的菜单项
const menu = [{……}];const menuList = computed(() => {if(managerMenu.value?.length > 0) {return [...menu, ...[{menuName: XXX, menPath:XXX,……}] ];}else return menu
});

3、路由跳转到某个页面,并显示某个标签

// 1、先设置对应的路由进行跳转
router.push("/" + item?.menuPath);// 2、跳转点击的菜单项XXX
if(item.menuName == XXX) {store.dispatch("app/menu", "***");
}//push是跳转当前页面,resolve+window.open则是跳转新页面//push支持query和params,resolve只支持query,若没用query传参,也可以用localStorage
const routePath = router.resolve({path:XXX, query:XXX,});
window.open(routePath.href, "_blank");
localStorage.setItem('a', 1);

4、为简化代码,调多个接口可用三目运算符写入一个函数

const xxParams = ref({……})
const getList = async () => {
const { code, data} = await API.XXX[xxId ? "methodAPI1" : "methodAPI2"](xxParams.value);
if(code == 200) {……}

5、使用ElementUI的无线滚动加载 v-infinite-scroll,出现一直可以滚动的情况

默认情况下,infinite-scroll-disabled是false

方法1:可以在v-infinite-scroll="loadMore"的loadMore方法中限制达到列表长度就return;

方法2:

// 标签里写infinite-scroll-disabled="disabled"
<p v-if="loading">加载中...</p>
<p v-if="noMore">没有更多了</p>const loading= ref(false)
const loadMore = () => {loading.value = true; ……}
const noMore= computed(() => return list.length >=20)    //eg:表长度限制
const disabled = computed(() => return loading || noMore

 

二、CSS样式类

1、兄弟div盒子实现并排

1、设置其父容器盒子的样式为 display: flex; (常用)

2、两个盒子都用float:left,再用定位调整。(脱离文档流)

2、多个兄弟盒子设置样式简单方式

如果使用v-for遍历,可以利用index和个数n,用三目运算符来写样式:

        :style="marginRight: (index+1) % n == 0 ? '0' : '5px' "

3、用el-input写登录输入框出现下边框消失

方法1:

        先看样式里面有没有设置相关样式,比如我遇到的问题就是设置了.el-input__wrapper的padding,这个时候按照浏览器的像素,eg:Edge1440宽来调整padding就可以调好。

方法2:

.el-input__wrapper {@media screen and (max-width: 1440px) {padding:***;}
}

相关文章:

【前端】项目中遇到的问题汇总(长期更新)

一、联调交互类 1、出现一个数据在当前页面进行了修改&#xff0c;另外一个页面的同一数据并未同步更改 当前的数据经过调用接口修改更新以后&#xff0c;if(code 200) 将当前数据存入store.dispatch, 然后另一个地方获取该数据&#xff0c;直接获取存入的数据&#xff0c;这…...

DAY73WEB 攻防-支付逻辑篇篡改属性值并发签约越权盗用算法溢出替换对冲

知识点&#xff1a; 1、支付逻辑-商品本身-修改-数量&价格&属性等 2、支付逻辑-营销折扣-优惠券&积分&签约&试用等 3、支付逻辑-订单接口-替换&并发&状态值&越权支付等 支付逻辑常见测试&#xff1a; 熟悉常见支付流程&#xff1a;选择商品…...

2024 Rust现代实用教程:Ownership与结构体、枚举

文章目录 一、Rust的内存管理模型1.GC&#xff08;Stop the world&#xff09;2.C/C内存错误大全3.Rust的内存管理模型 二、String与&str1.String与&str如何选择2.Example 三、枚举与匹配模式1.常见的枚举类型&#xff1a;Option和Result2.匹配模式 四、结构体、方法、…...

MMed-RAG:专为医学视觉语言模型设计的多功能多模态系统

MMed-RAG&#xff1a;专为医学视觉语言模型设计的多功能多模态系统 论文大纲提出背景全流程优化空雨伞分析空&#xff1a;观察现象层雨&#xff1a;分析原因层伞&#xff1a;解决方案层 三问分析WHAT - 问题是什么&#xff1f;WHY - 原因是什么&#xff1f;HOW - 如何解决&…...

数据采集(全量采集和增量采集)

全量采集&#xff1a;采集全部数据 3、全量采集 vim students_all.json {"job": {"setting": {"speed": {"channel": 1},"errorLimit": {"record": 0,"percentage": 0.02}},"content": [{…...

GPT-Sovits-1-数据处理

1.1 切割音频 将音频切割为多个10s内的片段 1.2 降噪 这一步用的是modelscope的pipeline 如果要去除背景音&#xff0c;可以用傅立叶转为为频谱&#xff0c;去除低频部分后再转回来 1.3 提取音频特征 这里用到了 funasr 库 这一步目的是输出音频样本的《文本标签文件》&am…...

web前端多媒体标签设置(图片,视频,音频)以及图片热区(usemap)的设置

多媒体标签运用 在HTML中有以下常见多媒体标签&#xff1a; <img> &#xff08;图像标签&#xff09; - 作用&#xff1a;用于在网页中嵌入图像。 - 示例&#xff1a; <img src"image.jpg" alt"这是一张图片"> 。其中 src 属性指定图像的…...

尚硅谷react教程_扩展_stateHook

1.类式组件写 import React, {Component} from react;export default class Demo extends Component {state {count:0}add () > {this.setState(state>({count:state.count1}))}render() {return (<div><h2>当前求和为{this.state.count}</h2><b…...

专线物流公共服务平台:数据驱动,标准引领,共创金融双赢新时代

专线物流公共服务平台&#xff1a;数据驱动&#xff0c;标准引领&#xff0c;共创金融双赢新时代 在当今这个数据驱动、标准引领、金融赋能的经济发展新时代&#xff0c;专线物流作为商贸流通领域的重要一环&#xff0c;正面临着前所未有的机遇与挑战。为应对复杂多变的市场环…...

界面控件DevExpress JS ASP.NET Core v24.1亮点 - 支持Angular 18

DevExtreme拥有高性能的HTML5 / JavaScript小部件集合&#xff0c;使您可以利用现代Web开发堆栈&#xff08;包括React&#xff0c;Angular&#xff0c;ASP.NET Core&#xff0c;jQuery&#xff0c;Knockout等&#xff09;构建交互式的Web应用程序。从Angular和Reac&#xff0c…...

Spring之依赖注入(DI)和控制反转(IoC)——配置文件、纯注解

依赖注入 依赖注入(Dependency Injection&#xff0c;简称 DI)与控制反转(loC)的含义相同&#xff0c;只不过这两 个称呼是从两个角度描述的同一个概念。对于一个 Spring 初学者来说&#xff0c;这两种称呼很难理解, 下面我们将通过简单的语言来描述这两个概念。 当Java对象&…...

基于SpringBoot的宠物健康咨询系统的设计与实现

摘 要 传统信息的管理大部分依赖于管理人员的手工登记与管理&#xff0c;然而&#xff0c;随着近些年信息技术的迅猛发展&#xff0c;让许多比较老套的信息管理模式进行了更新迭代&#xff0c;宠物健康知识信息因为其管理内容繁杂&#xff0c;管理数量繁多导致手工进行处理不…...

Lucene的使用方法与Luke工具(2)

文章目录 第2章 Lucene快速入门2.1 项目搭建2.1.1 SQL语句2.1.2 maven依赖2.1.3 实体类&#xff1a;2.1.4 编写DAO&#xff1a; 2.2 建立索引2.2.1 步骤&#xff1a;2.2.2 实现代码&#xff1a; 2.3 Luke工具2.3.1 运行界面介绍&#xff1a;1&#xff09;主界面2&#xff09;文…...

【客户端开发】electron 中无法使用 js-cookie 的问题

产生问题的原因 谷歌浏览器升级之后&#xff0c;出于安全考虑&#xff0c;cookie的SameSite属性默认值由None变为Lax&#xff0c;对于跨域的请求&#xff0c;禁止携带cookie。electron内核是chromium内核,所以也会有这个限制。 Cookie的SameSite属性用来限制第三方 Cookie&…...

kafka客户端消费者吞吐量优化

问题背景 业务场景 mq消息消费实时性要求不高&#xff0c;期望可以牺牲一部分实时性&#xff0c;换取吞吐量&#xff0c;例如&#xff1a;数据库单条insert优化为batchInsert。优化后结果不符合预期&#xff1a;消费者消费消息的batchSize远小于实际配置的max.poll.records&a…...

电子工程师-高质量工具包

目录 来源 高质量工具包介绍 总体框架如下 ZL01-各类元器件相关资料 ZL02-电源设计资料 ZL03-大厂参考资料 ZL04-开发工具 ZL05-仿真工具 ZL06-各类电路接口设计指南 ZL07-付费专栏全集 ZL08-优质电子书 ZL09-硬件工程师 ZL10FPGA工程师教程 ZL10-PCB设计教程 Z…...

简单认识redis - 12 redis锁

在斜体样式**redis中&#xff0c;不同的问题有不一样的解决办法&#xff0c;那么锁也有不同的锁来解决不一样的问题&#xff0c;下面将举出几个常用的redis锁。 1. SETNX锁&#xff08;简单独占锁&#xff09; 原理&#xff1a; SETNX&#xff08;SET if Not eXists&#xff…...

基于springboot+vue车辆充电桩管理系统

基于springbootvue车辆充电桩管理系统 摘 要 随着信息化时代的到来&#xff0c;管理系统都趋向于智能化、系统化&#xff0c;车辆充电桩管理系统也不例外&#xff0c;但目前国内仍都使用人工管理&#xff0c;市场规模越来越大&#xff0c;同时信息量也越来越庞大&#xff0c;…...

shodan用法(完)

声明 学习视频来自B 站up主泷羽sec&#xff0c;如涉及侵权马上删除文章。 笔记的只是方便各位师傅学习知识&#xff0c;以下网站只涉及学习内容&#xff0c;其他的都与本人无关&#xff0c;切莫逾越法律红线&#xff0c;否则后果自负。 shodan 今天&#xff0c;我们把shoda…...

【若依框架】代码生成详细教程,15分钟搭建Springboot+Vue3前后端分离项目,基于Mysql8数据库和Redis5,管理后台前端基于Vue3和Element Plus,开发小程序数据后台

今天我们来借助若依来快速的搭建一个基于springboot的Java管理后台&#xff0c;后台网页使用vue3和 Element Plus来快速搭建。这里我们可以借助若依自动生成Java和vue3代码&#xff0c;这就是若依的强大之处&#xff0c;即便你不会Java和vue开发&#xff0c;只要跟着石头哥也可…...

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统,利用大模型实现智能 UI 自动化,结合计算机视觉和自然语言处理技术,实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下: 重点代码分析: 启动相机前,先要通过getCameraIdList获取camera的个数以及id,然后可以通过getCameraCharacteristics获取对应id camera的capabilities(静态信息)进行一些openCamera前的…...

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

深度学习习题2

1.如果增加神经网络的宽度&#xff0c;精确度会增加到一个特定阈值后&#xff0c;便开始降低。造成这一现象的可能原因是什么&#xff1f; A、即使增加卷积核的数量&#xff0c;只有少部分的核会被用作预测 B、当卷积核数量增加时&#xff0c;神经网络的预测能力会降低 C、当卷…...

站群服务器的应用场景都有哪些?

站群服务器主要是为了多个网站的托管和管理所设计的&#xff0c;可以通过集中管理和高效资源的分配&#xff0c;来支持多个独立的网站同时运行&#xff0c;让每一个网站都可以分配到独立的IP地址&#xff0c;避免出现IP关联的风险&#xff0c;用户还可以通过控制面板进行管理功…...

MFE(微前端) Module Federation:Webpack.config.js文件中每个属性的含义解释

以Module Federation 插件详为例&#xff0c;Webpack.config.js它可能的配置和含义如下&#xff1a; 前言 Module Federation 的Webpack.config.js核心配置包括&#xff1a; name filename&#xff08;定义应用标识&#xff09; remotes&#xff08;引用远程模块&#xff0…...