项目介绍
一、pc端静态页面制作
1.小米官网静态页面制作
2.博雅互动静态页面制作
二、基础实例项目
1.花瓣网实例
1）思路：
a. 页面布局，浮动布局
b. 获取后台数据，赋值数组，创建不同的li和img，img通过该数组设置随机的imgsrc，高度也随机设置一个范围值；
c. 设置图片懒加载，对每个图片的宽高和浏览器的宽高进行比较，设置懒加载；
2）知识点：
a. 图片懒加载：
1）创建li和img标签，img标签不设置src，设置自定义属性realImg存储图片地址；设置li随机高度；
2）lazyLoad()函数，对img上的图片地址进行筛选，地址格式无误，赋值将realImg属性赋值img，然后将图片高度赋值给该parentNode父级节点；
3）图片正常加载条件；遍历所有的img，
判断条件： 该视图的总高度+视图卷去的高度+指定数值 > img元素到body元素的顶部距离（定值）
b. 页面累加
1）先创建50个li数据，当页面满足条件后，页面继续创建50个；
2）条件：视图总高度+视图卷去的高度+指定数值 > body元素的总高度
c. 回到顶部按钮的显示和隐藏
1）效果：页面在滚动超过一屏后，显示回到顶部按钮；小于一屏时，隐藏回到顶部按钮；
2）条件：视图的卷去高度scrollTop > 视图的总高度offsetHeight
d. 回到顶部按钮的点击效果
1）效果1：点击按钮，页面滚动回到顶部；
实现：创建定时器，创建运动规则，获取总长度，规定时间，计算出速率，计算出实时长度，然后赋值scrollTop值，达到位置实时更新，页面滚动效果；
注意点：边界值判断；
2）效果2：在回到顶部期间，滑动滚轮，立刻停下；
实现：创建开关bok,初始值为true，在onScroll事件函数中，给bok赋值true,并在开始条件判断，当bok为true时，停止toTop事件函数中的定时器；而在toTop事件函数中，每次触发就给bok赋值false;
2.fullpage全屏页面滚动项目
1）效果：分屏显示，导航栏点击跳转到某一页
2）知识点：jquery fullpage插件
3）fullpage知识点：
a.整个项目中，最重要的是active类名的设置使用；页面滚动到某一页码：导航，页码，右侧导航都会添加一个active类名；
4）思路
a.屏幕效果：过渡效果，前提必须添加定位，才能过渡变化；
过渡变化需要有初始位置和终点位置
初始位置：设置在每个元素身上；
终点位置：在session添加active的情况下，设置上终点位置；
过渡效果：设置在终点位置元素上，transition
触发：屏幕在滚动后，会默认给session设置上active类名，删除其他session的active类名；
b.默认跳转到第一屏：window.location.hash='firstPage'也能默认加载第一页；
c.导航下面滑块效果知识：
事件绑定：mouseover mouseleave click
mouseover:通过事件委托，利用事件的冒泡思想，来获取事件源，进而进行设置；
mouseleave:与mouseout区别，在于会将子元素作为一个整体
d.afterLoad和onLeave区别：
onLeave:进入下一页前进行的操作；
afterLoad:进入下一页之后，进行的操作；
3.微金所网站项目
1）项目介绍：基于bootStrap和jquery构建的响应式页面
2）知识点：
css样式：
.pull-left .pull-right 左右浮动
.clearfix类名 清除浮动影响
.visible-xs-block .visible-xs-inline .hidden-xs 响应式显示和隐藏
padding的设置代替行高和高度的设置；更加的灵活和响应式
letter-spacing: 设置字与字之间的间距；
js插件：
标签页：制作导航和页面分屏显示；
collapse：折叠菜单，应用在汉堡图制作中；
tooltip:工具提示框
html标签：
session：标签可作为页面内容分块；作为外部容器使用
事件：
resize：拉伸事件，代码：$(window).on("resize",resizeTo).trigger("resize") trigger作用是页面加载后触发resize事件；
作用：页面拉伸和页面开始加载时，获取不同的页面可视区域的宽度，进而设置不同代码；
媒体查询设置css样式
代码:@media (min-width: 768px){ xxxxx } 屏幕可视宽度大于等于768px时，执行的css样式；
移动端轮播图左右滑动切换事件
touchstart事件：触摸开始时触发，通过e.targetTouches[0].clientX获取触摸点起始位置
touchmove事件：触摸过程中触发，通过e.targetTouches[0].clientX获取实时的触摸点位置
touchend事件：触摸结束时触发，start和move中两个位置点差值绝对值，与设定的距离进行比较，决定是否触发轮播图；
通过判断正负值，来JS设置轮播图的向前向后移动；
touchEvent事件对象：targetTouches和touches属性，属性值为数组，数组长度为1，数组元素为对象，对象中有属性clientX,clientY,pageX,pageY
栅格系统知识点：
col必须设置在.row中，.row设置在.container中；
col-md-6中存在左右padding，可以利用此padding，作为两个栅格之间的距离；
印章的制作知识点：
利用伪类before，设置定位，基本样式，transform(rotate)旋转；设置content文字，通过letter-spacing设置字间距；
meta标签的三个作用：
1)字符编码格式utf-8设置：<meta charset="urf-8">
2)viewport设置 <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0">设置屏幕宽度为设备宽度，禁止用户手动调整缩放，初始比例为1.0
3)浏览器兼容模式：<meta http-equiv="X-UA-Compatible" content="IE=edge"> 告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面。
favicon.ico图片的设置：
代码：<link rel="shorcut icon" href="icon图片地址” type="image/x-icon"/>
想在一个较小屏幕下展示一个超宽的图片，并让图片居中显示
1）两种方法：
换用背景图的方式：设置background-position:center center;
将img元素绝对定位：设置left: 50%,margin-left=-width/2 居中显示；
- QQ音乐移动端项目
1）项目介绍
2）项目依赖
3）项目知识点
a. less知识：
@import：导入less文件， 效果呈现必须引入less.min.js文件；
@：定义变量
混合使用: 设置类名，定义样式，在其他的元素中，直接调用类名使用；
带参数使用：可以设置默认参数，使用时可设置实参；
@arguments: 定义参数时，有多个参数，可以在里面通过@arguments来获取所有的参数进行赋值，一般用于padding,margin等复合值设置时使用；
导引表达式： 通过when来对参数进行判断，若满足条件则设置指定类型；
嵌套：一级一级编辑层叠样式表，&代表上一级元素；
运算：变量间的运算，中间必须加空格；
b.单位px em rem 三者差别和应用场景
三者差别：
1) px 浏览器默认字体大小为16px;
不足之处：值固定，没有为视障读者的扩展,以适应移动设备
2) em 为相对长度单位；相对于当前对象内文本的字体尺寸，如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸，国外使用比较多
不足之处：em是继承父元素的字体大小，可是当父元素字体大小改变时，又得重新计算了，这不怎么方便
3）rem: CSS3新增的一个相对长度单位，只相对根目录即HTML元素
css：配合媒体查询，根据屏幕尺寸的不同来给html设置不同的字体大小；
JS：根据不同屏幕的大小，按比例变化，可通过JS代码进行设置；
规定指定屏幕大小下的字体大小值，获取当前设置的屏幕尺寸，按比例计算出字体大小，再获取html根标签，设置字体大小；则完成按比例缩放的效果；
应用场景：px和em应用在PC端，rem应用在移动端；
4）项目思路：
a. 移动端必须设置meta标签，设置viewport属性；
b. html字体设置：使用rem单位，js获取屏幕宽度，进而计算出字体缩放比例，然后重新设置html根标签的字体大小；达到响应式页面效果；
标准值：屏幕宽度640px 对应的fontSize为100px;
事件：window绑定resize事件，实时获取屏幕宽度设置计算后的字体值，并设置trigger，页面加载就触发；
边界值：屏幕宽度在大于640px后，停止放大；
c. 静态页面的制作
css3属性：
模糊度：filter: blur(10px)
d. 歌词区域
1）歌词向上运动的前提：
main容器添加相对定位，子容器lyc添加绝对定位，通过改变top值，来实现上移的效果；
main容器的高度为定位，设置overflow:hidden，子容器lyc高度被歌词内容撑开，高度为auto;
header和footer区域高度为定值，通过JS计算出main的高度；
2）歌词插入
ajax: 发送请求，获取后台歌词数据；
数据切割拼接成字符串，插入到DOM结构中，注意：jQuery中获取元素必须在插入后，再获取；
e. 底部区域
1）进度条的静态页面设置
设置两个形状相同的矩形条，一个代表总长度，一个通过定位浮在上面，宽度不设置，通过音乐的播放时长，计算出宽度每秒增加的长度，就会呈现出，随着时间的增加，进度条不断增加；
f: audio对象
1）属性：
currentTime: 获取当前播放的时间；
duration: 音频的总长度；
2）方法：
play()：播放音乐；
pause()：暂停音乐；
load()：重新加载音乐；
g. 效果
1）歌词更新效果：
歌词点亮：通过jquery上的filter属性，定时器中分割当前时间，然后过滤所有的p只要满足条件，则设置active类名；
筛选代码：$('.lyc').children('p').filter([data-sumdate="${cutTime}"])
歌词移动：通过获取p的索引值，来设置top的偏移量，并在运动容器中设置transition过渡效果；
2）进度条的效果
获取总的duration值，计算出每秒宽度变化的长度，定时器内设置；
5）待解决问题：
a.onloadstart,oncanpaly不能绑定使用；不能获取duration值；
b. 页面刚一加载，不能自动播放；待细致了解audio的使用
c. jquery中的订阅发布待复习；
二、Node项目 - 论坛网站项目
1）项目依赖:
a. 前端：jquery bootstrap ejs
b. 后台：express
c. 数据库： mongodb
d. 插件：express-session formidable gm silly-datetime
f. node系统模块： path fs
e. 自己封装库：db.js md5.js cutImg.js- 项目知识点：
a. 项目目录架构
M:modles 存储与后台进行交互的文件，如封装的mongodb的库：db.js dbsetting.js 密码加密：md5.js
V: views 存储页面文件ejs模板文件；用于渲染视图的文件
C: controllers 连接M和app.js之间的介质 router.js
public: 静态资源目录
avatar: 存储裁切后的头像
uploads: formidable上传的头像的文件夹；
app.js: 服务器
mongoDB: 本地数据库
package.json: 项目依赖
readme.txt: 项目说明文档
b. 文件角色
1）app.js:
express三步创建服务器构架
设置ejs模板引擎: 通过res.render(xxx)，渲染ejs文件；
设置静态资源目录： 加载静态资源
设置路由请求：根据不同的路由请求，加载不同的页面
引入express-session，设置其中间件，引入session作为路由间传递参数的介质；
引入controllers中的router.js文件；
2）router.js:
作用：构建app.js中路由的函数体；与models中的文件进行交流
引入db.js md5.js等自定义文件，进而操作本地mongodb数据库；
引入formidable,silly-datetime,gm等第三方模块，接收post请求数据并上传文件，转化时间格式，裁图等；
3）db.js dbsetting.js.md5.js：
作用：封装的js库，用于连接本地mongodb数据库，进行存储和获取数据；md5.js对密码进行加密；
c. 项目结构
1）ejs不同页面的呈现：
if条件判断：通过ejs文件在render时，传入的参数进行控制，ejs文件中添加if条件判断，不同的布尔值，显示指定的页面代码；
for循环：通过<% %>花式赋值，进行for循环加载页面；用vue的效果；
<%if(userAry.length>0){%> <%for(var i=0; i<userAry.length; i++){%> <div class="pane"> <div class="imgcon col-xs-1"><img src="/<%= userAry[i].imgSrc%>" alt="tu"></div> <div class="usercon col-xs-11"><%= userAry[i].name%></div> </div> <%}%> <%}%>
2）session的设置：登录成功后，设置session，内容为对象，
对象属性：
login: 判断登录状态，进而呈现不同的页面；
user: 用户名；
imgsrc: 当前用户头像地址；
3）页面跳转
前端界面中跳转：window.location.href="/forum"
服务器端页面跳转：res.redirect("/forum")
4）next()：
作用：跳过，继续向下查找；也可以起到阻止程序执行的目的；
实例：此项目中我的说说界面的渲染，在登录状态下，页面加载，在未登录状态下，next()；去加载404页面；
5）404页面：
作用：设置use请求/，作为接盘侠，当页面地址不正确时，加载404页面；
配合：每个请求中，发现err后，均设置为next()，则会加载404页面；
6）上传头像
前端发送请求方法：两种
1）form表单提交，不能对响应的文件进行操作；
标签设置：action method enctype属性
enctype属性值：multipart/form-data
通过submit提交按钮，自动提交；
2）('#myimg')[0].files[0])
ajax中data属性值，赋值formData； 服务器端处理上传的文件：服务端formidable接收，修改上传后的文件路径和文件名： 1)fs.rename(oldpath,newpath,callback)2) newpath包括：文件的路径+源文件名的名字+时间戳+随机数+源文件的后缀名 源文件的名和后缀：fs.parse(name)` => obj obj.ext 后缀名 obj.name 文件名
时间戳：silly-datetime
随机数：Math.random()
7）裁切图像
1）引用封装的cutImg库，进行裁切功能；
2）与图片上传功能配合使用；
3）依赖：gm formidable fs path silly-datetime 前提需下载软件GraphicsMagick
4）uploads文件夹作为图片上传后的文件夹，avatar文件夹作为图片裁切后的文件夹 - 项目具体
a. 头部导航栏：通过session中设置的login布尔值，配合ejs模板中的条件判断，进而决定什么时候显示什么；
b. 留言区域：页面加载，发送请求，获取后台数据，显示界面；
4）注意点：
a. 设置静态资源目录时，最好设置上特定请求，不要只设置斜杠，如app.use('/avater',express.static('./avater'))引入时，在路径前添加'/avater';即可加载此目录下的文件；
- 项目知识点：
三、Vue项目
移动端项目：信息管理系统
1.涉及到的技术栈：
1）vue vue-router构建基本构架
2）webpack压缩打包 webpack-dev-server开发环境测试
3）axios 前端与后台间的数据交互
4）mui mint-ui移动端页面构建 其中mui引入的静态资源 mint-ui下载插件引入
5）其他插件知识：moment转化日期 vue-preview图片预览功能
6）设置后台服务器的插件：
express：构建基本服务器框架
cors：跨域请求设置插件；
formidable：post请求获取数据 图片上传功能；
mongodb：本地数据库存储；
2.项目思路总结
1）顶部通栏 mint-ui
九宫格 mui
底部选项卡 mui =>引入自定义图标iconfont 阿里巴巴矢量图标库
轮播图：mint-ui
2）路由知识：
重定向redirect
路由跳转
params设置
路由嵌套
多视图
3.项目中的知识点
1）底部选项卡点亮效果：设置router-link中的默认点亮类名，配合mui-active使用，完成效果；
2）拦截器interceptor，Axios设置，拦截请求和响应时，设置页面加载效果；
3）过滤器filter，Vue类设置，过滤获取的时间数据，通过moment转化为指定格式的时间；也可以使用silly-datetime
4）mint-ui中的lazy load，图片懒加载设置；只需设置v-lazy绑定变量图片地址；
5）vue-preview移动端图片预览插件的使用；
6）封装两个js文件，一个为子组件传递父组件参数的vue实例，一个为封装的localStorage的操作对象；
7）localStorage本地存储的知识；
8）路由跳转中的钩子函数beforeRouteEnter，在路由跳转前后，进行操作，通过在next()中操作实例
9）给router-view添加过渡动画效果，通过transition包裹，设置样式，但需设置mode参数，规定两个过渡效果发生的先后顺序；
10）购物车总计部分的制作：使用计算属性，遍历整个数据，判断isPicked的布尔值，进行累加，实时更新；
11）图片懒加载功能实现；mui中是在图文列表时，进行的图片懒加载； mint-ui中是在大的图片时使用；
四、React项目
项目：视频管理系统
1、涉及的技术栈
1）react，react-dom，react-router 构建基本骨架
2）webpack压缩打包 webpack-dev-server开发环境测试
3）material-ui Ant Design构建前端页面
material-ui组件：
栅格布局：Grid
应用栏：AppBar
纸张：Paper
下滑线：Divder
菜单栏：Menus
卡片：Cards
Ant Design组件：
栅格：Grid
布局：Layout
导航菜单：Menu
按钮：Button
图标：Icon
4）expresss构建后台服务器，连接mongodb本地数据库，存储数据；
5）封装fetch方法，发送请求，获取和提交数据
6）登录注册功能中localStorage的设置；服务端session的设置；
7）react-addons-css-transition-group插件设置css3的运动效果
8）阿里巴巴矢量图标库iconfont的自定义引入；
项目简结
项目简介
一、前端页面项目
1.花瓣网站项目
1）项目介绍：本网站主要是一个图片展示网站，将图片以瀑布流的样式展现；
2）项目知识：原生封装工具库的使用，页面布局，浮动布局，图片懒加载，js盒子模型，滚动事件，定时器
3）项目效果：通过滚动页面，展示不同的图片，图片懒加载，当点击回到顶部按钮，页面滚动回到顶部，当回到顶部过程中，滑动滚轮，滚动立刻停止；
2.fullpage全屏滚动页面项目
1）项目介绍：依赖jquey的插件fullpage.js开发的全屏页面滚动网站
2）项目依赖：jquery fullpage.js
3) 项目知识：
a. fullpage.js的基本架构和常见问题解决 onLeave和afterLoad参数设置；
b. 过渡效果transition，变形transform，配合实现动画效果；
c. 事件：
事件委托，冒泡原理；事件对象，事件源；
mouseover、mouseleave、mouseout、mouseenter四者之间的差别和应用场景；
3.微金所网站项目
1）项目介绍：依赖jquery和bootstrap开发的响应式网站页面；（pc端和移动端）
2）项目依赖：jquery bootstrap
3）项目知识：
a. bootstrap构造页面响应式架构，导航栏nav，轮播图carousel，汉堡图collapse；
b. meta属性设置及含义；
c. jquery中trigger事件绑定resize事件；获取可视区域client宽度；
d. 媒体查询css样式设置，设置不同屏幕可视宽度下的css样式呈现；
e. 移动端touchEvent事件；事件touchstart,touchmove,touchend绑定，制作移动端轮播图的左右滑动效果；
f. 伪类before设计印章效果；利用transform(rotate）旋转和content属性创建；
4.QQ音乐移动端项目
1）项目介绍：移动端的音乐播放界面，与qq音乐界面相似；
2）项目依赖：zepto.js html5 css3 less
3）项目知识：
a. 移动端的响应式界面：meta rem的使用；
b. 音乐播放与歌词部分的同步运动
c. 歌词部分的后台数据获取，切割插入DOM结构
d. audio对象属性currentTime,duration 方法：paly() pause() load()
e. css3过渡transition animate filter属性；
二、Node项目
- 论坛网站项目
1）项目介绍：论坛网站，登录注册，留言板，上传本地图片，裁剪图片， 本地数据库存储
2）项目依赖：
a. 前端：jquery bootstrap ejs
b. 后台：express
c. 数据库： mongodb
d. 插件：path fs crypto express-session formidable gm silly-datetime
f：自己封装库：db.js md5.js cutImg.js
3）项目知识结构：
a. 项目目录架构：
M:modles 存储与后台进行交互的文件，如封装的mongodb的库：db.js dbsetting.js 密码加密：md5.js
V: views 存储页面文件ejs模板文件；用于渲染视图的文件
C: controllers 连接M和app.js之间的介质 router.js
public: 静态资源目录
avatar: 存储裁切后的头像
uploads: formidable上传的头像的文件夹；
app.js: 服务器
mongoDB: 本地数据库
package.json: 项目依赖
readme.txt: 项目说明文档
b. 项目涵盖知识点：
1）bootstrap前端页面构建
2）express构件服务器，静态资源目录设置，跨域设置，ejs模板引擎设置；
3）mongodb数据库操作JS封装，操作数据库中的数据；
4）views视图中ejs模板，ejs使用，服务器端渲染ejs页面；
5）前端：jquery中ajax发送请求，上传本地文件；服务器端：formidable接收上传文件，并修改路径文件名；
6）node模块crypto，封装md5.js文件，用于密码的md5加密；
7）session知识，express-session模块设置session，用于服务器端路由间的数据传递；
8）上传头像后，对头像进行裁切，使用封装的cutImg.js文件；依赖gm模块；
9）get，post，use三个请求的差别和使用；
三、Vue项目
1.移动端信息管理系统
1）项目介绍：
3）项目内容：
1.vue vue-router构建基本构架；vue-router：路由跳转，重定向，路由嵌套，多视图，router运用；
2.webpack压缩打包 webpack-dev-server开发环境测试；
3.axios 前端与后台间的数据交互；拦截器interceptor，拦截请求和响应；
4.mui与mint-ui配合构建移动端页面
5.vue-preview图片预览插件的使用；
6.vue过渡动画效果；
7.mint-ui下拉组件loadmore的使用；
7.mui图片懒加载；
8.自定义icon图标引入；
四、React项目 - 视频管理系统
1）项目介绍：具有视频搜索，视频存储功能的个人管理系统网站
2）项目依赖：react react-dom react-router webpack material-ui antd express mongodb
3）项目知识:
1）react，react-dom，react-router 构建基本骨架
2）webpack压缩打包 webpack-dev-server开发环境测试
3）material-ui Ant Design构建前端页面
4）expresss构建后台服务器，连接mongodb本地数据库，存储数据；
5）封装fetch方法，发送请求，获取和提交数据
6）登录注册功能中localStorage的设置；服务端session的设置；
7）react-addons-css-transition-group插件设置css3的运动效果
8）阿里巴巴矢量图标库iconfont的自定义引入；
网友评论