講個故事，給你一份詳細的技術書

經常有產品新人問我技術問題：是前後端的區別？資料庫是怎麼樣的？如何和研發溝通？

回答的多了，就想系統化的回答，寫一本書，讓技術變得通俗易懂、有趣。

6年間，從技術小白=>工程師=>後台、數據產品經理，2000多個日夜，為代碼、需求絞盡腦汁、也在創業路上走過，百感交集。

本書以小說故事的形式、場景化講解技術，讓枯燥的技術變得有趣。感謝一些幫助我的小夥伴，謝謝。

另提下裡面的人物用的是臉萌設計的，侵刪（設計師正在設計人物）。

故事也很簡單，兩條主線，李大仁來深圳的創業故事，表妹小奈和小明的愛情故事。

小明和小奈戀愛，程序員和產品經理的愛情故事大仁用戶量破億，一番挫折後破土而出，創業進入新階段，拿到了B輪融資

前8章，總共有20章。

（1）離開廣州

「故事的小黃花 從出生那年就飄著 童年的盪鞦韆 隨記憶一直……「。李大仁聽著歌，望著廣州，這座生活了快10年的城市。腦中閃過了大學生活、同事、前女友，百感交集。但是為了最初的夢想，來到深圳創業。

（2）來深創業

「各位乘客你好，列車已到站「。終於邁出了這一步，深圳或許是創業氛圍最好的地方了。

小奈：喂，表哥你在哪？

大仁：我在深圳北站。

剛到深圳，大仁決定投靠表妹那邊，表妹家裡在南山，離投資人提供的孵化器也很近。大仁目前暫時住在表妹這邊。小奈今年剛畢業，在一家大公司里當產品助理，非技術專業、初入職場的她遇到了挺多阻礙。

2018年，大仁今年也30歲了。

小奈：表哥，你女朋友呢？

大仁：分了，她不同意我來深圳這邊創業。

（3）落腳

小奈：表哥，你睡這間房吧。

大仁：好的。

（4）互聯網

疲累了一天，躺在床上，大仁陷入了沉思。互聯網，是網路與網路之間所串連成的全球網路，這裡的網路可以理解成一個或多個電腦，這些網路以一組標準的網路TCP/IP協議族相連，互聯網在信息層面把世界變成地球村。

互聯網互通是全球性的，是屬於全人類的。互聯網低成本的、高效信息交流深受大家歡迎。它是是平等的，開放的信息高速公路，是人類發展進程的一個里程碑。

（5）中國電商發展史

下圖以中國互聯網、電商發展史為例子：

（6）三巨頭BAT，崛起的TMD

中國互聯網發展了20年，百度(B)阿里(A)騰訊(T)成為中國最大的三家互聯網公司，形成了三組鼎力的格局，三家公司有各自的體系和地位，百度的搜索、阿里的電商、騰訊的社交。

頭條（T）美團（M）滴滴（D），TMD被稱為創業公司在BAT這樣巨頭下最大的成長界限，互聯網也有階層固化之勢。

（7）商戰&混戰

自2016起，阿里和騰訊的新零售之戰開始布局，什麼是新零售？馬雲口中的新零售是什麼？

商戰：美團打車vs滴滴外賣，阿里收購餓了么、高德推出順風車、美團推出打車、收購摩拜。創業環境如此艱難，但總有人能破土而出。

想著想著居然睡著了….

窗外下起了雨，滴答滴答…

周末了，本該很開心才對，小奈的心情卻有點鬱悶。坐在公交上，想著下午被Leader懟的話，心情十分不美麗。好不容易下班了，還下雨了，得找表哥好好傾訴。

大仁：喲喲喲，你這是怎麼啦？

小奈：今天被Leader一頓懟…

大仁：為什麼會被Leader懟呢？

小奈：是這樣的，我方案今天上交的時候Leader說很多地方做得不對，前後端都沒分清，微服務就更不用說了。

大仁：不要氣餒，產品上有什麼問題你可以問我呀

小奈：前後端怎麼區分？後端寫代碼，前端負責顯示？

