![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
web
文章平均质量分 86
Reagan_
这个作者很懒,什么都没留下…
展开
-
HTML的基础知识点(一)
标签介绍及其特性:<html>超文本标记语言>。1. <html></html>根目录2.<head>内容</head>标签是编辑给浏览器的,是人看不到的,设置浏览器特性;说明:在head里面设置能识别中文的字典meta标签,每一个标签都有属性,属性添加在标签的头标签上 ,用=连接属性值,加“属性值”(要加双引号);3.<bo...原创 2018-06-14 13:25:20 · 6706 阅读 · 0 评论 -
如何用js添加css3动画
其实很简单,我们只需要提前写好变化前的div,和变化后的div,在js中控制class类名的改变来实现动画就可以了。//html部分:.div1 { width:22px; height:22px; transition: 0.4s;}.div2 { width:200px; height:130px; transition: 0.3s;...原创 2018-08-14 21:43:40 · 15257 阅读 · 2 评论 -
使用vh和vw实现流体排版
前言在网页的调试中,我们新手会遇到这样的问题: ① 窗口的大小改变时,页面里元素的大小是否会随着窗口大小的改变而改变、是否会影响布局。 ② 在不同的设备上访问网页时,元素的大小是否合适、是否会影响布局。目前,我们有这样的解决方法: 对于①:通过百分比、em类来实现 对于②:媒介查询 ③今天我们介绍一种新的适配方法:流体排版,可以同时解决①和②。首先我们来明确三种方法:...原创 2018-09-17 22:00:05 · 684 阅读 · 0 评论 -
JavaScript 对象及其枚举
对象的枚举for in循环 hasOwnProperty 操作符in 操作符instanceof 操作符1.遍历整个对象属性的方法:for(var prop in obj) { //表示在obj里面,有多少个prop就循环多少圈,prop可以换名字 console.log(prop + &amp;amp;quot;&amp;amp;quot; + typeof(prop)) ;}原创 2018-07-28 10:42:42 · 1379 阅读 · 0 评论 -
webpack
为什要使用WebPack?现在的网页就像功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度,我们开始使用了模块化、各种拓展语言(TypeScript)、css预处理器等。这些进步提高我们开发效率的同时,也存在着它们所编写的文件不能直接被浏览器识别的问题,这就需要我们再进行处理,这就为WebPack类的工具的出现提供了需求。什么是Webpack?We...原创 2019-01-23 18:20:11 · 323 阅读 · 0 评论 -
打包方案、模块化编程
首先,为什么需要打包方案呢?随着前端页面的不断发展,我们的页面承载着越来越多的样式、功能,我们开始尝试往页面里插入各种库和插件,不再局限于简单的静态页面,相应的,在网速的限制下,单位时间内网页的响应和加载速度都极其不尽如人意,js文件的压力越来越大。为了解决这些问题,打包方案应运而生了。(需要明确的是,还有一些其他的作用:代码混淆了不容易被盗用…)打包方案的发展历程。如同创建对象的工厂模式、...原创 2019-01-19 23:45:57 · 570 阅读 · 0 评论 -
解决input 密码框内密码的显隐问题
引入问题:我们在很多场景下都会有输入密码的情况,输入的时候,框右端会有一个眼睛,可以选择密码是否能看见。在具体实现的过程中我发现眼睛的点击事件会和input的失去聚焦事件冲突,也就是说我们点击眼睛,切换明文的同时却失去了焦点,在正常输入下,输入框应该仍然保持聚焦状态。当时写的代码是这样的:input.onfocus = function() { if (input.value == "...原创 2019-01-30 22:37:58 · 3527 阅读 · 0 评论 -
模块化开发 调用函数(例如ajax)not defind问题
当我们使用模块化开发时,有可能会遇到类似于这样的问题:这里的具体代码是调用ajax函数。出现这样的错误,一般是使用了不存在或者未获取的元素。但是我们在调用之前已经在主js中引入了含有ajax函数的Ajax.js:require(&quot;./Ajax.js&quot;);并且配置了文件,将Ajax.js打包进了主js。按照我以前的理解,此时就相当于C语言的分模块一样,只要在主程序里引入了其他需要的模块...原创 2019-02-13 22:06:26 · 619 阅读 · 0 评论 -
cookie、session的简单特点总结与具体实现
简单的特点总结:cookie :在浏览器保存一些数据,每次请求向后台发送特点:不安全、空间小(4k)session:不是独立存在的,是基于cookie实现的,保存在服务器cookie中会有一个session的ID,服务器利用sessionid找到session文件、读取、写入特点:安全、空间无限隐患:session劫持session劫持:session_id放在cookie里面,所...原创 2019-03-23 23:34:03 · 365 阅读 · 0 评论 -
自适应布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh)
如何在不同分辨率的设备上更好的实现适配?本文介绍几种自适应解决方案包括媒体查询、百分比、rem/em和vw/vh。一、pxpx不是绝对单位,而是相对单位。比如1px的文字在pc端和移动端的大小是不一样的。当通过viewport标签,<meta name="viewport" content="width=device-width">设置布局视口为理想视口时,1个css像...原创 2019-04-21 00:57:47 · 1710 阅读 · 0 评论 -
Error: Line 2: Unexpected token {
遇到了一个很……(zz)的问题,但是在网上也没搜到,所以纠结着还是写了这篇。给mongodb批量加假数据的时候,在Robo 3T里面,添加失败。其实是因为要用数组的那种括号:db.getCollection('users').save([ // 将 { 改为 [ { "date" : ISODate("2019-07-29T09:48:16.123Z"),...原创 2019-07-30 21:49:42 · 1948 阅读 · 0 评论 -
解决跨域:Cors跨域与Nginx反向代理的区别
由于浏览器的同源策略(协议、域名和端口是否相同),我们经常需要对请求做跨域处理。常见的跨域方式有什么呢?通过jsonp跨域 (利用script、src标签发起get请求不会出现跨域禁止的特点实现)通过修改document.domain来跨子域window.name+iframe (借助中介属性window.name实现)HTML5中的window.postMessage (主要侧重于前...原创 2019-08-03 13:23:25 · 4262 阅读 · 0 评论 -
Proxy error: Could not proxy request /api2/users/login from localhost:8080 to localhost:3000 (ENOTFO
问题描述:因为node服务运行在localhost:3000端口,vue运行在localhost:8080端口,不同端口存在跨域问题。所以我使用了反向代理处理。在vue.config.js里:proxy:{ '/api2':{ target:'http://localhost:3000', changeOrigin:true, }}我...原创 2019-07-27 11:33:46 · 125320 阅读 · 25 评论 -
理解、使用 beforeRouteEnter 前置守卫
前置守卫(路由守卫/导航守卫):怎么理解?就像在组件前面守卫的士兵一样,满足条件才能访问组件。举个例子,比如在没登陆之前不能进入个人中心。咋实现的?请求getUser接口,获取里面的状态值status,如果是0,说明登录过了,不是0,没登陆,直接next到登录页面去。beforeRouteEnter(to,from,next){ axios.get('/api2/users...原创 2019-08-08 17:12:06 · 3466 阅读 · 0 评论 -
node 邮箱方式发送验证码
想要实现发送验证码功能,要准备:nodemail模块一个有授权的发送验证码的邮箱nodemail模块:是连接js应用和邮箱的桥梁。是一个专门来发送消息的中转模块。步骤你需要做些什么来发送消息,将以下:创建一个Nodemailer运输车使用 SMTP或一些其他的传输机制设置 消息选项 (发送者 用户名、密码)交付消息对象使用 sendMail () 你以前创建的运输车的方法...原创 2019-08-08 21:19:43 · 2835 阅读 · 0 评论 -
JavaScript 脚本化css
脚本化css(脚本化是控制的意思)读写元素css属性 dom.style.prop(写入操作) 可读写行间样式,没有兼容性问题,碰到float这样的保留字属性,前面应加css eg:float –&gt; cssFloat复合属性建议拆解(比如width、height分成两个语句写),组合单词变成小驼峰式写法写入的值必须是字符串格式查询计算样式(完全是读取操作) windo...原创 2018-08-02 16:12:42 · 347 阅读 · 0 评论 -
JavaScript 获取窗口属性
获取窗口属性查看滚动条的滚动距离 window.pageXOffset/pageYOffset IE8及IE8以下不兼容document.body/documentElement.scrollLeft/scrollTop 兼容性比较混乱,同时取两个值相加,因为不可能存在两个同时有值封装兼容性方法,求滚动轮滚动离getScrollOffset() 为了解决兼容性的问题,我们来封...原创 2018-08-02 16:10:05 · 529 阅读 · 0 评论 -
JavaScript 定时器
定时器:setlnterval();setTimeout();clearlnterval();clearTimeout(); 这四个函数都是全局对象window上的方法,内部函数this指向window1.setlnterval();定时循环 每隔多长时间(千毫秒)执行一次函数 属性示例:&lt;script type="text/javascript"&gt; ...原创 2018-08-02 11:38:27 · 591 阅读 · 0 评论 -
HTML基础知识(二)
一、空格(回车):文字分割符,几个都等于一个;在html中,当你在编码区输入空格(回车)时,不论输入几个,均在页面上显示为一个空格。此时,如果想要现实很长的间隔(好几个空格),可以用 。 :html的空格编码形式,写几个空几个;二、替换标签,less than,great than缩写;<相当于<小于号,>相当于>大于号。三、<br>代表换行的意思--回车,不是...原创 2018-06-14 13:41:39 · 322 阅读 · 1 评论 -
CSS基础知识(一)
结构、样式、行为相分离html css javascript主流浏览器:市场份额高、必须有独立研发的内核浏览器包括:shell、内核shell:外壳,浏览器的操作类的展示页面;内核:操作的路径、速度等等问题包含:IE、Firefox、Google chrome、Safari、OperaIE等主流浏览器的内核:看图 Ctrl+?==注释号CSS部分;css:cascading style s...原创 2018-06-14 14:05:12 · 542 阅读 · 1 评论 -
盒子模型
盒子模型:border表示的是盒子的边框问题:先设置盒子的宽和高:width:100px;heigth:100px;boeder:1px solid blck;表示盒子的边框;border细化:border-left、border-、border-right、border-top。例如:border-left:10px dotted blue.画三角形:用边框盒子里面的文字一般都是左对齐,但也可以...原创 2018-06-14 15:08:13 · 289 阅读 · 0 评论 -
maigin塌陷、margin合并两大问题分析及解决方法
编程之前要先初始化。*{margin:0;padding:0;}两栏布局:步骤:1.先让两元素分布在一行(下面的元素上去)2.再让左边的(或右边的)元素给右边的(左边的)元素让出右边的元素的距离。代码示例:效果:注意:要先写right,再写left。因为right先出生,然后left再出生,这样粉色在第一行,而黑色在第二行,当设置粉色为绝对定位时,黑色就可以串上去;而如果使黑色先出生,粉色后出生,...原创 2018-06-24 15:43:55 · 662 阅读 · 2 评论 -
网页中图片的常见问题:文字代替图片、图片间隔问题
在企业中,有时会遇到网速很低加载不出图片的情况,这时候不能影响顾客购物,所以我们需要一个文字代替图片的功能。(一)文字代替图片:想让css没有的时候文本展示出来。方法一:首先将“淘宝网”字样写在html里。1.首行缩进:text-indent:200px;(缩进的长度大于等于整个容器的宽),这样可以先把文字缩进到容器外面。2.此时会发生,第一个文字出去了,但第二个文字继续换行,用强制性不换行:wh...原创 2018-06-24 16:31:38 · 2149 阅读 · 1 评论 -
溢出容器的文字打点展示处理
溢出容器,要打点展示,此时会有以下两种文本:1.单行文本2.多行文本操作步骤:1)单行文本--三步:让文本失去换行的功能:white-space:nowrap;超出部分隐藏:overflow:hidden;溢出部分文本打点展示:text-overflow:ellipsis;2)多行文本一般不做技术性打点,做多行截断处理。只用text-overflow:ellipsis;...原创 2018-06-24 16:33:18 · 1192 阅读 · 0 评论 -
JavaScript 数组(改变数组的方法)
数组定义方式(两种):数组字面量 var arr = []; –建议这一种数组的构造函数形式 var arr = new Array();区别:var arr = [10]; //arr[0] = 1(主要),代表数组长度为1(推断)var arr = new Array(10); //给new Array(10)传参,只传一个参数,系统会认...原创 2018-08-01 11:11:22 · 6464 阅读 · 0 评论 -
JavaScript 类数组
类数组类数组的特点: 1.可以利用属性名来模拟数组的特性 2.可以动态的执行length的属性 3.如果强行让类数组调用push方法,则会根据length属性值的位置进行属性的扩充 在函数中实参列表—arguments,就是一个类数组。类数组的三个组成部分: 1.属性要为索引(数字)属性 2.必须有length属性 3.最好加上push方法 示例:var obj ...原创 2018-08-01 11:12:31 · 310 阅读 · 0 评论 -
JavaScript 数组去重
数组去重: 利用对象的特性:同一个属性名不可能出现两次 方法:将数组的属性值当作对象的属性名添加到对象里去 代码示例:<script type = "text/javascript"> Array.prototype.unique = function (){ var temp = {}, //用对象构成一个新数组 ...原创 2018-08-01 11:13:06 · 246 阅读 · 0 评论 -
JavaScript try...catch和一些错误类型
try…catch使用的格式:try{}catch(e) {}try 在try里面的语句发生错误,不会执行错误后的try里面的代码(会在catch里面捕捉try的第一行错误语句,try后面的语句直接忽略了),但是会执行外面的代码 例子:<script type = "text/javascript"> try{console.log("a");cons...原创 2018-08-01 11:19:26 · 356 阅读 · 0 评论 -
JavaScript es5严格模式的说明
es5严格模式现在的浏览器是基于es3.0和es5.0的一些新增的方法使用的。但是,es3.0和es5.0有冲突的部分,这时要是启用es5.0严格模式,那么es3.0和es5.0产生冲突的部分就是使用es5.0的,否则使用es3.0(也是一般情况下,不启用严格模式的情况下)。今天我们探究“冲突的部分用es5.0(在严格模式下)是怎么解决的?”es5.0严格模式的启用: “use...原创 2018-08-01 11:20:25 · 365 阅读 · 0 评论 -
JavaScript with
with作用(两点):改变作用域链<script type = "text/javascript"> var obj = { name : "obj" } var name = 'window'; function test(){ var name = "scope"; var age =...原创 2018-08-01 11:22:02 · 269 阅读 · 0 评论 -
JavaScript Dom选择器
Dom选择器document.getElementByld().getElementsByTagName()getElementsByName();.getElementsByClassName().querySelector//css选择器(在css中怎么选,这里就怎么选),在ie7和ie以下的版本中没有,不是实时的。.querySelectorAll()//css选择器,在i...原创 2018-08-01 11:23:08 · 366 阅读 · 0 评论 -
DOM基本操作
DOM基本操作节点的类型:元素节点 1属性节点 2文本节点 3注释节点 8document 9DocumentFragment 11节点的四个属性: - nodeName 元素的标签名,以大小写形式表示,只读 - nodeValue Text节点或Comment(注释)节点的文本内容,可读写 - nodeType 该节点的类型,只读 - attribu...原创 2018-08-01 15:45:21 · 708 阅读 · 0 评论 -
JavaScript 事件
事件如何绑定事件处理函数:1.ele.onxxx = funcyion(event){}兼容性很好,但是一个元素的同一个事件上只能绑定一个处理程序基本等于写在HTML行间上2.obj.addEventListener(type,fn,false);IE9以下不兼容,可以为一个事件绑定多个处理程序3.obj.attachEvent(‘on’+type,fn);...原创 2018-08-10 14:43:24 · 438 阅读 · 0 评论 -
事件冒泡、事件捕获、事件委托
事件处理模型–事件冒泡、捕获不论是冒泡还是捕获都是在说事件发生的顺序。事件冒泡:结构上(非视觉上)嵌套关系的元素,会存在事件冒泡的功能,即同一事件,自子元素冒泡向父元素。(子元素先执行,父元素再执行)事件捕获:结构上(非视觉上)嵌套关系的元素,会存在事件捕获的功能,即同一事件,自父元素捕获至子元素。(父元素的功能先执行,子元素再执行)IE没有捕获事件 触发顺序:先...原创 2018-08-10 15:24:27 · 327 阅读 · 0 评论 -
完整的前后端 实现上传头像、压缩头像
本文是我在写上传头像功能后的一个详细的总结,用作以后可以回顾,可能较为繁琐,如果明白上传只想看压缩,可直接拉到文章后半部分。文章目录上传头像上传头像准备工作上传头像上传头像路由配置上传头像接口前端修改图片名压缩头像压缩的原因压缩压缩操作的流程几个方法的说明具体代码的详细分析context.drawImage()压缩方法说明上传头像上传头像准备工作在后台/public文件夹里创建一个文件夹...原创 2019-08-07 21:13:40 · 6197 阅读 · 0 评论