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

get与post如何拼接url与数据的灵活处理,循环的重要性。

get与post拼接url地址不同:

 let postData = {method: "post",data: {op: "/api/setting/maintenanceperiod?period="+this.authorizationCode,loadingConfig: {},data: {period:this.authorizationCode}}};
if(this.editData.id){let postData = {method: "get",data: {op: "/api/" + this.editData.id + "/rmmc",loadingConfig: {},data: {id: this.editData.id,pwd: this.editData.password,},},};

后端返回一个:

某某市领导职数共20个,实配2,缺编<span style='color:#D1881B'>18</span>个,

进行页面渲染,有3种方式,第一种最笨的方式,自己手动敲出来,但是不够灵活,一旦后端的数据要变,可采用第二种,分割开来赋值。第三种相对灵活,直接循环分割的字符串,进行v-html赋值,并绑定样式。

 <div class="actual" v-if="returnZsbzText"><img src="../../../../static/images/head-renyuan.png" alt=""><!-- <span>一二级主任科员职数999个,</span><span>实有999个,</span><span>空缺999个</span> --><!-- <span v-html="returnZsbzText.split(',')[0]"></span><span v-html="returnZsbzText.split(',')[1]"></span><span v-html="returnZsbzText.split(',')[2]" :style="{ color: '#D1881B' }"></span><span v-html="returnZsbzText.split(',')[3]" :style="{ color: '#4177c7' }"></span> --><template v-for="sentence in returnZsbzText.split(',')"><span v-html="sentence" :style="getStyle(sentence)" :key=""></span></template></div>
 getStyle(sentence) {if (sentence.includes("style")) {// 提取style样式const styleStartIndex = sentence.indexOf('style="') + 7;const styleEndIndex = sentence.indexOf('"', styleStartIndex);const style = sentence.slice(styleStartIndex, styleEndIndex);// 解析样式字符串,提取color属性的值const colorStartIndex = style.indexOf("color:") + 6;const colorEndIndex = style.indexOf(";", colorStartIndex);const color = style.slice(colorStartIndex, colorEndIndex).trim();return { color: color };} else {return {}; // 默认样式}},

此时,若后端返回的是一个数组,数组里面是两条类似于以上的数据

[ "一二级主任科员职数0个,实有0个,;", "三四级主任科员职数0个,实有0个,;" ]

此时采用相同的方式,再加一个for循环:

     <div class="actualVacancy" v-if="returnRybzText"><div class="actual" v-for="(item,index) in returnRybzText" :key="index"><img src="../../../../static/images/head-renyuan.png" alt=""><template v-for="sentence in item.split(',')"><span v-html="sentence" :style="getStyle(sentence)" :key=""></span></template></div></div>

相关文章:

get与post如何拼接url与数据的灵活处理,循环的重要性。

get与post拼接url地址不同&#xff1a; let postData {method: "post",data: {op: "/api/setting/maintenanceperiod?period"this.authorizationCode,loadingConfig: {},data: {period:this.authorizationCode}}}; if(this.editData.id){let postData …...

Remote Sensing,2023 | 基于SBL的分布式毫米波相干雷达成像的高效实现

Remote Sensing,2023 | 基于SBL的分布式毫米波相干雷达成像的高效实现 注1&#xff1a;本文系“无线感知论文速递”系列之一&#xff0c;致力于简洁清晰完整地介绍、解读无线感知领域最新的顶会/顶刊论文(包括但不限于 Nature/Science及其子刊; MobiCom, Sigcom, MobiSys, NSDI…...

Android学习之路(5) UI控件之Button (按钮)与 ImageButton (图像按钮)

本节引言&#xff1a; 今天给大家介绍的Android基本控件中的两个按钮控件&#xff0c;Button普通按钮和ImageButton图像按钮&#xff1b; 其实ImageButton和Button的用法基本类似&#xff0c;至于与图片相关的则和后面ImageView相同&#xff0c;所以本节 只对Button进行讲解&am…...

Day 31 C++ STL常用算法(下)

文章目录 常用拷贝和替换算法copy——容器内指定范围的元素拷贝到另一容器中函数原型注意——利用copy算法在拷贝时&#xff0c;目标容器要提前开辟空间示例 replace——将容器内指定范围的第一个旧元素修改为新元素函数原型注意——replace只会替换区间内满足条件的第一个旧元…...

【Android Studio】 win11 安装配置 jdk17 超详细

概述 一个好的安装教程能够帮助开发者完成更便捷、更快速的开发。书山有路勤为径&#xff0c;学海无涯苦作舟。我是秋知叶i、期望每一个阅读了我的文章的开发者都能够有所成长。 一、下载JDK JDK官网 这里下载 JDK17 windows x64 installer 二、安装JDK 双击打开下载的 j…...

IDEA下方工具栏SideBar没有Services解决方法 IDEA配合微服务学习多端口管理打开Services栏方法

问题 微服务学习时&#xff0c;一次要打开多个端口&#xff0c;比如8080给order模块、8081给user模块……这就需要用idea管理多端口。 这时候就可以用到Services栏进行管理。 解决 首先看下方Sidebar没有Services。 打开Services 打开方式一&#xff1a;手动打开 在IDEA中…...

[Vue warn]: Error in render: “SyntaxError: “undefined“ is not valid JSON“

[Vue warn]: Error in render: “SyntaxError: “undefined” is not valid JSON” 这说明出现了undefined这个变量类型&#xff0c;比如JSON.parse()时候会出现&#xff0c;可以先尝试打印JSON.parse()括号中的内容是否是undefined&#xff0c;如果是&#xff0c;那问题的根源…...

ui设计师工作总结及计划范文模板

ui设计师工作总结及计划范文模板【篇一】 白驹过隙&#xff0c;转眼间某某年已近结尾&#xff0c;时间伴随着我们的脚步急驰而去&#xff0c;到了个人工作总结的时候&#xff0c;蓦然回首&#xff0c;才发现过去的一年不还能画上圆满的句号&#xff0c;内心感慨万千&#xff0c…...

【Kafka】2.在SpringBoot中使用官方原生java版Kafka客户端

目 录 1. 新建一个消息生产者2. 新建一个消息消费者3. 测 试 在开始之前&#xff0c;需要先做点准备工作&#xff0c;用 IDEA 新建一个 Maven 项目&#xff0c;取名 kafka-study&#xff0c;然后删掉它的 src 目录&#xff0c;接着在 pom.xml 里面引入下面的依赖。这个项目的作…...

使用腾讯云轻量服务器Matomo应用模板建网站流量统计系统

腾讯云百科分享使用腾讯云轻量应用服务器Matomo应用模板搭建网站流量统计系统&#xff0c;Matomo 是一款开源的网站数据统计软件&#xff0c;可以用于跟踪、分析您的网站的流量&#xff0c;同时充分保障数据安全性、隐私性。该镜像基于 CentOS 7.6 64位操作系统&#xff0c;已预…...

clickhouse-监控配置

一、概述 监控是运维的一大利器&#xff0c;要想运维好clickhouse,首先就要对其进行监控&#xff0c;clickhouse有几种监控数据的方式&#xff0c;一种是系统本身监控&#xff0c;一种是通过exporter来监控&#xff0c;下面分别描述一下 二、系统自带监控 我下面会对监控做一…...

C++11并发与多线程笔记(5)互斥量概念、用法、死锁演示及解决详解

C11并发与多线程笔记&#xff08;5&#xff09;互斥量概念、用法、死锁演示及解决详解 1、互斥量&#xff08;mutex&#xff09;的基本概念2、互斥量的用法2.1 lock()&#xff0c;unlock()2.2 lock_guard类模板 3、死锁3.1 死锁演示3.2 死锁的一般解决方案&#xff1a;3.3 std:…...

华为云classroom赋能--Devstar使应用开发无需从零开始

华为云DevStar为开发者提供业界主流框架代码初始化能力&#xff0c;通过GUI、API、CLI等多种方式&#xff0c;将按模板生成框架代码的能力推送至用户桌面。同时基于华为云服务资源、成熟的DevOps开发工具链和面向多场景的众多开发模板&#xff0c;提供一站式创建代码仓、自动生…...

软件的数据回滚

原理&#xff1a;所谓的数据回滚&#xff0c;就是数据备份 增量备份&#xff1a; 全量备份&#xff1a; 最简单的事全量备份。 就是spoon工具&#xff0c;完成把所有的表每天定时复制一份&#xff0c;表名“_日期”。 所以有实时表&#xff0c;每日备份表。 回滚就是把之前…...

git clone使用https协议报错OpenSSL SSL_read: Connection was reset, errno 10054

在使用git 下载github上的代码时&#xff0c; 一般有ssh协议和https协议两种。使用ssh协议可以成功clone代码&#xff0c; 但使用https协议时出错&#xff1a; $ git clone https://github.com/openai/improved-diffusion.git Cloning into improved-diffusion... fatal: unab…...

化繁为简,使用Hibernate Validator实现参数校验

前言 在之前的悦享校园的开发中使用了SSM框架&#xff0c;由于当时并没有使用参数参数校验工具&#xff0c;方法的入参判断使用了大量的if else语句&#xff0c;代码十分臃肿&#xff0c;因此最近在重构代码时&#xff0c;将框架改为SpringBoot后&#xff0c;引入了Hibernate V…...

【Qt】多线程

线程创建 自定义线程类 #ifndef CUSTOMETHREAD_H #define CUSTOMETHREAD_H#include <QObject> #include <QThread> #include "add.h"class CustomeThread : public QThread {Q_OBJECT public:// Bind the thread kernel function.explicit CustomeThre…...

腾讯云GPU服务器GN7实例NVIDIA T4 GPU卡

腾讯云GPU服务器GN7实例搭载1颗 NVIDIA T4 GPU&#xff0c;8核32G配置&#xff0c;系统盘为100G 高性能云硬盘&#xff0c;自带5M公网带宽&#xff0c;系统镜像可选Linux和Windows&#xff0c;地域可选广州/上海/北京/新加坡/南京/重庆/成都/首尔/中国香港/德国/东京/曼谷/硅谷…...

3. 爬取自己CSDN博客列表(自动方式)(分页查询)(网站反爬虫策略,需要在代码中添加合适的请求头User-Agent,否则response返回空)

文章目录 步骤打开谷歌浏览器输入网址按F12进入调试界面点击网络&#xff0c;清除历史消息按F5刷新页面找到接口&#xff08;community/home-api/v1/get-business-list&#xff09;接口解读 撰写代码获取博客列表先明确返回信息格式json字段解读 Apipost测试接口编写python代码…...

利用HTTP代理实现请求路由

嘿&#xff0c;大家好&#xff01;作为一名专业的爬虫程序员&#xff0c;我知道构建一个高效的分布式爬虫系统是一个相当复杂的任务。在这个过程中&#xff0c;实现请求的路由是非常关键的。今天&#xff0c;我将和大家分享一些关于如何利用HTTP代理实现请求路由的实用技巧&…...

新手入门指南使用 Python 快速调用 TaoToken 多模型服务

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 新手入门指南&#xff1a;使用 Python 快速调用 TaoToken 多模型服务 对于刚接触大模型 API 的开发者而言&#xff0c;面对众多模型…...

告别轮询!用GD32F4xx的USART中断实现高效串口数据收发(实测对比耗时)

告别轮询&#xff01;用GD32F4xx的USART中断实现高效串口数据收发&#xff08;实测对比耗时&#xff09; 在嵌入式系统中&#xff0c;串口通信是最基础也最常用的外设之一。对于需要同时处理多个任务的系统来说&#xff0c;如何高效地管理串口通信&#xff0c;减少CPU资源的占用…...

npm publish前必看:如何用命令行优雅搞定2FA,避免发布包时卡壳

npm publish前必看&#xff1a;如何用命令行优雅搞定2FA&#xff0c;避免发布包时卡壳 在npm生态中&#xff0c;发布包是开发者日常工作中不可或缺的一环。然而&#xff0c;随着安全要求的提高&#xff0c;双因素身份验证&#xff08;2FA&#xff09;已成为保护账户安全的重要措…...

pyperclip测试策略:如何确保跨平台剪贴板功能的稳定性

pyperclip测试策略&#xff1a;如何确保跨平台剪贴板功能的稳定性 【免费下载链接】pyperclip Python module for cross-platform clipboard functions. 项目地址: https://gitcode.com/gh_mirrors/py/pyperclip pyperclip是一个强大的Python跨平台剪贴板模块&#xff0…...

Windows远程桌面终极解锁指南:RDP Wrapper Library完整使用教程

Windows远程桌面终极解锁指南&#xff1a;RDP Wrapper Library完整使用教程 【免费下载链接】rdpwrap RDP Wrapper Library 项目地址: https://gitcode.com/gh_mirrors/rd/rdpwrap 还在为Windows家庭版无法使用远程桌面功能而烦恼吗&#xff1f;RDP Wrapper Library是您…...

高效AI专著生成:20万字专著一键搞定,AI写专著工具实测推荐!

学术专著写作挑战与AI工具助力 对于初次尝试编写学术专著的研究者来说&#xff0c;写作过程就像是在“摸索着走过一条未知的小路”&#xff0c;处处都有挑战等待着他们。在选题上常常感到迷惘&#xff0c;难以在“有意义”与“可操作性”之间找到合适的平衡&#xff1a;有的研…...

FreeRTOS互斥信号量实战:用STM32CubeIDE解决多任务访问共享串口的优先级翻转问题

FreeRTOS互斥信号量实战&#xff1a;用STM32CubeIDE解决多任务访问共享串口的优先级翻转问题 在嵌入式系统开发中&#xff0c;多任务并发访问共享资源是一个常见且棘手的问题。想象一下这样的场景&#xff1a;你的STM32设备上有两个任务需要向同一个串口发送数据——一个高优先…...

TVA智能体范式的工业视觉革命(3)

重磅预告&#xff1a;本专栏将独家连载系列丛书《智能体视觉技术与应用》部分精华内容&#xff0c;该书是世界首套系统阐述“因式智能体”视觉理论与实践的专著&#xff0c;特邀美国 TypeOne 公司首席科学家、斯坦福大学博士 Bohan 担任技术顾问。Bohan先生师从美国三院院士、“…...

别再混淆Eb/N0和SNR了!手把手教你用Python仿真验证MQAM误码率公式

别再混淆Eb/N0和SNR了&#xff01;手把手教你用Python仿真验证MQAM误码率公式 在通信系统设计与性能分析中&#xff0c;Eb/N0&#xff08;每比特能量与噪声功率谱密度之比&#xff09;和SNR&#xff08;信噪比&#xff09;是最基础却最易混淆的概念。许多工程师在仿真MQAM系统时…...

告别虚拟机卡顿:在VMware 17上为RHEL 9.2分配CPU和内存的黄金法则

告别虚拟机卡顿&#xff1a;在VMware 17上为RHEL 9.2分配CPU和内存的黄金法则 当你在VMware Workstation 17上运行RHEL 9.2时&#xff0c;是否经常遇到编译速度慢、桌面响应延迟甚至整个系统卡死的情况&#xff1f;这很可能是因为你没有根据宿主机的实际硬件情况科学分配虚拟资…...