- 博客(172)
- 资源 (6)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 前端鉴权的 5 个兄弟：cookie、session、token、jwt、单点登录
本文你将看到： 基于 HTTP 的前端鉴权背景 cookie 为什么是最方便的存储方案，有哪些操作 cookie 的方式 session 方案是如何实现的，存在哪些问题 token 方案是如何实现的，如何进行编码和防篡改？jwt 是做什么的？refresh token 的实现和意义 session 和 token 有什么异同和优缺点 单点登录是什么？实现思路和在浏览器下的处理 从状态说起「HTTP 无状态」我们知道，HTTP 是无状态的。也就是
2022-01-05 09:58:10
795
6
原创 前端常用开发单位
px1px===1个像素点，相对单位长度单位，相对的是设备的物理像素；试用于固定长度单位的场景中；各浏览器兼容性良好；pt单位名称为点（Point），绝对长度单位。1pt＝1/72英寸，常用于印刷当中，在AI、PS等设计软件当中字体大小所用的单位就是pt；em参考物是父元素的font-size，具有继承的特点。em会继承父级元素的字体大小1em=1倍父元素font-size的值，2em=2倍父元素font-size的值，以此类推……rem大小是相对于HTML的根元素设置的；rem..
2021-12-13 18:17:15
571
6
原创 前端页面的几种常用布局
一 、静态页面布局传统页面布局，网页上的所有元素的尺寸一律使用px作为单位。静态页面布局通常有几下几种：1、表格布局2、层布局3、div+css样式表布局表格布局：表格布局容易把握，是最简单的一种总局方式，适用于初学者。设计网页的第一步是设计版面布局。所谓布局，就是以最适合浏览的方式将图片、文字以及表单等元素排放在页面的不同位置。网页设计常用布局方法是表格布局。另外一种方便的工具，就是使用框架。框架的作用就是把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。案例：①在
2021-12-13 16:37:02
2622
2
原创 HTTP与HTTPS的区别
超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息，HTTP协议以明文方式发送内容，不提供任何方式的数据加密，如果攻击者截取了Web浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息，因此，HTTP协议不适合传输一些敏感信息，比如：信用卡号、密码等支付信息。 为了解决HTTP协议的这一缺陷，需要使用另一种协议：安全套接字层超文本传输协议HTTPS，为了数据传输的安全，HTTPS在HTTP的基础上加入了SSL协议，SSL依靠证书来验证服务器的身份，并为浏览器和服务器之间的通
2021-12-13 11:03:05
238
原创 Webpack打包方式
准备工作mkdir webpack_demo && cd webpack_demo #新建文件夹npm init #创建package.json文件npm install --save-dev webpack #安装依赖（非全局安装）mkdir app && mkdir public #新建app和public文件夹cd app && cd.>Greeter.js && cd.>main.js #app
2021-12-10 17:05:38
153
原创 vue中的分页
html代码<div class="fudao"> <div class="cantainer" v-for="(item, index) in userList.slice( (currentPage - 1) * pagesize, currentPage * pagesize )" :key="inde...
2021-11-25 11:19:11
1077
原创 vue分享至qq空间，新浪微博，微信朋友圈及微信好友
分享至qq空间，新浪微博，微信朋友圈及微信好友本博客主要针对pc网页版分享，移动端相似之处不做参考关于分享，对于分享到qq空间、好友及新浪微博比较简单，给一个点击事件调用一下官方接口就可以了，自己绑定一些标题、链接、图片内容就可以了分享到qq空间及好友qq空间：https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=你的网址&sharesource=qzone&title=你的分享标题&pics=
2021-11-23 16:08:10
756
转载 微信小程序搜索功能
该样式和功能有时并不能满足开发者，本篇博客不使用该组件实现搜索功能效果图实现功能如下(1) 未找到商品时显示提示信息，找到商品时显示商品列表(2) 清空搜索框时显示搜索历史记录，历史记录可清除，点击历史记录赋值到搜索框.wxml代码<view class="top"> <view class="topsearch"> <view class="frame"> <input value="{{sho
2021-11-18 15:22:39
375
原创 微信小程序将秒转换为时，分，秒
var theTime = res.data.duration //时间戳(秒)var minute= 0; // 分var hour = 0;//小时if(theTime > 60){ minute= parseInt(theTime / 60); theTime = parseInt(theTime % 60); if(minute> 60){ hour = parseInt(minute/ 60); middle = parseInt(minute% 6.
2021-11-18 13:15:10
1472
原创 微信小程序 获取用户的昵称和头像
注意：如果只需要展示用户头像和昵称，不获取头像地址和昵称字符串的话。可以直接用<open-data /><open-data type="userAvatarUrl"></open-data><open-data type="userNickName"></open-data>下面说的都是需要获取头像地址和昵称字符串的方法方法一： wx.getUserInfowx.getUserInfo需要授权后才能得到数据在新版
2021-11-12 15:31:14
3009
原创 微信小程序分享和转发朋友圈功能
调用wx.showShareMenuapi在需要转发的页面的onLoad（onShow也可以）事件里加入如下代码：wx.showShareMenu({withShareTicket:true,menus:['shareAppMessage','shareTimeline']})加入后，点击小程序右上角的三个点“分享到朋友圈”按钮就可以使用了在开发工具里可以预览分享的效果小程序提交审核发布后，在朋友圈里的分享效果如下分享后的封面图是默认小程序的logo，标题.
2021-11-12 15:26:47
5438
原创 6.用Vue3.0 写过组件吗？如果想实现一个 Modal你会怎么设计？
一、组件设计组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式现在有一个场景，点击新增与编辑都弹框出来进行填写，功能上大同小异，可能只是标题内容或者是显示的主体内容稍微不同这时候就没必要写两个组件，只需要根据传入的参数不同，组件显示不同内容即可这样，下次开发相同界面程序时就可以写更少的代码，意味着更高的开发效率，更少的Bug和更少的程序体积二、需求分析实现一个Modal组件，首先确定需要完成的内容： 遮罩层 标题内容 主体内...
2021-11-08 18:36:48
1338
1
原创 5.Vue 3.0中Treeshaking特性？举例说明一下？
一、是什么Tree shaking是一种通过清除多余代码方式来优化项目打包体积的技术，专业术语叫Dead code elimination简单来讲，就是在保持代码运行结果不变的前提下，去除无用的代码如果把代码打包比作制作蛋糕，传统的方式是把鸡蛋（带壳）全部丢进去搅拌，然后放入烤箱，最后把（没有用的）蛋壳全部挑选并剔除出去而treeshaking则是一开始就把有用的蛋白蛋黄（import）放入搅拌，最后直接作出蛋糕也就是说 ，tree shaking其实是找出使用的代码在Vu...
2021-11-08 18:35:23
335
1
原创 4.Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同？
开始之前Composition API可以说是Vue3最大的特点，那么为什么要推出Composition Api，解决了什么问题？通常使用Vue2开发的项目，普遍会存在以下问题： 代码的可读性随着组件变大而变差 每一种代码复用的方式，都存在缺点 TypeScript支持有限 以上通过使用Composition Api都能迎刃而解正文一、Options ApiOptions API，即大家常说的选项API，即以vue为后缀的文件，通过定义methods，...
2021-11-08 18:34:19
279
1
原创 3.Vue3.0里为什么要用 Proxy API 替代 defineProperty API ？
一、Object.defineProperty定义：Object.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象为什么能实现响应式通过defineProperty两个属性，get及set get 属性的 getter 函数，当访问该属性时，会调用此函数。执行时不传入任何参数，但是会传入 this 对象（由于继承关系，这里的this并不一定是定义该属性的对象）。该函数的返回值会被用作属性的值 set 属性的...
2021-11-08 18:31:38
329
1
原创 2.Vue3.0 性能提升主要是通过哪几方面体现的？
一、编译阶段回顾Vue2，我们知道每个组件实例都对应一个watcher实例，它会在组件渲染的过程中把用到的数据property记录为依赖，当依赖发生改变，触发setter，则会通知watcher，从而使关联的组件重新渲染试想一下，一个组件结构如下图<template><divid="content"><pclass="text">静态文本</p><pclass="text"&g...
2021-11-08 18:30:09
268
1
原创 1.Vue3.0的设计目标是什么？做了哪些优化?
一、设计目标不以解决实际业务痛点的更新都是耍流氓，下面我们来列举一下Vue3之前我们或许会面临的问题 随着功能的增长，复杂组件的代码变得越来越难以维护 缺少一种比较「干净」的在多个组件之间提取和复用逻辑的机制 类型推断不够友好 bundle的时间太久了 而Vue3经过长达两三年时间的筹备，做了哪些事情？我们从结果反推 更小 更快 TypeScript支持 API设计一致性 提高自身可维护性 开放更...
2021-11-08 18:28:25
301
1
原创 20.对Css预编语言的理解？有哪些区别?
一、是什么Css作为一门标记性语言，语法相对简单，对使用者的要求较低，但同时也带来一些问题需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少Css编写经验而很难写出组织良好且易于维护的Css代码Css预处理器便是针对上述问题的解决方案预处理语言扩充了Css语言，增加了诸如变量、混合（mixin）、函数等功能，让Css更易维护、方便本质上，预处理是Css的超集包含一套自定义的语法及一个解析器，根据这些语法...
2021-11-08 18:19:48
213
原创 19.让Chrome支持小于12px 的文字方式有哪些？区别？
一、背景Chrome 中文版浏览器会默认设定页面的最小字号是12px，英文版没有限制PS: 文末彩蛋原由 Chrome 团队认为汉字小于12px就会增加识别难度 中文版浏览器 与网页语言无关，取决于用户在Chrome的设置里（chrome://settings/languages）把哪种语言设置为默认显示语言 系统级最小字号 浏览器默认设定页面的最小字号，用户可以前往 chrome://settings/fonts 根据需求更改而我们在实际项目中，不能奢求用户更改浏览..
2021-11-08 18:17:37
728
原创 18.CSS如何画一个三角形？原理是什么？
一、前言在前端开发的时候，我们有时候会需要用到一个三角形的形状，比如地址选择或者播放器里面播放按钮通常情况下，我们会使用图片或者svg去完成三角形效果图，但如果单纯使用css如何完成一个三角形呢？实现过程似乎也并不困难，通过边框就可完成二、实现过程在以前也讲过盒子模型，默认情况下是一个矩形，实现也很简单<style>.border{width:50px;height:50px;border:...
2021-11-08 18:16:17
193
原创 17.使用CSS完成视差滚动效果?
一、是什么视差滚动（Parallax Scrolling）是指多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验我们可以把网页解刨成：背景层、内容层、悬浮层当滚动鼠标滑轮的时候，各个图层以不同的速度移动，形成视觉差的效果二、实现方式使用css形式实现视觉差滚动效果的方式有： background-attachment transform:translate3D background-attachment作用是设置背景图像是否固定...
2021-11-07 18:45:25
605
原创 16.实现单行／多行文本溢出的省略样式？
一、前言在日常开发展示页面，如果一段文本的数量过长，受制于元素宽度的因素，有可能不能完全显示，为了提高用户的使用体验，这个时候就需要我们把溢出的文本显示成省略号PS: 文末彩蛋对于文本的溢出，我们可以分成两种形式： 单行文本溢出 多行文本溢出 二、实现方式单行文本溢出省略理解也很简单，即文本在一行内显示，超出部分以省略号的形式展现实现方式也很简单，涉及的css属性有： text-overflow：规定当文本溢出时，显示省略符号来代表被修剪的文本 ..
2021-11-07 18:43:51
164
原创 15.怎样做优化，CSS提高性能的方法有哪些？
一、前言每一个网页都离不开css，但是很多人又认为，css主要是用来完成页面布局的，像一些细节或者优化，就不需要怎么考虑，实际上这种想法是不正确的作为页面渲染和内容展现的重要环节，css影响着用户对整个网站的第一体验因此，在整个产品研发过程中，css性能优化同样需要贯穿全程二、实现方式实现方式有很多种，主要有如下： 内联首屏关键CSS 异步加载CSS 资源压缩 合理使用选择器 减少使用昂贵的属性 不要使用@import 内联..
2021-11-07 18:42:18
96
原创 14.什么是响应式设计？响应式设计的基本原理是什么？如何做？
一、是什么响应式网站设计（Responsive Web design）是一种网络页面设计布局，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整描述响应式界面最著名的一句话就是“Content is like water”大白话便是“如果将屏幕看作容器，那么内容就像水一样”响应式网站常见特点： 同时适配PC + 平板 + 手机等 标签导航在接近手持终端设备时改变为经典的抽屉式导航 网站的布局会根据视口来调整模块的大..
2021-11-07 18:34:24
337
原创 13.怎么理解回流跟重绘？什么场景下会触发？
一、是什么在HTML中，每个元素都可以理解成一个盒子，在浏览器解析过程中，会涉及到回流与重绘： 回流：布局引擎会根据各种样式计算每个盒子在页面上的大小与位置 重绘：当计算好盒模型的位置、大小及其他属性后，浏览器根据每个盒子特性进行绘制 具体的浏览器解析渲染机制如下所示： 解析HTML，生成DOM树，解析CSS，生成CSSOM树 将DOM树和CSSOM树结合，生成渲染树(Render Tree) Layout(回流):根据生成的渲染树，进行回流(Lay..
2021-11-07 18:23:25
320
原创 12.CSS3常见动画有哪些？实现方式？
一、是什么CSS动画（CSS Animations）是为层叠样式表建议的允许可扩展标记语言（XML）元素使用CSS的动画的模块即指元素从一种样式逐渐过渡为另一种样式的过程常见的动画效果有很多，如平移、旋转、缩放等等，复杂动画则是多个简单动画的组合css实现动画的方式，有如下几种： transition 实现渐变动画 transform 转变动画 animation 实现自定义动画 二、实现方式transition 实现渐变动画transition的属..
2021-11-07 18:21:36
648
原创 11.CSS3新增了哪些新特性？
一、是什么css，即层叠样式表（Cascading Style Sheets）的简称，是一种标记语言，由浏览器解释执行用来使页面变得更为美观css3是css的最新标准，是向后兼容的，CSS1/2的特性在CSS3里都是可以使用的CSS3也增加了很多新特性，为开发者带来了更佳的开发体验从几个维度列举一些常见的特性，如下二、选择器css3中新增了一些选择器，主要为如下图所示：三、新样式边框css3新增了三个边框属性，分别是： border-radius：创建圆...
2021-11-07 18:19:38
3106
原创 10.介绍一下CSS中的Grid网格布局?
一、是什么Grid布局即网格布局，是一个二维的布局方式，由纵横相交的两组网格线形成的框架性布局结构，能够同时处理行与列擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系这与之前讲到的flex一维布局不相同设置display:grid/inline-grid的元素就是网格布局容器，这样就能出发浏览器渲染引擎的网格布局算法<divclass="container"><divclass="itemitem-1">...
2021-11-07 18:17:46
837
1
原创 9.说说flexbox（弹性盒布局模型）,以及适用场景？
一、是什么Flexible Box简称flex，意为”弹性布局”，可以简便、完整、响应式地实现各种页面布局采用Flex布局的元素，称为flex容器container它的所有子元素自动成为容器成员，称为flex项目item容器中默认存在两条轴，主轴和交叉轴，呈90度关系。项目默认沿主轴排列，通过flex-direction来决定主轴的方向每根轴都有起点和终点，这对于元素的对齐非常重要二、属性关于flex常用的属性，我们可以划分为容器属性和容器成员属性容器属性有：...
2021-11-07 18:15:21
155
1
原创 8.如何实现两栏布局，右侧自适应？三栏布局中间自适应呢？
一、背景在日常布局中，无论是两栏布局还是三栏布局，使用的频率都非常高PS: 文末有彩蛋两栏布局两栏布局实现效果就是将页面分割成左右宽度不等的两列，宽度较小的列设置为固定宽度，剩余宽度由另一列撑满，比如Ant Design文档，蓝色区域为主要内容布局容器，侧边栏为次要内容布局容器❝这里称宽度较小的列父元素为次要布局容器，宽度较大的列父元素为主要布局容器❞这种布局适用于内容上具有明显主次关系的网页三栏布局三栏布局按照左中右的顺序进行排列，通常中间列最宽，左右两...
2021-11-07 18:13:41
284
1
原创 7.元素水平垂直居中的方法有哪些？如果元素不定宽高呢？
一、背景在开发中经常遇到这个问题，即让某个元素的内容在水平和垂直方向上都居中，内容不仅限于文字，可能是图片或其他元素居中是一个非常基础但又是非常重要的应用场景，实现居中的方法存在很多，可以将这些方法分成两个大类： 居中元素（子元素）的宽高已知 居中元素宽高未知 二、实现方式实现元素水平垂直居中的方式： 利用定位+margin:auto 利用定位+margin:负值 利用定位+transform table布局 flex布局 ..
2021-11-06 14:49:57
401
1
原创 6.对BFC的理解？
一、是什么我们在页面布局的时候，经常出现以下情况： 这个元素高度怎么没了？ 这两栏布局怎么没法自适应？ 这两个元素的间距怎么有点奇怪的样子？ ...... 归根究底是元素之间相互的影响，导致了意料之外的情况，这里就涉及到BFC概念BFC（Block Formatting Context），即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则： 内部的盒子会在垂直方向上一个接一个的放置 对于同一个BFC的俩个相邻的盒子的..
2021-11-06 14:48:03
105
1
原创 5.CSS中，有哪些方式可以隐藏页面元素？区别?
一、前言在平常的样式排版中，我们经常遇到将某个模块隐藏的场景通过css隐藏元素的方法有很多种，它们看起来实现的效果是一致的但实际上每一种方法都有一丝轻微的不同，这些不同决定了在一些特定场合下使用哪一种方法二、实现方式通过css实现隐藏元素方法有如下： display:none visibility:hidden opacity:0 设置height、width模型属性为0 position:absolute clip-path..
2021-11-06 14:46:29
185
1
原创 4.设备像素、css像素、设备独立像素、dpr、ppi 之间的区别？
一、背景在css中我们通常使用px作为单位，在PC浏览器中css的1个像素都是对应着电脑屏幕的1个物理像素这会造成一种错觉，我们会认为css中的像素就是设备的物理像素但实际情况却并非如此，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的当我们做移动端开发时，同为1px的设置，在不同分辨率的移动设备上显示效果却有很大差异这背后就涉及了css像素、设备像素、设备独立像素、dpr、ppi的概念二、介绍CSS像素CSS像素..
2021-11-06 14:44:30
496
1
原创 3.em/px/rem/vh/vw的区别?
一、介绍传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项目开发，且拥有比较良好的兼容性从CSS3开始，浏览器对计量单位的支持又提升到了另外一个境界，新增了rem、vh、vw、vm等一些新的计量单位利用这些新的单位开发出比较良好的响应式页面，适应多种不同分辨率的终端，包括移动设备等二、单位在css单位中，可以分为长度单位、绝对单位，如下表所指示CSS单位 相对长度单位 em、ex、ch、rem、vw、vh、vmin、vmax、% ..
2021-11-06 14:42:06
106
2
原创 2.CSS选择器有哪些？优先级？哪些属性可以继承？
一、选择器CSS选择器是CSS规则的第一部分它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式选择器所选择的元素，叫做“选择器的对象”我们从一个Html结构开始<divid="box"><divclass="one"><pclass="one_1"></p><pclass="one_1">&...
2021-11-06 14:40:31
635
1
原创 31.你是怎么处理vue项目中的错误的？
一、错误类型任何一个框架，对于错误的处理都是一种必备的能力在Vue中，则是定义了一套对应的错误处理规则给到使用者，且在源代码级别，对部分必要的过程做了一定的错误处理。主要的错误来源包括： 后端接口错误 代码中本身逻辑错误 二、如何处理后端接口错误通过axios的interceptor实现网络请求的response先进行一层拦截apiClient.interceptors.response.use(response=>{return...
2021-11-06 14:38:55
289
原创 1.对CSS盒子模型的理解?
当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）一个盒子由四个部分组成：content、padding、border、margincontent，即实际内容，显示文本和图像boreder，即边框，围绕元素内容的内边距的一条或多条线，由粗细、样式、颜色三部分组成padding，即内边距，清除内容周围的区域，内边距是透明的，取值不能为负，受盒子的backgr
2021-11-06 14:38:01
581
2
原创 10.怎么理解ES6中 Decorator 的？使用场景？
一、介绍Decorator，即装饰器，从名字上很容易让我们联想到装饰者模式简单来讲，装饰者模式就是一种在不改变原类和使用继承的情况下，动态地扩展对象功能的设计理论。ES6中Decorator功能亦如此，其本质也不是什么高大上的结构，就是一个普通的函数，用于扩展类属性和类方法这里定义一个士兵，这时候他什么装备都没有classsoldier{}定义一个得到 AK 装备的函数，即装饰器functionstrong(target){target.AK=tr...
2021-11-06 14:31:18
374
1
原创 9.你是怎么理解ES6中Module的 ,使用场景 .
一、介绍模块，（Module），是能够单独命名并独立地完成一定功能的程序语句的集合（即程序代码和数据结构的集合体）。两个基本的特征：外部特征和内部特征 外部特征是指模块跟外部环境联系的接口（即其他模块或程序调用该模块的方式，包括有输入输出参数、引用的全局变量）和模块的功能 内部特征是指模块的内部环境具有的特点（即该模块的局部数据和程序代码） 为什么需要模块化 代码抽象 代码封装 代码复用 依赖管理 如果没有模块化，我们代码会怎样？..
2021-11-06 14:29:58
288
1
TA创建的收藏夹 TA关注的收藏夹
TA关注的人