HWSss的博客

原创 nodemon使用

npm i nodemon -g //全局安装nodemon 文件名 //启动// 无法启动 一般是电脑禁止运行了// 管理员身份打开 powerShell 或者 cmd// 输入 set-ExecutionPolicy RemoteSigned // 选择Y 或者A ，就好了// 在搜索输入框 搜索powerShell cmd都行...

原创 mongoose链接多个数据库

const mongoose = require("mongoose")// 链接第一个数据库let db = mongoose.createConnection("mongodb://localhost:27018/www",{ useNewUrlParser:true, useUnifiedTopology:false,})// 不能.thendb.on("open",()=>{ console.log("数据库链接成功")})db.on("error",()

原创 express-session

session数据存储在服务器使用express-session并配置中间件session 不需要手动发送到前端 会自动发送前端 并添加到cookie上同时后端刷新后需要重新设置const app =require("express")()const session = require('express-session')// 中间件app.use(session({ secret: 'keyboard cat', resave: false, name: 'name'

原创 node文本内容追加

fs.writeFile("./index.html",text,{ 'flag': 'a' },()=>{ console.log(index,"true") fun() })当 flag 选项采用字符串时，则以下标志均可用：‘a’: 打开文件用于追加。 如果文件不存在，则创建该文件。‘ax’: 类似于 ‘a’，但如果路径存在，则失败。‘a+’: 打开文件用于读取和追加。 如果文件不存在，则创建该文件。‘ax+’: 类似于 ‘a+’，但如果路径存在，则失败。.

原创 读取excel表格

1-js-xlsx 介绍由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库，功能强大，支持格式众多，支持xls、xlsx、ods(一种OpenOffice专有表格文件格式)等十几种格式。本文全部都是以xlsx格式为例。官方github：https://github.com/SheetJS/js-xlsx1.2. 如何使用dist目录下有很多个JS文件，一般情况下用xlsx.core.min.js就够了，xlsx.full.min.js则是包含了所有功能

原创 盒模型

标准盒模型 width + height 表示标准盒模型的内容部分 == content主体部分 padding 元素的内边距 border 元素边框浏览器显示的宽 width + 左右的padding + 左右的border 浏览器显示的高 height+ 上下的padding + 上下的border 怪异盒模型 width 浏览器显示的宽 height 浏览器显示的高 padding 元素的内边距 border 元素边框 怪异盒模型的特点是

原创 获取浏览器的模式

document.compatMode查看浏览器的模式标准模式 CSS1Compat" 主流浏览器 怪异模式 backCompat 一般为iE浏览器

原创 构造函数原型图

原创 前端a标签下载文件

https://blog.csdn.net/u010986031/article/details/79474393?utm_source=blogxgwz3&utm_medium=distribute.pc_relevant.none-task-blog-title-6&spm=1001.2101.3001.4242

原创 浅拷贝对象,数组

let obj = { a:1; b:2}let obj1 = objobj1.a = 2;// obj中的值也会发生改变 引用类型的使用的是指向内存地址,不是复制,这个是浅拷贝console.log(obj)// 数组浅拷贝 引用数组地址let arr = [12,3,5,145]let arr1 = arr arr[0] = 1 console.log(arr) // 数组的深拷贝 通过...运算符 不是指向内存地址,会创建一个新的数组l

原创 定义进制与计算

定义进制let a = 0b110 定义二进制数字 0b 开头let a = 0100 定义八进制数字 0开头let a = 110 定义十进制数字 正常数字let a = 0x21 定义十六进制 0x 开始//十进制 0 1 2 3 4 5 6 7 8 9 //八进制 0 1 2 3 4 5 6 7 //十六进制 0 1 2 3 4 5 6 7 8 9 a b c d e f // 二进制 0 1进制转换计算 使用电脑的自带的计算器 跟网页的计算不一样的不知是电脑位置还

原创 video视频播放

video 引入视频<video src="路径" ></video>video的属性基础属性<video src=“路径” autoplay loop controls> < /video>autoplay 自动播放loop 循环controls 显示控件muted 设置禁音js设置属性写法// 1,获取video标签// 2,通过video标签.setAttribute("loop

原创 webstorm设置

webstorm 部分汉化链接：https://pan.baidu.com/s/1s8LOi6v20Y91zNnpM74tRA提取码：a2ic下载完,把里面的文件放到webstorm安装目录\JetBrains\WebStorm 文件\lib里面webstorm 背景设置安装 Sexy Editor插件安装位置 file 文件 => setting 设置 => plugins 插件 => 搜索 Sexy Editor 在安装 => 安装完成之后进行设置点击之

原创 gerAttriBute和getcomputedStyle()区别

元素.gerAttriBute(“属性”)获取的是行内属性window.getComputedStyle(选择器).属性可以获取的到css样式表的属性兼容IE8以上window.getComputedStyle(box,“after”).属性获取伪元素的属性window.getComputedStyle(box).borderBottom获取连字符的属性 使用驼峰时命名...

原创 获取dom元素的节点get和query区别

