zhangxlY~-CSDN博客

原创 web安全及防护(一、XSS、二、CSRF、三、SQL注入)、

目录一、XSS攻击：二、CSRF攻击：三、SQL注入攻击：一、XSS攻击：原理是：Xss(cross-site scripting)攻击指的是攻击者往Web页面里插入恶意 html标签或者javascript代码。例如：①攻击者在论坛中放一个看似安全的链接，骗取用户点击后，窃取cookie中的用户私密信息； ②或者攻击者在论坛中加一个恶意表单，当用户提交表单的时候，却把信息传送到攻击者的服务器中，而不是用户原本以为的信任站点。XSS攻击防范方法：首先代码里对用...

2021-06-22 21:15:55 205

原创函数节流、函数防抖

函数节流、函数防抖首先，我们要知道：函数节流和函数防抖两个都是优化高频率执行js代码的一种手段。一、它们的基本概念如下：函数节流：在一定时间内js方法只跑一次(比如人的眨眼睛，就是一定时间内眨一次)。这是函数节流最形象的解释;函数防抖：指频繁触发的情况下，只有足够的空闲时间，才执行代码一次(比如生活中的坐公交，就是一定时间内，如果有人陆续刷卡上车，司机就不会开车。只有别人没刷卡了，司机才开车)；=================================================

2021-06-17 21:55:50 2247 1

原创 Vue双向数据绑定原理

Vue双向数据绑定原理：============================================================这块是主体内容=======================================================首先,定义是：vue.js是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter、getter,在数据变动时发布消息给订阅者,触发相应的监听回调来渲染视图。.

2021-06-16 19:35:14 221

原创 iframe 优点、缺点

iframe 优点、缺点:<iframe> 标签用来规定一个内联框架，一个内联框架被用来在当前 HTML 文档中嵌入另一个文档：iframe它不利于SEO优化：SEO{Search Engine Optimization)汉译为搜索引擎优化,是一种方式:利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是让其在行业内占据领先地位,吸引更多的用户访问网站,提高网站的访问量,提高网站的销售能力和宣传能力,从而提升网站的品牌效应。iframe的优点:(1)ifram

2021-06-11 16:20:16 607 1

原创项目中如何修改element-ui的默认样式(去除scoped,样式穿透＞＞＞ , less/sass : /deep/)

项目中如何修改element-ui的默认样式(去除scoped,样式穿透 >>> , less/sass : /deep/)我们在vue中引入第三方组件库时,组件中style样式中的scoped会成为我们修改样式的阻碍,要想修改css样式,并且不影响全局样式,有三种解决方法：方法一:在修改css样式style标签里,把它的scoped属性去掉,然后在这个标签的内容里面写需要修改的element-ui默认css样式(element-ui中标签设置样式都是前面加.的):&l

2021-06-10 21:26:46 353

原创 elemeng-ui 中el-form 表单如何校验

elemeng-ui 中el-form 表单如何校验：表单有一个rules属性,它的值是一个数组,里边每一项是一个对象包含着每一条校验规则:trigger:'blur' 是指当表单失去焦点时开始校验；message是当校验失败时的提示信息；rules的值也可以是变量,在data中进行赋值：举例是：<el-form-item label="年龄" prop="age" :rules="[ { required: true, mes.

2021-06-07 18:50:02 127

