前端工作总结03

1、includes()与indexOf()的结合使用解决删除否的情况。

因为我们的列表中有些会有签发signMark的值，有些没有，

我用map方法返回相应数组某些值，返回一些新数组，如果没有返回的是[undefined],此时我们的length为1，所以我们可以通过arr.indexOf(undefined)来反映是否有这个值，通过includes()来判断是否数组中是否有某些值。用map()方法，includes()，indexOf()三个结合使用判断。

其实includes()也可以顶替indexOf()进行使用，includes(undefined)也是可以使用，indexOf(undefined)>=0两个是一个意思。

 2. 解决内容过长 提示语显示不全的问题 2023/11/30

dev-bugfix

全局src/style/index.scss

.el-tooltip__popper {max-width: 300px;
}
把这个调大或者取消掉

3.运营端出现一种情况就是提交业务审核的时候发现，有问题，控制台报错，一直走不下去。

看了下控制台出现的原因是因为fileUrl这个字段取不到，因为后端做了判断有提示语，所以我就进行了搜索，发现子组件里边有一个clearFile方法，初始化fileUrl的值付了一个null，但是我们在父组件判断的时候是按照''空的字符串进行判断的，所以出现了这个问题。

所以把fileUrl的值赋值为'' 就可以了。

4、子票区间显示问题 

if(rowData.billRange&&rowData.billRange.indexOf(",") != -1) {label = rowData.billRange.replace(/\,/g, "-")

}

 5、mixin案例1  为了进行获取CFCA相关的一些信息

