- 博客(60)
- 收藏
- 关注
RSS订阅
原创 25、Windows下安装Nginx 项目 发布
Windows下安装Nginx前言Nginx (engine x) 是一个高性能的HTTP和反向代理服务器，也是一个IMAP/POP3/SMTP服务器。Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru 站 点（俄文：Рамблер）开发的它也是一种轻量级的Web服务器，可以作为独立的服务器部署网站（类似Tomcat）。它高性能和低消耗内存的结构受到很多大公司青睐，如淘宝网站架设。。安装步骤1、下载Nginx下载地址：http://nginx.org/en/downlo
2021-06-07 11:38:07
376
原创 20、多环境变量配置
多环境变量配置在项目上线之前 我们要 经过开发 和 试错测试所以 写项目的时候会有三个基本接口也就是域名：团队开发的时候 就会 有自己的域名：开发环境当我们写完项目得的时候 域名 就会发生改变：测试环境测试通过后就会准备上线项目 就会有上线的域名：生产环境的、在项目的根目录下的package.js...
2021-06-02 20:52:05
140
原创 前端面试题（全）
1、不同组件之间是如何通信的？**请永远牢记vue是单向数据流1.父传子：**在父组件的子组件标签上绑定一个属性，挂载要传输的变量。在子组件中通过props来接受数据，props可以是数组也可以是对象，接受的数据可以直接使用 props:[“属性名”] props:{属性名:数据类型}父传子<template>//父组件 引用子组件aaa 两种写法传递num1,num2 <div> <aaa v-bind:father1="num1" :father2="
2021-05-20 21:38:25
299
原创 05、深拷贝、浅拷贝
vue和微信小程序的区别、比较链接：https://segmentfault.com/a/1190000015684864一、生命周期先贴两张图：vue生命周期小程序生命周期相比之下，小程序的钩子函数要简单得多。vue的钩子函数在跳转新页面时，钩子函数都会触发，但是小程序的钩子函数，页面不同的跳转方式，触发的钩子并不一样。onLoad: 页面加载一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数。onShow: 页面显示每次打开页面都会调用一次
2021-05-20 08:18:34
136
原创 Element表格多数据展示如何以、间隔区分数据
Element表格多数据展示如何以、间隔区分数据<el-table-column prop="estates" align="center" label="绑定楼盘" width="400"> <template slot-scope="scope"> <b v-for="(item,i) in scope.row.estates"><b v-if="i != 0">、</b>{{item.name}}</b> <
2022-02-28 18:00:45
515
原创 如何创建块级格式化上下文(block formatting context),BFC有什么用
创建规则：根元素1、浮动元素(float不是none)2、绝对定位元素（postition取值为abssolute或fixed）3、display取值为inline-block，table-cell，table-caption，flex，inline-flex之一的元素4、overflow不是visible的元素块级格式化上下文的作用：可以包含浮动元素不被浮动元素覆盖阻止父子元素的margin折叠...
2021-12-07 16:46:25
202
原创 Canvas和SVG有什么区别？
1.svg绘制出来的每一个图形的元素都是独立的DOM节点，能够方便的绑定事件或用来修改。2.canvas输出的是一整幅画布3.svg输出的图形是矢量图形，后期可以修改参数来自由放大缩小，不会是真和锯齿。4.canvas输出标量画布，就像一张图片一样，放大会失真或者锯齿...
2021-12-07 16:38:20
178
原创 如何进行网站性能优化
content 方面1.减少HTTP请求：合并文件、css精灵、inline Image2.减少DNS查询：DNS缓存、将资源分布到恰当数量的主机名3.减少DOM元素Server方面1.使用CDN2.配置ETag3.对组件使用Gzip压缩Cookie方面1.减少cookie大小css方面1.将样式表放到页面顶部2.不使用css表达式Javascript方面1.将脚本放到页面底部2.将JavaScript和css从外部引入3.压缩javascrip和css4.删除不需要的脚本
2021-12-07 16:27:56
235
原创 eaches柱状图的配置项
柱状图中的轴标签，轴刻度，轴线，网格线配置<script>import echarts from "eachrts"; //基于准备好的dom，初始化echarts var studentNum = echarts.init(document.getElementById('student-num_chart')) //指定图表的配置项和数据 var option1 = { //x轴 xAxis: { //坐标轴类型
2021-11-29 16:02:47
327
原创 输入 URL 到页面加载完中间发生了什么?
输入URL 到页面加载完中间发生了什么?大致过程是这样的：1.DNS 解析 ，就是解析地址就是ip地址2.TCP 连接3.发送 HTTP 请求4.服务器处理请求并返回需要的数据5.浏览器解析渲染页面6.连接结束注：这里会延伸出问 http 状态码，和三次握手和四次挥手相关问题：（1）http 状态码：1xx（临时响应）表示临时响应并需要请求者继续执行操作的状态代码2xx （成功）表示成功处理了请求的状态码。常见的 2 开头的状态码有： - 200 – 服务器成功返回网页3xx
2021-09-06 16:41:03
168
原创 前端开发规范
前端开发规范1 项目结构规范应用根据技术选型，统一关键目录，例如 compile 目录。Vue SPA 应用| — compile| — deploy.sh（发布平台发布脚本）| — build.sh（发布平台构建脚本）| — src| — build| — config| — test| — package.json| — README.mdVue SSR 应用| — compile| — deploy.sh（发布平台发布脚本）| — build.sh（发布平台构建脚本）
2021-09-06 16:35:43
368
原创 Postman 使用
一、工具下载官网下载地址：https://www.postman.com/downloads/注：记得选择下载的版本。二、工具安装下载完成后，双击 FiddlerSetup.exe 安装，可能会需要邮箱、用户名、密码注册、给团队命名，不然无法继续下一步，反正，我安装的时候是这样的。成功进入postman页面后，接下来我们正式进行postman的系统教程吧。在右上角的设置里可以设置postman的主题。这里我没有修改主题，默认是白色背景，也可以设置成黑色的，看个人爱好吧！接下来，介绍P
2021-08-06 13:40:50
131
原创 项目流程梳理
这里写自定义目录标题流程梳理新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入流程梳理严格上来讲流程控制如下：新建项目新建分支leader 审核分支leader 决定项目是否需要方案评审方案评审(细化排期)le
2021-07-26 20:24:22
269
原创 后台管理项目
一、项目概述1.1电商项目基本业务概述根据不同的应用场景，电商系统一般提供了pc端、移动端APP、移动端Web、微信小程序等多种终端的访问方式1.2电商后台管理系统的功能电商后台管理系统用于管理用户账号、商品分类、商品信息、订单、数据统计等业务功能。1.3电商后台管理系统的开发模式（前后端分离）电商后台管理系统整体采用前后端分离的开发模式，其中前端项目是基于Vue 技术栈的SPA 项目。1.4电商后台管理系统的技术选型二、项目初始化2.1 前端项目初始化步骤安装Vue 脚手架
2021-06-18 19:45:41
1421
原创 节流防抖函数
概念：debounce 防抖 、 throttle 节流节流节流的原理很简单：如果你持续触发事件，每隔一段时间，只执行一次事件。根据首次是否执行以及结束后是否执行，效果有所不同，实现的方式也有所不同。我们用 leading 代表首次是否执行，trailing 代表结束后是否再执行一次。关于节流的实现，有两种主流的实现方式，一种是使用时间戳，一种是设置定时器。使用时间戳：让我们来看第一种方法：使用时间戳，当触发事件的时候，我们取出当前的时间戳，然后减去之前的时间戳(最一开始值设为 0 )，如
2021-06-17 21:57:28
534
原创 vue双向数据绑定
是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图,实现数据和视图同步。第一步： 需要observer的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter，这样的话，给这个对象的某个值赋值，就会触发s在这里插入代码片etter，那么就能监听到了数据变化 第二步： compile解析模板指令，将模板中的变量替换成数据，然后初始化
2021-06-17 21:26:13
107
原创 Element实现tree树形数据展示
vue+Element实现tree树形数据展示组件： Element（地址：http://element.eleme.io/#/zh-CN/component/tree）：Tree树形控件复制代码<el-tree ref="expandMenuList" class="expand-tree" :data="setTree" highlight-current :props="defaultProps" :expand-on
2021-06-15 21:23:40
1482
翻译 宏任务和微任务
宏任务和微任务到底是什么？这个就涉及到JavaScript事件轮询中的宏任务和微任务。那么，你能说清楚到底宏任务和微任务是什么？是谁发起的？为什么微任务的执行要先于宏任务呢？首先，我们需要先知道JS运行机制。JS运行机制概念1： JS是单线程执行”JS是单线程的”指的是JS 引擎线程。在浏览器环境中，有JS 引擎线程和渲染线程，且两个线程互斥。Node环境中，只有JS 线程。概念2：宿主JS运行的环境。一般为浏览器或者Node。概念3：执行栈是一个存储函数调用的栈结构，遵循先进后
2021-06-11 11:42:43
302
原创 27、项目中如何修改element-ui、vant-ui的默认样式 （去除scoped,样式穿透 ＞＞＞ , less/sass : /deep/）
项目中如何修改element-ui的默认样式 （去除scoped,样式穿透 >>> , less/sass : /deep/）解决方法：1、在原来的css样式下面，新编写一个不带scoped属性style，里面写需要修改的element-ui默认css样式。——————可以解决问题——————缺点：这样设置的是全局样式，意思就是如果你的项目里面有多个css需要修改，那么这么设置，两个地方都会被改变。2、scss 模式 使用 >>> 箭头穿透父类（或者更高级）
2021-06-10 21:58:34
903
原创 数据请求 加 异步
首先创建 一个 http 文件 （看自己 习惯）然后 创建 request.js 文件import Axios from "axios";//引入axiosimport store from "../store";//引入 vueximport router from "../router";//引入路由var baseURL = `https://www.liulongbin.top:8888/api/private/v1/`;//基本域名const instance = A
2021-06-09 21:57:24
73
翻译 26、elemeng-ui 中el-form 表单如何校验
elemeng-ui 中el-form 表单如何校验表单校验是注册环节中必不可少的操作，表单校验可以提醒用户填写数据规则以确保用户提交数据的效性，也可以防止用户因误操作、填写错误数据或者恶意提交数据而占用服务器资源。ElementUI校验规则ElementUI封装了组件el-form来收集、校验和提交数据，其中的rules属性就是用来做数据校验的。ElementUI提供了一些常用的表单验证规则，我们可以直接使用该规则来实现数据校验。rules根据rules给出的规则会对prop中的值进行校验，当不满足
2021-06-08 08:52:40
271
翻译 24、vue-router 鉴权 守卫
路由导航守卫导航守卫就是路由跳转过程中的一些钩子函数。vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局路由守卫，组件路由守卫，路由独享守卫。每个守卫方法接受三个参数：作用：守卫页面跳转 监听页面跳转 在页面跳转前或者跳转后执行一些操作。路由的钩子函数 有三个参数 分别是 to到哪儿去 from 从哪儿来next执行下一步to：即将要进入的目标路由对象from：当前导航正要离开的路由next：执行下一步（必须要调用该方法）next()
2021-06-07 07:43:55
107
翻译 22、vant-ui 按需引入
vant-ui 按需引入前言：之前写的都是全局引入，之后为了提高性能，我们使用按需引入，需要那个就引入那个。一、安装我们可以通过yarn来安装，速度快yarn add vant -S二、按需导入安装插件：babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式命令：yarn add babel-plugin-import -D 或者 npm i babel-plugin-import -D安装之后，找到我们的 babe
2021-06-03 21:56:20
210
翻译 21、axios 和api 接口 封装
一、前言axios的封装和api接口的统一管理，其实主要目的就是在帮助我们简化代码和利于后期的更新维护。在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。推荐我们使用axios库二、axios封装步骤1.安装axiosnpm install axios -S; // 安装axios复制代码2.目录创建一般我会在项目的
2021-06-03 21:31:58
308
翻译 23、webpack 打包项目
什么是 webpack ?本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。webpack 就像一条生产线,要经过一系列处理流程后才能将源文件转换成输出结果。 这条生产线上的每个处理流程的职责都是单一的,多个流程之间有存在依赖关系,只有完成当前处理后才能交给
2021-06-03 09:38:15
194
翻译 移动端项目开发讲述
去哪儿项目开发过程1. 确定项目技术栈vue2.0 + vue-cli3/4 + vue-router + axios + vuex + vant + rem + sass + webpack+持久化工具2. 搭建项目yarn，npm(cnpm) 包管理工具 【两种模式都可以使用】yarn add axios -Scnpm install axios -S不同环境：-S: --save-dev 生产环境的依赖 （dependencies）-D: --dev 开发环境的依赖 （devD
2021-06-02 08:53:38
263
翻译 18.transition动画
transitiontransition的作用首先我的理解是transition是作为元素切换时的过渡动画，例如在一个div进行v-if,v-show的时候，他的显示与隐藏分别进行怎样的变幻，都可以由transition进行控制。transition的属性v-enter：元素显示/插入前的效果，例如：transform: translateX(-200%);v-active-enter：元素显示/插入的过渡时间和函数，例如：transition: all 0.3s ease;v-enter-to
2021-06-01 21:15:19
1110
翻译 17.keep-alive的作用及用法
keep-alive 的作用keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。在组件切换过程中 把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated（组件激活时使用） 与 deactivated（组价离开时调用）kee
2021-06-01 18:52:02
12340
2
原创 13、作用域、作用域链、自由变量、变量提升
vue和微信小程序的区别、比较链接：https://segmentfault.com/a/1190000015684864一、生命周期先贴两张图：vue生命周期小程序生命周期相比之下，小程序的钩子函数要简单得多。vue的钩子函数在跳转新页面时，钩子函数都会触发，但是小程序的钩子函数，页面不同的跳转方式，触发的钩子并不一样。onLoad: 页面加载一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数。onShow: 页面显示每次打开页面都会调用一次
2021-05-27 21:05:26
142
原创 10、call、apply、bind的区别
call、apply、bind的区别1、call和apply的区别使用场景： 伪数组借用数组方法这里我们使用 arguments（伪数组）、 例:function fu（）{ console.log（argumets）//首先打印一下 伪数组 }fu(2,3，4,5，6) //实参需求：在伪数组中添加 一个数字casll方法：借用数组的方法来操作数组// 只添加一个参数的 时候 Array.prototype.push.call(arguments,100)// 借用
2021-05-27 18:37:47
147
翻译 12、this指向问题和 new的过程
一图搞懂javascript中的this与call/apply/bind的6中关系在浏览器里，在全局范围内this 指向window对象；在函数中，this永远指向最后调用他的那个对象；构造函数中，this指向new出来的那个新的对象；call、apply、bind中的this被强绑定在指定的那个对象上；箭头函数中this比较特殊,箭头函数this为父作用域的this，不是调用时的this.要知道前四种方式,都是调用时确定,也就是动态的,而箭头函数的this指向是静态的,声明的时候就确定了下来；
2021-05-26 19:13:15
292
翻译 11、javascript原型与原型链
javascript原型与原型链1.prototype每个函数都有一个prototype属性，被称为显示原型2._ _proto_ _每个实例对象都会有_ proto _属性,其被称为隐式原型每一个实例对象的隐式原型_ proto _属性指向自身构造函数的显式原型prototype3.constructor每个prototype原型都有一个constructor属性，指向它关联的构造函数。4.原型链获取对象属性时，如果对象本身没有这个属性，那就会去他的原型__proto__上去
2021-05-26 14:52:53
80
原创 09、数组常用方法 （es4,es5,es6）
数组常用方法1.push() 添加一个或多个参数到数组的尾部，原来数组会改变，返回的是添加后的数组的长度例：var arr=[1,2,3,4];movePos.shift()console.log(arr) 返回 42.pop() 从数组尾部删除一个元素，原数组会改变，返回的是被删除的元素例：var arr = ["red","green"];var arr2= arr.pop(); // 取得最后一项并移除了alert(arr2); 打印结果 //green3.unshif
2021-05-25 19:30:30
225
原创 08、arguments
arguments 是一个对应于传递给函数的参数的类数组对象。arguments对象是所有（非箭头）函数中都可用的局部变量。 你可以使用arguments对象在函数中引用函数的参数。此对象包含传递给函数的每个参数，第一个参数在索引0处。 例如，如果一个函数传递了三个参数，你可以以如下方式引用他们：参数也可以被设置：arguments[1] = 'new value';arguments对象不是一个 Array 。它类似于Array，但除了length属性和索引元素之外没有任何Array属性
2021-05-25 11:57:19
112
翻译 07、数据类型判断
七、数据类型判断我们常见的数据类型有两种基本数据类型 和 引用数据类型基本数据类型Number、String、Null、Boolean、undefined、Symbol(ES6新增)引用数据类型Object、Array、Date、Function、Error、RegExp、Math、Number、String、Boolean、Globle通常判断数据的方法有四种typeof、instanceof、constructor、Object.prototype.toString.call()
2021-05-25 07:52:40
153
翻译 06、JS数据类型
六、JS数据类型：基础概念请注意：JS的数据类型有8种。在ES5的时候，我们认知的数据类型确实是 6种：Number、String、Boolean、undefined、object、Null。ES6 中新增了一种 Symbol 。这种类型的对象永不相等，即始创建的时候传入相同的值，可以解决属性名冲突的问题，做为标记。谷歌67版本中还出现了一种 bigInt。是指安全存储、操作大整数。（但是很多人不把这个做为一个类型）。JS数据类型：JS 的数据类型有几种？ 8种。Number、Strin
2021-05-24 20:47:19
97
翻译 14、var与let、const的区别
四、vue-router（两种路由模式、编程式/组件式、如何传参(优缺点)、）1.路由原理路由就是用来解析URL实现不同页面之间的跳转我们一步步实现这两种路由，来深入理解下底层的实现原理。我们主要实现以下几个简单的功能：监听路由的变化，当路由发生变化时，可以作出动作；可以前进或者后退；可以配置路由；2.路由的两种模式1.hash模式：在浏览器中符号的“#”，以及#后面的字符称之为hash，用window.location.hash读取；特点：hash虽然在URL中，但
2021-05-24 19:37:35
111
原创 16、什么是事件委托
rem布局原理rem：相对于根元素(即 html 元素)font-size 计算值的倍数。通俗的说，1rem = html 的 font-size 值这段代码。a 标签的 font-size 值为 0.5rem，实际就是 100px*0.5=50px。html{font-size:100px;} a{font-size:.5rem;}如何使用 rem 进行布局？1.标签的 rem 单位的值怎么计算通过使用 rem + js 改变 html 标签的 font-size（整体缩放）实现兼容性
2021-05-24 19:35:15
643
翻译 02、Vue的生命周期（详）
vue06----portfinder、组件切换（动态组件、路由）、路由的配置项、router-view、router-link、动态导航（params）、编程式导航、声明式导航、路由传参的方式（动态导航、query、params）、命名视图、嵌套路由、node抛出和ES6抛出、浏览器渲染流程、route、route、route、router和routes的区别、better-scroll标签：install 命名 wrapper pat ott 个数端口号问题：vue.config
2021-05-21 21:23:25
81
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人