【前端】项目中遇到的问题汇总(长期更新)
一、联调交互类
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、出现一个数据在当前页面进行了修改,另外一个页面的同一数据并未同步更改 当前的数据经过调用接口修改更新以后,if(code 200) 将当前数据存入store.dispatch, 然后另一个地方获取该数据,直接获取存入的数据,这…...
DAY73WEB 攻防-支付逻辑篇篡改属性值并发签约越权盗用算法溢出替换对冲
知识点: 1、支付逻辑-商品本身-修改-数量&价格&属性等 2、支付逻辑-营销折扣-优惠券&积分&签约&试用等 3、支付逻辑-订单接口-替换&并发&状态值&越权支付等 支付逻辑常见测试: 熟悉常见支付流程:选择商品…...
2024 Rust现代实用教程:Ownership与结构体、枚举
文章目录 一、Rust的内存管理模型1.GC(Stop the world)2.C/C内存错误大全3.Rust的内存管理模型 二、String与&str1.String与&str如何选择2.Example 三、枚举与匹配模式1.常见的枚举类型:Option和Result2.匹配模式 四、结构体、方法、…...
MMed-RAG:专为医学视觉语言模型设计的多功能多模态系统
MMed-RAG:专为医学视觉语言模型设计的多功能多模态系统 论文大纲提出背景全流程优化空雨伞分析空:观察现象层雨:分析原因层伞:解决方案层 三问分析WHAT - 问题是什么?WHY - 原因是什么?HOW - 如何解决&…...
数据采集(全量采集和增量采集)
全量采集:采集全部数据 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 如果要去除背景音,可以用傅立叶转为为频谱,去除低频部分后再转回来 1.3 提取音频特征 这里用到了 funasr 库 这一步目的是输出音频样本的《文本标签文件》&am…...
web前端多媒体标签设置(图片,视频,音频)以及图片热区(usemap)的设置
多媒体标签运用 在HTML中有以下常见多媒体标签: <img> (图像标签) - 作用:用于在网页中嵌入图像。 - 示例: <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…...
专线物流公共服务平台:数据驱动,标准引领,共创金融双赢新时代
专线物流公共服务平台:数据驱动,标准引领,共创金融双赢新时代 在当今这个数据驱动、标准引领、金融赋能的经济发展新时代,专线物流作为商贸流通领域的重要一环,正面临着前所未有的机遇与挑战。为应对复杂多变的市场环…...
界面控件DevExpress JS ASP.NET Core v24.1亮点 - 支持Angular 18
DevExtreme拥有高性能的HTML5 / JavaScript小部件集合,使您可以利用现代Web开发堆栈(包括React,Angular,ASP.NET Core,jQuery,Knockout等)构建交互式的Web应用程序。从Angular和Reac,…...
Spring之依赖注入(DI)和控制反转(IoC)——配置文件、纯注解
依赖注入 依赖注入(Dependency Injection,简称 DI)与控制反转(loC)的含义相同,只不过这两 个称呼是从两个角度描述的同一个概念。对于一个 Spring 初学者来说,这两种称呼很难理解, 下面我们将通过简单的语言来描述这两个概念。 当Java对象&…...
基于SpringBoot的宠物健康咨询系统的设计与实现
摘 要 传统信息的管理大部分依赖于管理人员的手工登记与管理,然而,随着近些年信息技术的迅猛发展,让许多比较老套的信息管理模式进行了更新迭代,宠物健康知识信息因为其管理内容繁杂,管理数量繁多导致手工进行处理不…...
Lucene的使用方法与Luke工具(2)
文章目录 第2章 Lucene快速入门2.1 项目搭建2.1.1 SQL语句2.1.2 maven依赖2.1.3 实体类:2.1.4 编写DAO: 2.2 建立索引2.2.1 步骤:2.2.2 实现代码: 2.3 Luke工具2.3.1 运行界面介绍:1)主界面2)文…...
【客户端开发】electron 中无法使用 js-cookie 的问题
产生问题的原因 谷歌浏览器升级之后,出于安全考虑,cookie的SameSite属性默认值由None变为Lax,对于跨域的请求,禁止携带cookie。electron内核是chromium内核,所以也会有这个限制。 Cookie的SameSite属性用来限制第三方 Cookie&…...
kafka客户端消费者吞吐量优化
问题背景 业务场景 mq消息消费实时性要求不高,期望可以牺牲一部分实时性,换取吞吐量,例如:数据库单条insert优化为batchInsert。优化后结果不符合预期:消费者消费消息的batchSize远小于实际配置的max.poll.records&a…...
电子工程师-高质量工具包
目录 来源 高质量工具包介绍 总体框架如下 ZL01-各类元器件相关资料 ZL02-电源设计资料 ZL03-大厂参考资料 ZL04-开发工具 ZL05-仿真工具 ZL06-各类电路接口设计指南 ZL07-付费专栏全集 ZL08-优质电子书 ZL09-硬件工程师 ZL10FPGA工程师教程 ZL10-PCB设计教程 Z…...
简单认识redis - 12 redis锁
在斜体样式**redis中,不同的问题有不一样的解决办法,那么锁也有不同的锁来解决不一样的问题,下面将举出几个常用的redis锁。 1. SETNX锁(简单独占锁) 原理: SETNX(SET if Not eXistsÿ…...
基于springboot+vue车辆充电桩管理系统
基于springbootvue车辆充电桩管理系统 摘 要 随着信息化时代的到来,管理系统都趋向于智能化、系统化,车辆充电桩管理系统也不例外,但目前国内仍都使用人工管理,市场规模越来越大,同时信息量也越来越庞大,…...
shodan用法(完)
声明 学习视频来自B 站up主泷羽sec,如涉及侵权马上删除文章。 笔记的只是方便各位师傅学习知识,以下网站只涉及学习内容,其他的都与本人无关,切莫逾越法律红线,否则后果自负。 shodan 今天,我们把shoda…...
【若依框架】代码生成详细教程,15分钟搭建Springboot+Vue3前后端分离项目,基于Mysql8数据库和Redis5,管理后台前端基于Vue3和Element Plus,开发小程序数据后台
今天我们来借助若依来快速的搭建一个基于springboot的Java管理后台,后台网页使用vue3和 Element Plus来快速搭建。这里我们可以借助若依自动生成Java和vue3代码,这就是若依的强大之处,即便你不会Java和vue开发,只要跟着石头哥也可…...
接口测试中缓存处理策略
在接口测试中,缓存处理策略是一个关键环节,直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性,避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明: 一、缓存处理的核…...
基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真
目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销,平衡网络负载,延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...
STM32+rt-thread判断是否联网
一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...
[10-3]软件I2C读写MPU6050 江协科技学习笔记(16个知识点)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...
Spring Boot面试题精选汇总
🤟致敬读者 🟩感谢阅读🟦笑口常开🟪生日快乐⬛早点睡觉 📘博主相关 🟧博主信息🟨博客首页🟫专栏推荐🟥活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...
BCS 2025|百度副总裁陈洋:智能体在安全领域的应用实践
6月5日,2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席,并作《智能体在安全领域的应用实践》主题演讲,分享了在智能体在安全领域的突破性实践。他指出,百度通过将安全能力…...
MySQL中【正则表达式】用法
MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现(两者等价),用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例: 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...
什么?连接服务器也能可视化显示界面?:基于X11 Forwarding + CentOS + MobaXterm实战指南
文章目录 什么是X11?环境准备实战步骤1️⃣ 服务器端配置(CentOS)2️⃣ 客户端配置(MobaXterm)3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果