大仁：這個前後端的區別，我畫張圖給你看看就知道了。

前後端區別

大仁：前端也要寫代碼的，後端寫的代碼沒有界面顯示，前端才有。好比飯店一樣，服務員是前端, 廚師是後端開發。服務員會給你端菜（看得到的前端），但是做菜的是廚師（後端處理數據返給前端）。

小奈：那前後端怎麼交互？

大仁：你看到那個窗口沒有，服務員通過窗口拿菜，菜就是用戶要的數據，窗口就是介面，前後端通過介面來協作，介面是後端的工作。

小奈：哦~那後端是不是做的比較多、比較累一點。

大仁：是的，廚師累一點。

大仁：不過今時不同往日，現在客人要求高了。要求服務員長得漂亮（界面好看） 還要會耍雜技（交互好）。這樣說你可以理解么 ？

小奈：UI和UE有什麼不一樣么？

大仁：視覺設計（界面設計）ui像是服務員的衣服，ue （界面交互）就是點擊這個按鈕怎麼跳轉，ue像是服務員的上菜流程、手勢等。資料庫就是神奇的物料倉庫，廚師要做什麼菜，需要從倉庫里取， 取得時候會自動複製了一份，這個資料庫以後再和你仔細講。

小奈：哇，理解了，表哥好厲害呀。

大仁：總結起來的話，涉及界面展示的屬於前端，當請求數據的時候，就是常見的增刪改查，屬於後端工作，後端需要提供好這些窗口，把菜放在那裡，服務員就可以過去拿。

微服務vs單體應用

小奈：那微服務又是什麼呢？

大仁：我再畫2張圖（產品經理就是愛畫圖）。

大仁：你們公司是搞電商的，電商後台系統比較大而全。基本上由用戶管理、商品管理、訂單管理、物流管理、採購管理、資產管理、內容管理等組成。而且項目早期研發的時候，都是都所有功能堆在一起，部署在一台伺服器上。這種其實就是所謂的「單體應用」。

但是呢，隨著業務發展，流量越來越大，這種單體應用的弊端就變得明顯了。怎麼理解呢？

單體應用之間各個模塊互相依賴，如果某個模塊掛了，就會影響其它模塊。或者做優惠活動的時候，對用戶管理和優惠券這些模塊壓力較大，但是做負載均衡的時候其它模塊也得上，浪費資源。

小奈：那怎麼辦？

大仁：其實把各個模塊單獨拎出來就好了。那裡需要強化就強化那裡。模塊間依賴性也不會那麼大。

小奈：那前期為什麼不直接用微服務？

大仁：微服務其實比較花時間，但是各個服務拆分好後，對後續擴展和性能等的好處多多。所以很多創業項目前期都是單體應用，大公司除外。

為了感謝大仁悉心指導，小奈點了奶茶給大家喝，分奶茶的時候，看到大明一手滑鼠一手鍵盤目不轉睛地盯著屏幕。

（1）初次見面-瀏覽器輸入url後

小明來了

「叮咚叮咚」

初次見面

大仁：你去接待下我朋友，他叫小明，我們公司後端開發。

耳邊突然傳來一個甜美的聲音。

小奈：你好，你是小明吧。

小奈：你好，我是小奈，表哥現在在忙，我來招待下你。

小奈：這是給你的茶，你先在這邊坐下。

刷地一下從臉到耳根一陣通紅，木住三秒後，小明愣了下，然後雙手接過茶

人物檔案

原名黃小明，29歲，黑龍江某大學心理學專業，畢業後在五道口切過菜，某一天看懂犀牛書，從此進入前端，立志成為黑客。大仁公司後端主力開發。

小奈：你是做後端的吧，我有些技術問題可以請教你嗎？

小明：可以，具體是什麼問題呢？

小奈：我想知道你們平時敲的代碼，是怎麼變成網頁的？怎麼放到網上去的？

小明掏出了雙肩包裡面的筆記本

小明：你平時怎麼看網頁的？

小明：那你知道背後發生了什麼么？我畫個圖給你看下。