import Api from '@api/modules/busiCenter'
export default {data() {return {boundUKeyType: '工商',boundUKeyList: [],boundAllUKeyList: [],usbKeyForms: {ukeyIssuingAuthority: 6,SerialNumber: '',SubjectCN: '',IssuerDN: ''},endorsedRecordStatus: [{ code: 6, label: 'CFCA' }]}},mounted() {this.getUkeyInfo()},methods: {bussinessDia(boundRecord) {if (boundRecord.remitterBankName && boundRecord.remitterBankName.indexOf('中信') >= 0) {this.boundUKeyType = 'cfca'} else if (boundRecord.remitterBankName && boundRecord.remitterBankName.indexOf('上海浦东') >= 0) {this.boundUKeyType = 'cfca'} else if (boundRecord.bankSource && boundRecord.bankSource.indexOf('CNCB') >= 0) {this.boundUKeyType = 'cfca'} else if (boundRecord.bankSource && boundRecord.bankSource.indexOf('SPD') >= 0) {this.boundUKeyType = 'cfca'} else if (boundRecord.bankSource && boundRecord.bankSource.indexOf('ICBC') >= 0) {this.boundUKeyType = '工商'// } else if (boundRecord.acceptorBankName && boundRecord.acceptorBankName.indexOf('中信') >= 0) {//   this.boundUKeyType = 'cfca'// } else if (boundRecord.acceptorBankName && boundRecord.acceptorBankName.indexOf('上海浦东') >= 0) {//   this.boundUKeyType = 'cfca'} else {this.boundUKeyType = '工商'}const boundUKeyList = []for (var i = 0; i < this.boundAllUKeyList.length; i++) {if (this.boundUKeyType == '工商' && this.boundAllUKeyList[i].ukeyIssuingAuthority == 1) {boundUKeyList.push(this.boundAllUKeyList[i])}if (this.boundUKeyType == 'cfca' && this.boundAllUKeyList[i].ukeyIssuingAuthority != 1) {if (this.boundAllUKeyList[i].serialNo) {boundUKeyList.push(this.boundAllUKeyList[i])}}}this.boundUKeyList = boundUKeyList// this.getUkeyInfo();this.boundUKeyDialog = true},getUkeyInfo() {Api.getUkeyInfo().then((resp) => {if (resp.code == 200) {const respdata = resp.datathis.boundAllUKeyList = respdata}})},closeBoundUkey() {this.boundUKeyDialog = falsethis.doInit()},confirmBoundUkey() {if (this.boundUKeyType == 'cfca') {this.usbKeyDialog = trueif (this.$refs.usbKeyForm) {this.$refs.usbKeyForm.clearform()}} else {this.usbKeyVarity()}}}
}

6、mixin案例2 判断Ukey这个盾是否有效

import Api from '@api/modules/busiCenter'
export default{data(){return {usbKeyDialog:false,boundUKeyDialog: false,dialogHTMLVisible: false}},methods:{dialogHTMLShow(){this.dialogHTMLVisible = true;},closeNotHasUkey(){this.dialogHTMLVisible = false;},usbKeyVarity(val){this.usbKeyDialog = falsethis.boundUKeyDialog = false// console.log(val);this.register()},async addUsbkey() {const varity={serialNo:this.usbKeyForms.SerialNumber, //序列号issuerDn:this.usbKeyForms.IssuerDN //颁发者DN}const resp = await Api.getUkeyVerify(varity)if(resp.code==200){const respdata=resp.dataif(respdata.status=='0'){if(this.usbKeyForms.CSPName.indexOf('Ucan')>-1){const billData = this.multipleSelections[0];let source = '<?xml version="1.0" encoding="utf-8"?><T><D><M>'+'<k>出票人名称</k><v>'+ billData.remitterName+'</v></M><M><k>出票人账号</k><v>'+ billData.remitterAcctNo+'</v></M><M><k>票据金额</k><v>'+ billData.billAmount+'</v></M><M><k>收款人姓名</k><v>'+ billData.payeeName+'</v></M></D></T>'this.$refs.usbKeyForm.SignOnClick512(source);}else{this.usbKeyVarity();}}else if(respdata.status=='1'){this.$message.error('UKey证书已过期，请使用其他UKey')}else if(respdata.status=='2'){this.$message.error('UKey证书已吊销，请使用其他UKey')}else if(respdata.status=='3'){this.$message.error('UKey证书匹配失败，请使用其他UKey')}// this.usbKeyDialog = false}},usbKeyFormFn(val){this.usbKeyForms=JSON.parse(JSON.stringify(val))// this.usbKeyForms.ukeyIssuingAuthority=6},}
}

 7、退出登录清空vuex协议的缓存

methods: {...mapActions({clearUserInfo: 'clearUserInfo'clearTreaty: 'clearTreaty'}),this.clearTreaty()}
export default {state: {user: sessionStorage.getItem('user') && JSON.parse(sessionStorage.getItem('user')) || {},signStatus: sessionStorage.getItem('signStatus'),signXpStatus: sessionStorage.getItem('signXpStatus'),signZcStatus: sessionStorage.getItem('signZcStatus')},mutations: {saveUser(state, user) {state.user = usersessionStorage.setItem('user', JSON.stringify(user))sessionStorage.setItem('authorization', user.token)},signStatus(state, status) {state.signStatus = statussessionStorage.setItem('signStatus', status)},signXpStatus(state, status) {state.signXpStatus = statussessionStorage.setItem('signXpStatus', status)},signZcStatus(state, status) {state.signZcStatus = statussessionStorage.setItem('signZcStatus', status)},clearXy(state) {state.signStatus = ''state.signXpStatus = ''state.signZcStatus = ''}},actions: {clearUserInfo(context) {context.commit('saveUser', {})},clearTreaty(context) {context.commit('clearXy')},saveSignStatus(context, signStatus) {context.commit('signStatus', signStatus)},saveXpStatus(context, signStatus) {context.commit('signXpStatus', signStatus)},saveZcStatus(context, signStatus) {context.commit('signZcStatus', signStatus)}},getters: {getUser(state) {return state.user}}
}

8、全局使用mixin

我们常常会在src文件夹里边放入很多mixin，那么请大家思考一下，如果单组件单独引用，我们可以去做，如果全局呢？

第一步：main.js

import commonMixin from './mixin/commonMixin'
Vue.mixin(commonMixin)

 第二步：mixin里边建立这个js 文件

export default {methods: {showChangeIngAlert() {console.log('走这里吗？')const enterpriseInfo = JSON.parse(sessionStorage.getItem('enterpriseInfo')) || {companyDto: {}}const { updateStage } = enterpriseInfo.companyDto// updateStage 0---无事发生 1---提交待审核 2---审核通过（企业名称修改了） 3---银行账户信息认证 4---银行账户认证完成 5---审核不通过if(updateStage == '1') {this.$alert('企业信息变更审核中，暂时不能做该业务', '提示', {confirmButtonText: '确定',type: 'warning',center: true})return true}return false}}
}

第三步：在文件中直接使用

    // 提交复核applyClick() {if(this.showChangeIngAlert()) { return }if (this.multipleSelections.length > 1) {this.$message.error('只能选择一条数据')} else if (this.multipleSelections.length > 0) {this.$emit('applyClick', this.multipleSelections)} else {this.$message.error('请至少选择一条数据')}},

9、8903 223 运营端复核通过提交一直转圈 获取tradeInfoId 添加判断

问题是一个提交业务的按钮出现的，出现这个问题在于控制台报错，走不下去了，tradeInfoId，因为不存在这个键，怎么会不报错呢？

tradeInfoId: getMybjObj.tradeInfoDto.tradeInfoId || ''

看一行这个代码，如果没有值的时候就会出现错误

咱们更改一下

let tradeInfoId = ''if (getMybjObj.tradeInfoDto && getMybjObj.tradeInfoDto.tradeInfoId) {tradeInfoId = getMybjObj.tradeInfoDto.tradeInfoId} else {tradeInfoId = ''}tradeInfoId: tradeInfoId

10、本地可以反显，但是线上就出现问题，问题如下：

TypeError: Cannot read properties of undefined (reading ‘replace‘)

然后再点击第一个文件指向这一行的代码

query.billRange==0?"0-0":query.billRange.replace(/\,/g,'-')

我们思考一下 

如果说 没有query.billRange，那么replace方法肯定用不了，那么我们想一想本地可以，线上不可以，本地和线上的区别在哪里呢？那就是异步任务的问题，有的时候跑的快也会出现问题，所以会出现this.$nextTick，所以我们在获取值的时候给其他的值直接赋值，然后再使用新的值也可以解决这个问题。代码如下：

if (this.query.billRange) {this.billRange = this.query.billRange} else {this.billRange = ''}billRange==0?"0-0":billRange.replace(/\,/g,'-')

11、feat: 配置生产环境体验版访问域名

我们可以通过ip来判断，直接上代码

const urlHost = window.location.host.indexOf('123.249.122.186') > -1 ? 'http://123.249.122.186:8904' : window.location.host.indexOf('cctcr.cctgroup.com.cn') > -1 ? 'https://cctcr.cctgroup.com.cn' : 'http://uat.dpdemo.cctcr.cn:8902'if(key=='7-1'){var url1 = `${urlHost}/demo/#/loginTransfer?key=0&token=${token}`window.open(url1, '_blank')return}if(key=='7-2'){var url1 = 'http://localhost:8085/micro-ucenter/home'window.open(url1, '_blank')return}if(key=='7-3'){var url1 = `${urlHost}/demo/#/loginTransfer?key=2&token=${token}`window.open(url1, '_blank')return}if(key=='7-4'){var url1 = `${urlHost}/demo/#/loginTransfer?key=3&token=${token}`window.open(url1, '_blank')return}this.$store.dispatch('menu/saveActivePrimaryMenu', keyCode).then(() => {this.$router.replace({ path: '/home', query: { key }})})

 12、上传企业logo展示大小调整

<div class="navbar-left-font" :class="{'logoPathDiv': logoPath}">.navbar-left-font.logoPathDiv {width: 180px;height: 50px;img{width: 180px;height: 50px;}}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/190458.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

在Windows中如何知道当前cmd的python解释器来自哪个位置

在Windows中如何知道当前cmd的python解释器来自哪个位置

在Windows操作系统中&#xff0c;你可以通过命令提示符来确定当前使用的Python解释器来自哪个位置。为此&#xff0c;请按照以下步骤操作&#xff1a; 打开命令提示符&#xff08;可以通过在搜索栏中输入“cmd”或“Command Prompt”并打开它&#xff09;。 在命令提示符中输入…
阅读更多...
CGAL的单调与排序矩阵搜索

CGAL的单调与排序矩阵搜索

monotone_matrix_search() 和 sorted_matrix_search() 是一种处理在具有某些结构特性的矩阵中高效查找最大条目的技术。许多具体问题都可以建模为矩阵搜索问题&#xff0c;对于其中一些问题&#xff0c;我们提供了显式解决方案&#xff0c;使您可以在不了解矩阵搜索技术的情况下…
阅读更多...
【面试题】JavaScript高级循环方法

【面试题】JavaScript高级循环方法

给大家推荐一个实用面试题库 1、前端面试题库 &#xff08;面试必备&#xff09; 推荐&#xff1a;★★★★★ 地址&#xff1a;web前端面试题库 除了for循环♻️&#xff0c;for-of,for-each循环♻️也是一个不错的选择 先说for-of循环♻️ 认识for-of循环♻️…
阅读更多...
如何在手机上打开电脑端本地的网页

如何在手机上打开电脑端本地的网页

目录 一.手机端预览VSCode生成的网页站点二.手机端预览VS2022生成的 WebApi网页站点三.手机端预览VS2022生成的 vueapp前端四.总结 今天遇到了2个小问题&#xff1a;1.想在手机上运行VSCode上写好的网页代码。2.同样在手机上运行VS2022 WebApi生成的网页。查找了一晚上资料&…
阅读更多...
哪些AI软件有消除笔？这四款AI软件轻松消除水印

哪些AI软件有消除笔？这四款AI软件轻松消除水印

日常生活或工作中&#xff0c;离不开对图片的处理&#xff0c;AI已经对图片视频下手了&#xff0c;处理软件我们不必在用传统的PS来一点点扣了&#xff0c;AI能瞬间消除图片中多余的杂物&#xff0c;大大提高了打工人的工作效率&#xff0c;那么哪些AI软件有消除笔的功能呢&…
阅读更多...
VIT总结

VIT总结

关于transformer、VIT和Swin T的总结 1.transformer 1.1.注意力机制 An attention function can be described as mapping a query and a set of key-value pairs to an output, where the query, keys, values, and output are all vectors. The output is computed as a wei…
阅读更多...
【redis缓存高可用集群】

【redis缓存高可用集群】

文章目录 Redis集群方案比较Redis高可用集群搭建Redis集群原理分析Redis集群节点间的通信机制哨兵leader选举流程 Redis集群方案比较 在redis3.0以前的版本要实现集群一般是借助哨兵sentinel工具来监控master节点的状态&#xff0c;如果master节点异 常&#xff0c;则会做主从…
阅读更多...
YOLOv8优化策略：SENetV2，squeeze和excitation全面升级，效果优于SENet | 2023年11月最新成果

YOLOv8优化策略：SENetV2，squeeze和excitation全面升级，效果优于SENet | 2023年11月最新成果

🚀🚀🚀本文改进： SENetV2，squeeze和excitation全面升级，作为注意力机制引入到YOLOv8，放入不同网络位置实现涨点 🚀🚀🚀YOLOv8改进专栏：http://t.csdnimg.cn/hGhVK 学姐带你学习YOLOv8，从入门到创新，轻轻松松搞定科研； 1.SENetV2 论文：https://arxiv.org/…
阅读更多...
C#中GDI+图形图像绘制(直线、矩形、圆、椭圆、圆弧、扇形、多边形）

C#中GDI+图形图像绘制(直线、矩形、圆、椭圆、圆弧、扇形、多边形）

目录 一、直线 二、矩形 三、椭圆 四、圆 五、圆弧 六、扇形 七、多边形 八、示例源码 一、直线 调用Graphics类中的DrawLine()方法&#xff0c;结合Pen对象可以绘制直线。DrawLine()方法有以下两种构造函数。 第一种用于绘制一条连接两个Point结构的线。当参数pt1的值…
阅读更多...
状态类算法复杂排序输出

状态类算法复杂排序输出

对于目标检测任务中对某一类的检测结果进行输出的时候&#xff0c;一般都是无序的&#xff0c;很明显这样子很难满足的我们的需求&#xff0c;我们更喜欢他是这样子输出的&#xff1a; &#x1f447; 我们可以看到——”按顺序输出结果“中的字段是完美的和上面图片中的识别结…
阅读更多...
golang ssh demo

golang ssh demo

密码登入： package mainimport ("fmt""golang.org/x/crypto/ssh" )func main() {// 目标服务器地址targetAddr := "ip:22"// 创建 SSH 客户端连接sshConfig := &ssh.ClientConfig{User: "root",Auth: []ssh.AuthMethod{ssh.Pass…
阅读更多...
大三上oracle数据库期末复习

大三上oracle数据库期末复习

1、创建表空间 2、创建用户 3、用户授权 oracle数据库逻辑存储结构&#xff1a; 1、表空间&#xff08;最大的逻辑存储单元&#xff09; 创建表空间 2、段 3、盘区&#xff08;最小的磁盘空间分配单元&#xff09; 4、数据块&#xff08;最小的数据读写单元&#xff09; 用…
阅读更多...
WordPress（11）给文章添加预计阅读时长

WordPress（11）给文章添加预计阅读时长

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言一、文件配置二、代码块1.引入库2.配置 single.php三、效果图前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了…
阅读更多...
thinkphp 5.1 对数据库查出来的字段进行预处理

thinkphp 5.1 对数据库查出来的字段进行预处理

比如数据库的设计是下面这样子&#xff1a; 我想展示的是这个样子&#xff1a; 前端可以处理。 Think PHP的处理方式&#xff1a; 定义属性 &#xff1a; $this->customize 任意值;//这里的之没有作用 <?phpnamespace app\hs\controller\shop;use app\daogou\mo…
阅读更多...
分享4个工具，轻松搞定PDF和图像中提取文本

分享4个工具，轻松搞定PDF和图像中提取文本

大型语言模型已经席卷了互联网&#xff0c;导致更多的人没有认真关注使用这些模型最重要的部分&#xff1a;高质量的数据&#xff01; 本文旨在提供一些有效从任何类型文档中提取文本的技术。 Python库 本文专注于Pytesseract、easyOCR、PyPDF2和LangChain库。实验数据是一个…
阅读更多...
计算机网络TCP篇①

计算机网络TCP篇①

目录 一、TCP 基本信息 1.1、TCP 的头格式 1.2、什么是 TCP 1.3、什么是 TCP 连接 1.4、TCP 与 UDP 的区别 1.2、TCP 连接建立 1.2.1、TCP 三次握手的过程 1.2.2、为什么是三次握手&#xff1f;不是两次&#xff1f;四次&#xff1f;&#xff08;这个问题真是典中典&am…
阅读更多...
深度学习实战63-利用自适应混合金字塔网络实现人脸皮肤美颜效果，快速部署与实现一键美颜功能

深度学习实战63-利用自适应混合金字塔网络实现人脸皮肤美颜效果，快速部署与实现一键美颜功能

大家好，我是微学AI，今天给大家介绍一下深度学习实战63-利用自适应混合金字塔网络实现人脸皮肤美颜效果，快速部署与实现一键美颜功能。在本文中，我将介绍一种新颖的自适应混合金字塔网络(ABPN)，该网络可以实现对超高分辨率照片的快速局部修饰。该网络主要由两个组件组成：一…
阅读更多...
javascript中的正则表达式的相关知识积累

javascript中的正则表达式的相关知识积累

01-javascript中的正则表达式用符号/作为正则表达式的开始符和结束符 javascript中的正则表达式用符号/作为正则表达式的开始符和结束符。 即javascript的正则表达式如下所示&#xff1a; /正则表达式/02-^&#xff1a;匹配字符串的开始 ^: 该符号表示匹配字符串的开始。这个…
阅读更多...
你知道Canary金丝雀版本的由来吗

你知道Canary金丝雀版本的由来吗

Canary金丝雀版本是一种软件开发中常见的概念&#xff0c;它作为一种测试和试用版&#xff0c;旨在保护用户安全性和隐私&#xff0c;同时促进创新和改进。本文主要介绍Canary版本的由来。 随着技术的不断进步&#xff0c;软件开发变得越来越复杂且困难。为了满足用户需求并提…
阅读更多...
【渗透】记录阿里云CentOS一次ddos攻击

【渗透】记录阿里云CentOS一次ddos攻击

文章目录 发现防御 发现 防御 流量清洗 使用高防
阅读更多...
最新文章

Copyright @ 2022~2023