【前端】常用功能合集

目录

  • js
    • 跳转到新标签打开PDF文件
    • js每十个字符换行
  • es6
    • 用表达式或变量名作为对象的属性名
  • vue
    • v-for
    • 插值、:style、:class
    • 父组件加载完后再加载子组件
    • keep-alive缓存
    • 跨域请求第三方接口
    • 跨域请求之callback(不建议)
    • 读取本地文件
    • 浏览器播放提示音audio
  • jquery
    • $.fn.method 扩展方法
    • $.extend()

js

跳转到新标签打开PDF文件

let url=fileBaseUrl+this.downloadForm.downloadFile//下载地址
let ele=document.createElement('a')//创建a标签ele.download=this.downloadForm.downloadFile//下载名称ele.target="_blank"//新标签ele.href=url//地址$("body").append(ele)//将a标签插入页面ele.click()//点击a标签实现跳转$(ele).remove()//移除a标签

js每十个字符换行

string.replace(/[^\x00-\xff]/g,"$&\x01").replace(/.{9}\x01?/g,"$&\n").replace(/\x01/g,"")
  • 将每个中文字符变为两个字符,比如“中文”替换成“中文”
  • 匹配任意每9个字符或9个字符加,在匹配的字符串后加一个换行符
  • 将所有的去除

\xnn 匹配ASCII代码中十六进制代码为nn的字符
[^\x00-\xff]表示匹配非单字节的字符,例如汉字,汉字符号,单字节字符包括英文字母,数字,英文符号…
$&与 regexp 所有相匹配的子串
\x01 控制字符,soh,表示标题开始
. 除换行符 \n 之外的任何单字符
零次或一次

es6

用表达式或变量名作为对象的属性名

