前端
文章平均质量分 51
Zaralike
这个作者很懒,什么都没留下…
展开
-
Webpack5
打包工具:将框架(React、Vue),ES6,Less/Sass等语法编译成浏览器能识别的JS、CSS;css打包到js文件中,当js文件加载时会创建一个style标签来生成样式,这样对网站的用户体验不好,会出现闪屏现象。webpack本身只能处理JS、JSON等资源,其他资源需要借助loader,webpack才能解析。解决:使用MiniCssExtractPlugin,提取css成单独文件,通过link标签加载。的JavaScript语法,以便能够运行在当前和旧版本的浏览器或其他环境中。原创 2023-12-16 19:10:20 · 932 阅读 · 0 评论 -
防抖与节流
通常情况下,当一个事件被频繁地触发时,如果不进行节流处理,可能会导致函数被连续执行多次,消耗过多的资源,甚至影响用户体验。如果在延迟时间内多次触发了同一个事件,防抖函数会取消之前的延迟执行,并重新开始计时,直到延迟时间内没有新的触发,最后才执行一次事件处理函数。:当用户滚动页面时,触发滚动事件的处理函数,但由于滚动事件的触发频率很高,使用防抖函数可以减少处理函数的触发次数,减轻浏览器的工作负担。,在前面的事件触发而未执行时,定时器会被不断清除和重设,以保证函数的调用频率符合预期。原创 2023-07-22 23:17:59 · 823 阅读 · 0 评论 -
Sass和Less
Sass和Less :CSS预处理器,让开发者更高效地编写cssSass基于Ruby,在服务器端处理。Less基于JavaScript,在客户端处理。原创 2023-07-15 15:52:02 · 876 阅读 · 1 评论 -
WebSocket
WebSocket是一种在单个TCP连接上进行全双工通信的协议。它允许在浏览器和服务器之间建立实时的、双向的通信,从而使得实时的Web应用程序成为可能。主要用途:实现实时的Web应用程序,例如在线游戏、聊天应用程序、股票市场行情等等。(传统的HTTP协议是一种请求-响应协议,客户端需要不断地向服务器发送请求,服务器才能返回响应。这种方式在实现实时通信时效率很低,因为客户端需要不断地发送请求,而服务器也需要不断地返回响应。原创 2023-06-12 08:13:25 · 1512 阅读 · 0 评论 -
TypeScript基础
Todo:使用webpack打包ts代码部分看不太懂,后面需补充一下打包部分(vite)的知识,遇到时可再查。1.node环境 2.npm i -g typescript 3.tsc 项目文件。原创 2023-05-01 16:51:41 · 691 阅读 · 0 评论 -
前后端分离开发项目部署
前端请求路径Request URL: http://192.168.138.100/api/employee/login。1.在服务器B中安装jdk、git、maven、MySQL,使用git clone命令将git远程仓库的代码克隆下来。1.在服务器A中安装Nginx,将前端打包好的dist目录上传到Nginx的html目录下。2.将自动化部署shell脚本上传到服务器B,通过chmod命令设置执行权限。2.修改Nginx配置文件中的nginx.conf。3.执行自动化部署脚本文件,自动部署项目。原创 2023-04-05 16:38:54 · 272 阅读 · 0 评论 -
is not defined at HTMLInputElement.onclick
vue中像上面showPic.js中写的方法为什么不在window下?是因为单页面组件中函数写在setup(){}?可以看到在window里有我们写的aaa方法,onclick事件能正常调用。vue项目中一小部分功能想要使用原生的onclick 事件,发现报错。onclick事件调用的方法必须是全局变量或者说是window的方法。在纯原生项目里测试,没有出现此报错(在window里有我们写的方法)综上,考虑onclick调用的方法可以是window的方法,全局方法和window方法的区别?原创 2023-01-30 08:45:43 · 5442 阅读 · 0 评论 -
node版本升级:与node-sass、sass-loader版本不兼容问题以及npm install时报错问题解决方法
node 版本与node-sass、sass-loader版本不兼容问题npm install 时报错 run `npm audit fix` to fix them, or `npm audit` for details原创 2022-07-26 17:05:29 · 9510 阅读 · 0 评论 -
Vue3组合式API:getCurrentInstance
vue3 getCurrentInstance API原创 2022-07-19 14:57:18 · 14444 阅读 · 5 评论 -
JS日期时间戳/字符串格式相互转换
一、将字符串格式日期'YYYY-MM-DD'转为时间戳var timeStamp = new Date('2021-11-30').getTime()//1638230400000二、将时间戳转换为字符串格式日期'YYYY-MM-DD'var date = new Date(timeStamp);//Tue Nov 30 2021 08:00:00 GMT+0800var year = date.getFullYear();var month = date.getMonth() + 1原创 2021-11-30 19:29:05 · 1968 阅读 · 0 评论 -
Vue生命周期图详解
内容参考:超详细vue生命周期解析(详解)_ら陈佚晨的博客-CSDN博客_vue生命周期原创 2021-10-28 17:11:09 · 107 阅读 · 0 评论 -
JS中关于 undefined / null / ‘’ 的思考
项目中变量初始化以及后端传值遇到时区分不清,在此总结一下。一、定义undefined:已声明但未赋值的变量,会默认被赋值为undefined var a;//a默认被赋值为undefinednull:尚未创建的对象; 表示缺少,变量尚未指向任何对象二、何时使用?undefined:清空变量的值和类型var person = undefined; // 值为 undefined, 类型是undefinednull:清空对象,释放变量引用的对象,表示变量未指向任何对象。原创 2021-10-25 11:09:32 · 263 阅读 · 0 评论 -
Vue条件渲染v-if和v-show区别以及v-if/show闪现的思考
一、v-if和v-show区别以下摘自vue官方文档区别 v-if v-show 原理 初始渲染时条件为假,什么也不做;—直到条件第一次变为真时,才会开始渲染条件块。 在切换过程中,条件块内的事件监听器和子组件适当地被销毁和重建。 不管初始条件是什么,元素始终会被渲染并保留在 DOM 中。 切换元素的 CSS的display属性 优缺点 有更高的切换开销 更高的初始渲染开销 适合情况 运行时条件很少原创 2021-10-22 16:18:22 · 304 阅读 · 0 评论 -
Vue项目目录结构划分
1.assets 资源(图片img和css资源)2.common 公共的js文件(const.js公共的常量;utils.js工具方法)3.components 组件(common多个项目通用的组件;content 当前项目用到的独特组件)4.network 网络请求5.router 路由6.store Vuex资源管理7.views 页面...原创 2021-09-19 15:44:03 · 149 阅读 · 0 评论 -
axios
axios请求方式:axios(config)axios.request(config)axios.get(url[,config])axios.delete(url[,config])axios.head(url[,config])axios.post(url[,data[,config]])axios.put(url[,data[,config]])axios.patch(url[,data[,config]])import axios from 'axios'//1.ax原创 2021-09-03 15:59:39 · 169 阅读 · 0 评论 -
关于Promise的一些问题
Promise(ES6)是异步编程的一种解决方案。链式编程,当网络请求非常复杂时,就会出现回调地狱。new Promise((resolve,reject)=>{ setTimeout(()=>{ //成功时调用resolve resolve('Hello World') //失败时调用reject reject('error mesage') },1000)}).then((data)=>{原创 2021-09-03 13:33:39 · 67 阅读 · 0 评论 -
Vue-cli搭建项目基础框架
CLI(Command-Line Interface,命令行界面),Vue-cli可以快速搭建Vue开发环境以及对应的webpack配置。NPM(Node Package Manager),NodeJS包管理和分发工具//webpack全局安装npm install webpack -gVue CLI的使用安装Vue脚手架:npm install -g @vue/cli拉取2.x模板:npm install -g @vue/cli-initVue CLI2初始化项目原创 2021-08-31 20:56:15 · 148 阅读 · 0 评论 -
Vue-Router
路由表本质上是一个映射表,决定了数据包的指向。1.后端渲染:jsp:java server page 后端路由:后端处理URL和页面之间的映射关系2.前后端分离:后端只负责提供数据,不负责任何阶段的内容前端渲染:浏览器中显示的网页中的大部分内容,都是由前端写的js代码在浏览器中执行,最终渲染出来的网页3.单页面富应用阶段SPA(在前后端分离的基础上加了一层前端路由)整个网页只有一个html页面前端路由的核心:改变URL,但页面不进行整体的刷新。(1)URL的hash...原创 2021-08-30 05:14:12 · 231 阅读 · 0 评论 -
Vuex详解
Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex:响应式,多个组件共享状态的插件Vuex应用场景:(1)用户的登录状态、用户名称、头像、地理位置信息等等。token(2)商品的收藏、购物车中的物品等等创建文件夹store,存放Vuex相关代码//index.jsimport Vue from 'vue'import Vuex from 'vuex'//1.安装插原创 2021-08-29 21:41:27 · 100 阅读 · 0 评论 -
Webpack
At its core, webpack is a static module bundler for JavaScript applications.从本质上讲,webpack是一个现代的JavaScript应用的静态模块打包工具。打包:将webpack中的各种资源模块进行打包合并成一个或多个包(Bundle),在打包过程中,还可以对资源进行处理,比如压缩图片,将scss转为css,将ES6语法转为ES5语法,将TypeScript转为JavaScript等等操作。src:源码(开发) ..原创 2021-08-29 16:38:28 · 69 阅读 · 0 评论 -
前端模块化
模块的原始雏形:使用模块作为出口(1)在匿名函数内部,定义一个对象。(2)给对象添加各种需要暴露到外面的属性和方法(不需要暴露的直接定义即可)(3)将对象返回,并在外面使用一个ModuleA接收。(4)在main.js中使用属于自己模块的属性和方法。var ModuleA=(function(){ //1.定义一个对象 var obj={} //2.在对象内部添加变量和方法 obj.flag=true obj.myFunc=function(in原创 2021-08-29 15:26:36 · 56 阅读 · 0 评论 -
Vue单文件组件
传统组建的问题1.问题(1)全局定义的组件必须保证组件的名称不重复(2)字符串模板缺乏语法高亮,在HTML有多行时,需用到\(3)不支持css意味着当HTML和JavaScript组件化时,CSS被遗漏(4)没有构建步骤的限制,只能使用HTML和ES5 JavaScript,而不能使用预处理器(如:Babel)Vue单文件组件的组成结构template 组建的模板区域 script 业务逻辑区域 style 样式区域<template><!--这里用于原创 2021-08-27 15:23:40 · 232 阅读 · 0 评论 -
Vue3.0自定义指令
自定义指令本质:使用JavaScript操作Dom元素自定义指令使用:(1)定义采用模块化定义,在src目录下创建directives目录,在这个目录中放置项目用到的所有自定义指令,方便管理和维护。(2)注册全局注册(使用较少)和局部注册(3)页面使用在html页面模板使用时,在定义的指令前加v-Example1:页面加载输入框自动获取焦点//App.vue<template> <div> <h2>输入框自动原创 2021-08-27 14:01:02 · 793 阅读 · 0 评论 -
Vue组件
组件使用的3个步骤:1.创建组件构造器(调用Vue.extend()方法)const cpnC = Vue.extend({ template:` <div> <h2>我是标题</h2> <p>我是内容</p> </div> `}) 2.注册组件(调用Vue.component()方法)Vue.component原创 2021-08-25 16:37:18 · 117 阅读 · 0 评论 -
ES6笔记
ECMA(European Computer Manufactures Association)ES:EcmaScript,脚本语言的规范,JavaScript是EcmaScript的一种实现,ES新特性即JavaScript新特性。ECMAScript是由Ecma国际通过ECMA-262标准化的脚本程序设计语言。ES6:1.语法简洁,功能丰富;2.框架开发应用1.let1.变量不能重复声明 2.块级作用域({},if else while for) 3.不存在变量提升 4.不影响作...原创 2021-08-23 16:41:14 · 138 阅读 · 0 评论 -
JSON知识点
JS中的对象只有js自己认识,其他语言都不认识json就是一个特殊格式的字符串,这个字符串可以被任意语言所识别,并且可以转换为任意语言中的对象,json在开发中主要用来数据的交互JSON(JavaScript Object Notation JS对象表示方法)JSON和JS对象的格式一样,不过JSON字符串的属性名必须加双引号,其他和JS语法一致JSON分类:1.对象{}2.数组[]JSON中允许的值:1.字符串 2.数值 3.布尔值 4.null 5.对...原创 2021-08-20 13:14:44 · 59 阅读 · 0 评论 -
Js查找排序
一、查找(1)二分查找var search = function(nums, target) { var l=0,r=nums.length-1; while(l<=r){ var mid=parseInt((l+r)/2); if(target===nums[mid]) return mid; else if(target<nums[mid]) r=mid-1;原创 2021-08-19 15:42:59 · 136 阅读 · 0 评论 -
JavaScript日期
一、时间戳时间戳:格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)起至现在的总毫秒数。Date.now()方法:返回自1970年1月1日00:00:00 UTC以来经过的毫秒数。getTime() :指定的日期和时间距 1970 年 1 月 1 日午夜(GMT 时间)之间的毫秒数。valueOf()方法:返回值和方法 Date.getTime 返回的值相等,返回1970年1月1日午夜以来的毫秒数。parse()方法:解析一个日期..原创 2021-08-18 14:47:35 · 55 阅读 · 0 评论 -
javascript函数
函数声明function functionname(parameter1,parameter2,...){ // 执行代码}局部 JavaScript 变量在 JavaScript 函数内部声明的变量(使用 var)是局部变量,只能在函数内部访问它。(该变量的作用域是局部的)。只要函数运行完毕,本地变量就会被删除。全局 JavaScript 变量在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。JavaScript 变量的生存期JavaScrip.原创 2021-08-17 16:07:02 · 81 阅读 · 0 评论 -
js判断和循环
一、判断1.if、if...else...、if...else if...else...if (condition1){ 当条件 1 为 true 时执行的代码}else if (condition2){ 当条件 2 为 true 时执行的代码}else{ 当条件 1 和 条件 2 都不为 true 时执行的代码}2.switch...case...switch(n){ case 1: 执行代码块 1 brea原创 2021-08-17 09:19:31 · 1082 阅读 · 0 评论 -
CSS3转换、过渡、动画
一、转换(transform)移动、旋转、缩放、倾斜元素CSS2D转换方法:CSS 3D转换二、CSS过渡1.要添加效果的 CSS 属性2.效果的持续时间transition-timing-function属性指定过渡效果的速度曲线取值:ease- 规定过渡效果,先缓慢地开始,然后加速,然后缓慢地结束(默认) linear- 规定从开始到结束具有相同速度的过渡效果 ease-in-规定缓慢开始的过渡效果 ease-out- 规定缓慢结束的过渡...原创 2021-08-15 21:50:16 · 77 阅读 · 0 评论 -
CSS清除浮动的用途及方法
应用场景一未添加浮动:添加浮动后(想让3位于1,2下面):*{ margin:0; padding:0;}.container{ border:1px solid black;}.first{ background:yellow; width:100px; height:100px; float:right;}.second{ background:green; width:100px; .原创 2021-08-15 00:12:40 · 209 阅读 · 0 评论 -
CSS选择器
一、简单选择器(根据名称、id、类来选取元素)1.元素选择器p { text-align: center; color: red;}2.类选择器.center { text-align: center; color: red;}3.id选择器#para1 { text-align: center; color: red;}4.通用选择器* { text-align: center; color: blue;}5.分组选择器原创 2021-08-12 14:35:58 · 133 阅读 · 0 评论 -
GET和POST
何时使用 GET?GET(默认方法):如果表单提交是被动的(比如搜索引擎查询),并且没有敏感信息。使用 GET 时,表单数据在页面地址栏中是可见的:action_page.php?firstname=Mickey&lastname=Mouse注释:GET 最适合少量数据的提交。浏览器会设定容量限制。何时使用 POST?POST:如果表单正在更新数据,或者包含敏感信息(例如密码)。POST 的安全性更好,因为在页面地址栏中被提交的数据是不可见的。...原创 2021-08-11 13:39:27 · 74 阅读 · 0 评论 -
特殊字符的实体名称与符号代码
转载 2021-08-11 10:57:11 · 205 阅读 · 0 评论 -
HTML模板含义
#一、定义标题栏:header原创 2021-08-10 16:01:38 · 195 阅读 · 0 评论 -
HTML5结构标签
1.页眉标签用于定义网页文档或节的页眉,通常为网站名称。2.导航标签用于定义网页文档的导航菜单,可通过超链接跳转至其他页面。nav为navigation简写。3.节标签用于定义独立的专题区域,里面可包含一片货多篇文章。4.文章标签用于定义独立的文章区域,里面根据文章内容的长短也可以包含一个或多个段落元素5.侧栏标签用于定义正文两侧的相关内容,常用作文章的侧栏。6.页脚标签用于定义整个网页文档或节的页脚,通常包含文档的作者、版权、联系方式等信息。...原创 2021-08-10 16:27:19 · 1024 阅读 · 0 评论 -
《JavaScript DOM 编程艺术》知识点整理
本书重点:关于Javascript和DOM脚本编程工作的基本原则、良好习惯、正确思路预留退路、循序渐进、以用户为中心一、JavaScript简史XHTML:可扩展超文本标记语言BOM:浏览器对象模型(Web浏览器窗口的高度、宽度和屏显位置等属性)DOM:文档对象模型(一个与系统平台和编程语言无关的接口,程序和脚本可以通过这个接口动态地对文档的内容、结构和样式进行访问和修改)Javascript:脚本语言(解释型,解释器),有Web浏览器进行解释和执行二、Javascript语..原创 2021-07-26 08:57:31 · 255 阅读 · 0 评论 -
Vue 3.x 指令整理
1.v-text(设置标签的文本值)//html:<div id="app"> <h2 v-text="message+'!'"></h2> //标签里的内容全部改变 <h2>学习{{message+"!"}}</h2> //推荐写法,标签里的内容可部分改变</div>//js:const app={ data(){ return{ message:"v-原创 2021-07-12 22:55:06 · 289 阅读 · 0 评论 -
创建Vue实例传入的options
el:类型:string/HTMLElement作用:决定之后Vue实例会管理哪一个DOMdata:类型:Object/Function(组件中data必须是一个函数)作用:Vue实例对应的数据对象methods:类型:{[key:string]:Function}作用:定义属于Vue的一些方法,可以在其他地方调用,也可以在指令中使用。...原创 2021-07-11 23:08:29 · 90 阅读 · 0 评论