大前端
文章平均质量分 79
前端技术学习
ZWZhangYu
这个作者很懒,什么都没留下…
展开
-
关于前后端分离的Cookie的事项
同源策略主要是由浏览器实施的一种安全机制,用于限制不同源(协议,域名,端口)之间的客户端脚本访问。同源策略确实会限制浏览器中前端应用程序对不同源服务器的访问,但在服务器与服务器之间的通信中,同源策略并不适用。原创 2023-06-11 10:25:28 · 4241 阅读 · 1 评论 -
前端工程化——Livereload和HMR、本地开发服务器
本地开发服务器动态编译功能的目的是为了节省人力、方便前端开发和调试,本质原理是监听+触发。webpack-dev-server是官方提供的用于搭建本地开发环境的一个微型Node.js服务框架,并且提供动态编译、HMR(热更新)等功能。如果你的项目不需要Mock服务,webpack-dev-server完全可以满足需求。但是Mock服务是本地开发服务器不可或缺甚至可以说是最重要的功能,不能舍弃。幸运的是,webpack同时提供了webpack-dev-middleware,它是Express框架的一个中间件,原创 2022-11-13 09:52:48 · 745 阅读 · 0 评论 -
前端工程化——构建过程中的增量更新与缓存
增量更新策略完美地解决了上述缺陷,实现的方案很简单,将原本作为参数值的hash指纹作为资源文件名的一部分并且删除用于更新的url参数。比如上文提到的代码改为增量更新策略之后的形式如下:原创 2022-11-13 09:18:57 · 1395 阅读 · 0 评论 -
前端工程化——前后端分离,进化流程
前端工程化不是一个框架或者工具,聚焦的不是某个垂直的研究领域或者特殊的业务类型,而是一种可演化、可扩展的服务,服务的目标是解决前端开发以及前后端协作开发过程中的难点和痛点问题,涵盖项目的起始、开发、测试以及部署环节。工具是前端工程化的实现媒介,规范是工程化的指导方针,工作流程是工程化的外在表现形式以及约束规范的载体。原创 2022-11-13 08:45:56 · 900 阅读 · 0 评论 -
vue弹窗如何嵌入其它vue页面
对于类似需要根据特定参数动态展示其他组件数据的时候,我们可以通过在可以给子组件传递其他参数,在子组件watch中监听。通过子组件监听参数变量变化从而动态展切换数据。注意子组件渲染只会执行一次created生命周期,如果非要将更改内容写在created中,就要配合 v-if 使用,将子组件用 v-if 包裹起来,每次都重新加载子组件。原创 2022-11-11 21:16:29 · 9762 阅读 · 0 评论 -
UnitAuto——机器学习单元测试平台 (三)
机器学习单元测试平台,零代码、全方位、自动化 测试 方法/函数 的正确性和可用性原创 2022-08-20 17:14:38 · 1211 阅读 · 2 评论 -
APIAuto——敏捷开发最强大易用的 HTTP 接口工具 (二)
敏捷开发最强大易用的 HTTP 接口工具,机器学习零代码测试、生成代码与静态检查、生成文档与光标悬浮注释。在常用功能上远超 Postman, Swagger, YApi, Rap 等其它各种 开源、商业 的 API 文档/测试 工具。...原创 2022-08-20 17:13:05 · 2042 阅读 · 5 评论 -
APIJSON自动化ORM库,后端接口和文档自动化实践整理 (一)
APIJSON 是一种专为 API 而生的 JSON 网络传输协议 以及 基于这套协议实现的 ORM 库。为简单的增删改查、复杂的查询、简单的事务操作 提供了完全自动化的万能 API。能大幅降低开发和沟通成本,简化开发流程,缩短开发周期。适合中小型前后端分离的项目,尤其是 BaaS、Serverless、互联网创业项目和企业自用项目。...原创 2022-08-20 17:10:46 · 1799 阅读 · 4 评论 -
JavaScript 关于Promise 对象的知识梳理
Promise 的优点在于,让回调函数变成了规范的链式写法,程序流程可以看得很清楚。它有一整套接口,可以实现许多强大的功能,比如同时执行多个异步操作,等到它们的状态都改变以后,再执行一个回调函数;再比如,为多个回调函数中抛出的错误,统一指定处理方法等等。......原创 2022-07-18 20:04:39 · 483 阅读 · 0 评论 -
关于JavaScript属性描述对象不得不掌握的知识点
JavaScript 提供了一个内部数据结构,用来描述对象的属性,控制它的行为,比如该属性是否可写、可遍历等等。这个内部数据结构称为“属性描述对象”(attributes object)。每个属性都有自己对应的属性描述对象,保存该属性的一些元信息。......原创 2022-07-17 11:13:46 · 390 阅读 · 0 评论 -
JavaScript面向对象——Object对象
Object原型对象Object.prototype上的方法是可以被Object实例直接使用,而前面也说到了JavaScript的所有其他对象都是Object的实例,即代表着所有其他对象可以正常访问上面的hello()方法,但是print属于对象自己的方法所以不能被其他对象访问。Object对象的原生方法分成两类Object本身的方法与Object的实例方法。JavaScript的所有其他对象都继承自Object对象,即那些对象都是Object的实例。即Object.XXX的调用形式。...原创 2022-07-17 10:18:18 · 669 阅读 · 0 评论 -
ES进阶 数组功能语法新特性详解
扩展运算符(spread)是三个点(…)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。数组合并,它的原理就是通过展开运算符将数组展开然后放入一个新的数组;注意:这种数组合并的方式是浅拷贝,上面的是基本类型不会有影响,但是如果是如下的对象类型的话,那么就会影响到新的数组,需要注意。.........原创 2022-07-10 21:52:47 · 603 阅读 · 0 评论 -
ES进阶 函数功能语法新特性详解
ES6 允许为函数的参数设置默认值,即直接写在参数定义的后面。通常情况下,定义了默认值的参数,应该是函数的尾参数。因为这样比较容易看出来,到底省略了哪些参数。如果非尾部的参数设置默认值,实际上这个参数是没法省略的。指定了默认值以后,函数的length属性,将返回没有指定默认值的参数个数。这个表示默认参数不作为length的计算范围。......原创 2022-07-10 21:31:18 · 651 阅读 · 0 评论 -
ES6进阶 字符串处理新特性
模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。如果在模板字符串中需要使用反引号,则前面要用反斜杠转义。模板字符串中嵌入变量,需要将变量名写在${}之中。如果使用模板字符串表示多行字符串,所有的空格和缩进都会被保留在输出之中。......原创 2022-07-10 21:06:49 · 650 阅读 · 0 评论 -
ES6进阶 变量的解构赋值
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。交换变量的值;从函数返回多个值;提取 JSON 数据;函数参数的默认值;遍历 Map 结构;输入模块的指定方法。......原创 2022-07-10 20:55:45 · 248 阅读 · 0 评论 -
ES6进阶 let 和 const 指令
我在开发时遇到一个Uncaught ReferencError:Cannot access XXX before initialization问题,该问题在于我使用了一个未声明的let变量,而这个是因为页面加载顺序的问题导致的。但是如果我们访问的是一个var变量,那么不会报错,仅仅是undefined。虽然这个问题出现概率不大,但是感觉很需要知道这个知识点,特此记录。...原创 2022-07-10 20:48:00 · 268 阅读 · 0 评论 -
ES6 与 ECMAScript 2015 的关系?
ECMAScript 和 JavaScript 的关系;前者是后者的规格,后者是前者的一种实现(另外的 ECMAScript 方言还有 JScript 和 ActionScript)。日常场合,这两个词是可以互换的。2011 年,ECMAScript 5.1 版发布后,就开始制定 6.0 版了。ES6 这个词的原意,就是指 JavaScript 语言的下一个版本。ES6 的第一个版本,在 2015 年 6 月发布,正式名称就是《ECMAScript 2015 标准》(简称 ES2015)。.........原创 2022-07-10 20:34:26 · 506 阅读 · 0 评论 -
Vuex实现组件全局状态(数据)管理——实践整理
使用Vuex统一管理状态的好处【1】能够在vuex中集中管理共享的数据,易于开发和后期维护【2】能够高效的实现组件之间的数据共享,提高开发效率【3】存储在vuex中的数据都是响应式的,能够实时保存数据与页面的同步。...原创 2022-07-10 15:31:06 · 1097 阅读 · 1 评论 -
后端程序员推荐——接口Mock工具json-server
今天在开发小程序应用时接触到一款简单易用的前端Mock工具,特此整理记录。json-server是一款非常简单易用的数据Mock工具,对于前端开发测试接口时非常适用,只需要提供对应的JSON数据就可以Mock出一个接口来。.........原创 2022-06-23 21:45:29 · 4064 阅读 · 0 评论 -
初识uni-app 学习笔记
文章目录文档官方文档插件市场学习总结(一)项目开发(1)目录结构(二)页面开发(1)基础1.新建页面2.删除页面3.应用首页4.页面生命周期函数5.组件生命周期(2)参数传递文档官方文档https://uniapp.dcloud.io/插件市场https://ext.dcloud.net.cn/学习总结(一)项目开发(1)目录结构一个uni-app工程,默认包含如下目录及文件:【1】编译到任意平台时,static 目录下的文件均会被完整打包进去,且不会编译。非 static 目录下原创 2022-05-16 21:14:16 · 791 阅读 · 1 评论 -
分析Chrome的瀑布流(Waterfall)
当需要调试网页或分析网站性能时,我们往往会F12打开浏览器控制台,查看网络请求,看网页加载了哪些资源,以及对应的请求方式(Method)、状态码(Status)、资源类型(Type)、大小(Size)、耗费的时间(Time)等。如果某个资源耗费的时间比较长,我们需要深入分析时,则需要看另一个项目:瀑布流(Waterfall),在Waterfall中我们可以看出时间具体花在了哪些部分。【进入队列时间 Queued at】浏览器将资源放入队列时间【开始时间 Started at】浏览器开始处理资源的原创 2022-04-28 09:31:58 · 4037 阅读 · 0 评论 -
Echarts 关系图谱示例
<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width"/> <title>ECharts 关系图谱</title> <script src="jquery-1.10.2.min.js"></script> <script src="echarts.min.js">.原创 2021-12-15 22:05:25 · 3092 阅读 · 0 评论 -
BootstrapValidator使用总结
文章目录(1)基础的字段验证(2)button验证(3)自定义错误提示信息(4)多个字段关联验证(5)数字范围的验证(6)调用接口交互验证官方文档(1)基础的字段验证$('#form').bootstrapValidator({ excluded: [":disabled"], message: '表单校验', feedbackIcons: { /*input状态样式图片*/ valid: 'glyphicon glyphicon-ok',原创 2021-10-25 19:25:51 · 3815 阅读 · 0 评论 -
使用document.referrer代替history.back(-1) 返回
window.history.DOM window 对象通过 history 对象提供了对浏览器的会话历史的访问。它暴露了很多有用的方法和属性,允许你在用户浏览历史中向前和向后跳转,同时——从HTML5开始——提供了对history栈中内容的操作。window.history.back(); 浏览器回退操作window.history.forward(); 向前跳转window.history.go(-1); 向后移动一个页面 (等同于调用 back()):window.history.go(1)原创 2021-09-14 23:10:03 · 2092 阅读 · 0 评论 -
【前端开发总结】表单操作系列
文章目录(一)常用操作整理(1)Select标签操作1. 基础操作2. 添加/删除Select的Option项(2)多选框checkbox1. 常用操作(3)文本框text1. 常用操作(4)表达控件属性操作(5)隐藏input的三种方法和区别(6)Jquery获取form表单中的数据(二)动态组件和标签(1)动态调整标签组件位置样式1. jQuery语法——移动节点,改变节点顺序2. 【案例】移动节点(三)实践整理(1)多表单合并提交(一)常用操作整理(1)Select标签操作1. 基础操作 $(原创 2021-09-11 21:25:16 · 1855 阅读 · 0 评论 -
前后端分离 AJAX 文件下载解决方案
【场景描述】微服务架构中,使用前后端分离设计,用户点击导出下载Excel列表,通过AJAX与后端SpringMVC交互获取下载文件,请求需要携带Authorization认证信息,并且需要考虑到IE浏览器的兼容问题【解决方案】Ajax下载文件的这种方式本来就是禁止的。出于安全因素的考虑,javascript是不能够保存文件到本地的,所以ajax考虑到了这点,只是接受json,text,html,xml格式的返回值,二进制的返回格式就会抛出这个异常。ajax请求只是个“字符型”的请求,即请求的内容是以原创 2021-05-10 21:01:28 · 2297 阅读 · 4 评论 -
多表单合并提交
可以使用$(’#form1, #form2’).serialize();方式传递多个表单参考代码:$('#form1').submit(function() { var action = $(this).attr('action'); if (!EntryCheck()) return false; $.ajax({ url : action, type : 'POST', data : $('#form1, #form2').s原创 2021-01-30 15:59:40 · 2250 阅读 · 0 评论 -
前端性能分析优化
文章目录前端性能问题分析优化方案(一)Nginx动静分离(二)压缩静态文件(三)前端代码规范参考(四)代码优化前端性能问题分析(1)页面加载性能问题主要集中于下载关联的静态文件,比如CSS、JS、图片等,这些网络请求对网页加载影响最大(2)过多的HTTP请求(3)同步和异步的问题(4)CDN网络访问瓶颈,如果引入了国外的CDN地址那么网络请求必然耗时(5)前端代码的规范,比如随便复制导致引入不必要的组件、CSS和JS位置不规范、重复引入组件(6)把过多的计算任务放在前端处理,前后端处理不合理,原创 2020-12-31 15:32:42 · 2383 阅读 · 2 评论 -
ES6基础语法
(1)变量定义letlet和var的区别<SCript> { var a = 123; let b = 123; } console.log(a); console.log(b); //错误</SCript>1:作用域不一样bai,var是函数作用域,而let是块作用域,也就是说,在主函数内声明了var,整个函数内都是有效的,比如说在for循环内定义了一个var变量,实际上其在for循环以外也是可以原创 2020-09-13 10:54:36 · 1695 阅读 · 0 评论 -
Axios通过传统方式使用GET和POST
这里介绍的是Axios使用传统的方式引入依赖,通过CDN或者引入JS文件的方式,下面分别就GET好POST方式来处理 <div class="welcomebox" id="app"> <p id="hero"></p> <button @click="postAxios()">postAxios</button> </div>引入CDN依赖,这里面引入俩个模块,其中QS是用来处理传递的参数的原创 2020-06-30 18:50:57 · 1907 阅读 · 0 评论 -
Webpack基本使用
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。从图中我们可以看出,Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件,减少了页面的请求。全局安装npm install -g webpack webpack-cli安装后查看版本号webpack -v(1)安装webpack工具npm install -g webpack webpack-cli(2)创建js文件用于打包操作-原创 2020-09-22 21:10:25 · 1853 阅读 · 0 评论 -
前端模块化了解
模块化是一种思想, 是将大工程拆成小的模块分治的思想.ES5模块化代码ES5实现模块化操作在代码层面, 与 c 语言可以使用 include 包含头文件, Java 可以使用 import 导入包对比. 原生的 Javascript 自己并没有代码模块化. Javascript 的模块化最初是使用闭包来实现的. 使用闭包包裹变量, 以屏蔽外界的访问来形成模块.-- a.jsfunction add(a,b){ console.log(a+b);}function sub(a,b){原创 2020-09-21 22:28:43 · 1718 阅读 · 0 评论 -
Babel
Babel是什么Babel是转码器,把ES6代码转换成ES5代码,因为写的代码是ES6代码,但是ES6代码浏览器兼容性很差,如果使用ES5代码浏览器兼容性很好,编写ES6代码,把ES6代码转换成ES5安装Babel提供babel-cli工具,用于命令行转码,它的安装命令如下npm init -ynpm install --global babel-cli查看版本babel --version基本使用(1)创建测试JS代码demo.js[1, 2, 3].map((n) =&原创 2020-09-21 21:09:42 · 4650 阅读 · 0 评论 -
分页省略号跳转相关功能原生写法
最近在学习前端的时候接触到了一些分页的组件,考虑到这个以后会长期使用到,特在此做个整理,虽然本次使用的Vue但是其中的代码都是可以应用到其他地方的,完全原生的写法,只需要简单修改或者换一种方式即可,没有使用Vue相关的分页组件,其中功能大致如下: 首页,上一页,下一页,尾页,跳转(需要限制数字),页数过多显示省略号,省略号位置和页面页数都需要可以进行调整的,效果图如下,只为演示功能,没有额外的样式效果,具体的参数都可以在Vue的data属性中进行设置切换,详细请看代码注释后端使用的是MyBatis的分页原创 2020-06-26 11:14:28 · 2415 阅读 · 0 评论 -
3:轮播图
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&a原创 2019-01-18 09:26:51 · 1182 阅读 · 0 评论 -
2:表格增删改
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>DOM表格操作</title> <style> td { width:原创 2019-01-17 19:55:52 · 1108 阅读 · 0 评论 -
1:setAttribute()与obj.property添加事件
setAttribute() ,这个方法接受两个参数:要设置的特性名和值。如果特性已经存在, setAttribute() 会以指定的值替换现有的值;如果特性不存在, setAttribute()则创建该属性并设置相应的值。通过 setAttribute() 方法既可以操作 HTML 特性也可以操作自定义特性。通过这个方法设置的特性名会被统一转换为小写形式,即 “ID” 最终会变成 “i...原创 2019-01-17 17:11:19 · 1582 阅读 · 0 评论