get是动态获取DOM节点document.documentElement 获取的是html标签 ​document.head 获取head标签 document.body 获取body元素​ .getElementById(“id名”) 获取单个元素 .getElementsByName(“name名”) 通过name元素的表单 获取类数组 .getElementsByClassName(“class类名”) 通过class类名 获取类数组 .getElementsByTagName("标签名 ")

原创 Manth.PI 数学对象 三角函数

三角函数参数为弧度值 Math.PI = π角度都有一个对应弧度 js不能传递到角度 只能传递弧度圆弧度值是有360deg 弧度值=2Math.PI 360deg=2Math.PI180deg=Math.PI当角度值为60deg的时候 计算弧度值180deg=Math.PI 弧度值= 180degMath.PI弧度值=60degMath.PI/3弧度值 = 角度*Math.PI/18

原创 对象属性特性

判断对象中是否有该属性in运算符的左侧是属性名（字符串或是一个能够返回字符串的表达式），右侧是对象。如果对象的自有属性或继承属性中包含属性名返回true / flase“assign” in Object 继承原型对象属性​ let porty = {x:0} ​"x" in porty porty中当有x属性的时候返回 true 没有返回 flase对象.hasOwnPreperty(“属性名称”)对象的hasOwnProperty()方法用来检测给定的名字是否是对象的

原创 js 垃圾回收机制

标记回收机制环境===作用域JavaScript最常用的是标记清除：当变量进入环境(作用域)，则将变量标记为进入环境，当变量离开环境的时候，将其标记为离开环境。垃圾收集器在运行时会给存储在内存中所有变量标记，然后去掉环境变量与被环境变量引用的变量，剩下的就是环境无法访问的变量，这些变量以及其占用的内容空间将被清理回收。引用计数~~机制回收...

原创 for使用var确保 索引跟随点击变化

第一种 通过元素属性绑定 <ul id="ul"> <li>1111</li> <li>2222</li> <li>3333</li> <li>4444</li> <li>5555</li> </ul> <script type="text/java

原创 js IIFE自执行函数

匿名函数 function(){}函数表达式 let a = function(){ }函数声明 function fn(){ }自执行函数的作用自执行函数，即定义和调用合为一体。我们创建了一个匿名的函数，并立即执行它，由于外部无法引用它内部的变量，因此在执行完后很快就会被释放，关键是这种机制不会污染全局对象。第一种 ( 匿名函数 )()// 代码加载时触发(function(){ console.log(" 1 2 3")})() 第二种 + -//

原创 数据类型

类型检测typeof 数字类型转换成数字类型字符串转成数字​Number( )开头以0开始 ​​Number( null ) === Number( " ") 为零​ ​​​Number( undefined ) 为 undefined​​​Number( true) 为 1 ​ ​​​Number( false) 为 0​ N​umber( “52f”) 十六进制 会被转换成 十进制​字符串转成数字 + - * / 默认使用Number( )​第一个的从数字开始 不然NAN​​ 忽略

原创 js运算符

%取余数console.log(5 % 8); 第一个数字比后面的小时 取点数最后的后面的小数.console.log(10 % 20); 如果第二个数字是一个数字的倍数 就会是第一个数字的值console.log(8 % 5); 第一个数字比第二大时 8/5=1.6 但是值是3 取被除时的余数 3console.log(10 % 5) 如果被整除了 就会为零 值为零比较运算符大于号 < 小于号 <= 小于等于 >= 大于等于 != 不等于 == 等于 !== 不全等于

原创 js 普通类型和引用类型

基本数据类型和引用数据类型的区别。（1）基本数据类型指的是简单的数据段，引用数据类型指的是有多个值构成的对象。（2）基本数据类型是存在栈内存中的，按值访问的，因为可以直接操作保存在变量中的实际值；引用数据类型之所以叫引用数据类型，是因为他的数据是存在堆内存中，但是我们不能直接访问操作堆内存中的数据，只能访问修改存在栈内存中的数据的引用基础类型String, 字符串number, 数字null, 空值undefined, 未定义boolean, 布尔值symbol ， 唯一值引

原创 数组函数

arr.push( 参数 )在数组最后添加------会改变原数组的结构 let arr = [1,2,3,4,5,6,7] console.log("未添加之前",arr) arr.push(8) console.log("添加之后",arr) console.log("添加完成",arr) // 未添加之前 (7) [1, 2, 3, 4, 5, 6, 7]// 添加之后 (8) [1, 2, 3, 4, 5, 6, 7, 8]// 添加完

原创 js的写法位置

浏览器的组成 外壳 内核 渲染引擎 渲染引擎负责网页中内容的显示,HTML+CSSJS 解析引擎 JS引擎创建一个环境，在这个环境中Js引擎可以解释、编译和执行JS代码 JavaScript用途 结构层 html 语义的角度描述页面的结构样式层 css 审美的角度装饰页面行为层 js写法 有 外联 => 内联 内联写法 位于body闭合标签的位置处 使用<script> js代码 <script&g...

原创 怎么减少重排和重绘

