![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：Uncorrected
Teacher's comments：
Collection
Collection
PHP开发步骤：
一，HTML前端部分
1. 分析页面结构：header 头部 body 主体 footer 底部
body主体部分又有多种布局方法:
两列布局：left right 左右两列
三列布局：
圣杯布局：
<!-- 内容区 --> <div class="container"> <div class="main">主体</div> <div class="left">左侧</div> <div class="right">右侧</div> </div>
圣杯布局的基本思路与实现步骤:
1.DOM结构的特点:
1.1: 必须一个父级容器container
1.2内部的三列,主体main必须在最前面,确保优先渲染,其次是left和right
---------------------------------------------------------------------
2.区块宽度和高度的特点:
2.1: main+left+right = 总宽度
2.2: 父区块container宽度 = main宽度
2.3: 宜先设置container宽度,如600px,main的width:100%即可;
2.4: 因为暂时无内容填充,需要设置一个最小高度min-height才可以看到效果,例如650px;
---------------------------------------------------------------------
3.三个区块必须全部左浮动:
3.1: 因为main区块占据了100%宽度,后面的left和right必须要被换行显示
3.2: left,right都是浮动元素,所以按浮动的顺序显示,left在前right在后
--------------------------------------------------------------------
4.将浮动区块left和right上移到main区块的指定位置
4.1: 通过给left和right设置负的左外边距margin-left来实现浮动区块的反向移动;
4.2: left必须跨越整个main区块才可以到达定位的起点: margin-left:-100%;
4.3: right区块是在右边显示,所以只要跨过自己的宽度就可以: margin-left:200px;
---------------------------------------------------------------------------
5. 给container添加内边距,进行挤压完成布局,这也是圣杯布局的精妙之处
5.1: 添加左右内边距padding,宽度等于left和right
5.2: 添加的左右边距其实就是后面的left和right的实际位置
---------------------------------------------------------------------------------
6. 将main区块的内容完整的显示出来
6.1: left和right占据了main区块的位置,覆盖掉了main区块的部分内容
6.2: 可以对left和right进行相对定位,让他们把占据的main空间的位置腾出来
6.3: 那么问题来了? left和right都是浮动元素,都是脱离了当前文档流的,可以使用相对定位吗?
6.4: 答案是肯定的,为什么呢? 相对定位的原则是:相对该元素原来的位置进行重新定位,元素处于文档流中只是一种
特殊情况,浮动元素可以看作处在一个特殊的由浮动元素组成的一个文档流中,是另一个世界.
6.5. 那么相对移动多少呢? 只要移动它们自身的宽度就可以了:
left: relative; left: -200px;(距离左边-200px)反向移动
right: relative; right: -200px;(距离右边-200px)反向移动
双飞翼布局 ：
<!-- 主体 --> <div class="container"> <div class="wrap"> <div class="main">主体</div> </div> <div class="left">左侧</div> <div class="right">右侧</div> </div>
三列经典的双飞翼布局的创建步骤与原理分析:
第1步: 创建一个大容器container,设置页面总宽度并左右居中
.container {
min-width: 1000px;
margin: auto;
background-color: yellow;
}第2步:创建三列DOM结构,顺序非常重要,
2.1主体content在前,其次是left和right
2.2主体content必须套一个父级块main,将样式加给它才可以
2.3其中main宽度100%,left,right宽度固定
2.4main,left,right的高度暂时先设置为固定值,有了内容填充时再设置为100%,随内容自适应变化
第3步:main,left,right全部左浮动,因为前面的wrap块宽度为100%,必须导致left,right全部被挤到了下面
第4步: left设置,margin:-1000px;或者 margin-left:-100%;
(100%就是父级块的宽度1000px,负数表示方向相反,即向左缩进,最终到达父块起始点:0,0)
第5步: right设置,参考left,只需要margin-left: -200px;
(注意,只要移动一个绝对值,把自己移上去到最后就可以了)
第6步: content内容块,添加左右外边距,将内容区挤压出来: margin: 0 200px;
并给一个宽度100%,直接引用父级块宽度
绝对定位布局：
<!-- 主体 --> <div class="main"> <div class="left">左</div> <div class="center">中</div> <div class="right">右</div> </div>
绝对定位三列布局的基本思路:
1. 先创建一个定位父级区块:relative
2. 左右侧边栏,采用约定定位
3. 中间主体使用maring外边距进行挤压形成
4. 如果定位父级定宽,中间区域就是定宽,否则自适应
多列布局：多用以下框架系统布局
2.分模块写页面框架（可以先用背景颜色把框架区分出来） 也可以用bootstrap栅格布局系统
Bootstrap分别将一行分割成12份，意思是你可以随意使用这12份，加起来要正好12。
使用方法：
1. 先引入 bootstrap 插件 <link rel="stylesheet" type="text/css" href="inc/bootstrap/css/bootstrap.min.css"> 2. 添加一个大容器 <div class="container"> 3. 开始分份布局 2+8+2 3+7+2 6+6 1+2+3+6 随便搭配只要保证加在一起是12 <div class="col-md-2" style="padding: 0px;"> <div class="col-md-8" style="padding: 0px;"> <div class="col-md-2" style="padding: 0px;"> </div>
屏幕分辨率划分依据
1. ( screen < 768px ): 超小屏幕 col-xs-x
2. (768px <= screen < 992px): 小型屏幕 col-sm-x
3. (992px <= screen < 1200) : 中型屏幕 col-md-x
4. (1200 <= screen ) : 大型屏幕 col-lg-x
3.在模块中再写布局框架 即嵌套框架
其实HTML CSS 都是化整为零的方法 把一大份分为几份 几份再分为几小份 几小份也可以再分 无限分
例如 body 分 header body booter 上中下三份 body 中间又分为 left main right 左中右 main中间又分 top base bottom 上中下 总之就是把页面区域化 碎片化划分来写样式
HTML 常用的元素标签
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,button,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,input,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,textarea,tfoot,th,thead,time,tr,tt,u,ul,var,video
CSS 常用的属性
width height line-height margin padding text-align --left right top bottom font-size -weight-family text-decoration: none display: block overflow: hidden; color background-image:url() background-position border: 1px solid #cbcbcb; border-radius opacity: 0.5;
二.PHP业务逻辑部分
数据库设计：确定表字段 （数据库系统概论）
减少数据冗余，避免数据维护异常，节约储存空间，高效的访问
避免慢查询：1.不合理或过多join 2.查询字段为null的表 3.like查询 4.text字段 5.没有索引的字段
设计步骤
需求分析：数据是什么，有哪些属性，数据和属性的特点（存储特点），数据的生命周期
1. 实体及实体之间的关系（11 1n nn）
2. 实体所包含的属性
3. 那些属性或属性的组合可以唯一标识一个实体
逻辑设计：使用ER图对数据库进行逻辑设计
1. 将需求转化为数据库的逻辑模型
2. 通过ER图的型式对逻辑模型进行展示
3. 同所选用的具体的DBMS系统无关
三大范式
第一范式：数据库表中的所有字段都是单一属性，不可再分的。这个单一属性是由基本数据类型所构成的。即第一范式要求数据库的表都是二维表。
第二范式：数据库的表中不存在非关键字段对任意候选关键字段的部分函数依赖。部分函数依赖是指存在着组合关键字中的某一关键字决定非关键字的情况。即所有但关键字段的表都符合第二范式。
第三范式：二范式在三范式之上，如果数据表中不存在非关键字段对任意候选关键字段的传递函数依赖规则则符合第三范式。
BC范式：如果复合关键字，则复合关键字之间也不能存在传递函数依赖关系。（即把第三范式中的非关键字段升级为关键字及其分关键字段）
物理设计：把逻辑设计转成物理设计--设计表的结构
1. 选择合适的数据库管理系统
2. 定义数据库，表及字段的命名规范
3. 根据所选的DBMS系统选择合适的字段类型 varchar/char如何选择等
4. 反范式化设计 即增加冗余，用空间换取效率的提升
Mysql常用引擎：
MylSAM 不支持事务。支持并发插入的表级锁。主要select，insert 。不易频繁读写。
MRG-MYISAM不支持事务。支持并发插入的表级锁。主要分段归档，数据仓库。不易全局查找过多的场景。
Innodb支持事务。支持MVCC的行级锁。主要事务处理。
Archive 不支持事务。行级锁。主要日志记录，只支持insert，select。不易需要随机读取，更新，删除。存储容量小。
Ndb cluster 支持事务。行级锁。主要高可用性。推荐使用。（mysql集群）
表及字段的命名规则
1. 可读性原则 （驼峰命名，但注意表名的大小写敏感）
2. 表意性原则 表明对象、数据内容、存储过程
3. 长名原则 尽可能少用或不用缩写
字段类型的选择原则
数据类型印象存储空间开销和查询性能。可以选择多数据类型时，优先数字，其次日期或二进制，最后字符串。同级别数据类型，优先占空间小的。
1. 同样的数据进行比较时（查询条件，join及排序）时，字符处理比数字慢。
2. 在数据库中，数据处理以页为单位，列的长度越小，利于性能提升。
Char和varchar如何选择
1. 数据长度差不多的选择char，数据长度不一致的时候varchar。
2. 列的最大数据长度小于50Byte，一般用char，但是如果这个列很少用，基于节省空间和减少I/O的考虑，可以选择varchar。
3. 一般不宜定义大于50Byte的char类型。
Decimal和float
1. decimal用于存储精确数据，float只能用于存储非精确数据。
2. float存储空间开销一般小于decimal（7位小数要4个字节，15位小数要8个字节）
时间类型
1. int 字段长度比datetime小，但是用不方便需要函数转换，只能存储到2038-1-19 11:14:07。在不经常查询时间的时候用int。
2. 存储的时间粒度 年月日小时分秒周
如何选择主键
1. 业务主键用于表示业务数据，进行表与标的之间的关联。数据库主键为了优化数据存储（Innodb不手动设主键会自动生成6字节隐含主键）。
2. 根据数据库的类型，考虑主键是否要顺序增长。
3. 主键的字段类型所占空间要尽可能的小，对于使用聚集索引方式存储的表，每个索引后都会附件主键信息。
避免使用外键约束
1. 虽然保持数据完整性，但是降低数据导入的效率。（高并发的时候每次查询都会检测是否符合外检）
2. 降低维护成本。
3. 虽然不建议使用外键，但是相关联的列上一样要建立索引。
避免使用触发器
1. 降低数据导入效率。
2. 可能会出现意想不到的数据异常。
3. 是业务逻辑变的复杂。
关于预留字段
1. 无法正确指导预留字段类型和存储内容。
2. 后期维护预留字段所要的成本同增加一个字段所需的成本是相同的。
3. 严禁使用预留字段。
反范式化
违反第三范式，通过空间来换取时间。
1. 减少表的关联数量。
2. 增加数据的读取效率。
3. 反范式化一定要适度。
维护优化：新的需求进行建表，索引优化，大表拆分
1. 维护数据字典 要记住字典中每个数字代表什么含义 可以使用第三方工具也可以使用备注字段来维护 comment’ ’ 。
2. 维护索引 where groupby orderby的从句 可选择性高的列要放到索引的前面 不要包括太长的数据类型 过多的索引会降低亵渎效率 定期维护索引碎片 sql语句中不要使用强制索引关键字。
3. 维维护表结构 列的变更 控制表的宽度和大小（拆分）。
4. 在适当的时候对表进行水平拆分（表结构相同，Hash key）或垂直拆分（中间切分表，表结构不同）。
表字段设计规范：不允许有null，日期字段一般使用int类型
适合的操作 批量操作（不适合逐条操作）
禁止使用select *查询（I/O浪费，表结构改了数据错误）
控制使用用户自定义函数（影响索引 使用函数则列中索引失效）
不要使用数据库中的全文索引（维护高，不适合中文）
建立索引规则：对热点查询字段建立的索引
索引的优点（查询快） 缺点（影响添加，更新，删除性能）
数据库表基本设计规则
0.重点,所有表必须有备注,必须有备注,必须有备注.
1.要有唯一索引UNIQUE,普通索引看情况增加
唯一索引是最后一道防线了,高并发的时候如果前端,代码,缓存都没有拦截住重复数据这里就会起到关键的作用
2.各个表中的同一个外键字段命名一定要一致(eg:商品编号(product_id),在商品属性表中,活动商品表中,供应商商品关联表中等等标中必须都叫product_id)方便维护
如果不一致则在后期表多的时候,维护起来特别麻烦,浪费时间,而且还不爽
3.数据库引擎最好都是innodb
有人说我不需要事务为可以不用innodb,是的,但是有些业务是一开始完全单表不需要事务,你设置了MyIASM,过了好久突然这些表需要用到事务了,你肯定不会记得当时这个表是MyIASM,然后就上线了,然后由于各种原因,数据不完整,也挺恶心的
可以参考文章:http://www.2cto.com/database/201503/385669.html
4.命名一定要驼峰,经典的驼峰,没啥说的
5.触发器啊存储过程啊能不用就别用,数据库迁移或者换数据库的时候比较烦人
6.如果需要标识数据的状态的字段一个就可以了,我的话就命名state,0未审核-1删除1,2,3,4,5..... 只要有涉及需要标识数据状态的往上增加就可以了,不要觉得一开始是5个节点,待审核(1),主管审核(2),经理审核(3),财务审核(4),完成(5)
之后在3后面增加了一个节点,总经理审核,你就要把总经理审核变成(4),然后,财务审核(5),完成(6),这样老数据的状态就全都乱了,正确的排序就应该是往后增加
待审核(1),主管审核(2),经理审核(3),总经理审核(6),财务审核(4),完成(5),以此类推举一反三,还有不要弄一些什么是否删除字段,是否提交,是否....是否...之类的字段,一个状态都可以标识出来了
7.表越大越需要一些冗余字段,大表跨表查询太慢了,还有如果用一些mycat之类的分库分片软件也是需要冗余字段的,不要觉得冗余不好,都是看具体情况具体分析的.
8.所有表需要有自增id,名字就交id即可
9.涉及有状态的数据的表必须有一些流程记录的表与之对应,一个信息从开始到结束的过程都要记录下来.
10.不是特别重要,我的习惯,所有的表都要有以下几个字段
create_user 创建人,create_time varchar(20) 创建日期
update_user 更新人,update_time varchar(20)更新日期
remark 备注说明的意思
这几个字段都是varchar字段标红的是我想说的,一开始time相关的字段用的都是date或者timespan,后来开发中由于好多时候系统内,系统外对接,之类的原因导致时间转换的地方比较麻烦,最终还是改为varchar了,真是太方便了,2017-04-18 17:30:00这个标准的格式19个就够了,向上凑整20
全表扫描
在互联网应用中，慎用：存储过程，外键等数据库工具
