![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
木蓝茶陌*_*
这个作者很懒,什么都没留下…
展开
-
webpack的核心概念
webpack是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时,它会在内部从一个或多个入口点构建一个 [依赖图),然后将项目中所需的每一个模块组合成一个或多个 bundles,它们均为静态资源,用于展示内容。原创 2024-03-25 17:11:16 · 1034 阅读 · 0 评论 -
Ts 接口interface 与 对象type 的异同
很多对象类型既可以用 interface 表示,也可以用 type 表示。而且,两者往往可以换用,几乎所有的 interface 命令都可以改写为 type 命令。命令也有类似作用,通过定义一个类,同时定义一个对象类型。这表明,interface 是开放的,可以添加属性,type 是封闭的,不能添加属性,只能定义新的 type。上面示例中,type 可以扩展原始数据类型 string,interface 就不行。运算符,表示同时具备两个类型的特征,因此可以起到两个对象类型合并的作用。原创 2023-12-22 13:57:27 · 227 阅读 · 0 评论 -
markdown的标题设置自动添加序号
markdown的标题设置自动添加序号使用Typora这款markdown编辑器之后,可以设置标题自动添加序号。以Windows电脑为例打开Typora这款软件,点击左上角的“文件”,接着点击“偏好设置”选择“外观”,点击“打开主题文件夹”打开Typora的theme文件夹,新建样式文件base.user.css/** initialize css counter */#write { counter-reset: h1}h1 { counter-rese原创 2022-02-17 10:54:25 · 9174 阅读 · 4 评论 -
vue 引入quill-image-resize-module 插件报错
vue 引入quill-image-resize-module 插件报错TypeError: Cannot read properties of undefined (reading ‘imports’)解决方法:编辑 vue.config.js 文件const webpack = require('webpack')module.exports = { configureWebpack: { plugins: [ new webpack.ProvidePlugin({原创 2022-02-16 11:16:28 · 4687 阅读 · 4 评论 -
Promise.all()和Promise.race()
Promise.all()方法用于将多个 Promise 实例,包装成一个新的 Promise 实例。Promise.race()方法同样是将多个 Promise 实例,包装成一个新的 Promise 实例。原创 2023-12-20 10:14:39 · 477 阅读 · 0 评论 -
js使用正则校验邮箱格式是否正确
js使用正则校验邮箱格式是否正确原创 2023-10-11 09:14:59 · 591 阅读 · 0 评论 -
js验证字符串是否是时间日期格式
js验证字符串是否是时间日期格式原创 2023-10-10 17:19:26 · 1681 阅读 · 0 评论 -
js获取当前时间和前一天的时间
js获取当前时间和前一天的时间。原创 2023-08-05 09:20:23 · 523 阅读 · 0 评论 -
前端用于处理cookie的js库 js-cookie
一个简单、轻量级的JavaScript API,用于处理cookie。原创 2023-05-31 09:03:52 · 207 阅读 · 0 评论 -
使用Promise对象封装图片加载的异步操作
使用Promise对象封装图片加载的异步操作。如果加载成功,就调用resolve方法,否则就调用reject方法。原创 2023-05-31 08:56:45 · 313 阅读 · 0 评论 -
echarts区域选择(brush)
echarts区域选择(brush),brush 是区域选择组件,用户可以选择图中一部分数据,从而便于向用户展示被选中数据,或者他们的一些统计计算结果原创 2023-05-06 17:30:00 · 1644 阅读 · 1 评论 -
vue项目中引入Luckysheet
Luckysheet ,一款纯前端类似excel的在线表格,功能强大、配置简单、完全开源。在vue中引入Luckysheet。Luckysheet 常用 API 操作。Luckysheet 自定义操作。原创 2022-11-13 14:43:46 · 6802 阅读 · 0 评论 -
vue项目中引入monaco editor
在vue项目中引入monaco-editor代码编辑器,monaco-editor的常用方法和事件原创 2022-09-13 14:13:51 · 1243 阅读 · 0 评论 -
vue项目引入iconfont图标
在vue项目中引入iconfont字体图标原创 2022-08-18 13:39:42 · 908 阅读 · 0 评论 -
Promise概述和基本使用
Promise 的含义参考文章Promise 是异步编程的一种解决方案,比传统的解决方案(回调函数和事件)更合理和更强大。它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生js提供了Promise对象。所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理。Promise 的特点Prom原创 2022-03-18 13:49:00 · 162 阅读 · 0 评论 -
日志组件Console2html的简单使用
日志组件Console2html的简单使用地址Console2html is a debug tool which is used in can-not-see-console environment.Console2html是一个调试工具,用于看不见的控制台环境。安装 Installnpm install console2html使用ReactApp.jsimport { Console2html } from 'console2html'let c2hfunction Ap原创 2022-03-11 15:09:22 · 8167 阅读 · 0 评论 -
Vue富文本编辑器 Vue-Quill-Editor的使用
Vue轻量级富文本编辑器 Vue-Quill-Editorgit仓库地址使用步骤如下:下载安装 Vue-Quill-Editor 依赖包npm install vue-quill-editor --save在main.js 文件中引入并注册 Vue-Quill-Editorimport QuillEditor from 'vue-quill-editor'Vue.use(QuillEditor)在组件中使用 Vue-Quill-Editor<template>原创 2022-01-04 17:38:46 · 608 阅读 · 2 评论 -
打开一个新的浏览器窗口window.open()
打开一个新的浏览器窗口window.open()open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。window.open(URL,name,specs,replace)URL:可选。打开指定的页面的URL。如果没有指定URL,打开一个新的空白窗口。name:可选。指定target属性或窗口的名称。specs:可选。一个逗号分隔的项目列表。replace:Optional.Specifies规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目,还是替换浏览历史中的当原创 2021-10-28 11:35:24 · 2448 阅读 · 0 评论 -
Web端打开本地可执行的exe程序
Web端打开本地可执行的exe程序reg文件是注册表文件。Web启动Colors.regWindows Registry Editor Version 5.00[HKEY_CLASSES_ROOT\Colors]@="URL:Colors""URL Protocol"=""[HKEY_CLASSES_ROOT\Colors\shell][HKEY_CLASSES_ROOT\Colors\shell\open][HKEY_CLASSES_ROOT\Colors\shell\open\comm原创 2021-10-19 15:20:53 · 3209 阅读 · 0 评论 -
Json使用概述
JSON概念:JSON 的英文全称是 JavaScript Object Notation,即“JavaScript 对象表示法”。简单来讲,JSON 就是 Javascript 对象和数组的字符串表示法,它使用文本表示一个 JS 对象或数组的信息,因此,JSON 的本质是字符串。本质:用字符串来表示 Javascript 对象数据或数组数据。作用:JSON 是一种轻量级的文本数据交换格式,在作用上类似于 XML,专门用于在计算机与网络之间存储和传输数据,但是 JSON 比 XML 更小、更快、更易解原创 2021-05-20 09:33:58 · 164 阅读 · 0 评论 -
4-正则表达式验证案例
用户名表单验证功能需求:如果用户名输入合法, 则后面提示信息为: 用户名合法,并且颜色为绿色如果用户名输入不合法, 则后面提示信息为: 用户名不符合规范, 并且颜色为红色// 获取元素var txt = document.querySelector('#txt');// 创建正则var reg = /^[a-zA-Z0-9]{6,8}$/;// 添加事件txt.onblur = function () { if ( reg.test(this.value) ) {原创 2021-05-19 09:18:18 · 135 阅读 · 0 评论 -
3-正则表达式预定义类和replace替换
预定义类预定义类指的是某些常见模式的简写方式。预定义类说明\d匹配0-9之间的任一数字,相当于[0-9]\D匹配所有0-9以外的字符,相当于[^0-9]\w匹配任意的字母、数字和下划线,相当于[A-Za-z0-9_]\W匹配除所有字母、数字和下划线以外的字符,相当于[^A-Za-z0-9_]\s匹配空格(包括换行符、制表符、空格符等),相当于[\t\r\n\v\f]\S匹配非空格的字符,相当于[^\t\r\n\v\f]replace替换原创 2021-05-18 09:12:17 · 99 阅读 · 0 评论 -
2-正则表达式的组成
正则表达式的组成特殊字符正则表达式可以由简单的字符构成,比如 /abc/,也可以是简单和特殊字符的组合,比如 /ab*c/ 。其中特殊字符也被称为元字符,在正则表达式中是具有特殊意义的专用符号,如 ^ 、$、+等。正则表达式:简单字符 和 特殊字符【元字符】特殊字符非常多,可以参考:MDN:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_ExpressionsjQuery 手册:正则表达式部分原创 2021-05-17 09:17:30 · 302 阅读 · 0 评论 -
正则表达式概述和使用
正则表达式概述正则表达式( Regular Expression )是用于匹配字符串中字符组合的模式。在JavaScript中,正则表达式也是对象。作用:检索关键字,过滤敏感字符,表单验证。正则表达式通常被用来检索、替换那些符合某个模式(规则)的文本,例如验证表单:用户名表单只能输入英文字母、数字或者下划线, 昵称输入框中可以输入中文(匹配)。正则表达式还常用于过滤掉页面内容中的一些敏感词(替换),或从字符串中获取我们想要的特定部分(提取)等 。特点灵活性、逻辑性和功能性非常的强原创 2021-05-14 09:23:04 · 106 阅读 · 0 评论 -
BOM-定时器
BOM-定时器setTimeout()setTimeout() 是window上的方法,是一次性定时器//返回值:返回一个number值,用于清除定时器;var timer = setTimeout(function() { console.log(1); }, 3000);//清除定时器 clearTimeout()clearTimeout(timer);setInterval()setInterval() 是window上的方法,是永久定时器(间隔定时器)setIn原创 2021-05-13 09:10:11 · 112 阅读 · 0 评论 -
JS字符(字母)与ASCII码转换
JS字符(字母)与ASCII码转换大写字母A-Z对应的ASCII码值是65-90小写字母a-z对应的ASCII码值是97-122charCodeAt()将字母转为ASCII码的方法charCodeAt():var str = "A";str.charCodeAt(); // 65var str1 = 'a';str1.charCodeAt(); // 97String.fromCharCode()将ASCII码转为对应字母的方法String.fromCharCode():var原创 2021-05-12 09:16:52 · 6930 阅读 · 0 评论 -
Create-React-App .env文件自定义配置
React项目build打包时不生成 sourceMap(.map)文件打包项目,主要的目的是为了,压缩代码,加快数据的传输,减少 http 请求,从而优化前端页面的性能。脚手架,默认情况下,打包项目的过程中,都会生成 souceMap(.map)文件。sourceMap 会增加打包以后的文件的体积,对于一些需求是轻量级的项目而言,sourceMap 有点多余。添加.env文件修改变量配置 node.js 运行时候的环境变量,传入 GENERATE_SOURCEMAP 值为 false。1.原创 2021-04-28 09:51:59 · 2544 阅读 · 0 评论 -
内网环境如何配置npm环境包
安装Verdaccio全局安装npm install --global verdaccio注册npm到本地npm set registry http://localhost:4873/内网添加包命令行启动Verdaccioverdaccio清理本地npm缓存目的是确保需要安装的包(.tgz)能下载到本机,避免从缓存直接安装npm cache clean --force安装需要的npm包npm i 包名查找verdaccio的storage是否有刚安装原创 2021-04-27 09:06:08 · 1884 阅读 · 0 评论 -
前端路由概述和实现原理
前端路由路由概念如何理解路由?路由器:负责分发消息后端路由(MVC)根据不同的用户请求,响应不同的内容(早期多数都是网页;现在更多的是json数据)前端路由根据不同的用户行为(事件)展示不同的页面效果(组件),组件中需要的数据可能来自于后端,也可能是前端写死的数据SPA(Single Page Application)单页面应用前端路由要解决的问题:SPA应用的局部更新问题,并且还要支持浏览器地址栏的回退功能通过前端路由实现单页面应用(局部更新)页面的变化是通原创 2021-04-25 09:14:36 · 156 阅读 · 0 评论 -
yarn的基本使用以及与npm的区别
yarn的基本使用语法yarn的作用与npm类似:用于管理第三方依赖包。因为npm早期有一些问题下载包的性能较差对依赖包的小版本管理有bug为了解决上述问题,又出现了一个新的工具yarnyarn不完全兼容npm常用命令yarn需要下载一个msi安装包,双击安装安装完成后可以在命令行使用yarn与npm的区别yarn与npm的区别:安装包npm install 包名yarn add 包名更新包npm update 包名yarn upgrade 包名卸载原创 2021-04-22 09:11:11 · 168 阅读 · 0 评论 -
会话控制cookie和session
会话技术有很多的网站都有登录的功能:|--login.html (登录页)|--index.html(主页)|--setting.html(设置页)实际开发,必须解决页面之间的数据共享问题:例如用户从login.html页面登陆之后,再去访问index.html或者setting.html页面时,应该还是能够获取用户的登陆信息。由于 http是无状态的,就是无记忆的,对于HTTP协议而言,无状态同样指每次request请求之前是相互独立的,当前请求并不会记录它的上一次请求信息。每次请求都是原创 2021-03-18 09:20:54 · 89 阅读 · 0 评论 -
前端常见安全性问题攻击和防御概述
前端安全性问题前端安全性问题防御,及前端常见安全性问题的攻击原理。xss跨站脚本攻击Cross Site Scripting如何进行:XSS跨站脚本攻击是指恶意攻击者利用网站没有对用户提交数据进行转义处理或者过滤不足的缺点,进而添加一些代码,嵌入到web页面中去。使别的用户访问都会执行相应的嵌入代码。从而盗取用户资料、利用用户身份进行某种动作或者对访问者进行病毒侵害的一种攻击方式。主要原理:过于信任客户端提交的数据!防御手段:不信任任何客户端提交的数据,只要是客户端提交的数据就应该先进行相应原创 2021-02-06 09:21:04 · 202 阅读 · 2 评论 -
路由按钮样式设置
路由按钮样式设置标签按钮被单击访问,其对应组件就显示,为了使得用户体验比较好,要给当前的按钮设置与众不同的css样式,使得可以很清楚地知道是哪个按钮正在被访问,增强用户体验。语法:在App.vue中设置如下css样式:<style lang="less" scoped>/*给激活按钮设置高亮样式*/.router-link-active{color:blue;}</style>通过观察,发现按钮被访问激活后,其对应的html标签就会存在 class=“rout原创 2021-02-05 16:18:34 · 327 阅读 · 0 评论 -
前端常见数据加密问题概述
前端数据加密问题前端一般使用md5、base64加密、sha1加密数据,来处理用户敏感信息。函数escape()和unescape()最简单的加密解密:escape() 函数可对字符串进行编码不会对 ASCII 字母和数字进行编码,也不会对下面这些 ASCII 标点符号进行编码: * @ - _ + . / 。其他所有的字符都会被转义序列替换。unescape() 函数可对通过 escape() 编码的字符串进行解码。通过找到形式为 %xx 和 %uxxxx 的字符序列(x 表示原创 2021-02-03 09:15:42 · 494 阅读 · 1 评论 -
Node.js中环境变量process.env详解
Node.js中环境变量process.env项目开发中,前后端分离,在开发和部署的过程中,会有后端接口域名切换的问题。在做react、vue的单页应用开发的时候,配置文件里会用到process.env,示例如下:var env = process.env.NODE_ENVif(env === 'development'){ }if(env === 'production'){ }env属性,在 development 和production 不同环境上,配置会有些不同。process官方原创 2021-01-29 09:16:08 · 2001 阅读 · 0 评论 -
DOM事件-冒泡与捕获
DOM事件-冒泡与捕获事件执行3个阶段:事件捕获从根部节点(document对象)一层一层向文档内找,直到找到事件触发的那个节点,这个过程叫事件捕获 。到达目标找到事件触发的那个节点。事件冒泡从事件触发的那个节点,一层一层向文档外找,直到根节点(document对象)的过程叫事件冒泡。事件默认是在冒泡阶段执行。用户体验好,让用户知道自己点的地方是正常的想法。在冒泡阶段,如果父级节点也注册和用户触发行为一样的事件,这些事件函数会被执行。父级节点注册了和用户行为一样的事件,用原创 2021-01-28 09:11:43 · 213 阅读 · 0 评论 -
递归应用之查找树状菜单某一节点
递归应用之查找树状菜单某一节点递归函数就是在函数体内调用本函数;递归函数的使用要注意函数终止条件,避免死循环;// 遍历树状菜单数据function loop(data,id,callback){ data.forEach((item,index,arr)=>{ if(item.objectId === id){ return callback(item,index,arr) } if(item.children原创 2021-01-21 09:12:36 · 262 阅读 · 0 评论 -
Promise处理异步回调
Promise处理异步回调Promise 是一个对象,是用来处理异步操作的,可以让异步调用的代码更加优雅、美观、有利于阅读。背景 node.js 采用异步回调的方式来处理需要等待的事件,使得代码会继续往下执行,不用在某个地方等待着。但是当有很多回调的时候,比如这个回调执行完需要去执行下个回调,然后接着再执行下个回调,这样就会造成回调层层嵌套,代码不清晰,很容易进入“回调地狱”,示例如下:对3个文件进行读取操作:const fs = require('fs')// 3个进程没有顺序,"异原创 2021-01-14 09:13:40 · 434 阅读 · 0 评论 -
axios拦截器interceptors
axios拦截器-interceptors基本介绍拦截器: 拦截器是axios向服务器端发送请求和响应回来所经历的两道关口。 拦截器关键字:interceptors。axios本身有两种拦截器:请求拦截,响应拦截。请求拦截器:axios每次开始请求的时候先执行此处逻辑,在请求拦截器可以给axios做请求前的配置和检查工作,检查ok的情况下就开始向服务器端发请求。响应拦截器:axios完成与服务器端交互,回到客户端后就执行此处逻辑,在响应拦截器可以判断axios请求是否成功,或原创 2020-12-30 09:18:20 · 2893 阅读 · 0 评论 -
给axios配置公共请求地址和vue成员
给axios配置公共请求地址给axios把各个请求都需要使用的相同的根地址做统一配置,使得相同代码只维护一份,提升开发速度。语法:axios.defaults.baseURL = 公共根地址把axios配置成为vue实例成员在Vue的大环境中不要直接使用axios,要把axios配置成为Vue的成员,通过Vue对象调用。把axios配置为 Vue构造器原型继承的成员,这样 vm实例对象就可以调用了。语法:// 原型继承成员名称为 $http ,也可以配置为其他名称Vue.prototyp原创 2020-12-29 09:12:55 · 602 阅读 · 0 评论