- 博客(35)
- 收藏
- 关注
RSS订阅原创 vue如何通过配置proxy解决跨域问题
原本在用axios做数据请求的时候我就打算用CORS解决跨域问题，奈何跟我做配合的后端成员用natapp做内网穿透给到的数据接口没有在服务器做CORS跨域需要的相关请求头配置，那这个时候就只能在前端解决跨域问题。在vue中配置代理proxy解决跨域用vue-cli脚手架搭建的项目里，打开config文件夹里的index.js文件做相关配置module.exports = { dev: { assetsSubDirectory: 'static',//静态资源目录 proxyTab
2021-03-07 22:52:52
1634
3
原创 连接git仓库失败解决办法
问题出现：首先是我在本地建了个项目，写完了之后呢打算用sourceTree推到gitlab的仓库里，奈何这gitlab仓库怎么也连接不上。基于我是第一次使用sourceTree，想着是不是啥东西没配置好，结果各种捣鼓发现gitee和github都能连上仓库，克隆推送都没出现问题，就是gitlab怎么搞都不行。接下来看看都是报了些啥错，还有咋一步步解决的吧~报错一：无效源路径问题：在确保克隆的路径确实没出错的前提下，提示克隆的仓库是个无效的源路径报错二：提示SSH密钥认证失败报错三：用命令行试着
2021-03-07 16:50:09
7535
原创 ES5和ES6声明的“全局变量”有什么不同？
复看红宝石书关于执行上下文与作用域部分的时候发现了以前遗漏的小知识点????“let和const的顶级声明不会定义在全局上下文中”（1）什么是全局上下文？根据ECMAScript实现的宿主环境不同，表示全局上下文的对象可能不一样。但在浏览器中，我们所指的全局上下文即window对象。（1）什么是全局作用域？如果说全局上下文是js代码执行的环境，那么全局作用域则是全局变量和函数可被直接访问到的区域。在 ES5中的作用域分为全局作用域和局部作用域，在ES6语法中只有块级作用域。（2）var、f
2021-02-23 16:36:51
591
原创 js脚本的延迟执行和异步执行
JavaScript是什么？简单来说，JavaScript是一种以ECMAScript作为语言标准的编程语言，通常我们讲的ECMAScript更多被等同于JavaScript，但完整JavaScript实际上有三部分：ECMAScript+相关扩展完整的JavaScript包含以下内容ECMAScript（核心）DOM（文档对象模型）BOM（浏览器对象模型）HTML中JavaScript的使用方法JavaScript有两种使用方法直接将js代码嵌入网页的<script>
2021-02-22 01:51:39
708
原创 ES5和ES6中的作用域
Es5中只有全局作用域和函数作用域全局作用域a. 函数外面定义的变量拥有全局作用域b. 未定义直接赋值的变量自动声明为拥有全局作用域c. window对象的属性拥有全局作用域局部作用域a. 函数内部定义的变量只有在函数内才可访问（函数作用域）Es6中新增块级作用域块级作用域可以简单理解为是:包在大括号{}里面的内容, 它可以自成一个作用域。块级作用域中方的变量由let和const声明为什么需要块级作用域？1. 解决内层作用域变量提升导致外层变量被覆盖var i = 5
2020-12-22 22:12:52
248
原创 el-menu页面跳转保留上一级路由样式
功能实现：el-menu中使用 vue-router进行页面跳转时，可以直接通过设置:default-active="$route.path"（注意default-active是el-menu自带的属性绑定，要添加前面的冒号）以及设置el-menu-item中的index = "跳转路径"即可点击el-menu-item实现页面跳转<el-menu router :default-active="$route.path" class="el-menu-demo" mode="horizontal"
2020-09-17 15:42:03
1318
原创 BFC的3个特性
1.属于同一个BFC的两个相邻Box的margin会发生折叠问题代码如下：<head> <style> .box{ width: 100px; height: 100px; border: 2px solid rgb(247, 129, 129); margin: 100px } </style></head><body> &
2020-09-13 15:03:50
184
原创 什么是BFC、IFC、GFC、FFC？
首先要知道：BFC和IFC出现在CSS2.1中，直到CSS3中才有GFC和FFC。FC是什么？FC的全称是：Formatting Contexts，是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。BFC是什么？BFC(Block Formatting Contexts)直译为"块级格式化上下文"。Block Formatting Contexts就是页面上的一个隔离的渲染区域，容器里面的子元素不会在布局
2020-09-13 15:02:29
707
原创 使得div水平垂直居中的六种方法
1.绝对定位（已知宽高）将div块整体向右和向下偏移50%，再用margin将div的中心点挪回原宽高的一半值div{ position: absolute; width:600px; height: 600px; left:50%; top:50%; margin-left:-300px; margin-top:-300px;}2.绝对定位（未知宽高，方法一）不确定当前div的宽度和高度的情况下，采用 transform: transla
2020-09-13 14:14:12
1702
2
原创 如何判断数组的四种方法
日常中我们会用typeOf运算符去判断数据的类型，结果如下其中对于对象和数组用typeof方法得到的结果都是object，这是因为在JavaScript中所有数据类型严格意义上都是对象，对象是对象，数组也是对象，显然用typeof是不能够判断出变量的类型是数组。那么接下来介绍判断变量为数组的四种方法????1、从原型入手:Array.prototype.isPrototypeOf(obj);利用isPrototypeOf()方法，判定Array是不是在obj的原型链中，如果是，则返回true,否则
2020-09-12 15:28:38
15852
原创 vue中使用Element组件el-dialog导致页面偏移——解决方法
在vue项目中里使用Element的el-dialog组件问题1：原先的页面有滚动条，再引入弹出框之后又出现滚动条解决方法：找到弹出框对应的class再将overflow设置为hidden问题2：组件引起原页面偏移修改完之后滚动条没了但是滚动条的位置还在，这导致了弹框出现的时候原来的页面会向左边偏移，引起页面的抖动一番检查后发现问题所在：弹框出现的时候body上会被动态的添加上一个class和style例如：点击弹框前的body点击弹框之后一开始一直把关注点放在组件上，甚至怀疑是e
2020-09-05 01:53:06
6324
4
原创 Git、Github、GitLab、码云的区别和联系
什么是Git?Git是一个版本控制系统（Version Control System，VCS）。版本控制是一种记录一个或若干文件内容变化，以便将来查阅特定版本修订情况的系统。有了版本控制系统，就可以不用担心文件丢失，不小心误修改文件等等“事故”，而且你可以随便回到历史记录的某个时刻。什么是 Github?github是一个基于git的代码托管平台，付费用户可以建私人仓库，我们一般的免费用户只能使用公共仓库，也就是代码要公开。什么是SCN？Git和SCN的区别？SVN, CVS这类早期的集中式版本控
2020-08-28 16:09:52
946
原创 图片加载速度慢导致的页面布局抖动——解决方法
页面加载完成前后为什么会出现抖动？页面加载时之所以会出现抖动现象，是因为在没有设置img的width,height属性值的情况下，浏览器无法获取图像的尺寸，也就无法为图像保留合适的空间，因此当我们刷新页面时，页面中的图像在加载完成前后的布局发生了变化，因此视觉上产生了页面抖动的现象。解决方法1——设定图像宽高的具体值为图像指定 height 和 width 属性，设置了这些属性，就可以在页面加载时为图像预留空间。提示：不要通过 height 和 width 属性来缩放图像。如果通过 height
2020-08-28 01:46:21
2327
1
原创 LiveReload的下载安装 + Sublime的配置
之前一直用VS Code做前端开发，前段时间被种草了Sublime后确实感觉到Sublime插件功能的强大，后来为了方便做页面开发下载了LiveReload这个插件，再也不用每次修改页面样式都按一次刷新真的是太爽了。为了在Chrome中下载这个插件确实费了一凡功夫。下面记录一下我安装成功的过程，希望能给安装LiveReload的你们一点帮助。第一步：下载插件????由于我的电脑没有翻墙，先在网上下了插件再安装:（翻墙了的小伙伴好像可以直接在google应用商城下载安装）点此下载插件：Chrome插
2020-07-23 17:08:01
530
原创 基于todolist功能——对组件进行拆分(组件与实例的关系）
todolist功能开发下述例子实现功能：在input框输入内容的时候，通过点击提交按钮将内容发布在列表之中页面渲染结果代码解析：通过v-model对数据进行双向绑定，这样输入框里每一次输入的内容都会被存到data的inputValue值当中。通过v-on：click在提交按钮上绑定了一个名为Submit的方法函数，在每一次点击提交按钮时，Submit方法都会将inputValue的值通过push的方法添加到list中，之后再把inputValue中的值给清空。最后 ul列表通过v-fo
2020-07-21 15:16:28
252
原创 Vue模板指令——v-if、v-show、v-for的作用
v-if：控制DOM的存在与否页面结果如下????上述例子功能：通过点击button实现对文字的显示和隐藏。代码分析在button上绑定一个点击事件，通过handleClick事件改变show属性的值为false或true。v-if判断：当show为false时，页面会将hello world标签从DOM里面删除。当show为true时，页面会将hello world标签重新添加到DOM里面。v-show：控制DOM的显示与否将上述例子中的 v-if 改为 v-show 同样可以实现h
2020-07-20 16:44:40
457
原创 Vue中——数据的双向绑定、计算和监听
Vue中数据双向绑定的方法：v-modelv-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。按钮的事件可以使用 v-on 监听事件，并对用户的输入进行响应。此时运行页面input框里会显示data里content的内容this is hello world...
2020-07-19 23:23:37
1012
原创 Vue中的事件绑定和属性绑定
事件绑定：v-on标签绑定click事件例子：实现点击页面上的hello的同时将显示内容改为world例子解释：在div标签上绑定一个点击事件，名为handleClick。在vue实例的methods对象里定义handleClick方法。当handleClick事件被触发时，通过this.content去改变数据内容。属性绑定：v-bind标签绑定属性渲染结果注意：模板指令v-on/v-bind后面的等号后的内容就不再是字符串了，而是表达式，title指的是data里的变量t
2020-07-18 23:52:08
1436
原创 Vue如何将数据显示在页面中
如何将data的数据显示在页面中1.文本插值：{{}} <div id="root">{{msg}}</div> <script> new Vue({ el:"#root", data:{ msg:'hello world' }, }) </script>渲染结果 <div id="root">hello world</div> 2.原始HTML插值：v-html、v-t
2020-07-18 23:51:08
10591
原创 Vue基础语法——挂载点、模板、实例、插值表达式
Vue的基础语法挂载点：vue实例的挂载点，el属性所对应的id所在的标签，vue只会处理挂载点里面的东西。模板：写在挂载点里面的内容（也可以现在实例的template属性里面。）实例：只需要指定挂载点，将模板和数据写上，vue会自带将模板里的东西处理显示在挂载点之中。上述例子中vue实例的挂载点为id=root所在的div标签。template里为模板data里为数据插值表达式插值表达式语法：{{}}如：<h1>hello {{msg}}</h1>
2020-07-18 22:54:25
255
原创 文件路径的通用规则
文件路径的一些通用规则：若引用的目标文件与 HTML 文件同级，只需直接使用文件名，比如 my-image.jpg 。要引用子文件夹中的文件，要在路径前写下目录名并加一个斜杠，比如 subdirectory/my-image.jpg 。若引用的目标文件位于 HTML 文件的上级，需要加上两个点。比如，如果 index.html 在 test-site 下面的一个子目录而my-image.png 在 test-site 目录，你可以在 index.html 里使用 …/my-image.png 引用
2020-07-15 22:32:57
1133
原创 原型（prototype），原型指针（_proto_)，原型链，构造器指针（constructor）
原型（prototype）,原型指针（proto)，原型链，构造器指针（constructor）到底都是些什么？让我们先从含义层看看这四个到底是什么意思????原型（prototype)所有函数都有一个prototype（原型）属性，属性值是一个普通的对象。原型指针（proto）指向构造该对象的构造函数的原型（prototype）原型链在javascript中，每个函数都会初始化一个属性：原型（prototype），当我们需要访问这个函数的某个属性时，就会去到prototype中寻找该属性，若
2020-07-14 00:19:20
537
原创 AJAX里应该使用XML还是JSON？
之前讲过AJAX的相关理论，里面提到了XML，但是其实在实际开发工程中与AJAX一起使用到的更多的是JSON而不是XML,所以本文来讲讲在AJAX中使用JSON和XML有什么区别。AJAX的全称是Asynchronous JavaScript And XML（异步的JS和XML），说明当初这门技术设想的最佳拍档是JS和XML。很可惜，现在大家更倾向于JS+JSON。所以，也有人认为AJAX应该干脆改名为AJAJ得了（Asynchronous JavaScript And JSON）。之前这篇文章AJAX
2020-07-11 23:04:36
533
原创 AJAX工作原理+例子说明
什么是 AJAX ？AJAX = 异步 JavaScript 和 XML，是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量 数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。AJAX涉及到的知识包括：XML (作为转换数据的格式)XMLHttpRequest 对象 (异步的与服务器交换数据)JavaScript/DOM (信息显示/交互)CSS
2020-07-10 17:52:53
102
原创 Tomcat的安装教程+Eclipse中如何连接Mysql
本文是以已经安装了 JDK 环境和Eclipse软件的前提下进行的，还未安装的可看指路????安装Eclipse地址：http://www.eclipse.org/downloads/搭建Java开发环境：https://www.runoob.com/java/java-environment-setup.html接下来进入正文：Tomcat 下载安装你可以根据你的系统下载对应的包(以下以Window系统为例)：下载之后，将压缩包解压（注意目录名不能有中文和空格）接着双击文件里的 start
2020-07-06 01:29:03
577
原创 float导致的父元素高度塌陷——带例说明+解决方法
今天来讲讲float导致的父元素高度塌陷的解决方法。之前讲过absolute导致的高度塌陷问题，需要的同学请移步至此文章：添加链接描述什么是高度塌陷？在文档流中，当父元素的高度设置为自适应的时候（height：auto），此时父元素的高度默认会被子元素撑开。但是当为我们子元素设置浮动（float）以后，子元素就会完全脱离文档流，导致子元素无法撑开父元素高度的情况出现。高度塌陷会出现什么问题？由于父元素的高度塌陷，则父元素下的所有元素都会向上移动，从而导致页面的布局混乱。接下来看一个float导致
2020-07-05 01:23:52
1991
原创 relative和absolute的区别——带例子说明
relative和absolute的区别，话不多说，先上代码<html> <head> <style> .container{ width: 300px; height: auto; background: rgb(54, 181, 219); positive：relative;
2020-07-04 01:27:18
2055
1
原创 absolute导致的高度塌陷问题——解决方法
前段时间写前端页面排版的时候又又又遇到了absolute导致的父元素高度塌陷的问题，以前代码写的少所以遇到问题就是查查查，问题解决后了一个漫长的学期后又遇到一样的问题又得重新查查查，所以这次索性总结一下。什么是高度塌陷？在文档流中，父元素的高度默认被子元素撑开的，也就是说子元素多高父元素就多高，但是当为我们子元素设置浮动以后，子元素就会完全脱离文档流，此时会导致子元素无法撑开父元素的高度，导致父元素的高度塌陷。由于父元素的高度塌陷，则父元素下的所有元素都会向上移动，导致页面的布局混乱。PS：因为pos
2020-07-03 23:47:47
22311
2
原创 Eclipse工程文件中把包变成文件夹/文件夹变成包的解决方法
软件：Eclipse起因：因为项目需要用到bookstrap进行前端页面的开发，所以在我把相关的css和js等文件夹放到相关文件夹底下的时候，它变成了个package的样子…解决方法：右击项目——选择Build Path —— 选择Configure Build Path出现的页面中：选中Source——选择要修改的文件夹——双击下面的Included或者Excluded（注意：Included或Excluded弹出的都是同一个对话框…）下面进行文件设置：想要文件夹以文件夹形式显示的，即在I
2020-05-31 00:31:46
3569
原创 （二）前端缓存之浏览器储存
浏览器储存之webStorage与cookie、session本文着重讲解前浏览器储存这部分内容，想了解http缓存协议请移步至此文章：https://editor.csdn.net/md/?articleId=106444139cookie和session1.由来由于HTTP是一种无状态的协议，数据交换完毕后会关闭连接，为了分辨一个请求是谁发起的，以免在同一个网站每打开一个页面都需要重新登录，引入了Session和Cookie两个机制。2.cookie和session的联系Cookie和Ses
2020-05-30 23:25:41
301
原创 （一）前端缓存之HTTP缓存
什么是前端缓存？前端缓存主要是分为HTTP缓存和浏览器缓存。其中HTTP缓存是在HTTP请求传输时用到的缓存，主要在服务器代码上设置；而浏览器缓存则主要由前端开发在前端js上进行设置。缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。对于一个数据请求来说，可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能。比如说直接使用缓存而不发起请求，
2020-05-30 18:46:14
411
原创 JS闭包及常见应用场景
JS闭包及常见应用场景1. 闭包的理解理解闭包的关键在于：外部函数调用之后其变量对象本应该被销毁，但闭包的存在使我们仍然可以访问外部函数的变量对象。它由两部分构成：函数，以及创建该函数的环境。环境由闭包创建时在作用域中的所有局部变量组成。2. 闭包概念能够读取其他函数内部变量的函数。 或简单理解为定义在一个函数内部的函数，内部函数持有外部函数内变量的引用。3. 闭包用途a. 读取函数内部变量 b. 让变量值始终保持在内存中，不会在调用后被自动清除 c.方便调用上下文的局部变量，利于
2020-05-30 01:35:08
299
2
原创 在for循环中运行setTimeout
对for循环中运行setTimeout的理解先看一段代码for (var i=0; i<10; i++) { setTimeout(console.log(i), i*1000 ); }答案：0、1、2、3、4、5、6、7、8、9再比较一段代码for(var i=0;i<10;i++){ setTimeout(function(){ console.log(i); },i*1000); }答案：10、1
2020-05-29 22:59:30
2010
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人