區(qū)別：1、前端指的是用戶(hù)可見(jiàn)的界面，后端是指用戶(hù)看不見(jiàn)的東西，考慮的是底層業(yè)務(wù)邏輯的實(shí)現(xiàn)，平臺(tái)的穩(wěn)定性與性能等。2、前端開(kāi)發(fā)用到的技術(shù)包括html5、css3、js、jquery、Bootstrap、Node.js、Vue等；而后端開(kāi)發(fā)用到的是java、php、Http協(xié)議等服務(wù)器技術(shù)。3、從應(yīng)用范圍來(lái)看，前端開(kāi)發(fā)不僅被常人所知，且應(yīng)用場(chǎng)景也要比后端廣泛的太多太多。

本教程操作環(huán)境：windows7系統(tǒng)、Dell G3電腦。

前端開(kāi)發(fā)和后臺(tái)開(kāi)發(fā)是有區(qū)別的，工作的內(nèi)容和負(fù)責(zé)的東西是完全的不同的。

什么是web前端開(kāi)發(fā)

web前端也被稱(chēng)為“客戶(hù)端”，是關(guān)于用戶(hù)可以看到和體驗(yàn)的網(wǎng)站的視覺(jué)方面，即用戶(hù)所看到的一切Web瀏覽器展示的內(nèi)容，涉及用戶(hù)可以看到，觸摸和體驗(yàn)的一切。例如圖形用戶(hù)界面（GUI）和命令行，包括設(shè)計(jì)，導(dǎo)航菜單，文本，彩色圖像，視頻，華麗的按鈕等。

web前端開(kāi)發(fā)工程師負(fù)責(zé)是網(wǎng)站前端頁(yè)面也就是網(wǎng)頁(yè)的頁(yè)面開(kāi)發(fā)，簡(jiǎn)單的說(shuō)網(wǎng)站前端負(fù)責(zé)是東西是網(wǎng)站用戶(hù)可見(jiàn)的東西，如網(wǎng)頁(yè)上的特效、網(wǎng)頁(yè)的布局、圖片、視頻等內(nèi)容。網(wǎng)站前端工程師的工作內(nèi)容就是將美工設(shè)計(jì)的效果圖的設(shè)計(jì)成瀏覽器可以運(yùn)行的網(wǎng)頁(yè)，并和后端開(kāi)發(fā)工程師配合做網(wǎng)頁(yè)的數(shù)據(jù)顯示和交互。

什么是web后端開(kāi)發(fā)

web后端，也稱(chēng)為“服務(wù)器端”，是用戶(hù)在瀏覽器中無(wú)法查看和交互的所有內(nèi)容，例如：數(shù)據(jù)庫(kù)和服務(wù)器?；旧希缓蟀l(fā)生的一切都可以歸結(jié)為Web后端開(kāi)發(fā)，它是Web前端體驗(yàn)的推動(dòng)者。

web后端負(fù)責(zé)存儲(chǔ)和組織數(shù)據(jù)，并確保web前端的所有內(nèi)容都能正常工作。后端與前端通信，發(fā)送和接收信息以顯示為網(wǎng)頁(yè)。

后端開(kāi)發(fā)一般也叫做后臺(tái)，其負(fù)責(zé)是網(wǎng)站后臺(tái)邏輯的設(shè)計(jì)和實(shí)現(xiàn)還有用戶(hù)及網(wǎng)站的數(shù)據(jù)的保存和讀取。比如一般網(wǎng)站都是有用戶(hù)注冊(cè)和登錄的，用戶(hù)的注冊(cè)的信息通過(guò)前端發(fā)送給后端，后端將其保存在數(shù)據(jù)庫(kù)中，用戶(hù)登錄網(wǎng)站的時(shí)候，后端需要通過(guò)用戶(hù)輸入的用戶(hù)名和密碼是否與數(shù)據(jù)庫(kù)中的一致來(lái)判斷用戶(hù)是否有權(quán)限登錄，這是后臺(tái)開(kāi)發(fā)中的一個(gè)最簡(jiǎn)單的功能。

web前端和后端開(kāi)發(fā)的區(qū)別

展示方式

前端指的是用戶(hù)可見(jiàn)的界面，網(wǎng)站前端頁(yè)面也就是網(wǎng)頁(yè)的頁(yè)面開(kāi)發(fā)，比如網(wǎng)頁(yè)上的特效、布局、圖片、視頻，音頻等內(nèi)容。前端的工作內(nèi)容就是將美工設(shè)計(jì)的效果圖的設(shè)計(jì)成瀏覽器可以運(yùn)行的網(wǎng)頁(yè)，并配合后端做網(wǎng)頁(yè)的數(shù)據(jù)顯示和交互等可視方面的工作內(nèi)容。

