搜索到5篇与笔记的结果
flex布局笔记 # flex > - 操作方便,布局极为简单,移动端应用很广泛 > - PC端浏览器支持情况较差 > - IE 11 以下 不支持 ## 布局原理 > flex 是 flexible box 的缩写,意为 “ 弹性布局” ,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为 flex 布局 - 当我们为父盒子设为 flex 布局以后 , 子元素的 float、clear 和 vertical-align 属性将失效。 - 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局 > 采用 Flex 布局的元素,称为 Flex 容器 (flex container ),简称 “ 容器 ”。它的所有子元素自动成为容器成员,称为 Flex 项目 ( flex item ),简称 “ 项目 ” ; ```html <div> <span class="flex" id="flex" data-id="1">Hello World</span> </div> ``` - div 就是 flex 父容器 - span 就是 子容器 flex 项目 - 子容器可以横向排列也可以纵向排列 > 总结 flex 布局 原理 :就是通过给 父盒子 添加 flex 属性,来控制子盒子的位置和排列方式 ## flex 常见父项属性 - flex-direction 设置主轴方向 - justify-content 设置主轴上的子元素排列方式 - flex-wrap 设置子元素是否换行 - align-content 设置侧轴上的子元素的排列方式 ( 多行 ) - align-items 设置侧轴上的子元素排列方式(单行) - flex-flow 复合属性,相当同时设置了 flex-direction 和 flex-wrap ### flex-direction #### 1.主轴与侧轴 > 在flex布局中,是分为主轴和侧轴两个方向,同样的叫法有:行和列、X轴和Y轴 - 默认主轴方向就是 X 轴 方向,水平向右 - 默认侧轴方向就是 Y 轴方向,水平向下 #### 2.属性值 > flex-direction 属性决定主轴的方向(即项目的排列方向) > > 注意:主轴和侧轴是会变化的,就看 flex-direction 设置谁为主轴,剩下的就是侧轴,而我们的子元素是跟着主轴来排列的 | 属性值 | 说明 | | -------------- | -------------- | | row | 默认值从左到右 | | row-reverse | 从右到左 | | column | 从上到下 | | column-reverse | 从下到上 | ### justify-content > justify-content 属性定义了项目在主轴上的对齐方式 > > 注意:使用这个属性之前一定确定好主轴是那个 | 属性值 | 说明 | | ------------- | ----------------------------------------------- | | flex-start | 默认值 从头开始,如果主轴是 X 轴,则从左到右 | | flex-end | 从尾部开始排列 | | center | 在主轴居中对齐 ( 如果主轴是 X 轴 则 水平居中 ) | | space-around | 平分剩余空间 | | space-between | 先两边贴边 再平分剩余空间 ( 重要) | ### flex-wrap > flex-wrap 设置子元素是否 换行 > > 默认情况下,项目都排在一条线(又称 " 轴线 " )上。flex-wrap 属性定义,flex布局中默认是不换行 > > 如果装不开,会缩小子元素的宽度放到父元素里边 | 属性值 | 说明 | | ------ | ------------ | | nowrap | 默认值不换行 | | wrap | 换行 | ### align-content > 设置子项在侧轴上的排列方式并且只能用于子项 出现 换行 的情况下 ( 多行),在单行下是没有效果的 | 属性值 | 说明 | | ------------- | -------------------------------------- | | flex-start | 默认值在侧轴的头部开始排列 | | flex-end | 在侧轴的尾部开始排列 | | center | 在侧轴中间显示 | | space-around | 子项在侧轴平分剩余空间 | | space-between | 子项在侧轴先分布在两头,在平分剩余空间 | | stretch | 设置子项元素高度平分父元素高度 | ### align-items > align-items 设置侧轴上的子元素排列方式(单行) > > 该属性是控制子项在侧轴(默认是 Y 轴) 上的排列方式 在子项为单项的时候使用 | 属性值 | 说明 | | ---------- | ------------------------------------------ | | flex-start | 从上到下 | | flex-end | 从下到上 | | center | 挤在一起居中 ( 垂直居中 ) | | stretch | 拉伸 ( 默认值 ) 如果子元素有高度则不起效果 | ### align-content 于 align-items 的区别 - align-items 适用于单行情况下,只有上对齐、下对齐、居中和拉伸 - align-content 适应于换行(多行)的情况下(单行情况下无效),可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值 - 总结:单行找 align-items 多行找 align-content ### flex-flow > flex-flow 是 flex-direction flex-wrap 的复合写法 ## flex 常见子项属性 - flex 子项目占的份数 - aling-self 控制子项自己在侧轴的排列方式 - order 属性定义子项的排列顺序(前后顺序) ### flex > flex 属性定义子项目分配剩余空间,用 flex 来表示占多少份数 ```css .item { flex: <number>; /* default 0 */ } ``` ### aling-self > aling-self 控制子项自己在侧轴上的排列方式 > aling-self 属性允许单个项目有于其他项目不一样的对齐方式,可覆盖 aling-items 属性 > > 默认值 是 auto ,表示继承 父元素的aling-items 属性,如果没有父元素,则等于 stretch ### order > order 属性定义项目的排列顺序 > > 数值越小,排列越靠前,默认为0 > > 注意:跟 z-index 不一样 ```css .item { order : <number>; /* default 0 */ } ```
2021-03-16
56℃
0
0
Mysql笔记 # Mysql > 默认端口:3306 > > 注意 mysql 的命令 需要 ; 来结束 ### Mysql数据库中最基本的单元是表:table 什么是table?为什么用表来存储数据? | 姓名 | 性别 | 年龄 | | ---- | ---- | ---- | | 小白 | 女 | 12 | | 小强 | 男 | 18 | | 小胖 | 男 | 15 | 列:字段 -------> 行记录 Mysql数据库中是以表的形式表示数据的 因为表比较直观 如何一张表都有行和列: ​ 行(row):被称为数据/记录 ​ 列(column):被称为字段 每一个字段都有:字段名,数据。类型,约束等属性 ## SQL分类 > SOL语句有很多,最好进行分门别类,这样子更容易记忆 - DQL:数据查询语言(凡是带有select关键字的都是查询语句) - select ... - DML:数据操作语言(凡是对表当中的数据进行增删改的都是DML) - insert 增 - delete 删 - update 改 - DDL:数据定义语言(凡是带有 create drop alter 的都是DDL )DDL主要操作的是表的结构,不是表中的数据 - create 新建,等同于增 - drop 删除 - alter 修改 > 这个增删改和DML不同,这个主要是对表的结构进行操作 - TCL:事物控制语言 - 事物提交:commit; - 事物回滚:rollback; - DCT:数据控制语言 - 授权 grant - 撤销权限 revoke 等等... ## 基本命令 ```mysql 登陆:bin/mysql -uroot -p密码 显示密码 ``` ```mysql 登陆:bin/mysql -uroot -p 隐藏密码 ``` ```mysql 查看全部数据库 show databases; ``` ```mysql 切换数据库 use 数据库名; ``` ```mysql 查看mysql版本号 select version(); ``` ```mysql 查看当前数据库 select database(); ``` ```mysql 创建数据库 create database 数据库名; ``` ```mysql 查看当前数据库的表 show tables; ``` ```mysql 数据库导入 source 路径; ``` ```mysql 查询表的数据 select * from 表名; ``` ```mysql 查询表的结构 desc 表名; ``` ```mysql 查看创建表的时候的sql语句 : show create table 表名 ``` ## DQL语句 ### 简单查询 1. 查询一个字段( 查询多个字段使用 , 来隔开 ) ```mysql select 字段名 from 表名; 查询的时候 可以在字段名后面添加数学运算 比如说: select ENAME,SAL*12 as '年薪' from emp; 给SAL起'年薪'这个别名 ``` 2. 查询所有字段 ```mysql select * from 表名; ``` 3. 查询字段起别名 ```mysql select 字段名 '别名' from 表名; ``` ### 条件查询 > 条件查询需要用到 where 语句,where 必须放到 from 语句表的后面 支持如下运算符 | 运算符 | 说明 | | --------------- | ------------------------------------------------------------ | | = | 等于 | | <>或!= | 不等于 | | < | 小于 | | <= | 小于等于 | | > | 大于 | | \>= | 大于等于 | | between …and …. | 两个值之间,等同于 >= and <= 必须左小右大 | | is null | 为 null(is not null 不为空) | | and | 并且 | | or | 或者 如果 and 和 or 同时出现 and的优先级高 如果给 or 语句加括号 就 or的语句 优先级高 比如:select * from emp where SAL > 2500 and (DEPTNO = 10 or DEPTNO = 20); | | in | 包含,相当于多个 or(not in 不在这个范围中)例如:select * from emp where JOB in ('MANAGER','SALESMAN'); | | not | not 可以取非,主要用在 is 或 in 中 | | like | like 称为模糊查询,支持%或下划线匹配 %匹配任意个字符 下划线,一个下划线只匹配一个字符 如果需要查询的内容有特殊字符比如说: _ 需要使用 \ 这个转义符 进行 转换 例如:select * from emp where ENAME like '%O%'; (含有 0 ) select * from emp where ENAME like '%T'; (以T结尾)select * from emp where ENAME like 'J%'; ( 以J开始的) select * from emp where ENAME like '_A%'; (第二个字母是A) | ##### 基本语法 ```mysql select 字段 from 表名 where 条件; 例如:select ENAME,SAL from emp where SAL>4000; ``` ### 排序数据 升序 ```mysql select 字段名 from 表名 order by asc; 如果是升序 asc 可以不写 因为默认就是 升序 ``` 降序 ```mysql select 字段名 from 表名 order by 字段名 desc; ``` ### 数据处理函数/单行处理函数 > 数据处理函数又称为单行处理函数 > > 单行处理函数的特点:一个输入对应一个输出 > > 和单行处理函数相对的是:多行处理函数(多个输入,对应一个输出) | lower | 转换小写 例如 select lower(ename) from emp; | | ----------- | ------------------------------------------------------------ | | upper | 转换大写 | | substr | 取子串(substr(被截取的字符串,起始下标, 截取的长度)) 例如:select substr(ename,1 ,3) as name from emp; | | length | 取长度 例如:select length(sal) from emp; | | trim | 去空格 例如:select * from emp where ename =trim( ' WARD'); | | str_to_date | 将字符串转换成日期 | | date_format | 格式化日期 | | format | 设置千分位 | | round | 四舍五入 | | rand() | 生成随机数select round(rand()*10,0) as num; //10以内的随机数 | | Ifnull | 可以将 null 转换成一个具体值 | | concat | 函数进行字符串的拼接 例如:select ifnull(COMM,0) from emp; 如果为null 替换为 0 | ### 分组函数/聚合函数/多行处理函数 > 输入多行,输出一行 注意:分组函数 自动忽略 null 不用提前处理 分组函数不能**直接**使用在 **where** 语句中 分组函数在使用的时候必须进行分组,然后才能使用,然后你没有对数据进行分组,整张表默认为一组 分组函数可以组合一起使用 比如:select min(sal),max(sal),avg(sal),sum(sal),count(*) from emp; | count | 取得记录数 | | ----- | ---------- | | sum | 求和 | | avg | 取平均 | | max | 取最大的数 | | min | 取最小的数 | ### 分组查询 > 分组查询主要涉及到两个子句,分别是:group by 和 having > > 在实际应用中,我们可能有这样的需要,需要先进行分组,然后对每一组的数据进行操作。 > > ### 连接查询 > 连接查询就是多张表来查询 分类 - 内连接 1. 等值连接 2. 非等值连接 3. 自连接 - 外连接 1. 左边连接 (左连接) 2. 右边连接 (右连接) - 全连接 基本语法 ```mysql select 字段,字段 from 表名,表名; ``` ### union 将查询结果合并 ```mysql select ... from emp union select ... from emp; ``` ### limit 分页 ```mysql select 字段名 from 表名 limit 跳过的条数,显示条数; 分页公式: 每页显示pageSize条记录 第pageNo页:limit (pageNo-1) * pageSize ``` ### 执行顺序 ```mysql select ... from ... where ... group by ... having .... order by ... limit ... 以上执行顺序不能颠倒,需要记忆 执行顺序 1. from 2. where 3. group by 4. having 5. select 6. order by 7. limit ``` ## DDL语句 ### 数据类型 - varchar 可变长度的字符串 比较智能 节省空间 会根据实际的数据动态分配空间 (最长255) - char 定长字符串 不管实际的数据的长度 分配 固定的数据空间 (最长255) - int 整数 (最长11) - bigint 长整数 - float 单精度浮点型 - double 双精度浮点型 - date 短日期 - datetime 长日期 - clob 字符大对象 最多可以存储 4G 的字符串 存储 文章 (成过255) - blob 二进制 大对象 存储 图片 声音 视频 等流媒体 例如:插入一个视频,图片 等 你需要 IO 流 ### 约束 > 约束 constraint 在创建表的时候,我们可以给表的字段加上一些约束,来保证表中数据的完整性、有效性! > > 作用:就是保证表中的数据有效!! ### 约束包括 - 非空约束:not null - 唯一性约束:unique - 主键约束:primary key (简称 PK) - 外键约束:foreign key 简称(FK) - 检查约束:check ( mysql 不支持 oracle 支持 ) ```mysql 创建表的时候条件约束 例如:create table 表名 ( 字段名 数据类型 default 默认值 约束的类型 , 字段名 数据类型 ... ) ``` ### 主键约束 > 在mysql中 有一种机制,可以帮助我们自动维护一个主键值 auto_increment > > 自增 从 1 开始 以 1 自增 > > 例如下: ```mysql create table t_vip( id int primary key auto_increment, name varchar(32) ); insert into t_vip(name) values('xiaoke'); insert into t_vip(name) values('xiaoke'); insert into t_vip(name) values('xiaoke'); insert into t_vip(name) values('xiaoke'); insert into t_vip(name) values('xiaoke'); insert into t_vip(name) values('xiaoke'); ``` ### 外键约束 > 约束原理和 主键约束 大概 一样 > > 实例:本地的 test 里面的 父表 t_class 子表 t_student ```mysql drop table if exists t_student; // 这个是 子表 drop table if exists t_class; // 这个是父表 先创建 父表 再 创建子表 create table t_class( classno int primary key, classname varchar(45) ); create table t_student( no int primary key auto_increment, name varchar(45), con int, foreign key(需要外键约束的字段名) references 外键表名(外键 字段名) ) ``` ### 创建表 ```mysql create table 表名 ( 字段名 数据类型 default 默认值 , 字段名 数据类型 ... ) ``` ### 删除表 ```mysql drop table 表名; //当一张表不存在的时候会报错 drop table if exists 表名; // 如果这张表存在就删除 ``` ## DML语句 ### 插入数据 ```mysql insert into 表 (字段名1,字段名2,字段名3) values(值1,值2,值3),(值1,值2,值3),(值1,值2,值3); // 要 一一对应 插入多条数据用 , 来隔开 例如:insert into 表名 (no,name,sex,age,email) values(1,'xiaoke','m',15,'xiaoke@88.com'); ``` > 注意:insert 语句执行成功 那么必须多一条数据 > > 没有给其他字段指定值得话,默认值是 null ### 修改数据 ```mysql update 表名 set 字段名1 = 值1 , 字段名2 = 值2, 字段名3 = 值3 where 条件; 例如:update t_user set sex = 'f' where no = 2; 注意:没有条件限制会导致所有数据全部更新 ``` ### 删除数据 ```mysql delete from 表名 where 条件; 注意:没有条件,整一张表都会被删除 ``` ## 事物 ### 什么是事物? 事物: transaction 一个事物其实就是一个完整的业务逻辑 事物就是多个 DML 语句 同时 成功 或 同时 失败 ### 什么是一个完整的逻辑? 假设转账,从A账户向B账户中转账10000 将A账户的钱 -10000 ( update ) 将B账户的钱 +10000 ( updata ) 这是一个完整的业务逻辑 以上操作是一个最小的工作单元,要么同时成功要么同时失败,不可再分 这两个 updata 语句 要求必须同时成功 或 同时 失败 ,这样才能保证钱是正确的 ### 事物的关系 只有 DML 语句 和事物 有关系 其他都和事物 没关系 insert delete update 只有这三个语句 和 事物 有关系 其他的 都没有关系 ### 提交事物 > 清空事物性活动的日志文件,将数据全部彻底持久化到数据库表中 > > 提交事物标志着,事物的结束,并且是一种全部成功的结束 > > 在mysql中 默认事物行为是自动提交事物 > > 如何关闭自动提交机制: start transaction; 提交事物 commit; ### 回滚事物 > 将之前所有的DML操作全部撤销,并且清空事物性活动的日志文件 > > 回滚事物标志着,事物的结束,并且是全部失败的结束 > > 回滚只能回滚到上一次提交点 回滚事物 rollback; ### 事物包括4个特性 - A :原子性 说明事物是最小的工作单元,不可再分 - C :一致性 所有事物要求,在同一个事物当中,所有操作必须同时成功,或者同时失败 - I :隔离性 A 事物 和 B 事物之间具有一定的隔离 - D :持久性 事物最终结束的一个保障,事物提交,就想当与没有保存到硬盘的数据保存到硬盘上。 #### 重要的是事物的隔离性 A教室和B教室中间有一道墙,这道墙可以很厚,也可以很薄,这就是事物的隔离级别,这道墙越厚,表示隔离级别越高 ##### 事物和事物之间的隔离级别有4个级别 - 读未提交:read uncommitted (最低的隔离级别) 事物A可以读取到事物B未提交的数据 这种隔离级别存在的问题就是:脏读现象 (Dirty Read) 我们称读到了脏数据 - 读已提交:read committed 事物A只能读取到事物B提交之后的数据 这种隔离级别 解决了:脏读的现象 存在问题:不可重复读取数据 什么是不可重复读取数据? 在事物结束后,第一次读到的数据是3条,当前事物还没有结束,可能第二次再读取的时候,读取到的数据是4条,3不等于4称为不可重复读取 这种隔离级别是比较真实的数据,每一次的数据是绝对的真实 oracle 数据库 默认的隔离级别就是:read committed - 可重复读:repeatable read 事物A开启之后,不管是多久,每一次在事物A中读取到的数据都是一致的,即使事物B将数据已经修改,并且提交,事物A读取到的数据还是没有发生改变,这就是可重复读取 可重复读解决了不可重复读 可重复读的缺点:每一次读到的数据都是幻象,不够真实 - 序列化:serializable (最高的隔离级别) 这是最高隔离级别,效率最低,解决了所有问题 这种隔离级别表示事物排队,不能并非 每一次读取到的数据最真实 ## 索引 ### 什么是索引 > 索引是在数据库表的字段是添加,是为了提高查询效率存在的一种机制 > > 一张表的一个字段可以添加一个索引,当然多个字段联合起来也可以添加索引 > > 索引相当与一本书的目录,是为了缩小扫描范围而存在的一种机制 > > mysql 在查询方面主要就是两种方式: > 第一种方式:全表扫描 > > ​ 第二种方式:根据索引检索 > > 注意:在实际中,汉语字典前面的目录是排序的,按照 a b c d e f .... 排序,为什么排序呢?因为只有排序了才会有区间查询这一说 (缩小扫描范围其实就是扫描某个区间) > > 在mysql数据库当中索引也是需要排序的 > > 遵循左小右大原则存放,采用中序遍历方式遍历取数据 ### 索引的实现原理? 假设有一张用户表:t_user id(PK) name 每一行记录在硬盘上都有物理存储编号 100 zhangsan 0x1111 120 lisi 0x2222 99 wangwu 0x8888 88 zhaoliu 0x9999 101 jack 0x6666 55 lucy 0x5555 130 tom 0x7777 提醒1:在任何数据库当中主键上都会自动添加索引对象,id字段上自动有索引, 因为id是PK。另外在mysql当中,一个字段上如果有unique约束的话,也会自动 创建索引对象。 提醒2:在任何数据库当中,任何一张表的任何一条记录在硬盘存储上都有 一个硬盘的物理存储编号。 提醒3:在mysql当中,索引是一个单独的对象,不同的存储引擎以不同的形式 存在,在MyISAM存储引擎中,索引存储在一个.MYI文件中。在InnoDB存储引擎中 索引存储在一个逻辑名称叫做tablespace的当中。在MEMORY存储引擎当中索引 被存储在内存当中。不管索引存储在哪里,索引在mysql当中都是一个树的形式 存在。(自平衡二叉树:B-Tree) 在mysql当中主键上,以级unique字段上会自动添加索引 ### 什么条件下考虑给字段添加索引呢? ​ 条件一:数据量庞大(到底多少算庞大,这个需要测试,因为每一个硬件环境不同) ​ 条件二:该字段经常出现在 where 的后面以条件的形式的存在,也就是说该字段经常被扫描 ​ 条件三:该字段很少的 DML 操作 (因为DML之后,索引需要重新排序) ​ 建议不要随意添加索引,因为索引也是需要维护的,太多的话反而会降低系统的性能 ​ 建议通过主键查询,建议通过unique约束字段进行查询,效率是比较高的 ### 创建索引 ```mysql create index 索引名称(自定义) on 表名(字段名); ``` 删除索引 ```mysql drop index 索引名称 on 表名; ``` 在mysql当中,怎么查看SQL语句是否使用了索引进行检索? explain SQL语句 ### 索引失效 1. ```mysql select * from emp where ename like '%T'; ename上即使添加了索引,也不会走索引,为什么? 原因是因为模糊匹配当中以 % 开头了 尽量避免模糊匹配查询的时候以 % 开启 ``` 2. 使用 or 的时候会失效,如果使用 or 那么要求两边的条件字段都要有索引,才会走索引,如果其中一边有一个字段没有索引,那么另一个字段上的索引以会失效,尽量少用 or 3. 在 where 当中 索引列 参加了运算 索引失效 例如:select * from emp where sal+1 = 800; 4. 在 where 当中 索引列 条件函数 索引失效 例如:select * from emp where lower(name) = 800; ## DBA ### 创建用户 ```mysql create user 用户名称 identified by '密码' ``` ### 导出导入 #### 导出整个数据库 ```mysql 在 windows 的 dos 命令窗口中执行:mysqldump 数据库名>D:\bjpowernode.sql -uroot -p123 ``` #### 导出指定库下的指定表 ```mysql 在 windows 的 dos 命令窗口中执行:mysqldump 数据库名 字段名> D:\ bjpowernode.sql -uroot –p123 ``` #### 导入 ```mysql 登录 MYSQL 数据库管理系统之后执行:source D:\ bjpowernode.sql ```
2021-03-16
62℃
0
0
Canvas笔记 # Canvas > HTML5 <canvas> 标签是用于绘制图像 ( 通过脚本,通常是 JavaScript ) > > 不过, <canvas> 元素本身并没有绘制能力(它仅仅是一个容器)必须使用脚本来实际的绘图任务 > > getContext() 它返回一个对象,该对象提供了用于在画布上绘图的方法和属性 > > 提供完整的 getContext( "2d" ) 对象的属性和方法 可用于在画布是绘制文本,线条,矩形,圆形,等等 > > canvas 三要素: > > id: 唯一标识 > > width: 画布内容的宽度的像素大小 (与 style 的宽度和高度是有区别的) > > height: 画布内容的高度的像素大小 > > **注意**:canvas 仅仅是一个容器需要绘制内容,需要用js来绘制 ## 颜色 | 属性 | 描述 | | ------------- | ---------------------------------------- | | fillStyle | 设置或返回用于填充绘画的颜色,渐变或模式 | | strokeStyle | 设置或返回用于笔触的颜色,渐变或模式 | | shadowColor | 设置或返回用于阴影的颜色 | | shadowBlur | 设置或返回用于阴影的模糊级别 | | shadowOffsetX | 设置或返回阴影与形状的水平距离 | | shadowOffsetY | 设置或返回阴影与形状的垂直距离 | | 方法 | 描述 | | ---------------------- | ------------------------------------------ | | createLinearGradient() | 创建线性渐变(用于在画布内容上) | | createPattern() | 在指定的方向上重复指定的元素 | | createRadialGradient() | 创建放射状/环形的渐变 ( 用于在画布内容上 ) | | addColorStop() | 规定渐变对象中的颜色和停止位置 | ## 线条样式 | 属性 | 描述 | | ---------- | ------------------------------------------------------------ | | lineCap | 设置或返回线条的结束端点样式 ( 默认是默认是 butt 是平直角 圆角 round ) | | lineJoin | 设置或返回两条线相交时,所创建的拐角类型 ( 默认的是 mi ) | | lineWidth | 设置或返回当然线条的宽度 | | miterLimit | 设置或返回最大斜接长度 | ## 矩形 | 方法 | 描述 | | ------------ | ---------------------------- | | rect() | 创建矩形 | | fillRect() | 绘制 "被填充" 的矩形 | | strokeRech() | 绘制矩形 ( 无填充 ) | | clearRech() | 在给定的矩形内清除指定的像素 | ## 路径 | 方法 | 描述 | | ------------------ | ------------------------------------------------------ | | fill() | 填充当前绘图 ( 路径 ) | | strkoe() | 绘制已定义的路径 | | beginPath() | 起始一条路径,或重置当前路径 | | moveTo() | 把路径移动到画布中的指定点,不创建线条 | | closePath() | 创建从当前点回到起始点的路径 | | lineTo() | 添加一个新点,然后在画布中创建从 | | clip() | 从原始画布剪切任意形状和尺寸的区域 | | quadraticCurveTo() | 创建二次贝塞尔曲线 | | bezierCurveTo() | 创建三次贝塞尔曲线 | | arc() | 创建弧/曲线 ( 用于创建圆形或部分圆 ) | | arcTo() | 创建两切线之间的弧/曲线 | | isPointlnPath() | 如果指定的点位于当前路径中,则返回 true 否则返回 false | ## 转换 | 方法 | 描述 | | -------------- | ---------------------------------------------- | | scale() | 缩放当前绘图至更大或更小 | | rotate() | 旋转当前绘图 | | translate() | 重新映射画布上的 (0,0) 位置 | | transform() | 替换绘图的当前转换矩阵 | | setTransform() | 将当前转换重置为单位矩阵,然后运行 transform() | ## 文本 | 属性 | 描述 | | ------------ | -------------------------------------- | | font | 设置或返回文本内容的当前字体属性 | | textAlign | 设置或返回文本内容当前的对齐方式 | | textBaseline | 设置或返回在绘制文本时使用当前文本基线 | | 方法 | 描述 | | ------------- | ---------------------------- | | fillText() | 在画布上绘制 "被填充的" 文本 | | strokeText() | 在画布时绘制文本 (无填充) | | measureText() | 返回包含指定文本宽度的对象 | ## 图像绘制 | 方法 | 描述 | | ----------- | ------------------------ | | drawlmage() | 向画布上绘制图像,或视频 | ## 像素操作 | 属性 | 描述 | | ------ | --------------------------------------------------- | | width | 返回 lmageData 对象的宽度 | | heigth | 返回 lmageData 对象的高度 | | data | 返回一个对象,其包含指定的 lmageData 对象的图像数据 | | 方法 | 描述 | | ----------------- | --------------------------------------------------------- | | createlmageData() | 创建新的 空白的 lmageData 对象 | | getlmageData() | 返回 lmageData 对象,该对象为画布上指定的矩形复制像素数据 | | putlmageData() | 把图像数据 ( 从指定的 lmageData 对象)放回画布上 | ## 合成 | 属性 | 描述 | | ------------------------ | ------------------------------------ | | globalAlpha | 设置或返回绘图的当前 alpha 或透明度 | | globalCompositeOperation | 设置或返回新图像如何绘制到已有的图上 |
2021-06-07
75℃
0
0
Ajax笔记 # Ajax基础 ## Ajax概况 > 它是浏览器提供的一套方法,可以实现页面无刷新更新网站数据,提高用户浏览网站应用体验 > ## Ajax 应用场景 1. 页面上拉加载更多数据 2. 列表数据无刷新分页 3. 表单项离开焦点后验证 4. 搜索框提示文字下拉列表 ## Ajax 的运行环境 > AJax 技术需要运行在网站服务器中才能生效 使用 node 创建网站服务器 ## Ajax运行原理 Ajax 相当于浏览器发送请求与接收响应的代理人, 以实现在不影响用户浏览页面的情况下,局部更新页面数据,从而提高用户的体验 ## Ajax 实现步骤 1.创建 Ajax 对象 ```javascript var xhr = new XHLHttpRequest(); ``` 2.告诉 Ajax 请求地址以及请求方式 ```javascript xhr.open( 'get' , ' 请求地址 ' ) ``` 3.发送请求 ```javascript xhr.send() ``` 4.获取服务器端给与客户端的响应数据 ```javascript xhr.onload = function () { console.log( xhr.responseText ) } ``` ```javascript // 1.创建Ajax 对象 var xhr = new XMLHttpRequest(); // 2. 告诉 Ajax 请求方式以及请求地址 xhr.open('get', 'http://localhost/first') // 3.发送请求 xhr.send() // 4.获取服务器端给与客户端的响应数据 xhr.onload = function () { // xhr.responseText console.log(xhr.responseText) } ``` ## 请求参数传递 ### GET请求方法 ```javascript <p> <input type="text" placeholder="请输入名称"> </p> <p> <input type="text" placeholder="年龄"> </p> <p> <input type="button" value="提交" id="btn"> </p> <script> // 获取元素 var btn = document.querySelector('#btn') var text = document.querySelectorAll('input') // 添加点击事件 btn.onclick = function () { // 创建Ajax 对象 var xhr = new XMLHttpRequest(); // 获取文本框 输入的值 var name = text[0].value var age = text[1].value // 拼接请求参数 var params = 'name=' + name + '&age=' + age // 告诉 Ajax 请求方式以及请求地址 xhr.open('get', 'http://localhost/get?' + params) // 发送请求 xhr.send() // 获取服务器端给与客户端的响应数据 xhr.onload = function () { var responseText = JSON.parse(xhr.responseText) console.log(responseText); } } </script> ``` ### POST请求方法 ```javascript <p> <input type="text" placeholder="请输入名称"> </p> <p> <input type="text" placeholder="年龄"> </p> <p> <input type="button" value="提交" id="btn"> </p> <script> // 获取元素 var btn = document.querySelector('#btn') var text = document.querySelectorAll('input') // 添加点击事件 btn.onclick = function () { // 创建Ajax 对象 var xhr = new XMLHttpRequest(); // 获取文本框 输入的值 var name = text[0].value var age = text[1].value // 拼接请求参数 var params = 'name=' + name + '&age=' + age // 告诉 Ajax 请求方式以及请求地址 xhr.open('post', 'http://localhost/post') // 请求参数的格式类型(post请求 必须要设置) xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') // post请求的参数在xhr.send() 方法里面 xhr.send(params) // 获取服务器端给与客户端的响应数据 xhr.onload = function () { var responseText = JSON.parse(xhr.responseText) console.log(responseText); } } </script> ``` ## 获取服务端的响应(了解) ### Ajax 状态码 > 在创建Ajax对象,配置Ajax对象,发送请求,以及接收完服务端响应数据,这个过程的每一个步骤都会对应一个数值,这个数值就是Ajax状态码 ​ 0: 请求未初始化( 还没有调用 open() ) ​ 1: 请求已经建立,都是还没有发送( 还没有调用 send() ) ​ 2: 请求已经发送 ​ 3: 请求正在处理中,通常响应中已经有部分数据可以用了 ​ 4: 响应已经完成,可以获取并使用服务器的响应了 ```javascript // 获取状态码 xhr.onreadystatechange = function () { console.log(xhr.readyState); } ``` ## Ajax错误处理 ​ 1. 网络畅通,服务器端能接收到请求,服务器端返回的结果不是预期的结果 > 可以判断服务器端返回的状态码,分别进行处理,xhr.status 获取http状态码 2. 网络畅通,服务器端没有收到请求,返回状态码 404 > 检查请求地址是否错误 3. 网络畅通,服务器端能接收到请求,服务器端返回500状态码 > 服务器端错误,后端错误 4.网络中断,请求无法发送到服务器端 > 会触发xhr对象下面的onerror事件,在onerror事件处理函数中对错误进行处理 ## 低版本 IE浏览器的缓存问题 > 问题:在低版本 IE浏览器中,Ajax请求有严重的缓存问题,即在请求地址不发生变化的情况下,只有第一次请求会真正发送到服务器端,后续的请求都会从浏览器的缓存中获取结果,即使服务器端数据更新了,客户端依然拿到的是缓存中的旧数据 > 解决方案: 在请求地址的后面加请求参数,保证每一次请求中的请求参数的值不相同 ```javascript xhr.open('get','http://xkbk.top?t=' + Math.random() ) ``` ## 同步异步概述 ### 同步 - 一个人同一时间只能做一件事情,只有一件事情做完,才能做另外一件事 - 落实到代码中,就是上一行代码执行完成,才能执行下一行代码,即逐行执行代码 ```javascript console.log('1') console.log('2') ``` ### 异步 - 一个人一件事情做到一半,转而去做其他事情,当其他事情做完以后,再回过头来继续做之前未完成的事情 - 落实到代码中,就是异步代码虽然需要花费时间去执行,但程序不会等待异步代码执行完成后再继续执行后续代码,而是直接执行后续代码,当后续代码执行完成后再回头看异步代码是否返结果,如果已有返回结果,再调用事先准备好的回调函数处理异步代码执行结果 ```javascript console.log('pink') setTimeout( () => { console.log('blue') },2000) ``` ## Ajax 封装 问题:发送一次请求代码过多,发送多次请求代码重复过多 解决方案:将请求代码封装到函数中,发送请求时调用函数即可。 ## 模板引擎 > 作用:使用模板引擎提供的模板语法,可以将数据和HTML拼接起来 > > 官方地址:http://aui.github.io/art-template/zh-cn/index.html ### 使用步骤 1. 下载art-template模板引擎文件并在HTML页面中引入库文件 ```javascript <script src="./js/template-web.js"></script> ``` 2. 准备atr-template模板 ```javascript <script id="tp1" type="text/html"> <div class="box"> </div> </script> ``` 3. 告诉模板引擎将哪一个模板和哪一个数据进行拼接 ```javascript // 第一个参数是 模板id 第二个参数是数据 var html = template('tp1',{ username:'xiaoke', age:'17' }) ``` 4. 将拼接好的html字符串添加到页面中 ```javascript document.getElementById('container').innerHTML = html ``` 5. 通过模板语法告诉模板引擎,数据和html字符串要如何拼接 ```javascript <script id="tp1" type="text/html"> <div class="box"> {{ username }} </div> </script> ``` ## formData 对象的作用 > 配合node 使用formidable模块 - 模拟HTML表单,相当于将HTML表单映射成表单对象,自动将表单对象中的数据拼接成请求参数的格式 1. 准备好HTML表单 ```html <form id="form"> <input type="text" name="username"> <input type="password" name="password"> <input type="button" value=""> </form> ``` 2. 将HTML表单转换为 formData对象 ```javascript var form = document.querySelector("#form") var formData = new FormData(form) ``` 3. 提交表单 ```javascript xhr.send(formData) ``` - 异步上传二进制文件 ## formData 对象的实例子方法 1. 获取表单对象中的属性值 ```javascript formData.get('key') ``` 2. 设置表单对象属性的值 ```javascript formData.set('key','value') ``` 3. 删除表单对象中的属性值 ```javascript formData.delete('key') ``` 4. 向表单对象中追加属性值 ```javascript formData.append('key','value') ``` > 注意:set 方法与 append 方法的区别是,在属性名已存在的情况下,set 会覆盖已有的键名的值, append会保留两个值 ## formData 文件上传图片即时预览 > 在我们将图片上传到服务器端以后,服务器端通常都会将图片地址做为响应数据传递到客户端,客户端可以从响应数据中获取图片地址,如何将图片再显示在页面中 服务器端代码 ```javascript // 实现文件上传路由 app.post('/upload', (req, res) => { // 创建formidable表单解析对象 var form = new formidable.IncomingForm() // 设置客户端文件上传的存储路径 form.uploadDir = path.join(__dirname, 'public', 'upload') // 保留上传文件的后缀名 form.keepExtensions = true // 解析客户端传递过来的FormData对象 form.parse(req, (err, fields, files) => { res.send({ path: files.attrName.path.split('public')[1] }) }) // res.send('ok') }) ``` 客户端代码 ```javascript xhr.onload = function () { if (xhr.status == 200) { var result = JSON.parse(xhr.responseText) // 上传文件夹即时预览 // 动态创建img var img = document.createElement('img') // 给图片设置src属性 img.src = result.path // 添加到页面中 img.onload = function () { box.appendChild(img) } } } ``` ## Ajax 请求限制 Ajax 只能向自己的服务器发送请求。比如现在有一个A网站,有一个B网站,A网站中的HTML文件只能向A网站服务器发送Ajax请求,B网站中的HTML文件只能向B网站中发送Ajax请求,都是A网站是不能向B网站发送Ajax请求的,同理,B网站也不能向A网站发送Ajax请求。 ## 同源政策 #### 什么是同源? > 如果两个页面拥有相同的协议,域名和端口,那么这两个页面就属于同一个源,其中只要有一个不相同,就是不同源。 #### 同源政策的目的 > 同源政策是为了保证用户信息的安全,防止恶意的网站窃取数据,最初的同源政策是指A网站在客户端设置的cookie,B网站是不能访问的。 > > 随着互联网的发展,同源政策也越来越严格了,在不同源的情况下,其中有一项规定就是无法向非同源地址发送Ajax请求,如果有请求浏览器就会报错 #### 使用JSONP 解决同源限制问题 > jsonp 是 json with padding 的缩写,它不属于Ajax请求,但它可以模拟Ajax请求 1. 将不同源的服务器端请求地址写在script标签的src属性中 ```javascript <script src="http://localhost:3001/test"></script> ``` 2. 服务器端响应数据必须是一个函数的调用,真正要发送给客户端的数据需要找我函数调用的参数 ```javascript var data = 'fn({name: "xiaoke" , age: "16" })' res.send(data) ``` 3. 在客户端全局作用域下定义函数 fn ```javascript function fn (data) {} ``` 4. 在 fn 函数内部对服务器端返回的数据进行处理 ```javascript function fn (data) { console.log(data) } ``` #### JSONP 代码优化 1. 客户端需要将函数名称传递到服务器端 2. 将script请求的发送变成动态请求。 3. 设置请求成功后执行的回调函数 4. 设置传递参数 #### 服务器代码优化 > 可以直接返回JSON数据 ```javascript res.jsonp({ name: "xioake", age: 16 }) ``` #### CORS 跨域资源共享 > CORS:全称为 Cross-origin resource sharing 即跨域资源共享,它允许浏览器向跨域服务器发送Ajax请求,克服了Ajax 只能同源使用的限制 ```javascript origin: http://localhost:3000 ``` ##### 服务器端代码 ```javascript // 所有express框架得中间件 拦截所有的请求 // 拦截所有请求 app.use((req,res,next) => { // 1.允许那些客户端访问我 res.header('Access-Control-Allow-Origin','*') // * 是允许使用人访问 // 2.允许客户端使用那些请求方法访问我 多个请求使用 , 来分开 res.header('Access-Control-Allow-Methods', 'get,post') next() }) ``` #### 访问非同源数据 服务器端解决方案 > 同源政策是浏览器给予 Ajax 技术的限制 服务器端是不存在同源政策限制 > 使用node中的第三方模块 request #### get请求 ```javascript request({ timeout:5000, // 设置超时 method:'GET', //请求方式 url:'', //url qs:{ //参数,注意get和post的参数设置不一样 xxx:"xxx", xxx:"xxx" } },function (error, response, body) { if (!error && response.statusCode == 200) { console.log(body); res.send(body) }else{ console.log("error"); } }); ``` #### post请求 ```javascript    request({ timeout:5000, // 设置超时 method:'GET', //请求方式 url:'xxx', //url form:{ //参数,注意get和post的参数设置不一样 xx:"xxx", xxx:"xxx", xxx:"xxx" } },function (error, response, body) { if (!error && response.statusCode == 200) { console.log(body); }else{ console.log("error"); } ``` #### withCredentials属性 > 在使用Ajax请求技术发送跨域请求时,默认情况下不会在请求中携带cookie信息 > > withCredentials:指定这涉及到跨域请求时,是否携带cookie信息,默认值为false > > Access-Control-Allow-Credentials:true 允许客户端发送请求携带cookie ```javascript // 允许客户端发送跨域请求时携带cookie信息 res.header('Access-Control-Allow-Creden tials', true); ``` # XML基础 ### XML是什么 XML的全称是 extensible markup language 代表可扩展标记语言 它的作用是传输和存储数据 ```xml /* 实例代码 */ <students> <student> <sid>001</sid> <name>小白</name> </student> <studend> <sid>002</sid> <name>二狗子</name> </studend> </students> ``` ### XML DOM XML DOM 即 XML 文档对象模型,是w3c 组织定义的一套操作 XML 文档对象的 API 浏览器会将 XML 文档解析成文档对象模型
2021-06-07
95℃
0
0
node跨域解决方案 ## 同源政策 #### 什么是同源? > 如果两个页面拥有相同的协议,域名和端口,那么这两个页面就属于同一个源,其中只要有一个不相同,就是不同源。 #### 同源政策的目的 > 同源政策是为了保证用户信息的安全,防止恶意的网站窃取数据,最初的同源政策是指A网站在客户端设置的cookie,B网站是不能访问的。 > > 随着互联网的发展,同源政策也越来越严格了,在不同源的情况下,其中有一项规定就是无法向非同源地址发送Ajax请求,如果有请求浏览器就会报错 #### 使用JSONP 解决同源限制问题 > jsonp 是 json with padding 的缩写,它不属于Ajax请求,但它可以模拟Ajax请求 1. 将不同源的服务器端请求地址写在script标签的src属性中 ```javascript <script src="http://localhost:3001/test"></script> ``` 2. 服务器端响应数据必须是一个函数的调用,真正要发送给客户端的数据需要找我函数调用的参数 ```javascript var data = 'fn({name: "xiaoke" , age: "16" })' res.send(data) ``` 3. 在客户端全局作用域下定义函数 fn ```javascript function fn (data) {} ``` 4. 在 fn 函数内部对服务器端返回的数据进行处理 ```javascript function fn (data) { console.log(data) } ``` #### CORS 跨域资源共享 > CORS:全称为 Cross-origin resource sharing 即跨域资源共享,它允许浏览器向跨域服务器发送Ajax请求,克服了Ajax 只能同源使用的限制 ```javascript origin: http://localhost:3000 ``` ##### 服务器端代码 ```javascript // 所有express框架得中间件 拦截所有的请求 // 拦截所有请求 app.use('*',function (req, res, next) { res.header('Access-Control-Allow-Origin', '*'); //这个表示任意域名都可以访问,这样写不能携带cookie了。 //res.header('Access-Control-Allow-Origin', 'http://www.baidu.com'); //这样写,只有www.baidu.com 可以访问。 res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild'); res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');//设置方法 if (req.method == 'OPTIONS') { res.send(200); // 意思是,在正常的请求之前,会发送一个验证,是否可以请求。 } else { next(); } }); ```
2021-06-07
77℃
0
0