原创 Vue项目使用Nginx服务器配置(路由history模式白屏如何处理）

Vue项目使用Nginx服务器配置(路由history模式白屏如何处理):第一步:先下载Nginx;第二步:将下载之后的Nginx压缩包解压到指定文件(Nginx项目目录如下,解压的路径不能是含有中文的):第三步:把解压后的目录整体拖进vscode,找到conf文件中的nginx.conf文件,修改里面的配置：找到 location / {} 选项,在里面写：...

2021-06-07 18:41:08 510

原创 Windows下安装Nginx

Windows下安装Nginx先初步了解一下Nginx:(1)Nginx (engine x) 是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器;(2)Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru 站　点(俄文：Рамблер)开发的;　　(3)它也是一种轻量级的Web服务器,可以作为独立的服务器部署网站(类似Tomcat);(4)它的高性能和低消耗内存的结构受到很多大公司青睐,如:淘宝网站架设...使用Nginx:一、

2021-06-07 11:32:25 92

原创 webpack打包优化

webpack打包优化①第一步:先配置路由懒加载：在配置路由时,可以使用路由懒加载,当切换到这个路由时才会加载这个页面。我们可以在路由规则中配置如下:{ path: '/', // 路由 name: 'Home', // 路由名称 component: () => import("@/views/Home.vue") // 使用这种方式来实现路由懒加载 }②第二步:关闭生产环境下的SourceMap映射文件:我们关闭这个之后,

2021-06-06 18:16:41 92

原创 vant-ui 按需引入

vant-ui 按需引入① 第一步:先下载vant:// Vue 2 项目，安装 Vant 2：npm i vant -S// Vue 3 项目，安装 Vant 3：npm i vant@next -S②第二步:把组件按需引入：这种方式是通过一个插件。babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式：npm i babel-plugin-import -D③配置:在.babelrc 中

2021-06-06 17:59:55 61

原创 vue-router 鉴权守卫

vue-router 鉴权守卫1.permission.js://路由配置文件import router from './router'import store from './store'//需要安装nprogressimport NProgress from 'nprogress'import 'nprogress/nprogress.css'//禁用进度环NProgress.configure({ showSpinner: false }) // 路由白名单cons.

2021-06-03 21:18:08 81

原创一.axios拦截、二.api统一管理

axios拦截、api统一管理1.axios: axios 是一个基于 promise 的 HTTP 库,它的使用可以在浏览器、node.js 中; axios封装和api接口的统一管理:是帮助我们简化代码、有利于后期的更新维护; 在vue项目中、在后台交互获取数据时,我们通常使用的是axios库,它是基于promise的HTTP库,它可以运行在浏览器端和node.js中, axios的特性:拦截请求和响应、取消请求、等。2.axios安装： ①先安装ax...

2021-06-03 11:00:55 146

原创移动端项目(去哪儿)项目开发流程

移动端项目(去哪儿)项目开发流程1、确定项目技术栈；技术栈： Vue、 vue-cli、 vue-router、 Vuex、 axios、 vant、 rem、 scss、 webpack、描述： vue.js、 vue脚手架、 vue路由、 vue状态管理工具、异步请求数据、移动端框架、自适应布局、css扩展语言、打包工具、...

2021-06-02 21:03:13 444 2

原创多环境变量配置

多环境变量配置①在项目的根目录下找到package.json文件,在scripts中配置:"scripts": { "serve": "vue-cli-service serve", // 开发环境 "build": "vue-cli-service build", // 生产环境 "test": "vue-cli-service build --mode testing" // 测试环境 },以上根据不同的启动方式来启用不同的域。②之后在项目的根目录下.

2021-06-02 20:23:16 130

原创 transition

transition①transition：包裹需要过渡的元素/组件,transition只会把过渡的效果应用到其包裹的内容上,而不会额外渲染DOM元素,也不会出现在可被检查的组件层级中。②transition元素的属性:(1)name -string，用于自动生成CSS过度类名。例如：name=“fade” 将自动扩展为 .fade-enter ，.fade-enter-active，等。默认类名为 “v”。(2)appear -boolean，是否在初始渲染时使用过度。默认fal..

2021-06-01 21:15:41 592

原创 keep-alive

keep-alive①概念: keep-alive 是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。 keep-alive 是一个抽象组件:它自身不会渲染成一个 DOM 元素,也不会出现在父组件链中。②作用: 在组件切换过程中把切换出去的组件保留在内存中,防止重复渲染DOM,减少加载时间及性能消耗,提高用户体验性。③参数:　Keep-alive 组件提供了include和...

2021-06-01 19:51:58 94

原创 Vue事件委托

Vue事件委托①事件委托:是把子元素的事件委托给父元素去处理;②事件委托的好处:可以减少事件注册;③使用事件委托: 事件委托一般都是使用在列表里的,以下用列表举例： (1)首先在每一个循环的标签上动态绑定一个自定义属性; ...

2021-05-30 20:15:52 1844

原创 var let const 区别

var let const 区别①使用var定义的变量,没有块的概念,它可以跨块访问,不可以跨函数访问；②使用let定义的变量,只可以在块作用域里访问,不可以跨块访问,也不可以跨函数访问;③使用const定义的常量,是永远不变的量,使用时必须初始化(就是必须赋值),只可以在块作用域里访问,但不能修改,它是不可以改变,不可以重复声明的:<script type="text/javascript"> // 块作用域 { var a = 1;

2021-05-30 20:07:33 43

原创闭包

闭包对于闭包,简单的理解就是:函数中套了一个函数,内层函数可以访问外层函数中的变量,就形成了闭包。①闭包的优点:这个变量在外层函数执行完之后还不会被销毁,因为它被别的函数使用了; 缺点:闭包会使函数中的变量都被保存在内存中,内存消耗大,所以不能滥用闭包,否则会造成网页的性能问题,可能会导致内存泄露(解决方法:在退出函数之前，将不使用的变量全部删除)。②闭包的定义:function f1(){ 　　　　var m = 10; 　　　　function ...

2021-05-30 19:57:58 51

原创 new的过程

new的过程new的过程：一般我们在创建构造函数时,会使用new关键字new出来一个新的对象。第一步：在new开始时,先创建一个空对象,把这个空对象的隐式原型__proto__属性赋值给构造函数的显示原型prototype属性; 第二步：调用构造函数,然后改变this的指向,把this指向我们创建出来的新的空对象,给这个对象添加属性; ...

2021-05-27 20:06:59 1795

原创作用域、作用域链、自由变量、变量提升

作用域、作用域链、自由变量、变量提升一、作用域：①定义：变量作用域就是一个变量可以使用的范围。种类有：全局作用域、函数作用域、(es6)块级作用域; 在js中有一个最外层的作用域,就是全局作用域；在js中可以通过函数来创建一个独立作用域,这个独立的作用域叫做函数作用域,函数可以嵌套,作用域也可以嵌套； es6的块级作用域(大括号，比如：if{},for(){},while(){}…);...

2021-05-27 19:34:19 45

原创 this指向和call、apply、bind

this指向和call、apply、bindthis指向：在浏览器里,在全局范围内this指向window对象；在普通函数中,this永远指向最后调用他的那个对象；在构造函数中,this指向new出来的那个新的对象；在call、apply、bind中的this被强绑定在指定的那个对象上；箭头函数中this比较特殊,箭头函数this是父作用域的this,不是调用时的this。要知道前四种方式,都是调用时确定,也就是动态的,而箭头函数的this指向是静态的,声明的时候就确定了下来；appl

2021-05-26 19:58:40 152

原创原型、原型链

原型、原型链在javascript中原型：①prototype:每一个函数都有一个prototype,称为显示原型。 ②__proto__:每个实例对象都有一个__proto__，称为隐式原型;这个对象的__proto__指向构造函数的显示原型prototype; ③constructor:每个显示原型prototype都有一个constructor属性指向跟它关联的构...

2021-05-26 19:06:21 69

原创数组的方法(①es4、②es5、③es6)

数组的方法(①Es4、②Es5、③Es6)一、数组:就是存储一组关联的数据。二、数组的定义:数组直接量（常用):var arr = []; var arr2 = [10,20,30];通过 new 创建:var arr3 = new Array()； var arr4 = new Array(10,20,30) console.log(arr4) // [ 10, 20, 30 ]...

2021-05-25 19:13:42 124

原创 argument

argument在了解arguments对象之前先看一下javascript的一些功能：Javascript并没有重载函数的功能,而arguments对象能够模拟重载。Javascrip中每个函数都会有一个arguments对象实例arguments，它引用着函数的实参，可以用数组下标的方式"[]"引用arguments的元素;arguments.length为函数实参个数，arguments.callee引用函数自身;arguments他的特性和使用方法:特性:argument

2021-05-25 17:00:00 101

原创数据类型判断

数据类型判断① typeof:typeof {} // objecttypeof [1,2] // object可以判断数据类型，它返回表示数据类型的字符串（返回结果只能包括number,boolean,string,function,object,undefined）；可以使用typeof判断变量是否存在（如if(typeof a!="undefined"){...});Typeof 运算符的问题是无论引用的对象是什么类型它都返回object②instanceof：.

2021-05-24 21:12:51 64

原创 js数据类型

js数据类型(①基本数据类型、②引用数据类型)①基本数据类型（值类型）： Number、String、Boolean、Undefined、Null、Symbol（es6新增独一无二的值）和 BigInt（es10新增）；基本数据类型，又称值类型。②引用数据类型: Object。包含Object、Array、 function、Date、RegExp。栈堆存储值类型栈存储：主要针对（Number、String、Boolean）三种数据。直接存储在栈（stack）中，占据空间小、大小固定，..

2021-05-24 20:16:14 221

原创 Vue-router (①两种路由模式、②编程式/组件式、③如何传参(优缺点))

Vue-router (①两种路由模式、②编程式/组件式、如何传参(优缺点))Vue路由：路由的基础用法：1 .安装 npm install vue-router --save2 .main.js中//Vue路由：引入import VueRouter from 'vue-router'Vue.use(VueRouter) //Vue路由：引入并创建组件import BYHome from './components/BYHome.vue'import BYNews from

2021-05-23 20:08:41 184

原创深拷贝

深拷贝深拷贝是:创建一个新的对象和数组，将原对象的各项属性的“值”（数组的所有元素）拷贝过来，是“值”而不是“引用”，新对象跟原对象不共享内存，修改新对象不会改到原对象。为什么要使用深拷贝？希望在改变新的数组（对象）的时候，不改变原数组（对象)。实现深拷贝的方法有：①递归： function deepClone(obj){// 定义一个变量并判断是数组还是对象 var objClone = Array.isArray(obj) ? [] : {};

2021-05-23 19:32:04 134

原创 Vuex(概念、几部分组成、map高级语法、数据持久化)

Vuex(概念、几部分组成、map高级语法、数据持久化、模块化管理数据(modules))①概念：Vuex是一个专门为vue.js应用程序开发的状态管理模式；是用来存放公共数据的；②几部分组成：有五部分组成，分别是: (1)state: 数据:(2)actions:异步操作;(3)mutations:唯一一个可以修改state数据的;(4)getters: 类似于vue组件中的计算属性,对state数据进行计算(会被缓存);(5)modules:模块化管理store(仓库),每个模块拥有自己的 s.

2021-05-21 20:00:57 169

空空如也

空空如也