后端是指用戶(hù)看不見(jiàn)的東西，通常是與前端工程師進(jìn)行數(shù)據(jù)交互及網(wǎng)站數(shù)據(jù)的保存和讀取，相對(duì)來(lái)說(shuō)后端涉及到的邏輯代碼比前端要多的多，后端考慮的是底層業(yè)務(wù)邏輯的實(shí)現(xiàn)，平臺(tái)的穩(wěn)定性與性能等。

所用技術(shù)

前端開(kāi)發(fā)用到的技術(shù)包括但不限于html5、css3、javascript、jquery、Bootstrap、Node.js 、Webpack，AngularJs，ReactJs，VueJs等技術(shù)。

后端開(kāi)發(fā) 以java為例 主要用到的 是包括但不限于Struts spring springmvc Hibernate Http協(xié)議 Servlet Tomcat服務(wù)器等技術(shù)。

應(yīng)用范圍

從應(yīng)用范圍來(lái)看，前端開(kāi)發(fā)不僅被常人所知、且應(yīng)用場(chǎng)景也要比后端廣泛的太多太多。

一、PC (Personal Computer) 即個(gè)人電腦。目前電腦端仍是前端一個(gè)主要的領(lǐng)域，主要分為面向大眾的各類(lèi)網(wǎng)站，如新聞媒體、社交、電商、論壇等和面向管理員的各種 CMS (內(nèi)容管理系統(tǒng))和其它的后臺(tái)管理系統(tǒng)。

二、Web App 是指使用 Web 開(kāi)發(fā)技術(shù)，實(shí)現(xiàn)的有較好用戶(hù)體驗(yàn)的 Web 應(yīng)用程序。它是運(yùn)行在手機(jī)和桌面端瀏覽中，隨著移動(dòng)端網(wǎng)絡(luò)速度的提升，Web App 為我們提供了很大的便利。此外近兩年 Google 提出了一種新的 Web App 形態(tài)，即 PWA(漸進(jìn)增強(qiáng) Web APP) 。

三、WeChat (微信) 這個(gè)平臺(tái)，擁有大量的用戶(hù)群體，因此它也是我們前端開(kāi)發(fā)另一個(gè)重要的領(lǐng)域。微信的公眾號(hào)與訂閱號(hào)為市場(chǎng)營(yíng)銷(xiāo)和自媒體從業(yè)者，打造了一個(gè)新的天地。

四、Hybrid App (混合應(yīng)用) 是指介于 Web App、原生 App (主要是 Android 或 iOS )之間的 App，它兼具原生 App 良好用戶(hù)交互體驗(yàn)的優(yōu)勢(shì)和 Web App 跨平臺(tái)開(kāi)發(fā)的優(yōu)勢(shì)。

五、Game（游戲），HTML5 游戲從 2014 年 Egret 引擎開(kāi)發(fā)的神經(jīng)貓引爆朋友圈之后，就開(kāi)始一發(fā)不可收拾。不過(guò)現(xiàn)在游戲開(kāi)發(fā)變得越來(lái)越復(fù)雜，需要制作各種炫麗炫麗的效果，還要制作各炫麗于 2D 或者 3D 的場(chǎng)景。

六、Desktop桌面應(yīng)用軟件，就是我們?nèi)粘Ｉ钪须娔X中安裝的各類(lèi)軟件。早期要開(kāi)發(fā)桌面應(yīng)用程序，就需要有專(zhuān)門(mén)的語(yǔ)言 UI (界面) 庫(kù)支持，如 C++ 中的 Qt 庫(kù)、MFC 庫(kù)，Java 的 Swing、Python 的 PyQT 等，否則語(yǔ)言是沒(méi)辦法進(jìn)行快速界面開(kāi)發(fā)。

七、Server Node.js 一發(fā)布，立刻在前端工程師中引起了軒然大波，前端工程師們幾乎立刻對(duì)這一項(xiàng)技術(shù)表露出了相當(dāng)大的熱情和期待?？吹?Node.js 這個(gè)名字，初學(xué)者可能會(huì)誤以為這是一個(gè) Java 應(yīng)用，事實(shí)上，Node.js 采用 C++ 語(yǔ)言編寫(xiě)而成，是一個(gè) Java 的運(yùn)行環(huán)境。

（學(xué)習(xí)視頻分享：web前端入門(mén)）