erha blog

新建页面1hexo new page xxx 新建子页面1hexo n page xxxxx

webpack是啥？webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。（目前最流行的） 开发时，我们会使用框架（React、Vue），ES6 模块化语法，Less/Sass 等 css 预处理器等语法进行开发。 这样的代码要想在浏览器运行必须经过编译成浏览器能识别的 JS、Css 等语法，才能运行。 所以我们需要打包工具帮我们做完这些事。 除此之外，打包工具还能压缩代码、做兼容性处理、提升代码性能等。 基本使用Webpack 是一个静态资源打包工具。 它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。 输出的文件就是编译好的文件，就可以在浏览器段运行了。 功能介绍Webpack 本身功能是有限的: 开发模式：仅能编译 JS 中的 ES Module 语法 生产模式：能编译 JS 中的 ES Module 语法，还能压缩 JS 代码 开始使用1. 资源目录123456webpack_code # 项目根目录（所有指令必须在这个目录运行） └── src # 项目源码目录 ├── js # ...

HTML 拖放（Drag and Drop）接口使应用程序能够在浏览器中使用拖放功能。例如，用户可使用鼠标选择可拖拽（draggable）元素，将元素拖拽到可放置（droppable）元素，并释放鼠标按钮以放置这些元素。拖拽操作期间，会有一个可拖拽元素的半透明快照跟随着鼠标指针。拖拽事件拖拽的元素让一个元素被拖拽需要添加 draggable 属性，再加上全局事件处理函数 ondragstart 1<div id="box1" draggable="true"></div> <!-- 设置draggable="true"才能拖拽 --> 定义事件12345678910111213const box1 = document.querySelector('#box1')// 当用户开始拖拽一个元素或选中的文本时触发。box1.addEventListener('dragstart',()=>{ console.log('拖 ...

关于Audio标签的属性currentTime 用来获取或控制当前播放的时间，单位为s。 12345678910111213// 点击进度条控制播放进度progressBar.addEventListener('click',function(e){ let x = e.offsetX; let w = progressBar.offsetWidth; let s = mp3.duration; let v = x/w*100; let vl = s*v/100; mp3.currentTime= vl; })// 谷歌浏览器本地运行时没事// 在Node服务环境下 在谷歌浏览器运行时控制进度条会把 currentTime清0 导致音乐重新播放// 然而在火狐下能够正常运行

req.query 获取查询字符串参数1234###post {{http}}/api/login?username=admin&password=000000 ----------------------------------------------------console.log(req.query) // { username: 'admin', password: '000000' } req.body 获取json数据参数1234567891011###post {{http}}/api/loginContent-Type: application/json{ "username":"admin", "password":"000000"}------------------------------------- ...

弹性布局1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950弹性布局&伸缩布局display:flex;设置弹性布局 justify-content: 设置子元素在主轴上的排列方式 flex-start 让子元素从父容器的起始位置开始排列 flex-end 让子元素从父容器的结束位置开始排列 center 让子元素从父容器的中间位置开始排列 space-between 左右对齐父容器的开始和结束，中间平均分布 space-around 将多余的空间平均的分布在每一个盒子的中间 造成中间盒子的间距是左右两边盒子的两倍 space-evenly; 新属性 完全平分多余的空间 flex-direction:设置子元素的主轴排列方式 row 水平排列方向，从左到右 row-reverse 水平排列方向，从右到左 column:垂直排列方向，从上到下 column-reverse:垂直排列方向，从 ...

MySQL 数据库 （目前使用最广泛、流行度最高的开源免费数据库；Community + Enterprise，关系型数据库）安装 MySQL Server ：专门用来提供数据存储和服务的软件 MySQL Workbench ：可视化的 MySQL 管理工具，通过它，可以方便的操作存储在 MySQL Server 中的数据 DataType 常见的数据类型： int 整数 varchar(len) 字符串 tinyint(1) 布尔值 字段的特殊标识 PK（Primary Key） — 主键、唯一标识 NN（Not Null） — 值不允许为空 UQ（Unique） — 值唯一 AI（Auto Increment） — 值自动增长 SQL 语句注意: SQL 语句中的关键字对大小写不敏感。SELECT 等效于 select，FROM 等效于 from注意：在执行语句的时候，需要选择默认的数据库，双击选择指定的数据库(字体加粗为选中)，没选中会无法执行语句查询语句123456789--- 从 from 指定 ...

微信小程序的概念官方解释：微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。 小程序是微信生态的一部分，它提供了一种更加 方便和高效 的用户交互方式。 好处： 用户多，用户体验好，底层可以调用原生的各种接口，一端开发，多端运行（iOS端、Android端） 类似于Web 开发模式，入门的门槛低：基本是类似于html+css+js； 可直接云端更新：微信审核，无需经过App Store等平台； 提示用户体验：通过提供基础能力、原生组件结合等方式，提升用户体验； 平台管控能力：小程序提供云端更新，通过代码上传、审核等方式，增强对开发者的管控能力； 双线程模型：逻辑层和渲染层分开加载，提供了管控型和安全性（沙盒环境运行JS代码，不允许执行任何和浏览器相关的接口，比如跳转页面、操作DOM等）； 小程序的开发主要分成三部分： 页面布局：WXML，类似于HTML开发 页面样式：WXSS，几乎就是CSS（某些不支持，某些进行了增强） 页面脚本：JavaScript+WXS，（JS，以及WeixinScript后续学习） 小程序结构 ...

Session 认证机制(服务端渲染)Cookie Cookie 是存储在用户浏览器中的一段不超过 4 KB 的字符串。它由一个名称（Name）、一个值（Value）和其它几个用于控制 Cookie 有效期、安全性、使用范围的可选属性组成 不同域名下的 Cookie 各自独立，每当客户端发起请求时，会自动把当前域名下所有未过期的 Cookie 一同发送到服务器 Cookie 的几大特性 自动发送 域名独立 过期时限 4KB 限制 Cookie 在身份认证中的作用 客户端第一次请求服务器的时候，服务器通过响应头的形式，向客户端发送一个身份认证的 Cookie，客户端会自动将 Cookie 保存在浏览器中。 随后，当客户端浏览器每次请求服务器的时候，浏览器会自动将身份认证相关的 Cookie，通过请求头的形式发送给服务器，服务器即可验明客户端的身份 Cookie 不具有安全性 由于 Cookie 是存储在浏览器中的，而且浏览器也提供了读写 Cookie 的 API，因此 Cookie 很容易被伪造，不具有安全性。因此不建议服务器将重要的隐私数据通过 Cookie 的形式发送给浏览器 ...

在NodeJS中操作数据库的步骤安装操作 MySQL 数据库的第三方模块（mysql）1npm i mysql -s 通过 mysql 模块连接到 MySQL 数据库12345678910// 1. 导入 mysql 模块var mysql = require('mysql')// 2. 建立与 mysql 数据库的连接var db = mysql.createPool({ host: '127.0.0.1', // 数据库的 ip 地址 user: 'root', // 登录数据库的账号 password: 'toor', // 登录数据库的密码 database: 'my_db_01' // 指定要操作哪个数据库}) 注意：如果出现error: ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by serv的报错原因： 导 ...