- 博客(50)
- 收藏
- 关注
RSS订阅原创 进度条 +打包报告 + 第三方库CDN引入 + 路由懒加载
今日目标① 完成项目优化② 完成项目上线Ⅰ.项目优化实现步骤：1.生成打包报告，根据报告优化项目2.第三方库启用CDN3.Element-UI组件按需加载4.路由懒加载5.首页内容定制Ⅱ.添加进度条给项目添加进度条效果，先打开项目控制台，打开依赖，安装nprogress打开main.js，编写如下代码//导入进度条插件import NProgress from 'nprogress'//导入进度条样式import 'nprogress/nprogres...
2021-06-24 19:43:59
294
原创 web安全及防护(XSS、CSRF、sql注入)
一、XSS攻击原理Xss(cross-site scripting)攻击指的是攻击者往Web页面里插入恶意 html标签或者javascript代码。比如：①攻击者在论坛中放一个看似安全的链接，骗取用户点击后，窃取cookie中的用户私密信息；②或者攻击者在论坛中加一个恶意表单，当用户提交表单的时候，却把信息传送到攻击者的服务器中，而不是用户原本以为的信任站点。XSS攻击防范方法首先代码里对用户输入的地方和变量都需要仔细检查长度和对”<”,”>”,”;”,”’”等字..
2021-06-22 21:18:30
339
原创 vue中的diff算法
一、是什么diff算法概念：diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom。换句话说就是diff的过程就是调用名为patch的函数，比较新旧节点，一边比较一边给真实的DOM打补丁其有两个特点：① 比较只会在同层级进行, 不会跨层级比较② 在diff比较的过程中，循环从两边向中间比较diff 算法的在很多场景下都有应用，在 vue 中，作用于虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较新
2021-06-20 21:34:20
572
7
原创 函数防抖和函数节流
函数防抖与函数节流的意义在绑定 scroll 、resize 这类事件时，当它发生时，它被触发的频次非常高，间隔很近。如果事件中涉及到大量的位置计算、DOM 操作、元素重绘等工作且这些工作无法在下一个 scroll 事件触发前完成，加之用户鼠标滚动往往是连续的，就会持续触发 scroll 事件扩大、浏览器 CPU 使用率增加、用户体验受到影响。简单的讲就是事件触发太频繁，浏览器来不及处理，导致页面出现卡顿。一、使用节流防抖函数(性能优化)那么在 vue 中怎么使用呢：① 在公共方法.
2021-06-17 21:39:53
155
1
原创 Vue的双向数据绑定原理
目录 面试答案 具体步骤： 1. 什么是setter、getter 2. 什么是Object.defineProperty() ？ 3、如何理解Vue的双向数据绑定？① 我们先来看Object.defineProperty()这个方法：②讲解vue如何实现③vue代码实现④.梳理面试答案vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineP...
2021-06-16 19:06:52
132
原创 ifram 优点、缺点
iframe是一种框架，也是一种很常见的网页嵌入方式，今天给大家分析分析它的优缺点。iframe的优点：1.iframe能够原封不动的把嵌入的网页展现出来。2.如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。iframe的缺点：
2021-06-11 16:02:42
173
1
原创 项目中如何修改element-ui的默认样式 （去除scoped,样式穿透 ＞＞＞ , less/sass : /deep/
当我们在vue中引入第三方组件库的时候，vue组件中样式的scoped就会成为我们修改样式的阻碍，有以下三种方法修改样式，并且不影响全局样式：Ⅰ、在原来的css样式下面，新编写一个不带scoped属性style，里面写需要修改的element-ui默认css样式。缺点：这样设置的是全局样式，意思就是如果你的项目里面有多个css需要修改，那么这么设置，两个地方都会被改变<style> .my{ margin: 20px; } .my .el-input__inne...
2021-06-10 20:56:50
340
原创 什么是RESTful API？
目录前言Ⅰ、协议 Ⅱ、域名Ⅲ、版本Ⅳ、路径Ⅴ、HTTP动词、url命名规范Ⅵ、状态码Ⅶ、参数命名规范Ⅷ、错误信息Ⅸ、统一返回数据格式Ⅹ、使用链接关联相关的资源最后前言① 网络应用程序，分为前端和后端两个部分。当前的发展趋势，就是前端设备层出不穷（手机、平板、桌面电脑、其他专用设备…）。②因此，必须有一种统一的机制，方便不同的前端设备与后端进行通信。这导致API构架的流行，RESTful API是目前比较成熟的一套...
2021-06-10 11:48:49
155
原创 git&gitHub
Ⅰ. Git基础① 版本管理① -1 什么是版本管理版本管理是一种记录文件变化的方式，以便将来查阅特定版本的文件内容。① -2 人为维护文档版本的问题 文档数量多且命名不清晰导致文档版本混乱 每次编辑文档需要复制，不方便 多人同时编辑同一个文档，容易产生覆盖 ② Git 是什么Git是一个版本管理控制系统（缩写VCS），它可以在任何时间点，将文档的状态作为更新记录保存起来，也可以在任何时间点，将更新记录恢复回来。③ Git 安装下...
2021-06-08 21:43:01
57
原创 elemeng-ui 中el-form 表单如何校验
前言表单校验是注册环节中必不可少的操作，表单校验可以提醒用户填写数据规则以确保用户提交数据的效性，也可以防止用户因误操作、填写错误数据或者恶意提交数据而占用服务器资源。一、首先我们引入element1、下载npm i element-ui -S2、引入我们这里直接完整引入了，按需引入请看element官网在main.js中写入以下内容import Vue from 'vue';import ElementUI from 'element-ui';import 'ele
2021-06-08 08:06:09
634
2
原创 Windows下安装Nginx
目录前言安装步骤访问自己的项目前言Nginx (engine x) 是一个高性能的HTTP和反向代理服务器，也是一个IMAP/POP3/SMTP服务器。Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru 站 点（俄文：Рамблер）开发的 它也是一种轻量级的Web服务器，可以作为独立的服务器部署网站（类似Tomcat）。它高性能和低消耗内存的结构受到很多大公司青睐，如淘宝网站架设。。安装步骤一、下载Nginx下载地址：http://...
2021-06-07 11:09:10
530
原创 webpack打包优化
目录Ⅰ、webpack打包作用Ⅱ、项目开始时：一、配置proxy跨域二、配置alias别名Ⅲ、项目结束后（打包前）一、修改静态资源路径(打包前必做，否则打包后白屏)二、 关闭生产环境下的SourceMap映射文件三、使用CDN加速优化四、去除console.log()打印以及注释五、npm run build打包（结束）Ⅰ、webpack打包作用 ① 提高打包速度 ② 减小项目体积、提高首屏加载速度 ③ 提高用户...
2021-06-06 17:48:43
266
原创 vue项目中vant-ui按需导入
前言：以前我使用ui组件库的时候，总是全局导入，但是到了实际开发中，为了提升性能，都会需要我们使用按需导入。1、安装安装vant-ui插件cnpm install vant-ui --save 通过 npm 安装npm i vant -S通过 yarn 安装yarn add vant -S2、导入我们先来说一下以前的导入方式 (全局导入)这种导入方式直接在 main.js 文件下引入 以下两个文件就可以了import Vant ...
2021-06-03 16:23:56
521
2
原创 vue-router 鉴权 守卫
文章目录permission.js router.js store/index.js store/getters store/modules/permissionpermission.js//路由配置文件import router from './router'import store from './store'//需要安装nprogressimport NProgress from 'nprogress'import 'nprogress/nprogress.css'/.
2021-06-02 21:35:08
184
原创 axios拦截，api统一管理
axios封装，api接口封装统一管理一、 axios说明Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。axios的封装和api接口的统一管理，其实主要目的就是在帮助我们简化代码和利于后期的更新维护。在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。二、axios的
2021-06-02 21:20:53
1613
14
原创 多环境变量配置
package.json 里的 scripts 配置 serve stage build，通过 --mode xxx 来执行不同环境通过 npm run serve 启动本地 , 执行 development 通过 npm run stage 打包测试 , 执行 staging 通过 npm run build 打包正式 , 执行 production"scripts": { "serve": "vue-cli-service serve --open", "stage": "vue-
2021-06-01 20:52:58
149
原创 去哪儿的项目开发流程（简述）
1. 确定项目技术栈vue2.0 + vue-cli3/4 + vue-router + axios + vuex + vant + rem + sass + webpack2. 搭建项目yarn，npm(cnpm) 包管理工具yarn add axios -Scnpm install axios -S-S: --save-dev 生产环境的依赖 （dependencies）-D: --dev 开发环境的依赖 （devDependencies）2.1 从0搭建指令vue.
2021-06-01 20:43:50
287
原创 transition
CSS3transition属性实例将鼠标悬停在一个 div 元素上，逐步改变表格的宽度从 100px 到 300px<!DOCTYPE html><html><head><meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title><style> div{ width:100px; height:100px; background:red;..
2021-06-01 20:18:32
187
原创 keep-alive
概念keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。作用在组件切换过程中 把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间，提高用户体验性参数 Keep-alive 组件提供了include和exclude两个属性，允许组件有条件的进行缓存。include: 字符串或正则表达式。只有匹配的组...
2021-06-01 18:44:28
1417
原创 js中事件委托
概念事件委托，又名事件代理。事件委托就是利用事件冒泡，就是把子元素的事件都绑定到父元素上。如果子元素阻止了事件冒泡，那么委托也就没法实现了。优点：1.大量减少内存占用，减少事件注册。2.新增元素实现动态绑定事件应用的场景事件冒泡，当触发子元素的事件时，通过冒泡，事件传递给父亲，父亲身上绑定有事件处理程序，进而触发使用背景事件委托常用在导航和列表中，话不多说，直接上例子。 <ul id="my-ul"> <li>1</li>...
2021-05-28 21:00:04
97
原创 闭包
简单的理解就是函数中套了一个函数，内层函数可以访问外层函数中的变量优点：这个变量在外层函数执行完后还不被销毁，因为它被别的函数使用了缺点：闭包会使函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，可能会导致内存泄露。解决方法是在退出函数之前，将不使用的变量全部删除...
2021-05-28 20:45:42
62
1
原创 【ES6】var、let、const三者的区别
1.var let const 区别var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。 let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。 const用来定义常量，永远不变的量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改，他是不可以改变，不可以重复声明的。<script type="text/javascript"> // 块作用域 { var a = 1; let b..
2021-05-28 16:58:45
134
1
原创 new的过程
介绍我们通常创建一个构造函数，使用new关键字来new出一个对象，那这个对象是如何产生的呢？步骤：在new开始时，创建一个空对象。 这个空对象的__proto__属性指向构造函数的prototype属性 调用构造函数，并改变this的指向，指向我们新创建的空对象。 返回这个空对象。例如：new的过程fun Foo(name,age){ this.name=name; this.age=age; return {name:name}}Foo.Prot.
2021-05-27 19:55:31
93
原创 作用域、作用域链、自由变量、变量提升
1.作用域每一个变量、函数都有其作用的范围，超出作用不得使用，这个叫做作用域。 在javascript中，其对作用域的划分都是通过函数function来实现的，在函数内部的区域，我们就称之为“局部作用域”，在函数外部的区域，我们就称之为“全局作用域” es6中新增了块级作用域（大括号，比如：if{},for(){},while(){}…）例如：2.自由变量自由变量的概念：当前作用域没有定义的变量3.作用域链自由变量的向上级作用域一层一层查找，直到找到为止，最高找到全局作..
2021-05-27 19:25:41
163
2
原创 javascript的原型、原型链
什么是原型？JavaScript是一种简易的脚本语言，其是由对象构成。每一个JavaScript对象（除null外）都和另一个对象相关联，“另一个”对象就是原型。也就是说，任何一个对象都有原型这个属性。1. prototype每个函数都有一个prototype属性，被称为显示原型2._ _proto_ _ 每个实例对象都会有_ _proto_ _属性,其被称为隐式原型 每一个实例对象的隐式原型_ _proto_ _属性指向自身构造函数的显式原型prototype 显示.
2021-05-25 19:30:34
100
原创 Javascript中的this与call/apply/bind的关系
总结在浏览器里，在全局范围内this 指向window对象； 在普通函数中，this永远指向最后调用他的那个对象； 构造函数中，this指向new出来的那个新的对象； call、apply、bind中的this被强绑定在指定的那个对象上； 箭头函数中this比较特殊,箭头函数this为父作用域的this，不是调用时的this.要知道前四种方式,都是调用时确定,也就是动态的,而箭头函数的this指向是静态的,声明的时候就确定了下来； apply、call、bind都是js给函数内置的一些API，
2021-05-25 19:06:15
149
2
原创 数组常用方法 （es4,es5,es6）
数组1 什么是数组存储一组关联数据2 数组定义方式数组直接量（常用）var arr = [] ;var arr2 = [10,20,30]; 2 . 通过 new 创建var arr3 = new Array()；var arr4 = new Array(10,20,30)console.log(arr4) // [ 10, 20, 30 ]3 数组访问数组名[下标] 下标0 1 2 3 …数组长度可以通过数组名.length访问4 数组元素的遍...
2021-05-25 07:25:13
237
2
原创 argument
js中arguments的用法了解arguments这个对象之前先来认识一下javascript的一些功能：其实Javascript并没有重载函数的功能，但是Arguments对象能够模拟重载。Javascrip中每个函数都会有一个Arguments对象实例arguments，它引用着函数的实参，可以用数组下标的方式"[]"引用arguments的元素。arguments.length为函数实参个数，arguments.callee引用函数自身arguments他的特性和使用方法特性：1
2021-05-24 21:07:19
72
原创 数据类型判断
判断数据类型的四种方法目录判断数据类型的四种方法1. typeof2.instanceof3.根据对象的contructor判断4 . 使用Object.prototype.toString.call()检测对象类型1. typeof可以判断数据类型，它返回表示数据类型的字符串（返回结果只能包括number,boolean,string,function,object,undefined）； 可以使用typeof判断变量是否存在（如if(typeof a!="u...
2021-05-24 20:41:08
122
原创 js数据类型
基本数据类型（值类型）：Number、String、Boolean、Undefined、Null、Symbol（es6新增独一无二的值）和BigInt（es10新增）引用数据类型:Object。包含Object、Array、 function、Date、RegExp栈堆存储值类型栈存储：主要针对（Number、String、Boolean）三种数据。直接存储在栈（stack）中，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储。例如：当我们执行下方代码时栈内存中的变化...
2021-05-24 20:05:46
69
原创 深拷贝(四种方法)
目录在学习深拷贝之前，我们要先搞明白什么是深拷贝？深拷贝深拷贝的实现在学习深拷贝之前，我们要先搞明白什么是深拷贝？在JS中，数据类型分为基本数据类型和引用数据类型两种，对于基本数据类型来说，它的值直接存储在栈内存中，而对于引用类型来说，它在栈内存中仅仅存储了一个引用，而真正的数据存储在堆内存中。1、当我们对数据进行操作的时候，会发生两种情况基本数据类型var a = 3;var b = a;b = 5;console.log(a); // 3console.l.
2021-05-23 19:20:18
56716
4
原创 vue-ruoter路由
vue路由，路由传参（parmas,query）一、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 './components/BYNews
2021-05-21 21:43:20
210
1
原创 vuex (概念、几部分组成、map高级语法、数据持久化)
目录1、vuex的概念详细理解vuex有五个核心概念vuex的安装在mian,js中引入引入vuexstate备注详述Vuex运行机制Vuex中如何异步修改数据2、vuex高级篇1之语法糖辅助函数3vuex 数据持久化1、vuex的概念详细理解（1）Vuex是专门为vue.js应用程序开发的状态管理模式，它其实就相当于一个公共仓库，保存着所有的组件都能公用的数据（2）它的状态存储是响应式的，如果我们的组件使用了vuex，一旦里面的里面的state发...
2021-05-21 19:23:33
149
1
原创 vue生命周期 （单词，每个钩子函数可以做什么，执行顺序）
vue生命周期目录vue生命周期总共分为8个阶段。创建前/后，载入前/后，更新前/后，销毁前/后。创建前/后：载入前/后：更新前/后：销毁前/后：总共分为8个阶段。创建前/后，载入前/后，更新前/后，销毁前/后。创建前/后：beforeCreated每一个页面都是一个vue实例，这时实例还没有被创建，所以你无法知道data，也不能用watch监听 在这个时候data和methods都不能使用created这时实例已经创建，可以得到data，调用w...
2021-05-20 17:19:25
267
原创 Vuex的运行机制
Vuex提供数据（state）来驱动视图（vue components），通过dispath派发actions，在其中可以做一些异步的操作，然后通过commit来提交mutations，最后mutations来更改state。视图如下:
2021-05-19 20:12:30
232
原创 Vue组件通信(父传子、子传父、兄弟通信)
一.父组件传到子组件父组件是通过props属性给子组件通信的1 . 父组件parent.vue代码如下：<template> <div class="parent"> <h2>{{ msg }}</h2> <son :fa-msg="msg"></son> <!-- 子组件绑定faMsg变量,注意驼峰--> </div> </template> <
2021-05-19 20:00:21
206
2
原创 uni-app教程四（uni.requet()、网络模块封装
1. uni-app网络请求uni-app提供了uni.requet()方法，发起网络请求：uni.request({ url: 'https://ceshi2.dishait.cn/api/v1/list', //仅为示例，并非真实接口地址。 data: { text: 'uni.request' }, header: { 'custom-header': 'hello' //自定义请求头信息 }, success:
2021-05-19 19:39:32
703
1
原创 黑马优购的项目
文章目录1、准备工作。 2、封装一些公共的组件 3、请求接口渲染页面 4、列表页面渲染 5、详细列表下拉刷新，上拉加载 6、详情页 7、购物车页面 8、我的页面1、准备工作。我们先把wx.request封装好。然后我们去配置路由。把尾部的导航配置出来。就是我们的首页、分类、购物车、还有我的。在全局的app.json中配置{ "pages": [ // 这个是我们的页面，有点类似我们的vue路由 "pages/index/index", "pages/...
2021-05-17 21:54:17
404
1
原创 uni-app教程三（全局模块util.js、全局变量、vuex）
1. 公用模块1.1 定义一个专用的模块，用来组织和管理这些全局的变量，在需要的页面引入在 uni-app 项目根目录下创建 common 目录，然后在 common 目录下新建 util.js 用于定义公用的方法。const baseUrl = 'https://ceshi2.dishait.cn/api/v1'; const nowTime = Date.now || function () { return new Date().getTime(); }; exp
2021-05-17 21:23:45
778
原创 uni-app教程二（微信开发者工具运行项目，icon字体使用，组件）
1.在微信开发者工具中运行1、配置小程序IDE相关路径说明：只有配置了才能在微信小程序运开发者工具中运行成功2、开启小程序IDE服务端口的设置—>安全设置—>安全 （开启）3. 修改 manifest.json配置文件，添加自己的小程序AppId:4. 进入test项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，生成对应的微信小程序项目，即可在微信开发者工具里面体验了。5. 运行效果2. 组件...
2021-05-17 21:09:09
763
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人