Vue.js 超詳細(xì)入門與項目實戰(zhàn)（微課視頻版）課件 第01章 前端框架發(fā)展

課件V1.0第1章前端框架發(fā)展教學(xué)內(nèi)容第一節(jié)

什么是前端技術(shù)第二節(jié)為什么要學(xué)習(xí)前端技術(shù)第三節(jié)如何學(xué)好前端技術(shù)第四節(jié)前后端分離概念第五節(jié)單面應(yīng)用不足和優(yōu)化知識目標(biāo)教學(xué)目標(biāo)理解前端技術(shù)的發(fā)展和學(xué)習(xí)目的掌握學(xué)習(xí)前端技術(shù)的方法理解前后端分離的概念和優(yōu)化方式知識點預(yù)覽#節(jié)知識點難點重點應(yīng)用1C01-01什么是前端技術(shù)1、Web技術(shù)1.0時代

2、Web技術(shù)2.0時代C01-02為什么要學(xué)習(xí)前端技術(shù)1、代表Web開發(fā)方向2、崗位需求缺口大C01-03如何學(xué)好前端技術(shù)1、打牢理論根基2、掌握前沿技術(shù)3、結(jié)合案例實戰(zhàn)知識點預(yù)覽#節(jié)知識點難點重點應(yīng)用1C01-04前后端分離概念1、誕生背景

2、誕生原因3、解決方案4、重點說明C01-05單面應(yīng)用不足和優(yōu)化1、單頁應(yīng)用不足2、中間層的使用3、應(yīng)用結(jié)構(gòu)優(yōu)化

在90年代中后期，用戶通過網(wǎng)絡(luò)瀏覽圖片和文字，不能跟服務(wù)器進(jìn)行數(shù)據(jù)交互。這種頁面稱之為“靜態(tài)頁”。Web技術(shù)1.0時代

Web技術(shù)2.0中，用戶不僅可以瀏覽數(shù)據(jù)信息，還能直接參與信息的制作，是由“靜態(tài)頁”向“動態(tài)頁”的轉(zhuǎn)變。這對于頁面開發(fā)者來說，也提出了更高的要求，需要學(xué)習(xí)更多的技術(shù)才能勝任這項工作，而這些專門用于頁面開發(fā)的技術(shù)稱之為前端技術(shù)。Web技術(shù)2.0時代

HTML5是前端技術(shù)的核心，它代表了Web開發(fā)的方向，無論是基于移動端的應(yīng)用，還是駐足在PC端的頁面，都是基于該技術(shù)打造的框架和平臺。代表Web開發(fā)方向

在互聯(lián)網(wǎng)行業(yè)中，對前端開發(fā)技術(shù)人才的崗位需求一直都是與日俱增，同時，前端技術(shù)開發(fā)，相比其他技術(shù)而言，也是較容易進(jìn)入互聯(lián)網(wǎng)行業(yè)的崗位。前端技術(shù)所學(xué)內(nèi)容多而雜，技術(shù)更新非?？?。前端所學(xué)習(xí)的內(nèi)容下圖所示。崗位需求缺口大

HTML5是標(biāo)記語言最新的版本。是前端開發(fā)核心。打牢理論根基

JavaScript是一種編程語言，是前端語言核心。

CSS3是樣式表的一個更新版本。是前端樣式表。

理論根基是指前端技術(shù)需要開發(fā)語言的支撐，理論就是指語言的語法。前端的開發(fā)必須打牢以下三種語言的根基?？蚣荛_發(fā)前端項目

主流的包括Vue.js、Angular.js、React.js，Vue.js又是前端開發(fā)人員必須要掌握的重點框架。掌握前沿技術(shù)ES6成為主流開發(fā)語言

目前主流的框架為了更加發(fā)揮JavaScript的功能，都使用ES6作為開發(fā)語言

Node開發(fā)日漸重要

是一個可以在瀏覽器中運行JavaScript代碼的工具，基于JavaScript的語法，又可以通過依賴的工具庫，開發(fā)許多服務(wù)端語言才能實現(xiàn)的功能。

