本文將站在一個(gè)小白的角度，帶大家大概了解一下前端和后端，以及前后端在開發(fā)的過程中會(huì)用到的一些工具，文末會(huì)有一些小tips總結(jié)。
文章將從八個(gè)方面，講一講前端和后端都有些什么區(qū)別，它們之間的聯(lián)系又是什么。這八個(gè)方面分別是：什么是前端，什么是后端，軟件開發(fā)的完整流程，前后端的開發(fā)工具有何不同，前后端使用的編程語言，開發(fā)過程中的程序調(diào)試方式，使用到的構(gòu)建工具以及代碼管理工具。
如果你是純小白，在看文章的過程中可能會(huì)有點(diǎn)云里霧里，會(huì)糾結(jié)于一些技術(shù)名稱或者工具名稱，看著英文字母就頭大。曾經(jīng)的我就是這樣，如果你也是這樣的話，我想說：“寶貝，不要去糾結(jié)于這些‘稀奇古怪’的英文字母，它們都只是代名詞（就好比每個(gè)人的名字只是這個(gè)人的代名詞，名字不重要，這個(gè)人才最重要，他們?cè)谖覀兊纳谐洚?dāng)什么角色才重要），同樣的，這些技術(shù)或工具名稱不重要，重要的是它是做什么的，我們應(yīng)該怎么使用它們?！?
用戶能看到的前端頁面，網(wǎng)頁（也就是WEB，通過電腦端或者手機(jī)端瀏覽器打開看到的頁面）或APP頁面（各類應(yīng)用程序使用時(shí)所包含的頁面）具體長(zhǎng)什么樣子，由前端實(shí)現(xiàn)。
用戶想要在前端頁面通過一系列操作（如輸入賬號(hào)和密碼，獲取用戶數(shù)據(jù)。點(diǎn)擊登錄按鈕），從而實(shí)現(xiàn)登錄的交互操作，與前端有關(guān)。
用戶在操作過程中，出現(xiàn)的提示（比如：用戶賬號(hào)不存在，該商品已無庫存等）也是前端完成。
想要真正實(shí)現(xiàn)交互操作，只有前端是遠(yuǎn)遠(yuǎn)不夠的，需要依托強(qiáng)大的后端才能得以真正實(shí)現(xiàn)（比如剛才的登錄操作：用戶點(diǎn)擊登錄按鈕后，前端會(huì)觸發(fā)相關(guān)事件，與后端連接，由后端去實(shí)現(xiàn)相關(guān)的邏輯處理）。
后端是用戶感知不到、看不到，但卻非常重要的存在。在用戶的世界里，很多人可能只知道：自己點(diǎn)擊了某些按鈕，想要做某些操作，但他們并不知道具體計(jì)算機(jī)是如何幫助他完成的這一系列操作。這也是為什么后端叫后端的原因，后端你可以理解為躲在身后的存在（怎么感覺怪瘆人，哈哈哈）。他就像一雙無形的手，在操控著一切。（邏輯處理，數(shù)據(jù)交互，數(shù)據(jù)驗(yàn)證，數(shù)據(jù)安全，數(shù)據(jù)存放等的實(shí)現(xiàn)……）
后端開發(fā)也叫服務(wù)器開發(fā)。服務(wù)器，顧名思義，就是向用戶提供服務(wù)的地方。前端的按鈕，就好比你去飯店點(diǎn)餐看到的前臺(tái)服務(wù)員，點(diǎn)餐（按鈕）只是你的操作：你告訴服務(wù)員（前端頁面）你要吃什么，具體的菜（具體的服務(wù)）端出來什么味道好不好吃，全是后臺(tái)的廚房說了算，廚師掌握著菜品的生殺大權(quán)以及色香味（服務(wù)是否能實(shí)現(xiàn)以及具體的實(shí)現(xiàn)邏輯）。
后端將前端接收到的用戶操作的信息，進(jìn)行處理。比如：后端服務(wù)器獲取到前端發(fā)來的關(guān)于登錄的賬號(hào)和密碼，根據(jù)賬號(hào)去查找是否存在該用戶。如果用戶存在，利用傳輸過來的賬號(hào)去驗(yàn)證用戶的密碼是否正確，如果正確，則用戶登錄成功，如果不正確，則登錄不成功。這一系列的邏輯判斷就是后端開發(fā)人員需要去做的事情。
等待后端處理完成后，后端會(huì)將它處理后的信息發(fā)送給前端。此時(shí)前端根據(jù)收到的信息，進(jìn)行相對(duì)應(yīng)的處理，成功則提示用戶登陸成功，同時(shí)跳轉(zhuǎn)到要去的目標(biāo)頁面，如果不成功，則提示用戶不成功的原因。所以說，前端和后端其實(shí)都挺重要的，只是側(cè)重點(diǎn)不一樣。
如果你希望自己做的東西是被用戶所能看見的，而且自我的審美也還不錯(cuò)，那你可能更適合前端。如果你是邏輯思維能力強(qiáng)，且比較喜歡居于幕后的人，那你可能更適合后端。如果，你覺得，我不，我想前端、后端都接觸，那全棧工程師在向你招手（聽說美國不分前端后端，只有全棧）。注意！！我這里說的是可能而不是一定喔，畢竟每個(gè)人的潛力是不一樣的，畢竟大部分時(shí)候，對(duì)于開發(fā)這種相對(duì)枯燥的工種，興趣是最好的老師、最好的助推劑。所以在接下來的了解過程中，看看你自己的興趣點(diǎn)在什么地方也挺重要的。
軟件開發(fā)是指一個(gè)軟件從用戶或者開發(fā)者萌生想法時(shí)到軟件被研發(fā)出來投入使用的過程。
只要是做開發(fā)，不管你是什么開發(fā)，那肯定都是要了解整個(gè)開發(fā)過程我們需要做些什么，因?yàn)檫@個(gè)部分其實(shí)內(nèi)容比較枯燥，所以筆者只寫了大致的流程，現(xiàn)階段只要知道，有些什么環(huán)節(jié)，每個(gè)環(huán)節(jié)大概做些什么。如果你覺得暫時(shí)不需要了解，可直接跳過這個(gè)小節(jié)，進(jìn)入下一part。
需求分析：用戶提出需求，產(chǎn)品經(jīng)理更具用戶的需求整理出需求分析書，畫出產(chǎn)品原型圖。
概要設(shè)計(jì)：需求確定無更改后，開發(fā)經(jīng)理或架構(gòu)師進(jìn)行數(shù)據(jù)庫選型、技術(shù)選型等，頂頂詳細(xì)開發(fā)的基礎(chǔ)。
詳細(xì)設(shè)計(jì)：將程序、系統(tǒng)的每一個(gè)流程，每一個(gè)模塊都做詳細(xì)的分析和設(shè)計(jì)，越詳細(xì)越利于后期開發(fā)。
開發(fā)階段：根據(jù)詳細(xì)設(shè)計(jì)進(jìn)行實(shí)際的編碼，在開發(fā)前期，開發(fā)人員需要將項(xiàng)目相關(guān)的開發(fā)環(huán)境搭建好。不同項(xiàng)目的環(huán)境搭建有所不同，后面會(huì)出相關(guān)的文章。每個(gè)開發(fā)人員根據(jù)自己的任務(wù)進(jìn)行相對(duì)應(yīng)的模塊開發(fā)，開發(fā)過程中要確保自己開發(fā)的模塊能實(shí)現(xiàn)需要的功能，開發(fā)過程中，開發(fā)人員需要自測(cè)。
測(cè)試：前后端開發(fā)結(jié)束，并且同一個(gè)模塊相關(guān)的前后端自測(cè)功能不存在問題后，交給專門的測(cè)試人員進(jìn)行測(cè)試。
驗(yàn)收上線：整個(gè)系統(tǒng)測(cè)試結(jié)束，確保沒有問題的情況下，會(huì)將項(xiàng)目給客戶進(jìn)行驗(yàn)收，然后實(shí)現(xiàn)上線，正式投入使用。
維護(hù)：在項(xiàng)目使用的過程中，可能會(huì)出現(xiàn)突發(fā)情況，或者用戶使用的過程中，出現(xiàn)開發(fā)人員和測(cè)試人員都沒想到的意外操作，使系統(tǒng)出現(xiàn)問題的情況，都離不開我們的運(yùn)維人員。
開發(fā)工具：也叫編輯器，英文名：Integrated Development Environment（縮寫IDE）指開發(fā)人員用于編寫代碼，實(shí)現(xiàn)軟件從無到有，并且在開發(fā)過程中，開發(fā)者可以進(jìn)行可視化操作，能幫助開發(fā)者實(shí)現(xiàn)項(xiàng)目的運(yùn)行，調(diào)試，提示錯(cuò)誤所在，快速便捷的代碼提示等等功能的工具。各種開發(fā)工具五花八門，筆者結(jié)合身邊開發(fā)者的使用習(xí)慣，推薦一兩個(gè)常用的。
如果你是純小白，沒寫過HTML（可以在各大瀏覽器進(jìn)行運(yùn)行的文件，將我們能看見的各種東西，抽象出來，通過標(biāo)簽的形式進(jìn)行封裝）文件或者沒有做過任何開發(fā)，剛開始開發(fā)接觸開發(fā)，還是建議使用直接文本編輯器編輯，不要使用可以直接代碼補(bǔ)全的多功能開發(fā)工具。（文本編輯器推薦：Edit Plus。具體如何直接編輯HTML文件，很快就更，嘻嘻嘻。）
等對(duì)代碼的敲擊比較熟悉后，再使用開發(fā)工具進(jìn)行開發(fā)，IDE有自動(dòng)代碼補(bǔ)全等提高開發(fā)效率的功能，用起來就真香。由于每個(gè)人對(duì)不同編輯器的使用感受不同，且各大編輯器各有所長(zhǎng)，筆者在這里就不向大家特別推薦哪一種編輯器了。大家可以自己體驗(yàn)，然后選擇自己喜歡的、習(xí)慣的就好。
VS Code開發(fā)工具界面（可以通過設(shè)置，將界面切換成中文界面，筆者因?yàn)橐呀?jīng)比較熟悉VS，同時(shí)英語不太好，想練練英語，使用的英文界面）
VS Code工具下載地址：，點(diǎn)擊網(wǎng)頁右上角或者左下角的Download，找到符合你電腦的版本點(diǎn)擊下載，然后按照步驟進(jìn)行安裝即可。
Web Storm工具下載地址：，你可以與VS Code一樣點(diǎn)擊網(wǎng)頁右上角的Download，想要與眾不同的你，也可以點(diǎn)擊中間的Download，找到符合你的版本點(diǎn)擊下載，然后安裝即可（筆者還沒有用過這個(gè)開發(fā)工具，歡迎使用過或者想使用還沒使用但是要使用的讀者使用后，哈哈哈，將你們的使用感受留在下方評(píng)論區(qū)，哈哈哈。）
Intellij IDEA工具下載地址：jetbrains.com/idea/，點(diǎn)擊網(wǎng)頁右上角的右上角的Download，也可以點(diǎn)擊中間的Download，找到符合你的版本點(diǎn)擊下載，然后安裝即可。（因?yàn)镮DEA與Web Storm是同一家公司開發(fā)的，所以長(zhǎng)得差不多。）
直接瀏覽器搜索框里輸入目標(biāo)開發(fā)工具的英文名稱，最好不多輸入無用的字（比如：輸入MyEclipse開發(fā)工具，出來的東西就天差地別，挺浪費(fèi)時(shí)間），一般出來的第一個(gè)鏈接（基本連接標(biāo)題也都是全英文），點(diǎn)進(jìn)去就是該開發(fā)工具的官網(wǎng)，直接在官網(wǎng)下載，就會(huì)避免下載到病毒和垃圾安裝包、垃圾文件的情況。
包括后面開發(fā)的過程中，可能要查看某些UI框架，某些類庫的使用方法等，都可以通過這樣的方式，直接輸入想要的類庫或UI框架的完整名字，進(jìn)入官網(wǎng)就可以看到啦。切記：盡量不多打其他的文字
編程語言：指人和程序都能識(shí)別的語言。就好比，一個(gè)中國人要和日本人交流，要么你會(huì)說日語，要么對(duì)方會(huì)說普通話，或者你們都會(huì)使用英語，那你們便可以用英語交流，總之你們需要有一個(gè)雙方都能懂的語言，去實(shí)現(xiàn)雙方交流。編程語言也是如此，是你和程序之間都能懂的一種語言，實(shí)現(xiàn)你和程序的“交流”，從而讓程序幫助你實(shí)現(xiàn)你想實(shí)現(xiàn)的功能，編程語言也有很多不同，就像日語、英語、法語、普通話等。這些語言的終極目的都是為了能實(shí)現(xiàn)：交流??！
HTML，CSS，JS是基礎(chǔ)。非常重要，想要開發(fā)走得長(zhǎng)遠(yuǎn)，寶貝們，聽我的，基礎(chǔ)很重要。
我們首先需要使用HTML(HTML有不同的版本，現(xiàn)在用HTML5進(jìn)行開發(fā))將頁面骨架長(zhǎng)什么樣子先寫出來。再用CSS(現(xiàn)在用CSS3)將頁面進(jìn)行美化，最后使用JavaScript實(shí)現(xiàn)用戶的交互操作（登錄、注冊(cè)賬號(hào)、商品加入購物車等），ES6是JavaScript的升級(jí)，初學(xué)者先學(xué)JS，再去了解ES。TS也要JS的基礎(chǔ)，TS是JS的超集。
CSS本身算不上一種編程語言，它是給頁面加樣式，幫助頁面美化的。因此代碼的組織和維護(hù)較為困難。于是，人們想到了在CSS中，加入編程元素，進(jìn)行Web頁面樣式設(shè)計(jì)，然后再編譯成正常的CSS文件，以供項(xiàng)目使用。所以出現(xiàn)了
隨著前端界面越來越重要，邏輯越來越復(fù)雜，所以出現(xiàn)了很多的JS類庫和UI開發(fā)框架：
這些框架都是基于JS開發(fā)的，現(xiàn)在大廠用的比較多的是React。具體這些框架間有什么區(qū)別以及優(yōu)缺點(diǎn)，后面慢慢寫文章告知大家。
這些UI框架，大都是基于JS框架進(jìn)行開發(fā)而來，如：Mint UI就是基于Vue，屬于Vue的周邊生態(tài)。文中列舉的肯定不是最全的，具體學(xué)什么框架，還是要等大家把基礎(chǔ)知識(shí)掌握了，再看看招聘信息進(jìn)行選擇性的學(xué)習(xí)。再強(qiáng)調(diào)一遍，基礎(chǔ)才是王道。
Java主要針對(duì)企業(yè)級(jí)應(yīng)用開發(fā)：如銀行項(xiàng)目。C/C++語言主要開發(fā)與底層聯(lián)系較大的程序 ：如游戲、嵌入式開發(fā)、網(wǎng)絡(luò)程序的底層和網(wǎng)絡(luò)服務(wù)器端底層等。GO主要用于開發(fā)框架、工具等。Python主要處理與數(shù)據(jù)相關(guān)的東西（爬蟲），在人工智能方向。Shell：腳本語言，處理偏操作系統(tǒng)底層的業(yè)務(wù)。Node.JS一般用于具有大量細(xì)小的http請(qǐng)求環(huán)境的項(xiàng)目:典型的就是一個(gè)web即時(shí)聊天程序，或者一個(gè)支撐上萬人同時(shí)在線的游戲服務(wù)器。
在整理素材的過程中，發(fā)現(xiàn)了一個(gè)比較全的推薦C/C++相關(guān)的框架和第三方庫的博文，感興趣的可以去看看。
開發(fā)應(yīng)用，最多的就是和數(shù)據(jù)打交道，數(shù)據(jù)其實(shí)是很抽象的東西，它可以是我們的賬號(hào)、密碼，可以是一段聲音、圖像、視頻等（處理成數(shù)字信號(hào)），可以是任何計(jì)算機(jī)通過程序與人交互需要使用到的信息。而這些信息需要統(tǒng)一的存放在一個(gè)倉庫，進(jìn)行數(shù)據(jù)的查看增加刪除修改等操作，且這些信息間的關(guān)系也需要由這個(gè)倉庫進(jìn)行管理 。那管理這些信息的地方就稱為數(shù)據(jù)庫。龍生九子，雖都為龍子，卻大有不同。數(shù)據(jù)庫也一樣，隨都是數(shù)據(jù)庫，但每個(gè)數(shù)據(jù)庫都有其不同的特色。但唯一不變就是，他們都是對(duì)數(shù)據(jù)進(jìn)行增、刪、改、查的基本依托。
而且，數(shù)據(jù)庫的創(chuàng)建與管理也是后端開發(fā)所必備的技能，具體學(xué)習(xí)和使用什么數(shù)據(jù)庫，也得根據(jù)公司和項(xiàng)目的要求來進(jìn)行選擇。
所有語言都有共同性，不要看到這么多語言或者框架，就被嚇到了。語言，一通百通。重要的是計(jì)算機(jī)思維和邏輯，以及實(shí)際開發(fā)中解決問題的能力。所以，先選擇一門自己相對(duì)容易接收或上手的語言進(jìn)行學(xué)習(xí)。
在開發(fā)程序的過程中，我們需要驗(yàn)證我們程序運(yùn)行是否如我們所愿，所以會(huì)用到調(diào)試。我們可以查看程序運(yùn)行過程中，是成功的還是失敗的，如果是失敗的，還可以通過調(diào)試工具或者一些調(diào)試方法，去復(fù)現(xiàn)問題的所在地，找到出現(xiàn)問題的原因，不過調(diào)試的過程并不總是一帆風(fēng)順的，需要我們有足夠的耐心，就像一個(gè)媽媽對(duì)待孩子那般。
前端主要通過Chrome（谷歌），鍵盤按F12或Shift+Ctrl+I的方式，打開Chrome開發(fā)者調(diào)試工具，進(jìn)行調(diào)試。在開發(fā)的過程中會(huì)，使用Element進(jìn)行元素的樣式和布局調(diào)試，Console控制臺(tái)，使用console.log()或者alert()的方式進(jìn)行一定的數(shù)據(jù)和邏輯驗(yàn)證，使用source進(jìn)行程序debug，network可以查看發(fā)送的請(qǐng)求相關(guān)的信息，以及網(wǎng)頁加載資源等的具體情況。（前后端具體詳細(xì)的調(diào)試方法，后面會(huì)出一個(gè)詳細(xì)的文章）
后端的調(diào)試方式：后端調(diào)試可以通過postman模擬發(fā)送請(qǐng)求，獲取或者打印相關(guān)數(shù)據(jù)，可以直接在編輯器（IDE）中，添加斷點(diǎn)，然后一行一行的進(jìn)行調(diào)試。
構(gòu)建：是指把開發(fā)好的源代碼通過構(gòu)建工具生成可執(zhí)行的應(yīng)用程序的過程（比如Anderson App生成.apk文件，電腦端的.exe文件）。
構(gòu)建工具：將源代碼生成可執(zhí)行程序的應(yīng)用程序的過程變?yōu)樽詣?dòng)化過程的程序。（有點(diǎn)繞，意思就是利用構(gòu)建工具生成.apk文件，.exe文件等可執(zhí)行程序的相關(guān)文件）
下載依賴將圖片視頻等外部資源進(jìn)行壓縮打包，提高性能將Less，Sass編譯為CSS壓縮代碼塊將源代碼打包成二進(jìn)制代碼打包生成的二進(jìn)制代碼進(jìn)行單元測(cè)試部署到生產(chǎn)環(huán)境等
前端構(gòu)建的過程可以查看知乎一個(gè)帖子，此處給給大家貼出路徑，講得挺細(xì)致的。（zhuanlan.zhihu.com/p/33692774）
webpack可以將開發(fā)文件中的Sass、Less編譯為大部分瀏覽器可以運(yùn)行的CSS、將ES6、TS等編譯為大部分瀏覽器可以解析的JS，還可以將大文件壓縮打包，加速瀏覽器的運(yùn)行速度，提高用戶的使用體驗(yàn)等。相關(guān)的文檔點(diǎn)擊鏈接進(jìn)行查看：
Maven既是項(xiàng)目的構(gòu)建工具又是項(xiàng)目的管理工具，提供了幫助管理 構(gòu)建、文檔、報(bào)告、依賴、scms、發(fā)布、分發(fā)的方法，同時(shí)也進(jìn)行編譯源代碼、進(jìn)行依賴管理、管理二進(jìn)制庫、管理JAR包等的一個(gè)工具。
版本控制系統(tǒng)是指：對(duì)程序代碼、配置文件及說明文檔等文件變更進(jìn)行管理的系統(tǒng)。最主要的功能就是追蹤文件的變更，文件里面修改了什么內(nèi)容，被項(xiàng)目中的誰進(jìn)行了修改，什么時(shí)候被修改，都被記錄下來，支持多個(gè)人員并行開發(fā)等等。
進(jìn)入公司后，有的公司里直接使用git官網(wǎng)下載的客戶端工具，有的則是用基于git開發(fā)的第三方工具，筆者現(xiàn)在用的是Git Extensions。如果是個(gè)人平時(shí)開發(fā)記錄，不想這么麻煩，可以使用在線的方式，去GitHub注冊(cè)賬號(hào)，進(jìn)行版本控制。
SVN的使用需要搭建SVN服務(wù)器后，結(jié)合TortoiseSVN客戶端進(jìn)行使用。
老規(guī)矩，將發(fā)現(xiàn)的比較詳細(xì)的筆記，給大家貼出來，感興趣的可以去看一看，跟著里面的SVN服務(wù)器搭建和TortoiseSVN客戶端安裝步驟，試一試SVN版本控制器（歡迎大家留下你們的使用感受和使用建議等）。相關(guān)連接：blog.csdn.net/weixin_30892763/article/details/101324842
現(xiàn)在大部分都會(huì)稱呼git SVN等為代碼管理工具，但他們其實(shí)不止可以管理程序代碼，還可以管理配置文件及文檔等與程序開發(fā)相關(guān)的文件，所以個(gè)人認(rèn)為稱呼他們?yōu)榇a管理工具其實(shí)不太妥當(dāng)。
此文章，是筆者第一次寫博文，幾乎所有非筆者腦子里的東西都以標(biāo)注出出處，如果還是不慎涉及到侵權(quán)問題，請(qǐng)留言或私信讀者，一定及時(shí)改正。
文章為個(gè)人的理解，如果存在不當(dāng)或出錯(cuò)之處，也非常歡迎你們可以直接告訴我。
不管文章里提到了多少技術(shù)，多少框架，多少陌生的東西，如果你是小白，都不要陷入太深，重要的是了解這些東西就好。可以以文章中的東西作為一個(gè)學(xué)習(xí)路上的參考依據(jù)，切記，不要陷進(jìn)去，因?yàn)槲以?jīng)就是這樣的人，看到一個(gè)陌生名詞，陌生技術(shù)就會(huì)去看很久，最后發(fā)現(xiàn)，不會(huì)，然后就自己嚇自己，打起了退堂鼓。
就反正，先從基礎(chǔ)開始，一步一步來，地基打牢，高樓大廈還是傳統(tǒng)樓臺(tái)都可隨意建之。
