![](https://img-blog.csdnimg.cn/20200511182200365.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
JavaScript
JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的高级编程语言。虽然它是作为开发Web页面的脚本语言而出名的,但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如函数式编程)风格。
爱宇阳
遇见你,是我幸运的开始!
展开
-
JS工具函数 数字转为中文数字和大写金额
数字转中文数字示例2. 数字转为中文大写金额数字转大写金额示例转载 2022-07-14 10:26:54 · 766 阅读 · 0 评论 -
JS树形结构数据,根据子节点数据获取所有父节点数据
省市区多维数组通过value=130628 获取到 ["河北省", "保定市", "高阳县"]函数调用这样就可以根据子节点数据获取所有父节点数据啦原创 2022-07-14 09:58:51 · 5640 阅读 · 4 评论 -
uni-app 接口封装实现过期重新登录再重新请求业务接口
小程序中实现token过期重新登录再重新请求业务接口该方法用于小程序token两个小时后过期,重新获取token再请求接口1、新建一个封装请求接口文件,命名为request.js(我在utils文件夹下建request.js),代码如下:2、使用方法,与utils文件夹同级建一个新的文件夹api,在api文件夹下新建index.js文件,代码如下 3、再在api文件夹下新建一个js(banner.js)文件,用于引入index.js写的接口,代码如下 4、在页面中使用,代码如下:...转载 2022-06-22 20:20:19 · 1685 阅读 · 0 评论 -
uniapp视频试看功能
前端监听视频播放进度,在试看结束后做一些操作HTMLJavaScript转载 2022-06-22 20:06:29 · 821 阅读 · 0 评论 -
判断当前时间戳是否在指定时间段内
当前时间戳是否在指定时间段内,返回结果 none:无效,start:开始,end:结束,in:在内/** * 对比时间戳 * @param s {String|Number} 开始时间戳 * @param e {String|Number} 结束时间戳 * @returns {String} 返回结果 none:无效,start:开始,end:结束,in:在内 */export function onJudgmentTime(s, e) { const now = Math.roun.原创 2022-05-19 16:17:27 · 3107 阅读 · 0 评论 -
文档预览:在浏览器中预览查看 Office 文档
您的网站或博客上是否有希望读者查看的 Office 文档,即使他们没有安装 Office?您愿意在下载之前查看文档吗?要为您的观众提供更好的体验,请尝试使用 Office Web 查看器。什么是 Office Web 查看器?它是一种创建 Office Web 查看器链接的服务。Office Web 查看器链接可在浏览器中打开原本会下载的 Word、PowerPoint 或 Excel 文件。您可以轻松地将下载链接转换为 Office Web 查看器链接以在您的网站或博客中使用(例如,食谱、照片原创 2022-04-07 10:45:47 · 2980 阅读 · 2 评论 -
Element表单动态控制是否必填
问题:有四种发票类型,当类型为纸质专票时,可以不输入校验码,其他三种情况都必须输入校验码。解决方式:动态控制表单的rules代码:...<!-- 纸质专票无需输入校验码--><el-form-item label="校验码后六位" prop="checkCode" :rules="invoiceInfo.invoiceType == 2 ? [{required: false}]:rules.checkCode"> <...转载 2021-12-14 10:49:00 · 1779 阅读 · 1 评论 -
解决H5在移动端软键盘弹出时底部fixed定位被顶上去的问题
移动端页面的底部菜单栏,通常会使用fixed定位在底部。在安卓手机上经常会出现软键盘弹出时,底部定位被顶上去,下面提供vue和jQuery两种解决办法。Vue解决方法<!--html部分--><div class="footer" v-show="hideshow"></div>// js 部分data(){ return { docmHeight: document.documentElement.clientHeight, //默认屏幕高转载 2021-12-14 10:05:33 · 7483 阅读 · 3 评论 -
Vue上传文件错误或者失败,重置input type=file
html中写一个type为file的input框//html<input type="file" name="file" ref="clearFile" @change="uploadMaterial($event)">提交文件, 重置input框//上传材料uploadMaterial(event) { var that = this; var formData = new FormData(); formData.append('file', event.tar转载 2021-12-14 10:01:48 · 1447 阅读 · 0 评论 -
JS判断数组中是否存在某个值或者某个对象的值
JS判断数组中是否存在某个值或者某个对象的值一、判断是否存在某个值二、判断是否存在对象的某个值原创 2021-12-14 09:32:34 · 22019 阅读 · 0 评论 -
crypto-js 加密、解密使用方法
一、安装crypto-jsnpm install crypto-js二、引入crypto-js支持ES6导入、Modularimport CryptoJS from "crypto-js";或者const CryptoJS = require("crypto-js");三、设置密钥和密钥偏移量// 十六位十六进制数作为密钥const SECRET_KEY = CryptoJS.enc.Utf8.parse("1234123412341234");// 十六位十六进原创 2021-12-10 15:35:32 · 63858 阅读 · 8 评论 -
axios 中配置withCredentials
withCredentials 有什么用?跨域请求是否提供凭据信息(cookie、HTTP认证及客户端SSL证明等),也可以简单的理解为,当前请求为跨域类型时是否在请求中协带cookie。配置withCredentials:const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // 环境变量base接口地址 url = base url + request url withCredentials: .转载 2021-07-26 17:43:33 · 28859 阅读 · 0 评论 -
数组对象去重方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>对象数组去重<.转载 2021-07-26 17:24:11 · 1423 阅读 · 0 评论 -
vue v-html 富文本图片附件前图标显示问题
vue v-html 富文本图片溢出,解决图片溢出问题之后会出现附件的图片也是100%显示如图所示:附件前面的图片也是100%解决方案:给富文本中所有图片增加 class富文本JavaScripthandleHtml(rich) { //使用正则表达式匹配所有图片 let reg = RegExp(/<[img]+\s+(.*?)(?<id>\w*?)[\s'"](.*?)>/g); let match = rich.match(reg);.原创 2021-07-16 11:56:16 · 857 阅读 · 0 评论 -
在 WebStorm 中使用 Jest 进行测试
Facebook 开发的测试平台 Jest 每天都变得越来越流行,尤其是用于测试 React 应用程序。 Jest 快速、易于上手,并且具有许多开箱即用的功能(例如快照测试和测试覆盖率)。在 WebStorm 中,我们希望简化整个测试工作流程,并使使用 Jest 编写、运行和调试测试更加顺畅和轻松。 让我们看看 WebStorm 如何帮助您使用 Jest 测试您的应用程序。例如,我们将使用使用 Jest 和 Enzyme 的 react-dropzon...翻译 2021-07-02 12:01:58 · 2099 阅读 · 0 评论 -
el-upload 使用 before-upload 传递其他参数
:before-upload="(file) => beforeAvatarUpload(file, id)"<el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="(file) => be...原创 2021-06-26 18:17:28 · 5359 阅读 · 2 评论 -
JS将字符串转换为正则表达式
获取字符串将其转换为正则表达式使用regexp对象构造函数从字符串创建正则表达式:const value = "176****3333";const str = "(^$)|(^0?(13|14|15|17|18|19)[0-9]{9}$)";const reg = new RegExp(str);console.log(reg);if (!reg.test(value)) { console.log("手机号格式错误");}...原创 2021-06-26 18:09:52 · 11302 阅读 · 0 评论 -
JS 获取指定日期的前几天或者几天
例如获取2021-06-21后1天日期/** * JavaScript 获取指定日期的前几天或者后几天的日期 * @param date {string} 日期 如:2021-06-21 * @param day {number} 天数 如:1 后几天|-1 前几天,默认后1天 * @param format {string} 时间格式 如:2021-06-22,默认 - * @returns {string} */export function getNextDate(date, da原创 2021-06-21 14:26:27 · 2378 阅读 · 0 评论 -
JS时间日期比较大小
前一阵做项目要用到日期筛选条件,就临时看些一些网上的一些时间js日期比较大小的博客,我一边看一遍实测,真是坑,讲解粗糙,对于小白很不友好,大多坑人!所以一气之下要写一篇关于日期比较的文章。来吧,这次我一边写一边实测代码!并会解释每个方法是干啥的!首先比较日期的大小,思路:我们往往先会得到两个字符串格式的日期,之后利用Date.parse()方法把这些字符串日期转成时间戳(实际上就是计算出从1970年00:00:00到目前时间日期的毫秒数),然后再比较两个时间戳的大小,就能判断日期大小。1.得到标准的字转载 2021-06-21 11:33:08 · 7109 阅读 · 0 评论 -
npm audit 安全扫描工具
为了提高 npm 依赖的安全,npm 6.1 后添加了 npm audit 工具,这个工具可以搜索当前项目中使用的依赖是否存在安全问题,并提供了 npm audit fix 工具修复。npm audit原创 2021-06-03 12:00:32 · 899 阅读 · 0 评论 -
让Web应用更安全的13个小技巧
无论你是React、Angular、Vue.js,还是原生JavaScript开发者,你的代码都有可能成为黑客眼中的猎物。作为一个前端开发者,我们可能更加关注性能、SEO、UI/UX,往往会忽视安全问题。当你了解了大型框架是如何让你对xss攻击保持开放态度时,也许你会感觉到很意外。例如,React中的dangerouslySetInnerHTML或者Angular中的bypassSecurityTrust都是一些高危操作。我们需要记住,就安全而言,前端现在和后端、DevOps一样承担着相同的职责翻译 2021-06-03 11:31:32 · 227 阅读 · 0 评论 -
JS 较大金额格式化
/** * @param integer {number} * @returns {number} */export function getDigit(integer) { let digit = -1 while (integer >= 1) { digit++ integer = integer / 10 } return digit}/** * @param integer {number} * @param number {numbe...原创 2021-06-03 10:13:03 · 327 阅读 · 0 评论 -
vue 文件上传至阿里云 ali-oss
在之前的开发当中都是后台处理上传,前端负责上传接口调用,涉及到直传到阿里云对象存储服务(oss),查阅了相关资料,分享出来希望能帮助到遇到这个需求的小伙伴,下面是具体的步骤。使用oss1.使用 NPM 安装ali-ossnpm install ali-oss复制代码2.写一个公用的ali-oss.js...转载 2021-06-03 09:17:53 · 1718 阅读 · 4 评论 -
Vue 项目使用PDF.js预览pdf文件
<template> <div class="pdf" style="height:100vh"> <iframe width="100%" height="100%" scrolling="no" style="border:none" :src="src" ></iframe> </div></template><script>.原创 2021-06-03 09:10:13 · 831 阅读 · 6 评论 -
uni-app 选择和上传非图像、视频文件
首先小程序端不支持上传非图像视频文件。然后App和H5端,参考:https://uniapp.dcloud.io/api/media/fileH5端在2.9.9以前,可以使用如下方法: 使用web-view组件 使用web-view 组件,在 web-view 组件内可以使用 input 元素进行选择,使用表单或者 xhr 上传。 使用 js 创建 input 元素进行选择 使用 xhr 上传(或者转 base64、Object-URL 使用 uni.uploadFile 上..转载 2021-06-03 08:53:42 · 1613 阅读 · 0 评论 -
new FormData() 调试打印为空
// 创建一个formDataconst formData = new FormData()// 通过append向form对象添加数据formData.append("id", 1);formData.append("name", "测试");formData.append("age", 25);原创 2021-06-03 08:41:05 · 968 阅读 · 2 评论 -
Promise实现子组件的多表单校验并反馈结果给父组件
先画个图看看整个组件+表单的结构(本文列举4个子组件、子组件中4个子表单为例,更多的同理):F.vue:父组件,做表单的统一验证和提交;X.vue:子组件,单独做表单验证,验证通过则提交表单数据给父组件;formX:子组件中表单绑定的model变量,通常所有子表单绑定在这一个表单变量上;form_xn:子表单的ref;注:本文中表单验证基于Element-ui实现(采用ref+validate方法实现,但整体框架具备通用性)一、Promise实例生成首先需要一个根..转载 2021-05-31 17:39:18 · 768 阅读 · 0 评论 -
Promise的理解与总结
全手打原创,转载请标明出处:https://www.cnblogs.com/dreamsqin/p/10959411.html,多谢,=。=~axios用多了就开始疑惑它里面到底是个啥,虽然总被告知它就是基于ajax的封装,但掐指一算,事情应该没这么简单,于是开始深挖,挖着挖着就挖到了Promise。毕竟axios的官方描述是这样的:Promise based HTTP client for browser and node.js。而axios其中一个特点就是Supports the Promi..转载 2021-05-31 17:36:06 · 154 阅读 · 0 评论 -
Vue 本地开发访问线上图片问题
问题:线上图片无法访问解决方法:vue.config.js 设置 devServer proxy 代理devServer: { open: false, overlay: { warnings: false, errors: true }, proxy: { // 文档: https://cli.vuejs.org/zh/config/#devserver-proxy '/system/upload': { target: `htt.原创 2021-05-17 11:42:01 · 1089 阅读 · 0 评论 -
精确运算原生封装
加法运算函数/** * 加法函数 * @param summand {number|string} 被加数 * @param addend {number|string} 加数 * @returns {number} 计算结果 */export function accAdd(summand, addend) { let r1 let r2 try { r1 = summand.toString().split('.')[1].length } catch (e)原创 2021-05-12 16:16:55 · 89 阅读 · 0 评论 -
vue中使用v-html防止xss注入
一、下载 xss 依赖npm install xss --save二、main.js中引入xss包并挂载到vue原型上import xss from "xss";Vue.prototype.xss = xss;三、在vue.config.js中覆写html指令chainWebpack: config => { config.module .rule("vue") .use("vue-loader") .loader("转载 2021-01-14 09:52:04 · 3590 阅读 · 0 评论 -
JavaScript中的数组方法总结
原文链接:JavaScript中的数组方法总结在JS中,数组方法是非常重要且常用的方法.在此整理总结一番.JavaScript 数组的力量隐藏在数组方法中。1. javaScript常用数组方法顺序 方法名 功能 返回值 是否改变原数组 版本 1 push() (在结尾)向数组添加一或多个元素 返回新数组长度 Y ES5- 2 unshift() (在开头)向数组添加一或多个元素 返回新数组长度转载 2020-12-01 09:14:03 · 265 阅读 · 0 评论 -
微信小程序 删除数组中指定的对象
1.封装删除函数 util.js/**删除数组中的某一个对象 array:数组 obj:需删除的对象*/const arrRemoveObj = (array, obj) => { let length = array.length; for (let i = 0; i < length; i++) { if (array[i] ==...原创 2019-08-21 10:51:30 · 7272 阅读 · 5 评论 -
Vue项目 *.js 使用 jsdoc 生成 JavaScript 文档
一、安装 jsdocnpm install --save-dev jsdoc二、配置 jsdoc.json{ "source": { "include": [ "src/" ], "exclude": [ "src/router" ] }, "opts": { "template": "node_modules/docdash", "encoding": "utf8", "destination": "./docs/", "recu原创 2020-07-27 17:35:11 · 2873 阅读 · 5 评论 -
vue axios 接口请求封装优化
vue axios 接口请求封装主要区别是增加xhr.js 管理接口一、封装文件 src/utils/request.jsimport axios from "axios";import { getToken } from "@u/auth"; /** * 创建 axios 实例 */const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // 环境变量base接口地址 url = base .原创 2020-06-29 16:33:30 · 1220 阅读 · 0 评论 -
vue axios 接口请求封装
一、封装文件 src/utils/request.jsimport axios from "axios";import { getToken } from "@u/auth";/** * 创建 axios 实例 */const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url withCredentials: true, // 跨域请求时发.原创 2020-06-26 09:08:28 · 1162 阅读 · 0 评论 -
vue 判断数据是否为空
<template> <div>数据是否为空</div></template><script>export default { name: "Orders", data() { return { abj: {}, arr: [] }; }, created() { //判读数组是否为空 if(this.arr == undefined || this.arr.le.原创 2020-06-25 20:11:56 · 40352 阅读 · 0 评论 -
vue axios 请求GET,POST方式,都会首先有一个OPTIONS请求
一、OPTIONS请求产生原因Preflighted 请求与简单请求不同,Preflighted 请求首先会向服务器发送一个Options请求,以验证是否对指定服务有访问权限,之后再发送实际的请求。Preflighted 请求具有以下特点:1. 除GET、HEAD、POST方法外,XHR都会使用Preflighted 请求。使用POST方法向服务器发送数据时,Content-Type使用application/x-www-form-urlencoded、multipart/form-data或tex原创 2020-06-25 14:00:25 · 2756 阅读 · 0 评论 -
target=_blank 在新标签页打开页面安全问题解决
一、原生JavaScript解决function openUrl(url) { const newTab = window.open(); newTab.opener = null; newTab.location = url;}二、a标签rel="noreferrer noopener" 属性解决<a href="https://www.baidu.com" target="_blank" rel="noopener noreferrer"> 百度<.原创 2020-06-19 09:11:27 · 1358 阅读 · 2 评论 -
WebStorm + Chrome 调试 Vue 项目
一、安装Chrome插件JetBrains IDE Support二、设置插件监听端口和WebStorm Debugger端口一致JetBrains IDE Support 端口File --> Settings --> Build,Execution,Deployment --> DebuggerWebStorm Debugger 端口三、 WebStorm设置JavaScript Debug设置debug端口和项目开发端口一致(根据自己的项目端口设置原创 2020-06-04 14:51:20 · 1399 阅读 · 1 评论