所謂的前沿技術(shù)，它是一種動態(tài)的技術(shù)體系，就是當(dāng)下名企與行業(yè)內(nèi)使用和關(guān)注的前端技術(shù)。前沿技術(shù)是動態(tài)的，變化的，要時刻關(guān)注和注意行業(yè)內(nèi)的技術(shù)動態(tài)，從目前前端技術(shù)技術(shù)的發(fā)展來看，必須掌握的前沿技術(shù)包含下面幾方向：結(jié)合案例實戰(zhàn)

實戰(zhàn)運用注重一個“精”字，要有選擇性的做一些案例具體來說，做案例應(yīng)從以下幾個方向考慮：多做功能單一不重復(fù)的應(yīng)用多做流行新穎的企業(yè)級應(yīng)用多總結(jié)安全開發(fā)心得

互聯(lián)網(wǎng)早期，頁面展示的內(nèi)容全部由后端進(jìn)行控制，一切以后端為中心。具體流程如下圖所示。誕生背景瀏覽器渲染服務(wù)端頁面數(shù)據(jù)庫

由于服務(wù)端無法像控制頁面一樣，控制移動端的應(yīng)用布局和數(shù)據(jù)顯示，因此，服務(wù)端需要專門針對移動端提供相應(yīng)的數(shù)據(jù)接口，具體流程如下圖所示。誕生原因移動端應(yīng)用服務(wù)端接口數(shù)據(jù)庫服務(wù)端

由于移動互聯(lián)網(wǎng)的誕生，之前的方式既不利于項目推進(jìn)的效率，也不利于代碼的后續(xù)維護(hù)，之后改變?yōu)?，服?wù)端僅保留一套數(shù)據(jù)接口，頁面、移動端和其他終端應(yīng)用全部歸納為內(nèi)容輸出端，頁面內(nèi)容、邏輯和數(shù)據(jù)均由前端負(fù)責(zé)處理，具體流程如下圖所示。解決方案前端瀏覽器渲染移動端應(yīng)用單面應(yīng)用

服務(wù)端靜態(tài)頁面文件服務(wù)端接口數(shù)據(jù)庫

在上圖中，服務(wù)端只提供了一套接口，所有的內(nèi)容輸出應(yīng)用，包括單面應(yīng)用和移動端應(yīng)用。因此，對于服務(wù)端開發(fā)人員來說，有助于提升項目開發(fā)的速度，有利于提高代碼的后期維護(hù)，從而提升開發(fā)效率。重點說明單頁應(yīng)用不足

前后端分離后的前端單頁應(yīng)用，由于框架結(jié)構(gòu)和分離的原因，存在下面幾個問題：首屏加載時間過長處理嵌套請求效果不好需要后端介入邏輯層處理

只將應(yīng)用的開發(fā)從結(jié)構(gòu)上分為前端和服務(wù)端是遠(yuǎn)遠(yuǎn)不夠的，通過使用中間層是大家公認(rèn)的優(yōu)化方案。中間層的作用帶中間層的前后端分離流程中間層的使用前端瀏覽器渲染移動端應(yīng)用單面應(yīng)用

服務(wù)端靜態(tài)頁面文件服務(wù)端接口數(shù)據(jù)庫中間層A中間層B應(yīng)用結(jié)構(gòu)優(yōu)化

優(yōu)化方案（一）中間層向頁面推送數(shù)據(jù)前端服務(wù)端接收渲染單頁應(yīng)用中間層ANode環(huán)境推送應(yīng)用結(jié)構(gòu)優(yōu)化

優(yōu)化方案（二）中間層處理嵌套請求前端服務(wù)端單面應(yīng)用中間層A處理請求后的數(shù)據(jù)Node環(huán)境數(shù)據(jù)庫應(yīng)用結(jié)構(gòu)優(yōu)化

優(yōu)化方案（三）中間件處理數(shù)據(jù)邏輯前端服務(wù)端數(shù)據(jù)庫PC端應(yīng)用H5端應(yīng)用平板端應(yīng)用H5端中間層PC端中間層平板中間層層注意事項前后端分離是目前Web項目開發(fā)的主流結(jié)構(gòu)，結(jié)構(gòu)的分離