小明：首先這裡幾個傢伙：瀏覽器（360之類）、伺服器（阿里雲之類）、域名商(萬網之類)、網頁文件（index.html）、web環境盒子（Nginx之類）。

小明：當你輸入地址的時候，背後的事情是這樣的。

瀏覽器打電話給域名商， hellojack.com 這個sb家地址在哪？域名商告訴他ip地址，稍等，我給你轉過去。瀏覽器就把這個地址記到小本本上了，下次就不用問域名商了。然後問伺服器要東西了，你盒子裡面那個東西呢？

伺服器掏出盒子里的文件，切成很多小拼塊，好的，我馬上寄過去。然後順著網線傳過去，傳到瀏覽器這邊。瀏覽器就把拼塊憑起來，展示出來了，你好你的文件。

小奈：每個域名都有IP地址地，之前我都不曉得IP跟域名有什麼聯繫。

小明：1對1的，當然你也可以搬家。

小奈：好像懂了。

小明：那你看看我們是怎麼實現的吧。

小明：我們首先就是寫代碼咯，長得像這樣子：

hello jack。

保存為 index.html 後，本地打開。看到沒，長這樣子，我啟動個神奇的盒子：

var express = require(『express』);var app = express();app.set(『view engine』, 『html』);app.engine(『html』, require(『ejs-mate』));var server = app.listen(8081, function (req, res) )

瀏覽器輸入：localhost:8081瀏覽器輸入：127.0.0.1:8081

小奈：喔，原來這樣子，那怎麼輸入 hellojack.com 來訪問呢？

小明：對，接下來我要把它部署到阿里雲上去，我之前買的。但是域名這個我只買過 pmjishu.com 這個，我得去域名商那裡買一下才行。

小奈：不用啦，我明白了。

小奈：實在太感謝你了，你好厲害喔。

只見小明又通紅著臉

小明：不用客氣，有什麼不懂的問題隨時請教」

今晚好美，月亮很好看。

（2）小區與隔板間-機房和虛擬機

電腦主機vs虛擬機

小奈：一直不太明白，伺服器是一個實體的機器嗎？（類似一台主機）還是一個概念上的資料庫？本地是指的是？

大仁：

第一個問題：早期伺服器就是一個實體的機器(物理機器)。但是虛擬機技術成熟後可以在一台物理機器上創建很多台虛擬機，所以這些虛擬機也可以作為伺服器。類似A101和裡面的隔板間。第二個問題：我們常說的伺服器（後台）是指後台程序+資料庫，也就是主人+衣櫃，衣櫃是存儲衣服（數據），主人是收拾、處理衣服的。你有錢可以一個住一間大房子，沒錢或者覺得太大也可以隔出幾個小板間租給別人。目前常見的服務商是這樣子做的，可能A101這間房間住了不同創業公司的後台。但是房間之間都是隔離的（技術成熟）。第三個問題：其實我們自己也可以搭建伺服器，要和運營商申請公網IP，一月好幾千，那我們的電腦也就是伺服器了。

雲主機vs機房

機房：類似小區，由很多伺服器組成；雲主機：由多台伺服器組成，共同處理計算數據。

機房，類似小區，由很多伺服器組成。但是可能這些業主互不相識，也可能這一層住的都是老王家族。

雲主機：類似別墅，老王家族住在別墅，他們之間是有關係的，一起合作處理一些大事。

（1）世界之窗

終於周末了，真開心。對小奈這種初入職場的人來說，還是很期待周末的。和表哥約好周末去世界之窗玩，放鬆之餘，還要抓緊和表哥學習東西。

（2）賬號和門票一樣

世界之窗外面是開放的，但是如果要進去裡面的話，就需要買門票了。

小奈：這個門票是不是和賬戶密碼一樣？

大仁：是的

小奈：賬號登陸是怎麼實現的？

大仁：那要先給你簡單講下資料庫。

（3）資料庫是什麼？

數據：舉個例子，班級裡面的每個人，例如：小周，他的各個欄位：年級，性別、語數英等等，周杰倫的所有信息算是一條數據。

