項目介紹
一、pc端靜態(tài)頁面制作
1.小米官網(wǎng)靜態(tài)頁面制作
2.博雅互動靜態(tài)頁面制作
二、基礎(chǔ)實例項目
1.花瓣網(wǎng)實例
1）思路：
a. 頁面布局，浮動布局
b. 獲取后臺數(shù)據(jù)，賦值數(shù)組，創(chuàng)建不同的li和img，img通過該數(shù)組設(shè)置隨機的imgsrc，高度也隨機設(shè)置一個范圍值；
c. 設(shè)置圖片懶加載，對每個圖片的寬高和瀏覽器的寬高進行比較，設(shè)置懶加載；
2）知識點：
a. 圖片懶加載：
1）創(chuàng)建li和img標簽，img標簽不設(shè)置src，設(shè)置自定義屬性realImg存儲圖片地址；設(shè)置li隨機高度；
2）lazyLoad()函數(shù)，對img上的圖片地址進行篩選，地址格式無誤，賦值將realImg屬性賦值img，然后將圖片高度賦值給該parentNode父級節(jié)點；
3）圖片正常加載條件；遍歷所有的img，
判斷條件： 該視圖的總高度+視圖卷去的高度+指定數(shù)值 > img元素到body元素的頂部距離（定值）
b. 頁面累加
1）先創(chuàng)建50個li數(shù)據(jù)，當頁面滿足條件后，頁面繼續(xù)創(chuàng)建50個；
2）條件：視圖總高度+視圖卷去的高度+指定數(shù)值 > body元素的總高度
c. 回到頂部按鈕的顯示和隱藏
1）效果：頁面在滾動超過一屏后，顯示回到頂部按鈕；小于一屏?xí)r，隱藏回到頂部按鈕；
2）條件：視圖的卷去高度scrollTop > 視圖的總高度offsetHeight
d. 回到頂部按鈕的點擊效果
1）效果1：點擊按鈕，頁面滾動回到頂部；
實現(xiàn)：創(chuàng)建定時器，創(chuàng)建運動規(guī)則，獲取總長度，規(guī)定時間，計算出速率，計算出實時長度，然后賦值scrollTop值，達到位置實時更新，頁面滾動效果；
注意點：邊界值判斷；
2）效果2：在回到頂部期間，滑動滾輪，立刻停下；
實現(xiàn)：創(chuàng)建開關(guān)bok,初始值為true，在onScroll事件函數(shù)中，給bok賦值true,并在開始條件判斷，當bok為true時，停止toTop事件函數(shù)中的定時器；而在toTop事件函數(shù)中，每次觸發(fā)就給bok賦值false;
2.fullpage全屏頁面滾動項目
1）效果：分屏顯示，導(dǎo)航欄點擊跳轉(zhuǎn)到某一頁
2）知識點：jquery fullpage插件
3）fullpage知識點：
a.整個項目中，最重要的是active類名的設(shè)置使用；頁面滾動到某一頁碼：導(dǎo)航，頁碼，右側(cè)導(dǎo)航都會添加一個active類名；
4）思路
a.屏幕效果：過渡效果，前提必須添加定位，才能過渡變化；
過渡變化需要有初始位置和終點位置
初始位置：設(shè)置在每個元素身上；
終點位置：在session添加active的情況下，設(shè)置上終點位置；
過渡效果：設(shè)置在終點位置元素上，transition
觸發(fā)：屏幕在滾動后，會默認給session設(shè)置上active類名，刪除其他session的active類名；
b.默認跳轉(zhuǎn)到第一屏：window.location.hash='firstPage'也能默認加載第一頁；
c.導(dǎo)航下面滑塊效果知識：
事件綁定：mouseover mouseleave click
mouseover:通過事件委托，利用事件的冒泡思想，來獲取事件源，進而進行設(shè)置；
mouseleave:與mouseout區(qū)別，在于會將子元素作為一個整體
d.afterLoad和onLeave區(qū)別：
onLeave:進入下一頁前進行的操作；
afterLoad:進入下一頁之后，進行的操作；
3.微金所網(wǎng)站項目
1）項目介紹：基于bootStrap和jquery構(gòu)建的響應(yīng)式頁面
2）知識點：
css樣式：
.pull-left .pull-right 左右浮動
.clearfix類名 清除浮動影響
.visible-xs-block .visible-xs-inline .hidden-xs 響應(yīng)式顯示和隱藏
padding的設(shè)置代替行高和高度的設(shè)置；更加的靈活和響應(yīng)式
letter-spacing: 設(shè)置字與字之間的間距；
js插件：
標簽頁：制作導(dǎo)航和頁面分屏顯示；
collapse：折疊菜單，應(yīng)用在漢堡圖制作中；
tooltip:工具提示框
html標簽：
session：標簽可作為頁面內(nèi)容分塊；作為外部容器使用
事件：
resize：拉伸事件，代碼：$(window).on("resize",resizeTo).trigger("resize") trigger作用是頁面加載后觸發(fā)resize事件；
作用：頁面拉伸和頁面開始加載時，獲取不同的頁面可視區(qū)域的寬度，進而設(shè)置不同代碼；
媒體查詢設(shè)置css樣式
代碼:@media (min-width: 768px){ xxxxx } 屏幕可視寬度大于等于768px時，執(zhí)行的css樣式；
移動端輪播圖左右滑動切換事件
touchstart事件：觸摸開始時觸發(fā)，通過e.targetTouches[0].clientX獲取觸摸點起始位置
touchmove事件：觸摸過程中觸發(fā)，通過e.targetTouches[0].clientX獲取實時的觸摸點位置
touchend事件：觸摸結(jié)束時觸發(fā)，start和move中兩個位置點差值絕對值，與設(shè)定的距離進行比較，決定是否觸發(fā)輪播圖；
通過判斷正負值，來JS設(shè)置輪播圖的向前向后移動；
touchEvent事件對象：targetTouches和touches屬性，屬性值為數(shù)組，數(shù)組長度為1，數(shù)組元素為對象，對象中有屬性clientX,clientY,pageX,pageY
柵格系統(tǒng)知識點：
col必須設(shè)置在.row中，.row設(shè)置在.container中；
col-md-6中存在左右padding，可以利用此padding，作為兩個柵格之間的距離；
印章的制作知識點：
利用偽類before，設(shè)置定位，基本樣式，transform(rotate)旋轉(zhuǎn)；設(shè)置content文字，通過letter-spacing設(shè)置字間距；
meta標簽的三個作用：
1)字符編碼格式utf-8設(shè)置：<meta charset="urf-8">
2)viewport設(shè)置 <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0">設(shè)置屏幕寬度為設(shè)備寬度，禁止用戶手動調(diào)整縮放，初始比例為1.0
3)瀏覽器兼容模式：<meta http-equiv="X-UA-Compatible" content="IE=edge"> 告訴IE瀏覽器，IE8/9及以后的版本都會以最高版本IE來渲染頁面。
favicon.ico圖片的設(shè)置：
代碼：<link rel="shorcut icon" href="icon圖片地址” type="image/x-icon"/>
想在一個較小屏幕下展示一個超寬的圖片，并讓圖片居中顯示
1）兩種方法：
換用背景圖的方式：設(shè)置background-position:center center;
將img元素絕對定位：設(shè)置left: 50%,margin-left=-width/2 居中顯示；
- QQ音樂移動端項目
1）項目介紹
2）項目依賴
3）項目知識點
a. less知識：
@import：導(dǎo)入less文件， 效果呈現(xiàn)必須引入less.min.js文件；
@：定義變量
混合使用: 設(shè)置類名，定義樣式，在其他的元素中，直接調(diào)用類名使用；
帶參數(shù)使用：可以設(shè)置默認參數(shù)，使用時可設(shè)置實參；
@arguments: 定義參數(shù)時，有多個參數(shù)，可以在里面通過@arguments來獲取所有的參數(shù)進行賦值，一般用于padding,margin等復(fù)合值設(shè)置時使用；
導(dǎo)引表達式： 通過when來對參數(shù)進行判斷，若滿足條件則設(shè)置指定類型；
嵌套：一級一級編輯層疊樣式表，&代表上一級元素；
運算：變量間的運算，中間必須加空格；
b.單位px em rem 三者差別和應(yīng)用場景
三者差別：
1) px 瀏覽器默認字體大小為16px;
不足之處：值固定，沒有為視障讀者的擴展,以適應(yīng)移動設(shè)備
2) em 為相對長度單位；相對于當前對象內(nèi)文本的字體尺寸，如當前對行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對于瀏覽器的默認字體尺寸，國外使用比較多
不足之處：em是繼承父元素的字體大小，可是當父元素字體大小改變時，又得重新計算了，這不怎么方便
3）rem: CSS3新增的一個相對長度單位，只相對根目錄即HTML元素
css：配合媒體查詢，根據(jù)屏幕尺寸的不同來給html設(shè)置不同的字體大??；
JS：根據(jù)不同屏幕的大小，按比例變化，可通過JS代碼進行設(shè)置；
規(guī)定指定屏幕大小下的字體大小值，獲取當前設(shè)置的屏幕尺寸，按比例計算出字體大小，再獲取html根標簽，設(shè)置字體大小；則完成按比例縮放的效果；
應(yīng)用場景：px和em應(yīng)用在PC端，rem應(yīng)用在移動端；
4）項目思路：
a. 移動端必須設(shè)置meta標簽，設(shè)置viewport屬性；
b. html字體設(shè)置：使用rem單位，js獲取屏幕寬度，進而計算出字體縮放比例，然后重新設(shè)置html根標簽的字體大??；達到響應(yīng)式頁面效果；
標準值：屏幕寬度640px 對應(yīng)的fontSize為100px;
事件：window綁定resize事件，實時獲取屏幕寬度設(shè)置計算后的字體值，并設(shè)置trigger，頁面加載就觸發(fā)；
邊界值：屏幕寬度在大于640px后，停止放大；
c. 靜態(tài)頁面的制作
css3屬性：
模糊度：filter: blur(10px)
d. 歌詞區(qū)域
1）歌詞向上運動的前提：
main容器添加相對定位，子容器lyc添加絕對定位，通過改變top值，來實現(xiàn)上移的效果；
main容器的高度為定位，設(shè)置overflow:hidden，子容器lyc高度被歌詞內(nèi)容撐開，高度為auto;
header和footer區(qū)域高度為定值，通過JS計算出main的高度；
2）歌詞插入
ajax: 發(fā)送請求，獲取后臺歌詞數(shù)據(jù)；
數(shù)據(jù)切割拼接成字符串，插入到DOM結(jié)構(gòu)中，注意：jQuery中獲取元素必須在插入后，再獲??；
e. 底部區(qū)域
1）進度條的靜態(tài)頁面設(shè)置
設(shè)置兩個形狀相同的矩形條，一個代表總長度，一個通過定位浮在上面，寬度不設(shè)置，通過音樂的播放時長，計算出寬度每秒增加的長度，就會呈現(xiàn)出，隨著時間的增加，進度條不斷增加；
f: audio對象
1）屬性：
currentTime: 獲取當前播放的時間；
duration: 音頻的總長度；
2）方法：
play()：播放音樂；
pause()：暫停音樂；
load()：重新加載音樂；
g. 效果
1）歌詞更新效果：
歌詞點亮：通過jquery上的filter屬性，定時器中分割當前時間，然后過濾所有的p只要滿足條件，則設(shè)置active類名；
篩選代碼：$('.lyc').children('p').filter([data-sumdate="${cutTime}"])
歌詞移動：通過獲取p的索引值，來設(shè)置top的偏移量，并在運動容器中設(shè)置transition過渡效果；
2）進度條的效果
獲取總的duration值，計算出每秒寬度變化的長度，定時器內(nèi)設(shè)置；
5）待解決問題：
a.onloadstart,oncanpaly不能綁定使用；不能獲取duration值；
b. 頁面剛一加載，不能自動播放；待細致了解audio的使用
c. jquery中的訂閱發(fā)布待復(fù)習(xí)；
二、Node項目 - 論壇網(wǎng)站項目
1）項目依賴:
a. 前端：jquery bootstrap ejs
b. 后臺：express
c. 數(shù)據(jù)庫： mongodb
d. 插件：express-session formidable gm silly-datetime
f. node系統(tǒng)模塊： path fs
e. 自己封裝庫：db.js md5.js cutImg.js- 項目知識點：
a. 項目目錄架構(gòu)
M:modles 存儲與后臺進行交互的文件，如封裝的mongodb的庫：db.js dbsetting.js 密碼加密：md5.js
V: views 存儲頁面文件ejs模板文件；用于渲染視圖的文件
C: controllers 連接M和app.js之間的介質(zhì) router.js
public: 靜態(tài)資源目錄
avatar: 存儲裁切后的頭像
uploads: formidable上傳的頭像的文件夾；
app.js: 服務(wù)器
mongoDB: 本地數(shù)據(jù)庫
package.json: 項目依賴
readme.txt: 項目說明文檔
b. 文件角色
1）app.js:
express三步創(chuàng)建服務(wù)器構(gòu)架
設(shè)置ejs模板引擎: 通過res.render(xxx)，渲染ejs文件；
設(shè)置靜態(tài)資源目錄： 加載靜態(tài)資源
設(shè)置路由請求：根據(jù)不同的路由請求，加載不同的頁面
引入express-session，設(shè)置其中間件，引入session作為路由間傳遞參數(shù)的介質(zhì)；
引入controllers中的router.js文件；
2）router.js:
作用：構(gòu)建app.js中路由的函數(shù)體；與models中的文件進行交流
引入db.js md5.js等自定義文件，進而操作本地mongodb數(shù)據(jù)庫；
引入formidable,silly-datetime,gm等第三方模塊，接收post請求數(shù)據(jù)并上傳文件，轉(zhuǎn)化時間格式，裁圖等；
3）db.js dbsetting.js.md5.js：
作用：封裝的js庫，用于連接本地mongodb數(shù)據(jù)庫，進行存儲和獲取數(shù)據(jù)；md5.js對密碼進行加密；
c. 項目結(jié)構(gòu)
1）ejs不同頁面的呈現(xiàn)：
if條件判斷：通過ejs文件在render時，傳入的參數(shù)進行控制，ejs文件中添加if條件判斷，不同的布爾值，顯示指定的頁面代碼；
for循環(huán)：通過<% %>花式賦值，進行for循環(huán)加載頁面；用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的設(shè)置：登錄成功后，設(shè)置session，內(nèi)容為對象，
對象屬性：
login: 判斷登錄狀態(tài)，進而呈現(xiàn)不同的頁面；
user: 用戶名；
imgsrc: 當前用戶頭像地址；
3）頁面跳轉(zhuǎn)
前端界面中跳轉(zhuǎn)：window.location.href="/forum"
服務(wù)器端頁面跳轉(zhuǎn)：res.redirect("/forum")
4）next()：
作用：跳過，繼續(xù)向下查找；也可以起到阻止程序執(zhí)行的目的；
實例：此項目中我的說說界面的渲染，在登錄狀態(tài)下，頁面加載，在未登錄狀態(tài)下，next()；去加載404頁面；
5）404頁面：
作用：設(shè)置use請求/，作為接盤俠，當頁面地址不正確時，加載404頁面；
配合：每個請求中，發(fā)現(xiàn)err后，均設(shè)置為next()，則會加載404頁面；
6）上傳頭像
前端發(fā)送請求方法：兩種
1）form表單提交，不能對響應(yīng)的文件進行操作；
標簽設(shè)置：action method enctype屬性
enctype屬性值：multipart/form-data
通過submit提交按鈕，自動提交；
2）('#myimg')[0].files[0])
ajax中data屬性值，賦值formData； 服務(wù)器端處理上傳的文件：服務(wù)端formidable接收，修改上傳后的文件路徑和文件名： 1)fs.rename(oldpath,newpath,callback)2) newpath包括：文件的路徑+源文件名的名字+時間戳+隨機數(shù)+源文件的后綴名 源文件的名和后綴：fs.parse(name)` => obj obj.ext 后綴名 obj.name 文件名
時間戳：silly-datetime
隨機數(shù)：Math.random()
7）裁切圖像
1）引用封裝的cutImg庫，進行裁切功能；
2）與圖片上傳功能配合使用；
3）依賴：gm formidable fs path silly-datetime 前提需下載軟件GraphicsMagick
4）uploads文件夾作為圖片上傳后的文件夾，avatar文件夾作為圖片裁切后的文件夾 - 項目具體
a. 頭部導(dǎo)航欄：通過session中設(shè)置的login布爾值，配合ejs模板中的條件判斷，進而決定什么時候顯示什么；
b. 留言區(qū)域：頁面加載，發(fā)送請求，獲取后臺數(shù)據(jù)，顯示界面；
4）注意點：
a. 設(shè)置靜態(tài)資源目錄時，最好設(shè)置上特定請求，不要只設(shè)置斜杠，如app.use('/avater',express.static('./avater'))引入時，在路徑前添加'/avater';即可加載此目錄下的文件；
- 項目知識點：
三、Vue項目
移動端項目：信息管理系統(tǒng)
1.涉及到的技術(shù)棧：
1）vue vue-router構(gòu)建基本構(gòu)架
2）webpack壓縮打包 webpack-dev-server開發(fā)環(huán)境測試
3）axios 前端與后臺間的數(shù)據(jù)交互
4）mui mint-ui移動端頁面構(gòu)建 其中mui引入的靜態(tài)資源 mint-ui下載插件引入
5）其他插件知識：moment轉(zhuǎn)化日期 vue-preview圖片預(yù)覽功能
6）設(shè)置后臺服務(wù)器的插件：
express：構(gòu)建基本服務(wù)器框架
cors：跨域請求設(shè)置插件；
formidable：post請求獲取數(shù)據(jù) 圖片上傳功能；
mongodb：本地數(shù)據(jù)庫存儲；
2.項目思路總結(jié)
1）頂部通欄 mint-ui
九宮格 mui
底部選項卡 mui =>引入自定義圖標iconfont 阿里巴巴矢量圖標庫
輪播圖：mint-ui
2）路由知識：
重定向redirect
路由跳轉(zhuǎn)
params設(shè)置
路由嵌套
多視圖
3.項目中的知識點
1）底部選項卡點亮效果：設(shè)置router-link中的默認點亮類名，配合mui-active使用，完成效果；
2）攔截器interceptor，Axios設(shè)置，攔截請求和響應(yīng)時，設(shè)置頁面加載效果；
3）過濾器filter，Vue類設(shè)置，過濾獲取的時間數(shù)據(jù)，通過moment轉(zhuǎn)化為指定格式的時間；也可以使用silly-datetime
4）mint-ui中的lazy load，圖片懶加載設(shè)置；只需設(shè)置v-lazy綁定變量圖片地址；
5）vue-preview移動端圖片預(yù)覽插件的使用；
6）封裝兩個js文件，一個為子組件傳遞父組件參數(shù)的vue實例，一個為封裝的localStorage的操作對象；
7）localStorage本地存儲的知識；
8）路由跳轉(zhuǎn)中的鉤子函數(shù)beforeRouteEnter，在路由跳轉(zhuǎn)前后，進行操作，通過在next()中操作實例
9）給router-view添加過渡動畫效果，通過transition包裹，設(shè)置樣式，但需設(shè)置mode參數(shù)，規(guī)定兩個過渡效果發(fā)生的先后順序；
10）購物車總計部分的制作：使用計算屬性，遍歷整個數(shù)據(jù)，判斷isPicked的布爾值，進行累加，實時更新；
11）圖片懶加載功能實現(xiàn)；mui中是在圖文列表時，進行的圖片懶加載； mint-ui中是在大的圖片時使用；
四、React項目
項目：視頻管理系統(tǒng)
1、涉及的技術(shù)棧
1）react，react-dom，react-router 構(gòu)建基本骨架
2）webpack壓縮打包 webpack-dev-server開發(fā)環(huán)境測試
3）material-ui Ant Design構(gòu)建前端頁面
material-ui組件：
柵格布局：Grid
應(yīng)用欄：AppBar
紙張：Paper
下滑線：Divder
菜單欄：Menus
卡片：Cards
Ant Design組件：
柵格：Grid
布局：Layout
導(dǎo)航菜單：Menu
按鈕：Button
圖標：Icon
4）expresss構(gòu)建后臺服務(wù)器，連接mongodb本地數(shù)據(jù)庫，存儲數(shù)據(jù)；
5）封裝fetch方法，發(fā)送請求，獲取和提交數(shù)據(jù)
6）登錄注冊功能中l(wèi)ocalStorage的設(shè)置；服務(wù)端session的設(shè)置；
7）react-addons-css-transition-group插件設(shè)置css3的運動效果
8）阿里巴巴矢量圖標庫iconfont的自定義引入；
項目簡結(jié)
項目簡介
一、前端頁面項目
1.花瓣網(wǎng)站項目
1）項目介紹：本網(wǎng)站主要是一個圖片展示網(wǎng)站，將圖片以瀑布流的樣式展現(xiàn)；
2）項目知識：原生封裝工具庫的使用，頁面布局，浮動布局，圖片懶加載，js盒子模型，滾動事件，定時器
3）項目效果：通過滾動頁面，展示不同的圖片，圖片懶加載，當點擊回到頂部按鈕，頁面滾動回到頂部，當回到頂部過程中，滑動滾輪，滾動立刻停止；
2.fullpage全屏滾動頁面項目
1）項目介紹：依賴jquey的插件fullpage.js開發(fā)的全屏頁面滾動網(wǎng)站
2）項目依賴：jquery fullpage.js
3) 項目知識：
a. fullpage.js的基本架構(gòu)和常見問題解決 onLeave和afterLoad參數(shù)設(shè)置；
b. 過渡效果transition，變形transform，配合實現(xiàn)動畫效果；
c. 事件：
事件委托，冒泡原理；事件對象，事件源；
mouseover、mouseleave、mouseout、mouseenter四者之間的差別和應(yīng)用場景；
3.微金所網(wǎng)站項目
1）項目介紹：依賴jquery和bootstrap開發(fā)的響應(yīng)式網(wǎng)站頁面；（pc端和移動端）
2）項目依賴：jquery bootstrap
3）項目知識：
a. bootstrap構(gòu)造頁面響應(yīng)式架構(gòu)，導(dǎo)航欄nav，輪播圖carousel，漢堡圖collapse；
b. meta屬性設(shè)置及含義；
c. jquery中trigger事件綁定resize事件；獲取可視區(qū)域client寬度；
d. 媒體查詢css樣式設(shè)置，設(shè)置不同屏幕可視寬度下的css樣式呈現(xiàn)；
e. 移動端touchEvent事件；事件touchstart,touchmove,touchend綁定，制作移動端輪播圖的左右滑動效果；
f. 偽類before設(shè)計印章效果；利用transform(rotate）旋轉(zhuǎn)和content屬性創(chuàng)建；
4.QQ音樂移動端項目
1）項目介紹：移動端的音樂播放界面，與qq音樂界面相似；
2）項目依賴：zepto.js html5 css3 less
3）項目知識：
a. 移動端的響應(yīng)式界面：meta rem的使用；
b. 音樂播放與歌詞部分的同步運動
c. 歌詞部分的后臺數(shù)據(jù)獲取，切割插入DOM結(jié)構(gòu)
d. audio對象屬性currentTime,duration 方法：paly() pause() load()
e. css3過渡transition animate filter屬性；
二、Node項目
- 論壇網(wǎng)站項目
1）項目介紹：論壇網(wǎng)站，登錄注冊，留言板，上傳本地圖片，裁剪圖片， 本地數(shù)據(jù)庫存儲
2）項目依賴：
a. 前端：jquery bootstrap ejs
b. 后臺：express
c. 數(shù)據(jù)庫： mongodb
d. 插件：path fs crypto express-session formidable gm silly-datetime
f：自己封裝庫：db.js md5.js cutImg.js
3）項目知識結(jié)構(gòu)：
a. 項目目錄架構(gòu)：
M:modles 存儲與后臺進行交互的文件，如封裝的mongodb的庫：db.js dbsetting.js 密碼加密：md5.js
V: views 存儲頁面文件ejs模板文件；用于渲染視圖的文件
C: controllers 連接M和app.js之間的介質(zhì) router.js
public: 靜態(tài)資源目錄
avatar: 存儲裁切后的頭像
uploads: formidable上傳的頭像的文件夾；
app.js: 服務(wù)器
mongoDB: 本地數(shù)據(jù)庫
package.json: 項目依賴
readme.txt: 項目說明文檔
b. 項目涵蓋知識點：
1）bootstrap前端頁面構(gòu)建
2）express構(gòu)件服務(wù)器，靜態(tài)資源目錄設(shè)置，跨域設(shè)置，ejs模板引擎設(shè)置；
3）mongodb數(shù)據(jù)庫操作JS封裝，操作數(shù)據(jù)庫中的數(shù)據(jù)；
4）views視圖中ejs模板，ejs使用，服務(wù)器端渲染ejs頁面；
5）前端：jquery中ajax發(fā)送請求，上傳本地文件；服務(wù)器端：formidable接收上傳文件，并修改路徑文件名；
6）node模塊crypto，封裝md5.js文件，用于密碼的md5加密；
7）session知識，express-session模塊設(shè)置session，用于服務(wù)器端路由間的數(shù)據(jù)傳遞；
8）上傳頭像后，對頭像進行裁切，使用封裝的cutImg.js文件；依賴gm模塊；
9）get，post，use三個請求的差別和使用；
三、Vue項目
1.移動端信息管理系統(tǒng)
1）項目介紹：
3）項目內(nèi)容：
1.vue vue-router構(gòu)建基本構(gòu)架；vue-router：路由跳轉(zhuǎn)，重定向，路由嵌套，多視圖，router運用；
2.webpack壓縮打包 webpack-dev-server開發(fā)環(huán)境測試；
3.axios 前端與后臺間的數(shù)據(jù)交互；攔截器interceptor，攔截請求和響應(yīng)；
4.mui與mint-ui配合構(gòu)建移動端頁面
5.vue-preview圖片預(yù)覽插件的使用；
6.vue過渡動畫效果；
7.mint-ui下拉組件loadmore的使用；
7.mui圖片懶加載；
8.自定義icon圖標引入；
四、React項目 - 視頻管理系統(tǒng)
1）項目介紹：具有視頻搜索，視頻存儲功能的個人管理系統(tǒng)網(wǎng)站
2）項目依賴：react react-dom react-router webpack material-ui antd express mongodb
3）項目知識:
1）react，react-dom，react-router 構(gòu)建基本骨架
2）webpack壓縮打包 webpack-dev-server開發(fā)環(huán)境測試
3）material-ui Ant Design構(gòu)建前端頁面
4）expresss構(gòu)建后臺服務(wù)器，連接mongodb本地數(shù)據(jù)庫，存儲數(shù)據(jù)；
5）封裝fetch方法，發(fā)送請求，獲取和提交數(shù)據(jù)
6）登錄注冊功能中l(wèi)ocalStorage的設(shè)置；服務(wù)端session的設(shè)置；
7）react-addons-css-transition-group插件設(shè)置css3的運動效果
8）阿里巴巴矢量圖標庫iconfont的自定義引入；
