- 博客(36)
- 收藏
- 关注
RSS订阅原创 XSS攻击原理及常见的XSS攻击
一、什么是XSS攻击？XSS 即（Cross Site Scripting）中文名称为：跨站脚本攻击。XSS的重点不在于跨站点，而在于脚本的执行。那么XSS的原理是：恶意攻击者在web页面中会插入一些恶意的script代码。当用户浏览该页面的时候，那么嵌入到web页面中script代码会执行，因此会达到恶意攻击用户的目的。那么XSS攻击最主要有如下分类：反射型、存储型、及 DOM-based型。 反射性和DOM-baseed型可以归类为非持久性XSS攻击。存储型可以归类为持久性XSS攻击。二、反射性X
2020-09-25 11:03:42
6299
原创 常见的web性能优化方法
前端优化的目的从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。常见的优化方法一、页面级优化1.减少http请求（1）从设计实现层面简化页面；（2）合理设置HTTP缓存；（3）资源合并与压缩；（4）雪碧图；（5）Lazy Load Images2. 将外部脚本置底（将脚本内容在页面信息内容加载后再加载）3. 异步执行 inline脚本(其实原理和上面
2020-09-24 21:00:50
859
原创 H5在安卓与ios上的兼容问题
1.ios 表单元素 input 和textarea 默认有内阴影// css input{ -webkit-appearance: none;}2. ios上input的focus()、autofocus无效处理解决方案：1）原生方法解决。修改app的配置文件config.xml。ios的UIWebView 默认的KeyboardDisplayRequiresUserAction为false，设置为true就行，WKWebView 不支持这个属性。<preference nam
2020-09-23 21:27:35
1915
原创 vuex数据持久化
vuex结合localStorage实现状态持久化1 . 安装npm install vuex-persistedstate2 . 在store.js里import createPersistedState from 'vuex-persistedstate'const state = { user:{},}export default new Vuex.Store({ state, getters, actions, mutations, p
2020-09-22 21:04:13
161
原创 微信小程序支付流程
微信支付是时下最流行的交易支付方法之一，潜移默化推动着无现今社会的变革。小程序作为微信上的轻应用，同时也开放微信支付的接口，可以通过转账，扫二维码支付。要完成一次具体的订单支付需要完整的支付流程。第一步：微信小程序调用登录接口获取code，向后台请求openID1.小程序调用wx.login() 获取 临时登录凭证code ，并回传到开发者服务器。2.开发者服务器以code换取 用户唯一标识openid 和 会话密钥session_key。getToken: function () { /
2020-09-21 19:57:30
355
原创 项目中的鉴权是如何实现的？
一、token 验证登录流程使用基于 Token 的身份验证方法，大概的流程是这样的：客户端使用用户名跟密码请求登录服务端收到请求，去验证用户名与密码验证成功后，服务端会签发一个 Token，再把这个 Token 发送给客户端客户端收到 Token 以后可以把它存储起来，比如放在 Cookie 里或者 Local Storage 里客户端每次向服务端请求资源的时候需要带着服务端签发的 Token服务端收到请求，然后去验证客户端请求里面带着的 Token，如果验证成功，就向客户端返回请求的数据
2020-09-18 20:49:54
374
原创 水平垂直居中的10种方法
一、通过绝对定位的方式 absolute + 负margin首先知道子元素的宽高，给子元素设置top：50%；left：50%，但绝对定位是基于子元素的左上角，我们所希望的效果是子元素的中心居中示。借助外边距的负值，负的外边距可以让元素向相反方向定位。通过指定子元素的外边距为子元素宽度一半的负值，就可以让子元素居中了优点比较好理解，兼容性好缺点需要知道子元素的宽高二、也是通过绝对定位的方式 absolute + margin auto这个是需要将各个方向的距离都设0，再将mar
2020-09-16 16:25:11
8224
原创 v-if和v-show的区别
一、相同点都可以动态控制着dom元素的显示隐藏二、区别v-if:控制DOM元素的显示隐藏是将DOM元素整个添加或删除v-show:控制DOM 的显示隐藏是为DOM元素添加css的样式display,设置none或者是block,DOM元素是还存在的三、性能对比v-if有更高的切换消耗；v-show有更高的初始渲染消耗四、使用场景v-if适合运营条件不大可能改变的场景下；v-show适合频繁切换；例如：v-if:在请求后台接口，用接口返回数据渲染生成多个元素的时候，由于网速太慢，导致
2020-09-15 20:10:08
80
原创 如何实现跨域？
1. 最经典的跨域方案jsonpjsonp本质上是一个Hack，它利用<script>标签不受同源策略限制的特性进行跨域操作。jsonp优点：实现简单兼容性非常好jsonp的缺点：只支持get请求（因为<script>标签只能get）有安全性问题，容易遭受xss攻击需要服务端配合jsonp进行一定程度的改造jsonp的实现：function JSONP({ url, params, callbackKey, callback}) {
2020-09-14 21:27:04
100
原创 js中数组扁平化处理
什么是数组扁平化？数组扁平化就是将一个多维数组转换为一个一维数组实现基本方式对数组的每一项进行遍历。判断该项是否是数组。如果该项不是数组则将其直接放进新数组。是数组则回到1，继续迭代。当数组遍历完成，返回这个新数组。1.常规方式 递归处理Array.prototype.flatten = function () { var resultArr = []; var len = this.length; for (var i = 0; i < len; i ++) {
2020-09-11 19:43:21
89
原创 es6解构赋值
什么是解构赋值？解构赋值就是提取数组和对象中的值，对变量进行赋值，这种方法就称为解构赋值但是他需要注意的就是定义和赋值必须要放在一起，否则就会给你报错，取不到数据，解构赋值就是对js的赋值运算符的扩展它的好处就是让我们能够快速的能从复杂的对象中取出我们想要的数据 // 传统 // var arr = [1,2,3]; //把数组的值分别赋给a,b,c几个变量 // var a = arr[0]; // var b = arr[1]; // var c = arr[2]; //
2020-09-10 00:26:43
69
原创 js继承
继承在js中占有非常重要的地位，那么在js中有很多中继承的方式，不过每一种继承方式都有优缺点。下面就列举几种继承的方式。实现继承首先需要一个父类，在js中实际上是没有类的概念，在es6中class虽然很像类，但实际上只是es5上语法糖而已function People(name){ //属性 this.name = name || 'Annie' //实例方法 this.sleep=function(){ console.log(this.name + '正在睡觉') }
2020-09-08 21:37:32
70
原创 箭头函数跟普通函数的区别
箭头函数跟普通函数的区别1.写法不同箭头函数使用箭头定义，普通函数中没有。//箭头函数(参数1，参数2...参数n)=>{ //代码段 }//普通函数function 函数名(参数1，参数2...参数n)=>{ //代码段 }2.箭头函数不能用于构造函数普通函数可以用于构造函数，以此创建对象实例。3.箭头函数中this的指向不同箭头函数自身没有this，它的this是父级普通函数的this.在普通函数中，this总是指向调用它的对象或者，如果用作构造函数，
2020-09-07 21:42:22
6404
2
原创 var,let,const的区别
在ES5中，声明变量只有var和function两种形式。但是因为var声明的变量会有一定的缺点（内层变量可能覆盖外层变量的问题以及用来计数的循环变量泄露为全局变量，下面会有详细的介绍），ES6提出了使用let和const声明变量，下面就来看看他们之间的区别。1.是否存在变量提升？var声明的变量存在变量提升（将变量提升到当前作用域的顶部）。即变量可以在声明之前调用，值为undefined。let和const不存在变量提升。即它们所声明的变量一定要在声明后使用，否则报ReferenceError错。
2020-09-04 19:25:22
75
原创 Promise
PromisePromises的概念是由CommonJS小组的成员在Promises/A规范中提出来的。一般来讲，有以下的名词约定：promise（首字母小写）对象指的是Promise实例对象 Promise首字母大写且单数形式，表示Promise构造函数Promises首字母大写且复数形式，用于指代Promises规范Promise的概念从语法上说，promise 是一个对象，从它可以获取异步操作的的最终状态（成功或失败）。 Promise是一个构造函数，对外提供统一的API，自己身上有
2020-09-04 00:06:57
95
原创 闭包
要了解闭包，先得了解变量的作用域，分为全局作用域和局部作用域，JS中函数内部可以访问函数外部的变量，但函数外部却无法访问函数内部的变量。闭包就是能够访问其他函数内部的变量的函数，闭包的本质就是把函数内部和外部连接起来。闭包有一个封闭性的特点：就是一旦形成闭包，那么外界就无法访问到闭包里面的数据闭包=函数+词法作用域词法作用域：即以变量声明定义的位置为参照，如果当前位置没有定义，就会访问父级定义的位置function init() { var name = "Mozilla"; // nam
2020-09-02 23:42:53
114
原创 函数防抖和节流
在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。通常这种情况我们可以用函数防抖和节流去解决。在事件持续触发的过程中频繁执行函数<div id="content" style="height:150px;line-height:150px;text-align:center; color: #fff;background-color:#ccc;font-size
2020-09-01 20:14:37
147
原创 call,apply,bind的区别
call,apply,bindcall,apply,bind的主要作用都是改变this的指向。区别传参不同call用逗号分隔的形式传参 函数名.call(对象，“参数一”，“参数二”)getName.call(obj,"张三",25,"北京")apply参数用数组的形式传递 函数名.apply(对象,[“参数一”，“参数二”])getName.apply(obj,["张三",20,"北京"]bind用逗号形式传参 函数名.bind(对象,“参数一”,“参数二”)()
2020-08-31 19:53:34
111
原创 数组Array
栈方法push() 将一个或多个元素添加到数组的末尾，并返回该数组的新长度。 var arr=[1,10,25,14,75] arr.push(15) console.log(arr) => arr=[1,10,25,14,75,15]pop() 从数组中删除最后一个元素，并返回该元素的值. var arr=[1,10,25,14,75] arr.pop() console.log(arr) => arr=[1,10,25,14]
2020-08-28 18:47:59
184
原创 JS的数据类型
一、基本数据类型1.Number类型包含整数和浮点数（浮点数数值必须包含一个小数点，且小数点后面至少有一位数字）两种值。Number()转型函数，可以用于任何数据类型；parseInt()，将值转换为整型，用的比较多；parseFloat()；将值转换为浮点型。注意：NaN not a numberInfinity2.boolean 该类型只有两个值，true和false或者可以隐式转换true或false的类型能转换的false只有以下几种情况：0 "" null
2020-08-27 20:40:20
87
原创 Vue的组件通讯
vue组件通讯1父子通讯利用对象特性–浅拷贝利用vue中的sync和$emit实现把props接收的值处理成data变量或computed计算属性/浅拷贝//在传递props时用Object.assign拷贝一份数据（这里数据是一个单层级对象），然后在子组件里面对其进行编辑emitthis.emitthis.emitthis.emit(‘向父级派发的事件名’,传递的数据)props数据处理props: [‘num’],data: function () {return {num:
2020-08-27 00:01:19
78
原创 vue中ui框架的样式穿透
在做项目的过程中，遇到了需要改ui框架的默认样式。有时候修改样式并不生效，此时就需要样式穿透了。1.使用sassvant组件<van-nav-bar></van-navbar>安装scssnpm i node-sass sass-loader -D 添加webpack里面的配置(scss需要){ test: /\.scss$/, loaders: ['style', 'css', 'sass'] },//使用 lang="scss"引入<st
2020-08-24 22:35:42
223
原创 了解Vuex
Vuex是什么vuex 是一个状态管理工具，主要解决大中型复杂项目的 数据共享问题，主要包括 state,actions,mutations,getters 和 modules 5 个要 素，主要流程：组件通过 dispatch 到 actions，actions 是异步操作，再 actions 中通过 commit 到 mutations，mutations 再通过逻辑操作改变 state，从而 同步到组件，更新其数据状态安装npm install vuex --savevueximport
2020-08-21 20:32:03
85
原创 es6解构赋值
什么是解构赋值？解构赋值就是提取数组和对象中的值，对变量进行赋值，这种方法就称为解构赋值但是他需要注意的就是定义和赋值必须要放在一起，否则就会给你报错，取不到数据，解构赋值就是对js的赋值运算符的扩展，它的好处就是让我们能够快速的能从复杂的对象中取出我们想要的数据 // var arr = [1,2,3]; //把数组的值分别赋给a,b,c几个变量 // var a = arr[0]; // var b = arr[1]; // var c = arr[2]; // console
2020-08-21 00:08:33
56
原创 线上线下环境切换（生产环境，开发环境的切换）
在平时开发测试中，会有频繁切换线上线下环境的需求。一般情况下，线上线下环境url地址就是前缀不一样，修改一下前缀，重新编译打包。相当的费时间主要有以下两种方法：一、.第一种方法：通过配置.env文件来实现此处有官方网址可以查看参考：https://cli.vuejs.org/zh/guide/mode-and-env.html二、分为以下三步：第一步：通过创建不同环境js文件，再通过cross-env来切换 config dev.js //开发环境 prod.js //生
2020-08-20 00:59:02
1658
原创 vue搭建脚手架
今天我们来用vue搭建一个脚手架前提：需要有Node环境安装vue:npm install -g @vue/cli可以通过vue -V来检查vue的版本接下来，就开始用vue来搭建脚手架1.vue create 项目名称 来决定我们在哪个文件夹下创建项目注意：项目名称不能有大写字母选择Manually 收到搭建脚手架，选择我们需要的配置，按空格表示勾选，按enter表示下一步。选择我们需要的配置选择2.x稳定版本配置scss这样一个简单的脚手架就搭建好啦。通过cd
2020-08-19 00:43:29
109
原创 基于webpack搭建vue的开发环境
一、前端构建工具grunt gulp webpack（主流） fis3(百度）二、webpack是什么webpack是一个现代javascript应用程序的静态模块打包器webpack稳定版本：v4.44三、如何使用webpack搭建前端环境1.安装node.js注意：如果npm安装一下包由于网络原因安装慢，切换一下镜像源改成淘宝镜像npm config set registry https://registry.npm.taobao.org查看是否更改过来：npm confi
2020-08-17 22:10:51
206
原创 微信小程序天使童装项目总结
天使童装项目总结：前言：在拿到项目的那一刻，首先梳理了一下主要功能，确保注意到每一个小细节，增强用户体验。首页主要内容：1.搜索框（点击搜索框输入关键字进入搜索页面，返回符合条件的商品列表）2.轮播图3.点击商城新开张—更多，进入公告页面，点击查看，进入公告详情页面4.九宫格部分（点击九宫格，进入分类页面） 对应分类5.广告部分（一张固定图片）6.限时秒杀，点击立即抢购，进入商品详情页面，倒计时7.爆品推荐，点击商品进入商品详情页面8.疯狂砍价，点击砍价进入砍价页面9.全民拼团，
2020-08-15 23:01:53
1590
转载 小程序数据接口封装
封装数据请求的目的环境地址的统一//env.jsmodule.exports={ //开发环境 dev:{ baseUrl:'http://127.0.0.1:8080 }, //生产环境 prod:{ baseUrl:'https://api.it120.cc' }, //测试环境 test:{ baseUrl:'https://api.1909A.com' }}业务数据请求方法的统一比如：商品列表接口，详情接口，加入收藏接口，搜索
2020-08-12 23:55:57
193
原创 微信小程序登录授权
微信小程序登录授权我们在项目中，登录，授权页面，都必须要传递token值。一般商品详情页面的商品收藏，加入购物车。购物车页面都需要传递token。token是什么？token是前端鉴权的一种方式，token由后端生成， 是有时效性的。微信小程序如何登录授权，拿到token第一步：登录流程前端—>后端—>腾讯服务器wx.login—>wx.request—>后端—>腾讯服务器微信小程序登录官方网址https://developers.weixin.qq.co
2020-08-11 23:25:08
402
原创 js数组去重
情境将数组var arr = [1,1,‘true’,‘true’,true,true,15,15,false,false,undefined,undefined, null,null, NaN, NaN,‘NaN’, 0, 0, ‘a’,‘a’,{},{}]中重复的值过滤掉1.ES6-set使用ES6中的set是最简单的去重方法var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, n
2020-08-11 01:04:25
80
原创 原生ajax的创建过程
ajax是什么？主要是用来实现客户端和服务端异步通信的效果，实现页面的局部刷新，ajax原生方式主要是通过XMLHttpRequest,ActiveObject(IE)对象来实现异步通信效果ajax的优点ajax的优势在哪儿?1.不需要插件的支持，可以直接被大多数主流的浏览器支持2.提高web程序性能：传统模式是通过form表单，数据获取是通过页面刷新获取整页内容，ajax可以通过XMLHttpRequest对象向服务器请求数据；3.提高了用户体验 4.无须刷新页面即可获取数据aj
2020-08-08 23:09:30
318
原创 图片懒加载
什么是图片懒加载？当打开一个有很多图片的页面时，先只加载页面上看到的图片，等滚动到页面下面时，再加载所需的图片。这就是图片懒加载。图片懒加载的作用减少或延迟请求数，缓解浏览器的压力，增强用户体验。图片懒加载的基本原理1､设置图片src属性为同一张图片，同时自定义一个data-src属性来存储图片的真实地址2､ 页面初始化显示的时候或者浏览器发生滚动的时候判断图片是否在视野中3､ 当图片在视野中时，通过js自动改变该区域的图片的src属性为真实地址1.document.documentElem
2020-08-08 00:40:06
156
原创 关于微信小程序的开发及相关知识
前言众所周知，微信小程序在当今越来越火，相信不少人都通过各种途径学习过微信小程序或者尝试开发。相比之下，微信小程序会方便很多，不需要下载安装就可以使用。以下我们就来了解一下微信小程序的开发过程吧。1、微信小程序跟普通的H5有什么区别？1.微信小程序用开发者工具直接来查看预览页面，H5用浏览器查看渲染页面2.微信小程序扩展了底层能力，H5调用底层能力比较弱。3.微信没有完整的JS API，但H5拥有完整的JS API开发能力。4.渲染机制不同，微信小程序渲染线程和逻辑线程是独立并行运行的，而H5只
2020-08-07 00:22:50
242
原创 清除浮动的4种方式
为什么要清除浮动？清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题如下:给父盒子设置一个boder，内部放两个盒子一个big 一个small，未给big和small设置浮动，则他们会默认撑开父盒子。当我给内部两个盒子加上float属性的时候底部的footer盒子就会顶上来，然后父盒子因为没设置高度，变成一条线，big和small已经浮动了清除浮动的方法（最常用的4种）一、 额外标签法： 给谁清除浮动，就在其后额外添加一个空白标签 。优点： 通俗易懂，书写方便。（不推荐使
2020-08-06 00:56:24
247
原创 git教程
1.git简介git是一款分布式项目管理工具。svn是集中式的项目管理工具。常用的托管平台：github，码云，gitlab2.git常用命令1. git init 在当前项目的目录下生成一个.git隐藏文件，为了跟踪项目代码。（初始化仓库）2. git status 查看当前文件状态3. git add 将工作区的文件添加到暂存区4. git commit -m "注释说明” 将暂存区的文件存放到本地仓库 //-m后面输入的是本次提交的内容，可以输入内容。5. git push 将本
2020-08-04 23:16:12
102
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人