- 博客(60)
- 收藏
- 关注
RSS订阅原创 前端跨域
跨域跨域就是违反了同源策略 什么是同源策略呢 ，同源策略是由NetScape提出的一个著名的安全策略。最初的 “同源策略”，主要是限制Cookie的访问，这个网页设置的 Cookie，在另一个网页无法访问，除非两个是“同源”的。同源，指的是协议，域名，端口相同，必须三者同时一样，三者缺一者一样都属于跨域前端如何解决跨域呢1 设置请求头const http = require("http");const sever = http.createServer();sever.on("request",
2020-08-09 21:36:22
130
原创 使用node封装MongoDB的DAO层
我们在使用node操作MongoDB数据库的时候可以对增删改查进行封装 避免每次都要去写sql语句 封装使用到了express模块DAO.jsconst express = require("express");const MongoClient = require("mongodb").MongoClient;// 连接数据库//使用mongodb创建好数据库后，直接引用url,封装链接。function _connectDB(callback){ let url = "mongo
2020-08-09 20:12:30
250
原创 node-express
Express是目前最流行的基于Node.js的Web开发框架，可以快速地搭建一个完整功能的网站。Express框架的核心特性如下：通过中间件来响应http请求。定义路由表来执行不同的HTTP请求动作。通过向模板传递参数来动态渲染页面。安装：首先新建一个文件夹，然后在文件夹中shift加右键进入命令窗口输入 npm init， 生成package.json文件。然后最好去安装一个淘宝镜像cnpmnpm install -g cnpm --registry=https://registry.n
2020-08-02 22:01:41
146
原创 vue-指令
1 v-pre跳过该元素及其子元素的后面的渲染，显示的初始值{{}} <div id="app"> <div v-pre> <div> {{ name }} </div> </div> </div> <script> var vm = new Vue({ el:"#app",
2020-07-31 10:44:33
125
原创 redis基础使用
redisRedis 是完全开源免费的，遵守BSD协议，是一个高性能的key-value数据库。Redis 与其他 key - value 缓存产品有以下三个特点：Redis支持数据的持久化，可以将内存中的数据保存在磁盘中，重启的时候可以再次加载进行使用。Redis不仅仅支持简单的key-value类型的数据，同时还提供list，set，zset，hash等数据结构的存储。Redis支持数据的备份，即master-slave模式的数据备份。使用node 操作redis使用前 先下载redis
2020-07-25 14:37:11
82
原创 js异步加载 按需加载
js加载的缺点：加载工具方法没必要阻塞文档，过多js加载会影响页面效率，一旦网速不好，那么整个网站将等待js加载而不进行后续渲染等工作。 有些工具方法需要按需加载，用到再加载，不用不加载，。 默认正常模式下下，JS是同步加载的，即优先加载JS，只有当JS文件下载完，dom和css才开始加载，当某些时候我们需要JS异步加载，我们可以通过以下方式来设置异步加载,不同情况下选取不同方式即可1.defer:defer JS异步下载，dom结构解析完（标签 + 样式（内容不一定下载完））才执行 （执行会阻塞
2020-07-19 20:15:18
230
原创 js防抖和节流
防抖当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定时间到来之前，又触发了事件，就重新开始延时。也就是说当一个用户一直触发这个函数，且每次触发函数的间隔小于既定时间，那么防抖的情况下只会执行一次。var num = 1; function c() { div.innerHTML = num; num++; } var div = document.getElementById('div'); console.
2020-07-18 14:21:43
89
原创 ES6迭代器和生成器
迭代器什么是迭代器迭代器是一种特殊对象，它具有一些专门为迭代过程设计的专有接口，所有的迭代器对象都有一个next()方法，每次调用都返回一个结果对象。结果对象有两个属性：一个是value，表示下一个将要返回的值；另一个是done，它是一个布尔类型的值，当没有更多可返回数据时返回true。迭代器还会保存一个内部指针，用来指向当前集合中值的位置，每调用一次next()方法，都会返回下一个可用的值。如果在最后一个值返回后再调用next()方法，那么返回的对象中属性done的值为true，属性value若未定义
2020-07-12 20:35:30
81
原创 深克隆和浅克隆
浅克隆：就是复制的是地址 当原来的改变后 也跟着改变let arr = [1, 2, 3, { a: 1, b: 2 }]； function clone(oldObj) { if (oldObj == null) { return null }; if (typeof oldObj !=
2020-07-11 12:01:56
106
原创 Promise常用api
一catch的用法与Promise对象方法then方法并行的一个方法就是catch,与try catch类似，catch就是用来捕获异常的，也就是和then方法中接受的第二参数rejected的回调是一样的 function pro() { let p = new Promise((resolve, reject) => { setTimeout(() => { var num = Math.c
2020-07-04 14:16:07
142
原创 Promise用法
一 什么是Promise1、主要用于异步计算2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果3、可以在对象之间传递和操作promise，帮助我们处理队列Promise对象有以下两个特点。（1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。ES6将程序分为三种状态 pendding resolve
2020-07-02 15:26:04
107
原创 jsonp
jsonp是JSON with padding（填充式JSON或参数式JSON） 的简写，是应用JSON的一种新方法，在后来的Web服务中非常流行。jsonp看起来和json差不多，只不过是被包含在函数调用中的json。callback({"name":"hwc"});JSONP由两个部分组成：回调函数和数据。回调函数就是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定。而数据就是传入回调函数中JSON数据。下面是一个典型的JSONP请求：http://freegeoip.net
2020-06-27 20:27:13
118
原创 json
一 json1、语法：简单值：使用和JavaScript相同的语法，可以在json中表示字符串、数值、布尔值和null。但json不支持javaScript中的特殊值undefined对象：对象作为一种复杂的数据类型，表示的是一组无序的键值对。而每个键值对中的可以是简单值，也可以是复杂数据类型的值数组：数组也是一种复杂的数据类型，表示一组有序的值的列表 可以通过数值索引来访问其中的值。数组的值也可以的是任意类型：简单值、对象或数组json不支持变量、函数或对象实例，它就是一种表示结构化数据的格式，
2020-06-27 15:21:26
79
原创 初识typescript和安装
什么是typescriptTypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准。TypeScript 由微软开发的自由和开源的编程语言。TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。语言特性TypeScript 是一种给 JavaScript 添加特性的语言扩展。增加的功能包括：类型批注和编译时类型检查类型推断类型擦除接口枚举Mixin泛型编程
2020-06-22 16:00:00
120
原创 http和https的区别
一、HTTP和HTTPS的基本概念HTTP：是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从WWW服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。HTTPS：是以安全为目标的HTTP通道，简单讲是HTTP的安全版，即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。HTTPS协议的主要作用可以分为两种：一种是建立一个信息安全通道，来保证数据传输的安全；另一种就是确认网站的真实性。二、HT
2020-06-21 23:31:38
86
原创 计算机网络基础
IP地址与公网IPIP地址的格式：四个段 xxx.xxx.xxx.xxx 每一个xxx都可以是0~255之间的数组 2的8次方 每一段由8个0、 1组成IP地址常用分类：第一段 公网统一分配的IP地址 不同的在于一个网络中能容纳计算机数量A类：0.0.0.0 ~ 127.255.255.255 一个网络中大约可以有1600W+计算机B类：128.0.0.0 ~ 191.255.255.255 比A类要少，比C类要多 私有地址：172.16.0.0 ~ 172.31.255.255C类：19
2020-06-21 20:25:33
164
原创 status状态码
我们经常在浏览器看到404 403 之类的报错 不明白这是什么错误 下面我总结的了一些状态码是什么意思状态码含义100继续101切换协议102由WebDAV（RFC 2518）扩展的状态码，代表处理将被继续执行。200服务器已成功处理了请求201创建了新的资源202接受了请求但没有处理203返回别的未知信息204未返回内容205未返回内容，要求重置文档206处理了部分 GET 请求207由WebDAV(
2020-06-14 21:28:29
272
原创 对象的四个特性（value writable enumerable configurable）
特性为以下四种：值（value）：对象可以通过.访问其属性值可写性（writable）：控制值(value)是否可修改,默认是true可修改的可枚举性（enumerable）：控制是否可用for in遍历到默认是true,即使不能for in，用"."也能访问可配置性（configurable）：控制是否可以修改其他特性，是否可以删除属性，修改不可逆转默认是true；如何访问：1：获取一个对象的属性的四大特性：Object.getOwnPropertyDescriptor(obj,“属性名”)
2020-06-13 23:32:04
1125
2
原创 web workers
Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。这样的好处是，一些计算密集型或高延迟的任务，被 Worker 线程负担了，主线程（通常负责 UI 交互）就会很流畅，不会被阻塞或拖慢。目前支持的浏览器有：IE10+、Firefox3.5+、safari4+、Opera 10.6+ 、Chrome
2020-06-07 20:53:16
228
原创 PHP（codeigniter）框架简单了解
使用这个之前要先搭载一个环境（这个推荐使用wampserver）下载地址：点击此处如果安装成功，访问 http://localhost/ 会如下图：codeigniter：CodeIgniter 是一个小巧但功能强大的 PHP 框架，作为一个简单而“优雅”的工具包，它可以为开发者们建立功能完善的 Web 应用程序。...
2020-06-07 20:04:50
182
原创 JQuery事件
一：bind绑定事件bind(type,data,fn)【参数描述】type (String) : 事件类型data (Object) : (可选) 作为event.data属性值传递给事件对象的额外数据对象fn ( Function) : 绑定到每个匹配元素的事件上面的处理函数bind 参数都是选传的,接收参数e.data$('button').bind('click',{'a':'b'},fn) function fn(e) { console.log(e.data)
2020-05-31 20:01:06
75
原创 JQuery之AJAX
什么是AJAXAJAX = 异步 JavaScript 和 XML。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。AJAX原理：Ajax主要的功能是实现了浏览器端 异步 访问服务器：通过浏览器的XMLHttpRequest对象发出小部分数据，与服务端进行交互，服务端返回小部分数据，然后更新客户端的
2020-05-31 19:11:00
77
原创 jq animate方法
animate() 方法执行 CSS 属性集的自定义动画。该方法通过 CSS 样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。只有数字值可创建动画（比如 “margin:30px”）。字符串值无法创建动画（比如 “background-color:red”）。提示：请使用 “+=” 或 “-=” 来创建相对动画。语法：$(selector).animate({styles},speed,easing,callback)实例：css： div{
2020-05-24 21:46:21
563
原创 全屏滚动插件（fullPage.js）
简介如今我们经常能见到全屏网站，尤其是国外网站。这些网站用几幅很大的图片或色块做背景，再添加一些简单的内容，显得格外的高端大气上档次fullPage.js 是一个基于 jQuery 的插件，它能够很方便、很轻松的制作出全屏网站，主要功能有：支持鼠标滚动支持前进后退和键盘控制多个回调函数支持手机、平板触摸事件支持 CSS3 动画支持窗口缩放窗口缩放时自动调整可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等使用方法1、引入文件有两种一种是自己下载他的jq包放在你的
2020-05-24 21:15:18
278
原创 jQuery方法来写轮播图
今天使用jQuery来写轮播图css：*{ margin: 0; padding: 0;}#lb{ width: 500px; position: relative; height: 273px; overflow: hidden;}img{ width: 500px; height: 273px;} ul{ list-style: none;}ul li{ cursor: pointer; float: left;}#zm{ width: 500px; h
2020-05-17 22:18:11
166
原创 jQuery过滤选择器
jquery过滤选择器分为：1.基本过滤器2.内容过滤器3.可见性过滤器4.子元素过滤器今天主要来了解一下内容过滤器内容过滤器：一:contains(text)选取含有文本内容为“text”的元素css:div{ width: 100px; height: 100px; border:1px solid red; }html: <div class="box1">qweqeqw<
2020-05-17 21:41:20
143
原创 less的使用
什么是lessless 是一种第三方工具less原理官方没有对css的缺陷做出提升 第三方机构开始想办法解决这些问题其中一种方案：预编译器css代码的编写 浏览器可执行优雅的样式代码 --> CSS编译器 --> 普通的css代码无法被浏览器识别 可以被浏览器识别编译less文件的三种方式：1、在客户端使用less.js 编译执行这个工作教给浏览器2、在服务端使用less 需要安装no
2020-05-10 21:29:38
146
原创 jQuery基础
什么是jQuery？jQuery是一个JavaScript函数库。jQuery是一个轻量级的"写的少，做的多"的JavaScript库。jQuery库包含以下功能：HTML 元素选取HTML 元素操作CSS 操作HTML 事件函数JavaScript 特效和动画HTML DOM 遍历和修改AJAXUtilities除此之外，Jquery还提供了大量的插件。其实jQuery的本质就是把一些功能用原生js封装成一个个的api提供给我们使用而且jQuery兼容所有主流浏览器包括Inte
2020-05-10 20:50:48
57
原创 css媒体查询（@media）
媒体查询的用途媒体查询Media Queries，可以根据不同的设备为其实现不同的样式。@media可以根据不同的屏幕尺寸设置不同的样式，页面布局分别适应移动端、pc端等，在调整浏览器的大小，页面会根据媒体的宽度和高度来重新布置样式。媒体查询可以用于检测很多东西：自动检测viewpoint（视窗）的宽度和高度；设备的宽度和高度；旋转方向（智能手机横屏或竖屏）；分辨率大小。语法（一）直接写在...
2020-05-05 22:16:53
1852
原创 css中px em rem的区别
PX特点1.IE无法调整那些使用px作为单位的字体大小;2.国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;3. Firefox能够调整px和em，rem，但是96％以上的中国网民使用IE浏览器（或内核）。像素像素（像素）。相对长度单位。像素PX是相对于显示器屏幕分辨率而言的。（引自CSS2.0手册）EM是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本...
2020-05-05 15:30:01
128
1
原创 Bootstrap栅格系统
什么是栅格系统Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义classe，还有强大的mixin用于生成更具语义的布局。row(行)必须包含在.container(固定宽度)或 .container-fluid (100% 宽度)中column(列)必须放在.row内栅格选项...
2020-05-04 21:16:39
392
原创 关于bootstrap
什么是 Bootstrap？Bootstrap 来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。历史Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品...
2020-05-04 20:54:13
142
原创 css-动画3D旋转
css实现3D效果：1.translate 位移translateX(): 指定X轴的位移;translateY(): 指定Y轴的位移;translateZ(): 指定Z轴的位移;translate3D(): 第一个参数指定X轴的位移量, 第二个参数指定Y轴的位移量, 第三个参数指定Z轴的位移量, 3个参数缺一不可2.rotate 旋转rotateX(): 指定X轴的旋转角度;ro...
2020-04-26 20:51:33
573
原创 css3-animation属性
animation是一个简写的动画属性由三部分组成1.关键帧(keyframes) - 定义动画在不同阶段的状态2.动画属性(properties) - 决定动画的播放时长，播放次数，以及用何种函数式去播放动画等。3.css属性 - 就是css元素不同关键帧下的状态。用于设置动画属性：属性描述animation-name规定需要绑定到选择器的 keyframe 名称...
2020-04-26 17:38:15
94
原创 css3常见选择器
/* 兄弟选择器【相邻选择器】 平级 只能向后找.box1+.box2 { color: #fff; }兄弟选择器【通用兄弟选择器】 选择符合条件的所有兄弟元素.p1~p { color: #fff; }选择有class属性的所有标签[class] { color: #fff; }匹配属性值以指定开头的每个元素[class^='a'] { color:...
2020-04-20 16:00:29
66
原创 弹性盒子属性介绍
什么是弹性盒子弹性盒子模型是css3中新提出的一种布局方案。是一种为了应对针对不同屏幕宽度不同设备的一整套新的布局方案。主要是对一个容器中的子元素进行排列、对齐和分配空白空间的方案的调整。设置弹性盒子的属性是：display:flex|inline-flex属性列表属性介绍flex-direction弹性容器中子元素的排列方式(主轴排列方式)flex-wrap设...
2020-04-18 13:13:42
658
原创 使用百度地图基础API
在使用百度地图API之前 你需要先注册账号然后是ak申请：这个白名单 你可以填一个*即可账号实例<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <!--下面我们添加一个meta标签，以便使您的页面更好的在移动平台上展示--> <meta nam...
2020-04-12 22:33:14
344
原创 cookies、 sessionStorage和localStorage使用及区别
1、浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式，可以利用cookie,session等跟服务端进行数据交互。cookie和session都是用来跟踪浏览器用户身份的会话方式。区别cookie保存在浏览器端，session保存在服务器端使用方法sessionStorage保存数据的方法：//采用setItem()方法存储sessionStorage.setItem('t...
2020-04-12 13:28:10
112
原创 ES6箭头函数
ES6标准新增了一种新的函数：Arrow Function（箭头函数）。通常函数的定义方法var fn1 = function(a, b) {return a + b}function fn2(a, b) {return a + b}使用ES6箭头函数语法定义函数，将原函数的“function”关键字和函数名都删掉，并使用“=>”连接参数列表和函数体。var fn1 = ...
2020-03-25 19:20:50
87
原创 es6-let，const以及字符串
一 ESES是ECMAScript的简写，ES6，就是ECMAScript的第六个版本，在2015年6月发布，这是一个标准，这个版本主要是为了解决 ES5 的先天不足，新加了类这个之前没有的概念二 历史1997 年 ECMAScript 1.0 诞生。1998 年 6 月 ECMAScript 2.0 诞生，包含一些小的更改，用于同步独立的 ISO 国际标准。1999 年 12 月 EC...
2020-03-20 13:37:24
110
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人