// 定义
var obj1={a:"1",b:"2"
}
var obj2={["a"+1]:"1",["a"+2]:"2"
}
var c="a"
var obj3={[c]:"1",
}
// 使用
obj1.a
obj1["b“]
obj2["a1"]
obj2["a"+2]
var c="a"
obj1[c]

vue

v-for

  1. 普通数字

    data:{
    }<p v-for="count in 4">第{{count}}个</p>
    
  2. 普通数组

    data:{list:[1,2,3,4]
    }<p v-for="(value,index) in list">--索引--{{index}}   --值--{{value}}</p>
    
  3. 普通对象

    data:{obj:{a:1,b:2,c:3}
    }<p v-for="(val,key) in obj">--键是--{{key}}--值是--{{val}}</p>
    
  4. 对象数组

    data:{listObj:[{id:1, name:'zs1'},{id:2, name:'zs2'},{id:3, name:'zs3'},{id:4, name:'zs4'},{id:5, name:'zs5'},{id:6, name:'zs6'},]
    }<p v-for="(item,index) in listObj">--id--{{item.id}}   --姓名--{{item.name}}</p>
    

插值、:style、:class

  1. {{}}直接引用变量
    <span>Message: {{ msg }}</span>
    
  2. {{}}表达式
    {{ number + 1 }}
    {{ ok ? 'YES' : 'NO' }}
    {{ message.split('').reverse().join('') }}
    
  3. v-bind直接绑定变量
    <div :id="myId"></div>
    <button :disabled="btnDisable">Button</button>
    
  4. v-bind拼接字符串
    <div :id="'chart-' + num" :class="'list'+num"></div>
    <div :id="`myChart${index+1}`" :class="`position${index+1}`">
    
  5. :style–>{}
    data() {return {a:'微软雅黑',b: 5,c: '#fff',link1: '/home',d:'www',msg1:'1',msg2:'2',msg3:'3'}
    }<p :style="{fontFamily:a}">{{msg1}}</p>
    <a :style="{color:(b>0?c:'#000')}" :href="link1">{{msg2}}</a>
    <p :style="{fontSize:(d!='d'?'18rem':'16rem')">{{msg3}}</p>
    
  6. :class–>{}
    data() {return {current:'a',isActive:true,}
    }
    <li :class="{list:(current=='a')}">
    <li :class="{list:(current=='b')}">
    <div :class="{active:isActive}">
    <div :id="`myChart${index+1}`" :class="`position${index+1}`">
    

父组件加载完后再加载子组件

  • 父组件.vue

    //引用子组件时设置`v-if=flag`为false,等数据准备后再将flag设置为true
    <template>...<child v-if="flag"></child>...
    </template>
    <script>
    ...
    //获取数据
    this.flag=true
    ...
    </script>
    

keep-alive缓存

主要用于保留组件状态或避免重新渲染
activated钩子函数
组件激活时调用,该钩子在服务器端渲染期间不被调用
deactivated钩子函数
组件停用时调用,该钩子在服务器端渲染期间不被调用

  • app.vue全局缓存
    <template><div id="app"><transition><keep-alive><router-view></router-view></keep-alive></transition></div>
    </template>
    
  • 路由缓存
    <li :class="{nav_current:(current=='index')}"><keep-alive><router-link to="/index">页面</router-link></keep-alive>
    </li>
    
  • 组件缓存
    <keep-alive><component v-bind:is="currentTabComponent"></component>
    </keep-alive>
    

注意事项:通常初始化操作放在mounted中,设置keep-alive缓存后页面切换时mounted不会被执行,如果需要执行某些操作则必须放在钩子函数activated中

跨域请求第三方接口

问题:不论下面哪一种方法,同一个页面都不能请求两个,$.getJSON会报Access-Control-Allow-Origin的错,axios会报503的错。
解决:也没找到好的解决方案,暂时解决方案为两个请求放在不同的.vue页面,并将数据存在store。

  • 方法一:axios通过代理
    1. 跨域请求地址
      https://lab.isaaclin.cn/nCoV/api/overall
      https://lab.isaaclin.cn/nCoV/api/area?province=北京市
    2. config下index.js的proxytable配置
      '/bpi':{target: 'https://lab.isaaclin.cn/nCoV/api',changeOrigin: true,pathRewrite: {'^/bpi': ''}
      }
      
    3. axios请求
      this.$axios.get("/bpi/overall").then((res)=>{console.log(res.data)
      })
      this.$axios.get("/bpi/area?province=北京市").then((res)=>{console.log(res.data)
      })
      
  • 方法二:$getJSON
    $.ajaxSettings.async = false;//防止返回数据混乱,同步请求
    $.getJSON(url1, (res)=>{console.log(res)})
    $.getJSON(url1, (res)=>{console.log(res)
    })
    $.ajaxSettings.async = true;//重置回异步,防止影响其他
    

跨域请求之callback(不建议)

如果有SameSite 错误,可参考以下方法解决
https://blog.csdn.net/cnq2328/article/details/105134286/

  • 方法一:script标签
    前端

    <script>//回调函数,处理返回function showData (result) {console.log(result)}$(document).ready(function () {//插入标签$("head").append("<script src='https://lab.isaaclin.cn/nCoV/api/overall?callback=showData'><\/script>");});
    </script>
    

    后端返回

    callback是jquery在进行跨域请求时生成的一个回调函数名,当页面取得服务器返回的值时,会由该回调函数解析成json对象。所以在返回数据时应该把对整个回调函数的调用进行返回,这个函数需要一个json对象的字符串作为参数,这样才能正常解析。

    返回格式示例:callback({“name”:”hello”})

    //前端传过来的回调函数名称String callback = request.getParameter("callback");
    //用回调函数名称包裹返回数据,这样,返回数据就作为回调函数的参数传回去了result = callback + "(" + result + ")";}
    
  • 方法二:jsonp

    jsonp的原理就是通过script的src,将函数作为src请求地址的参数来传递数据,所以jsonp只有get一种传输方式。

    前端

    			function showData (result) {console,log(result)}$.ajax({url: "https://lab.isaaclin.cn/nCoV/api/overall",type: "GET",dataType: "jsonp",  //指定服务器返回的数据类型jsonpCallback: "showData",  //指定回调函数名称success: function (data) {console.info("调用success");}});
    

读取本地文件

前端无法像原生APP一样直接操作本地文件,否则的话打开个网页就能把用户电脑上的文件偷光了,所以需要通过用户触发,用户可通过以下三种方式操作触发:
1、通过input type=”file” 选择本地文件
2、通过拖拽的方式把文件拖过来
3、在编辑框里面复制粘贴

如果是非要不经过用户通过js读取,建议将文件放在项目static目录下,然后通过ajax请求

vue引用static下资源时,必须使用绝对路径/static/[name]
因为static目录下的文件并不会被webpack处理,它们会直接复制到最终目录(dist/static)下,一般放类库文件

  1. 将本地文件放在static下

  2. 通过get请求
    注意:因为请求的是本项目static目录下的资源,所以请求的url不需要加域名和端口(如"http:localhost:8081"),不然部署到服务器容易请求不到数据

    this.$axios.get("/static/data/zt_bj_5g_location3.csv").then(res => {let csv= res.data;console.log(csv);});
    

    如果是部署到tomcat服务器,最好区分一下开发环境还是生产环境

    const baseUrl = process.env.NODE_ENV == "development"?'':'/myprojectname';
    module.exports={baseUrl:baseUrl
    }
    
    let url=baseUrl+"/static/data/zt_bj_5g_location3.csv"
    this.$axios.get(url).then(res => {let csv= res.data;console.log(csv);});
    

浏览器播放提示音audio

方法一:修改浏览器配置

  • 代码
    <audiocontrols="controls"hiddensrc="../../static/alert.mp3"ref="audio"
    ></audio>this.$refs.audio.currentTime = 0; //从头开始播放提示音
    this.$refs.audio.play(); //播放
    
  • chrome设置允许声音自动播放
    搜索”网站设置
    在这里插入图片描述
    下拉在”更多内容设置“找到“声音”,选择网站可以播放声音或者在自定义内添加
    在这里插入图片描述

方法二:引导用户点击

  • 代码

    <audiocontrols="controls"hiddensrc="../../static/alert.mp3"ref="audio"
    ></audio>init() {//刚打开网站时弹框引导用户点击this.$alert("允许网站播放声音", "提示", {confirmButtonText: "确定",showClose: false,callback: action => {this.isPlay = true;this.play();}});
    },
    play() {//用户点击后,即可播放if (this.isPlay) {this.$refs.audio.currentTime = 0; //从头开始播放提示音this.$refs.audio.play(); //播放}
    },
    

jquery

$.fn.method 扩展方法

jQuery.fn === jQuery.prototype,把方法扩展到了对象的prototype上,所以实例化一个jQuery对象的时候,它就具有了这些方法

// 扩展方法
$.fn.dataStatistics = function(options){options = $.extend({min : 1000, times: 3000,len:9},options || {});var ths = this;//解决this指向问题
}// 将方法扩展到.dataStatistics元素$(".dataStatistics").dataStatistics({min: rate4g,time: 1000,len: 6});

$.extend()

将两个或更多对象的内容合并到第一个对象,对于同一个属性,后面对象的该属性值的覆盖前面对象的该属性值
$.extend( target [, object1 ] [, objectN ] )
$.extend( [deep ], target, object1 [, objectN ] )

  • deep:可选,默认false,为true时表示深度合并对象
  • target:目标对象,其他对象的成员属性将被附加到该对象上
  • object1:可选,被合并的对象
// 将传入的options参数对象与默认的参数对象合并
options = $.extend({min : 1000, times: 3000,len:9 },options || {});

为jQuery类添加方法:如果只有一个参数,意味着目标参数被省略,jQuery对象本身被默认为目标对象。

$.extend({a: function() { },b: function() { }
})

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

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

相关文章

Lora升级!ReLoRa!最新论文 High-Rank Training Through Low-Rank Updates

目录 摘要1 引言2 相关工作3 方法4 实验5 结果6 结论7 局限性和未来工作 关注公众号TechLead&#xff0c;分享AI与云服务技术的全维度知识。作者拥有10年互联网服务架构、AI产品研发经验、团队管理经验&#xff0c;同济本复旦硕&#xff0c;复旦机器人智能实验室成员&#xff0…

1、[春秋云镜]CVE-2022-32991

文章目录 一、相关信息二、解题思路&#xff08;手注&#xff09;三、通关思路&#xff08;sqlmap&#xff09; 一、相关信息 靶场提示&#xff1a;该CMS的welcome.php中存在SQL注入攻击。 NVD关于漏洞的描述&#xff1a; 注入点不仅在eid处&#xff01;&#xff01;&#xff…

路由器的简单概述(详细理解+实例精讲)

系列文章目录 华为数通学习&#xff08;4&#xff09; 目录 系列文章目录 华为数通学习&#xff08;4&#xff09; 前言 一&#xff0c;网段间通信 二&#xff0c;路由器的基本特点 三&#xff0c;路由信息介绍 四&#xff0c;路由表 五&#xff0c;路由表的来源有哪些…

新能源汽车动力总成系统及技术

需要动力系统总成的请联&#xff1a;shbinzer 拆车邦 需要动力系统总成的请联&#xff1a;shbinzer 拆车邦 需要动力系统总成的请联&#xff1a;shbinzer 拆车邦 需要动力系统总成的请联&#xff1a;shbinzer 拆车邦 需要动力系统总成的请联&#xff1a;shbinzer …

k3s or RKE2 helm安装报错dial tcp 127.0.0.1:8080: connect: connection refused

1.报错&#xff1a; Error: INSTALLATION FAILED: Kubernetes cluster unreachable: Get "http://127.0.0.1:8080/version": dial tcp 127.0.0.1:8080: connect: connection refused 2.问题原因&#xff1a; 1.因为helm默认使用k8s的配置文件&#xff0c;默…

uniapp 配置网络请求并使用请求轮播图

由于平台的限制&#xff0c;小程序项目中不支持 axios&#xff0c;而且原生的 wx.request() API 功能较为简单&#xff0c;不支持拦截器等全局定制的功能。因此&#xff0c;建议在 uni-app 项目中使用 escook/request-miniprogram 第三方包发起网络数据请求。 官方文档&#xf…

宏观经济和风电预测误差分析(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

springboot1.5.12升级至2.6.15

首先&#xff0c;加入springboot升级大版本依赖&#xff0c;会在升级过程中打印出错日志提示&#xff08;升级完毕可去除&#xff09; <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-properties-migrator</art…

基于龙格-库塔算法优化的BP神经网络(预测应用) - 附代码

基于龙格-库塔算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码 文章目录 基于龙格-库塔算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码1.数据介绍2.龙格-库塔优化BP神经网络2.1 BP神经网络参数设置2.2 龙格-库塔算法应用 4.测试结果&#xff…

The Cherno——OpenGL

The Cherno——OpenGL 1. 欢迎来到OpenGL OpenGL是一种跨平台的图形接口&#xff08;API&#xff09;&#xff0c;就是一大堆我们能够调用的函数去做一些与图像相关的事情。特殊的是&#xff0c;OpenGL允许我们访问GPU&#xff08;Graphics Processing Unit 图像处理单元&…

C++异常

文章目录 C异常异常语法代码示例 栈解旋示例代码 noexcept代码示例 异常的声明周期示例代码 异常的多态使用代码示例 C标准异常库代码示例 重写自己的异常示例代码 C异常 异常是处理程序中的错误。所谓的错误时指程序运行的过程中发生的一些异常事件(如&#xff1a;除零错误&a…

jenkins运行pytest测试用例脚本报错:没有权限,无法写日志PermissionError:[Error 13]Permission denied

报错信息&#xff1a; PermissionError:[Error 13]Permission denied&#xff1a;‘/var/jenkins_home/workspace/deleverySystem/Delivery_System/out_files/logs/waimai_20230823.log’ 解决方法&#xff1a; 在jenkins容器内部输入 chmod -R 777 /var/jenkins_home/works…

反射机制-体会反射的动态性案例(尚硅谷Java学习笔记)

// 举例01 public class Reflect{ // 静态性 public Person getInstance(){return new Person(); }// 动态性 public T<T> getInstance(String className) throws Exception{Calss clzz Class.forName(className);Constructor con class.getDeclaredConstructor();con…

基于ssm+vue汽车售票网站源码和论文

基于ssmvue汽车售票网站源码和论文088 开发工具&#xff1a;idea 数据库mysql5.7 数据库链接工具&#xff1a;navcat,小海豚等 技术&#xff1a;ssm 摘 要 互联网发展至今&#xff0c;无论是其理论还是技术都已经成熟&#xff0c;而且它广泛参与在社会中的方方面面。它让…

8.28作业

定义一个基类 Animal&#xff0c;其中有一个虚函数 perform()&#xff0c;用于在子类中实现不同的表演行为。 #include <iostream>using namespace std; class Animal { public:Animal() {}virtual void perform(){} }; class Monkey:public Animal { public:Monkey() {…

python自动化测试-自动化基本技术原理

1 概述 在之前的文章里面提到过&#xff1a;做自动化的首要本领就是要会 透过现象看本质 &#xff0c;落实到实际的IT工作中就是 透过界面看数据。 掌握上面的这样的本领可不是容易的事情&#xff0c;必须要有扎实的计算机理论基础&#xff0c;才能看到深层次的本质东西。 …

骨传导耳机有什么副作用? 骨传导耳机对身体有损伤吗

根据目前的科学研究和经验&#xff0c;骨传导耳机被认为是相对安全的使用设备&#xff0c;不会引起副作用&#xff0c;也不会对身体造成损伤&#xff0c;相比会对我们的耳朵听力起到一定的保护作用。 但是&#xff0c;个体差异和特殊情况可能会影响人们对骨传导耳机的感受与反应…

选择结构(个人学习笔记黑马学习)

if语句 单行if语句 用户输入分数&#xff0c;如果分数大于600&#xff0c;视为考上一本大学&#xff0c;在屏幕上输出 #include <iostream> using namespace std;int main() {int score 0;cout << "请用户输入分数" << endl;cin >> score;c…

探索OLED透明屏的优缺点:引领科技未来的革命性突破

OLED透明屏作为一项革命性的创新技术&#xff0c;其令人惊叹的透明度和柔性性能引起了全球范围内的关注。 然而&#xff0c;了解OLED透明屏的优缺点对于我们全面认识其在科技未来中的地位至关重要。 今天&#xff0c;尼伽将深入探讨OLED透明屏的优势和限制&#xff0c;并借助…

C++新经典 | C语言

目录 一、基础之查漏补缺 1.float精度问题 2.字符型数据 3.变量初值问题 4.赋值&初始化 5.头文件之<> VS " " 6.逻辑运算 7.数组 7.1 二维数组初始化 7.2 字符数组 8.字符串处理函数 8.1 strcat 8.2 strcpy 8.3 strcmp 8.4 strlen 9.函数 …