數據表：數據表就像一個excel表格，裡面存了3年1班所有學生的數據。

資料庫：資料庫可以理解成一個文件夾，裡面有很多excel表格，例如3年級所有班級（1、2、3班）的excel表格。

（4）賬號密碼

大仁：這裡的賬號登陸和門票進場一樣，但是稍微不同的是，它是永久性的，只要你不改密碼/不被禁用。

（5）Token則是憑據

「叮鈴叮鈴」

大仁：喂，小明啊，你也要來世界之窗么？

小明：是啊，但是我沒門票，進不去啊。

大仁：我記得你是如花酒店會員是吧？

小明：是啊。

大仁：他們有和這個酒店合作，你試一下。

小明：你好，我是如花酒店的會員，能不能進去這裡玩下。

檢票員打電話給如花酒店，小明和酒店說了自己信息，酒店經理給了臨時暗號：0007，你好可以了。

Token則更像是臨時暗號，這個臨時暗號是賬號授權生成的，門票丟了得重新花錢買，token丟了重新操作下認證一個就可以了，因此token丟失的代價是可以忍受的。

（6）Cookie 和 Session

這個賬號密碼，其實還有兩個重要的概念，下回分解。

（1）Cookie和Session的區別

小奈：表哥那個cookie和session有什麼區別？

大仁：記得上次了小明和你講的故事么？， 在瀏覽器輸入url背後發現的事。2.1 初次見面-瀏覽器輸入url後

大仁：我來給你講個故事吧。

（2）http

很久很久以前（30年前，只有靜態html的時候），有個發快遞的人叫http。偶爾有人打電話（無來電顯示）向他買東西，他收到請求後，就會去中心倉庫克隆一份這個東西，然後把貨品塞到管道里，這樣客人就收到了。

那時候工作很輕鬆，小日子過的挺舒服啊。好景不長（社區、電商網站的出現），倉庫里進了很多貴重和私密物品。老闆要求他記錄訂購貴重物品的客人，私密物品一定要鑒別客人身份。

（3）暗號：cookie

但是沒有來電顯示啊，鬼知道誰定的，http就很苦惱了。想了想，終於想到一個辦法了。以後客人打電話過來，我就給他個暗號。終於可以記錄了，但是又遇到了一個問題。由於暗號比較簡單，其他客人可以偽造。

（4）檔案袋和鑰匙：session和session-id

http想了很久，最後和伺服器協商，讓伺服器那邊建立檔案袋，並把鑰匙給客人，下次叫客人把鑰匙給他。之後客人都通過鑰匙來打開檔案袋，確定身份。如果打不開的話就證明錯了。

express 中的 cookie

express 在 4.x 版本之後，session管理和cookies等許多模塊都不再直接包含在express中，而是需要單獨添加相應模塊。

// 首先引入 cookie-parser 這個模塊var cookieParser = require(『cookie-parser』);app.listen(3000);// 使用 cookieParser 中間件，cookieParser(secret, options)app.use(cookieParser());app.get(『/』, function (req, res) {// 如果請求中的 cookie 存在 isVisit, 則輸出 cookie// 否則，設置 cookie 欄位 isVisit, 並設置過期時間為1分鐘if (req.cookies.jack) else );res.send(「no cookie」);}});

（6）session

cookie 雖然很方便，但是使用 cookie 有一個很大的弊端，cookie 中的所有數據在客戶端就可以被修改，數據非常容易被偽造，那麼一些重要的數據就不能存放在 cookie 中了，而且如果 cookie 中數據欄位太多會影響傳輸效率。為了解決這些問題，就產生了 session，session 中的數據是保留在伺服器端的。

session 的運作通過一個session_id來進行，session_id通常是存放在客戶端的 cookie 中，比如：在 express 中，默認是connect.sid這個欄位，當請求到來時，服務端檢查 cookie 中保存session_id 並通過這個 session_id 與伺服器端的 session data 關聯起來，進行數據的保存和修改。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！