爱长发的短发小二哥-CSDN博客

原创 nodejs，链接数据库，以及api接口文件，前端调取api

记录一下自己第一次nodejs连接数据以及完成接口api调用，还请见谅！！！首页你的电脑需要安装了各种环境，安装各种环境就在这里不做赘述，直接开始需要的代码首先新建了一个文件夹server再在server文件夹里新建了一个专门放api接口文件的文件夹api好了，在回退到server文件夹新建db_con.js文件，放数据连接的一段代码，如下：module.exports = { mysql: { host : '127.0.0.1',//数据库的链接

2020-09-27 17:16:30 1244 2

原创前端 html5 服务器发送事件(Server-Sent Events)，消息事件

Server-Sent 事件 - 单向消息传递Server-Sent 事件指的是网页自动获取来自服务器的更新。以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。例子：Facebook/Twitter 更新、股价更新、新的博文、赛事结果等。浏览器支持所有主流浏览器均支持服务器发送事件，除了 Internet Explorer。接收 Server-Sent 事件通知EventSource 对象用于接收服务器发送事件通知：实例

2020-07-17 08:50:25 792

原创前端初学者应该知道的代码规范

JavaScript 代码规范代码规范通常包括以下几个方面:变量和函数的命名规则空格，缩进，注释的使用规则。其他常用规范……规范的代码可以更易于阅读与维护。代码规范一般在开发前规定，可以跟你的团队成员来协商设置。变量名变量名推荐使用驼峰法来命名(camelCase):firstName ="John";lastName ="Doe";price =19.90;tax =0.20;fullPrice = price + (price * tax);空格与运...

2020-07-14 09:17:29 318

原创 vue 实现多个 element-ui Dialog且鼠标可以点击底层

使用 pointer-events 属性和 z-index 属性解决层级覆盖问题pointer-events: 指定在什么情况下某个特定的图形元素可以成为鼠标事件的 target.对于浏览器来说, 只有 auto 和 none 两个值可用, 其它的几个是针对 SVG 的 (本身这个属性就来自于 SVG 技术).auto: 与 pointer-events 属性未指定时的表现效果相同, 鼠标不会穿透当前层.对于 SVG 内容, 该值与 visiblePainted 效果相同.none: 元素永..

2021-06-02 15:01:10 2141 1

原创前端 js Window Location对象

Window Locationwindow.location对象在编写时可不使用 window 这个前缀。一些例子：一些实例:location.hostname 返回 web 主机的域名 location.pathname 返回当前页面的路径和文件名 location.port 返回 web 主机的端口（80 或 443） location.protocol 返回所使用的 web 协议（http: 或 https:）Window Location Hreflocation.hr.

2020-07-22 11:52:47 260

原创前端 HTML5 Geolocation（地理定位）

定位用户的位置HTML5 Geolocation API 用于获得用户的地理位置。鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。浏览器支持Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 支持Geolocation（地理定位）.注意:Geolocation（地理定位）对于拥有 GPS 的设备，比如 iPhone，地理定位更加精确。HTML5 - 使用地理定位请使用 getCurrentPos.

2020-07-21 09:03:59 885

转载 HTML5 Web Workers

HTML5Web Workersweb worker 是运行在后台的 JavaScript，不会影响页面的性能。什么是 Web Worker？当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。检测浏览器是否支持 Web Worker在创建 web worker 之前，请检测.

2020-07-20 10:00:37 168

原创前端 HTML5 应用程序缓存

什么是应用程序缓存（Application Cache）？HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。应用程序缓存为应用带来三个优势：离线浏览 - 用户可在应用离线时使用它们速度 - 已缓存资源加载得更快减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。Cache Manifest 基础如需启用应用程序缓存，请在文档的<html> 标签中包含 manifest 属性：<!DOCTYPE HTM

2020-07-16 09:05:29 177

原创前端 html5 拖放（Drag 和 Drop）

拖放（Drag 和 drop）是 HTML5 标准的组成部分。首先看个实例：<!DOCTYPE HTML><html><head><meta charset="utf-8"> <title>实例</title><style type="text/css">#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}<

2020-07-15 08:53:14 332

原创 JavaScript 异步编程

异步的概念异步（Asynchronous, async）是与同步（Synchronous, sync）相对的概念。在我们学习的传统单线程编程中，程序的运行是同步的（同步不意味着所有步骤同时运行，而是指步骤在一个控制流序列中按顺序执行）。而异步的概念则是不保证同步的概念，也就是说，一个异步过程的执行将不再与原有的序列有顺序关系。简单来理解就是：同步按你的代码顺序执行，异步不按照代码顺序执行，异步的执行效果更高：以上是关于异步的概念的解释，接下来我们通俗地解释一下异步：异步就是从主线程发射一个子

2020-07-13 09:23:44 1988

原创前端的 JavaScript Array（数组）方法和对象

什么是数组?数组对象是使用单独的变量名来存储一系列的值。数组可以用一个变量名存储所有的值，并且可以用变量名访问任何一个值。数组中的每个元素都有自己的的ID，以便它可以很容易地被访问到。创建一个数组创建一个数组，有三种方法。1: 常规方式:var myCars=new Array();myCars[0]="Saab";myCars[1]="Volvo";myCars[2]="BMW";2: 简洁方式:var myCars=["Saab","Volvo","...

2020-07-10 12:03:41 595

原创前端程序员必须掌握之三角函数在前端动画中的应用

此文章为转载文章，原文链接：https://juejin.im/post/5d99b706e51d4577f9285c33，由于无法直接转载，就以这样的形式转载了，是个人觉得这篇文章真的很好，很实用，很前端，只在为大家分享好东西，见谅了开发过程中经常有意无意地刻意避开数学相关的知识，你也知道解数学题非常枯燥无趣。平时写动画也尽量使用 css3 来实现，timer-function 随意选用，最多也就调一下 cubic-bezier，找到看着舒服的就行。但是怎样让动画更顺滑，写出更贴近自然的动画，说实话以

2020-07-09 09:09:22 417

原创前端关于 js 的 Math 对象

Math 对象属性Math.E; //2.718281828459045 一个数字,表示 Euler的数Math.LN2; //0.6931471805599453 LN2 属性就是 loge2，即 2 的自然对数，其值近似于 0.69314718055994528623。Math.LN10; //2.302585092994046 LN10 属性就是 loge10，即 10 的自然对数，其值近似于 2.3025850929940459011。Math.LOG2E; //1.4...

2020-07-08 11:00:15 216

原创 js节流和防抖

节流(Throttle)按照设定的时间固定执行一次函数，比如200ms一次。注意：固定就是你在mousemove过程中，执行这个节流函数，它一定是200ms（你设定的定时器延迟时间）内执行一次。没到200ms，一定会返回，没有执行回调函数的。防抖(Debounce)抖动停止后的时间超过设定的时间时执行一次函数。注意：这里的抖动停止表示你停止了触发这个函数，从这个时间点开始计算，当间隔时间等于你设定时间，才会执行里面的回调函数。如果你一直在触发这个函数并且两次触发间隔小于设定时间，则一定不会到回调

2020-07-07 14:51:04 129

原创前端关于cookies ， sessionStorage 和localStorage 的区别及使用

cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据 - 通常经过加密cookie数据始终在同源的http请求中携带，即使不需要，也会在浏览器和服务器间来回传递。sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存存储大小：cookie数据大小不能超过4KsessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。有效时间：localStorage:存储

2020-07-02 09:33:03 200

原创前端关于dom事件流

定义DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素节点与根结点之间的路径传播，路径所经过的结点都会收到该事件，这个传播过程可称为DOM事件流。DOM事件流模型在DOM兼容浏览器中，事件流分为3个阶段：（1）捕获阶段：事件从Document节点自上而下向目标节点传播的阶段；（2）目标阶段：真正的目标节点正在处理事件的阶段；（3）冒泡阶段：事件从目标节点自下而上向Document节点传播的阶段。独特性质DOM事件流最独特的性质是，.

2020-07-01 14:18:09 226

原创 vue生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。比如created钩子可以用来在一个实例被创建之后执行代码也有一些其它的钩子，在实例生命周期的不同阶段被调用，如mounted，updated和destroyed。生命周期钩子的this上下文指向调用它的 Vue 实例。不要在选项 property...

2020-06-30 09:31:30 196 1

原创 JS实现杨辉三角

话不多说直接代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> bttton{ background: #ccc; padding: 5px; border-radius:

2020-06-24 15:30:14 891

原创前端知识总结（十三）：post与get的区别

HTTP请求，设定了八种方法。这八种方法本质上没有区别。只是让请求语义化。OPTIONS 返回服务器所支持的请求方法GET 向服务器获取指定资源HEAD 与GET一致，只不过响应体不返回，只返回响应头POST 向服务器提交数据，数据放在请求体里PUT 与POST相似，只是具有幂等特性，一般用于更新DELETE 删除服务器指定资源TRACE 回显服务器端收到的请求，测试的时候会用到这个CONNECT 预留，暂无使用get:GET一般用于获取/查询资源信息GET请求参

2020-06-23 14:25:11 275

原创前端只是总结（十二）：assets 和 static的区别

相同点：资源在html中使用，都是可以的。不同点：使用assets下面的资源，在js中使用的话，路径要经过webpack中file-loader编译，路径不能直接写。assets中的文件会经过webpack打包，重新编译，推荐该方式。而static中的文件，不会经过编译。项目在经过打包后，会生成dist文件夹，static中的文件只是复制一遍而已。简单来说，static中建议放一些外部第三方，自己的放到assets，别人的放到static中。注意：如果把图片放在assets与static中，ht

2020-06-22 13:32:39 973

原创前端只是总结（十一）：undefined和null的区别

在JavaScript中，null和undefined几乎相等在if语句中null和undefined都会转为false两者用相等运算符比较也是相等console.log(null==undefined); //true 因为两者都默认转换成了falseconsole.log(typeof undefined); //"undefined" console.log(typeof null); //"object" console.log(nul...

2020-06-20 11:25:44 217

原创前端知识总结（十）：js双等（==）和三等（===）

双等号==：两个值类型相同，再进行三个等号(===)的比较；两个值类型不同，也有可能相等：如果一个是字符串，一个是数值，把字符串转换成数值之后再进行比较；如果一个是null，一个是undefined，那么true；三等号===:类型不同，就一定false两个都是字符串，每个位置的字符都一样，那么true，否则false两个值都是true，或是false，那么相等两个值都引用同一个对象或是函数，那么true，否则false两个值都是null，或是undefined，那么相等..

2020-06-19 09:14:01 711

原创前端知识总结（九）：关于闭包

js的作用域分两种，全局和局部，基于我们所熟悉的作用域链相关知识，我们知道在js作用域环境中访问变量的权利是由内向外的，内部作用域可以获得当前作用域下的变量并且可以获得当前包含当前作用域的外层作用域下的变量，反之则不能，也就是说在外层作用域下无法获取内层作用域下的变量，同样在不同的函数作用域中也是不能相互访问彼此变量的，那么我们想在一个函数内部也有限权访问另一个函数内部的变量该怎么办呢？闭包就是用来解决这一需求的，闭包的本质就是在一个函数内部创建另一个函数。函数里面包含的子函数，子函数访问父函数的局部变

2020-06-18 14:53:59 194

原创前端知识总结（八）：var，let和const的区别

let和const都能够声明块级作用域，用法和var是类似的，let的特点是不会变量提升，而是被锁在当前块中。 console.log(a) // a is not defined let a = 1 if(true) { let b = 1 var c = 2 } console.log(b) // b is not defined console.log(c) // 2 console.log(d) //c is

2020-06-17 15:19:15 278 1

原创前端知识总结（七）：v-if v-show区别

显示来看v-if 是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；而v-show 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。v-if有更高的切换消耗；v-show有更高的初始渲染消耗；v-if适合运营条件不大可能改变；v-show适合频繁切换。...

2020-06-16 10:45:38 163

原创前端展示总结（六）：vue-router懒加载实现

像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时const routers = [ { path: '/', name: 'login', component: (resolve) =>

2020-06-13 10:02:27 930

原创前端只是总结（五）：vue-router钩子介绍

全局　　全局守卫包括：router.beforeEach、router.beforeResolve、router.afterEach；　　routerbeforeEach：全局前置守卫，在进入路由之前触发；　　router.beforeResolve：全局解析守卫，在 beforeRouterEnter 调用之后调用，是在 2.5.0 版本提出的；　　router.afterEach：全局后置钩子，在进入路由之后触发；router.beforeEach((to, from, next)

2020-06-12 10:31:56 292

原创前端只是总结（四）：computed和watch的区别

computed可以监听v-model（data）中的值，只要值发生变化他就会重新去计算computed必须是要有一个返回值<div id="app"> <input type="text" v-model="firstname">+ <input type="text" v-model="lasttname">= <input type="text" v-model="fullname"> .

2020-06-11 09:58:25 304

原创前端知识总结（三）：vue项目优化

1.路由懒加载import Vue from 'vue' import Router from 'vue-router' import store from './store' import Home from './views/Home.vue' Vue.use(Router) const router = new Router({ routes: [ { path: '/', name: 'home', compon...

2020-06-10 10:13:02 295

原创前端知识总结（二）：vuex包括哪些内容

Vuex 是什么？Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。 Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状

2020-06-09 16:22:32 1409

bootstrap案例 inter官网首页

空空如也