当页面布局和几何属性改变时就需要重排。下述情况会发生浏览器重排：1、添加或者删除可见的DOM元素；2、元素位置改变——display、float、position、overflow等等；3、元素尺寸改变——边距、填充、边框、宽度和高度4、内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变；5、页面渲染初始化；6、浏览器窗口尺寸改变——resize事件发生时；**减少重排重绘**Reflow 的成本比 Repaint 的成本高得多的多。一个节点的 Reflow 很有可能导

原创 浏览器的渲染原理

一 根据html文件构建 => 生成DOM树HTML 文档中的所有内容皆是节点，各节点之间拥有层级关系，如父子关系、兄弟关系等，彼此相连，构成DOM树二 根据css文件构建 => 生成CSSOM规则树CSS文档中，所有元素皆是节点，与HTML文件中的标签节点一一对应。CSS中各节点之间同样拥有层级关系，如父子关系、兄弟关系等，彼此相连，构成CSSOM树。 构建DOM树期间，如果遇到JS，阻塞DOM树及CSSOM树的构建，优先加载JS文件，加载.

原创 meta标签属性

W3C标准下有四个属性。content（必需）：定义与name或http-equiv属性相关的元信息http-equiv：向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。name：把content属性关联到一个名称charset：html5新加 // 声明文档使用的字符编码 两种写法<meta charset='utf-8'> <meta http-equiv="C

原创 vertical-align的使用

英文才能看的到父级的基线 中文看不到<span>你好 x</span>小写字母的x最下方是父元素的基线vertical-align文字垂直对齐 只对行内样式生效 baseline 默认基线 middle 中基线 top 上基线 bottom下基线 不知道可以使用vertical-align:像素值 自己慢慢进行调试 在元素内部的一个行内元素中设置vertical-align 后面的行内样式会根据第一个的基线 进行生效. 除了第一...

原创 vscode 自定义背景样式

vscode 自定义背景样式{ "window.zoomLevel": 0, "background.enabled": true, /* 是否使用插件 */ "background.useDefault":false, /* 是否使用默认图片*/ "background.customImages": [ /* 图片路径*/ "file...

原创 vscode快速生成模板

文件的首选项的用户代码片段2, 用户代码模板{ "html:5": { "prefix": "h", "body": [ "<!DOCTYPE html>", "<html>", "<head>", "\t<meta charset=\"UTF-8\">", "\t<meta name=...

原创 四年开发经验教你使用html的lang属性使用

<!DOCTYPE html><html lang="en"></html>lang属性的主要的作用是用来表示网页字体是中文还是英文还是其他语言lang=“en” 表示这个是该网页的字体是英文字体 在中文网页打开会自动弹出显示 是否将英文翻译成中文字体lang = “ch-zn” 表示这个是中文字体还有其他的字体 建议百度...

原创 前端能做什么?

前端是干什么的?现在前端主要是开发网页开发 使用html+css+javascript => 网页=网页交互=网页特效组成比如斗鱼网页=百度=ie=淘宝网页等 都可以使用这个实现开发app软件开发 => 手机软件 > 微博 微信 抖音 爱奇艺 QQ等手机使用的软件开发的前台页面小程序 ...

原创 git的初步使用

git 是什么git是一种分布式版本控制系统 更直白说,团队开发时,管理代码用的软件.git下载地址Git最基本的配置git config --global user.name #你是谁 git名称$ git config --global user.email #怎么联系你 git绑定的邮箱git config --list //查看配置3.git 分为 工...

原创 vue中keep-ailve的作用

主要用于包裹 组件反复使用多次的组件 避免重新删除 渲染 浪费性能include="组件名" 匹配组件会被缓存 其余不会缓存exclued="组件名" 匹配组件不会被缓存 其余会被缓存在缓存组件被激活时 会触发沟子函数 activated函数组件停用是 激活 deactivated 函数...

原创 vue常用修饰符

vue中常用的修饰符:.once 事件只触发一次.antive 绑定在组件上 点击组件触发事件.top 阻止冒泡事件.prevent 阻止默认事件.capture 在事件捕获阶段 触发.self 事件只有在本身元素触发.lazy 是的input事件变成cha...

原创 vue事件车的两种应用

第一种在vue脚手架中 创建uilts 中创建一个 eventBus.js文件 // 在js文件中import vue from "vue";export default new vue()// 在其他文件中引入该文件import EventBus from "uilts/eventBus"EventBus.$emit("事件",数据) //订阅事件在其他文件中触发事件i...

原创 webpack配置服务器与跨域

npm i webpack-Dev-server -D临时搭建一个开放是的服务器 是使用node中express 开发的const path = require('path')module.exports = { mode:'development',//打包后的代码在开发环境中 打包后的代码不会被压缩 entry:'./src/index.js', output...

原创 webpack配置html模板配置

npm i html-webpack-plugin -Dhtml-webpack-plugin将js css自动是生成css,js 引用到打包生成的html文件中可以压缩html文件引用自定义模板在webpack.config.js中 const HtmlWebpackPlugin = require('html-webpack-plugin') plugins:[ ...

原创 webpack的css配置

npm i style-loader css-loader -D 处理css模块下载想配合使用less 还需下载 npm i less less-loader -D使用sacc 下载 node-sass sass-loader -Dcss-loader这个loader可以处理css文件 并解析css代码style-loader这个loader生成style标签 并把...