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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Node開發(fā)日漸重要

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

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

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

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

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

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

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

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

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

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

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

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

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

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