本文以一個(gè)故事的形式，給產(chǎn)品新人一份技術(shù)書，如果你是產(chǎn)品新人，那就進(jìn)來看看吧~

序言

經(jīng)常有產(chǎn)品新人問我技術(shù)問題：是前后端的區(qū)別？數(shù)據(jù)庫是怎么樣的？如何和研發(fā)溝通？

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

6年間，從技術(shù)小白=>工程師=>后臺(tái)、數(shù)據(jù)產(chǎn)品經(jīng)理，2000多個(gè)日夜，為代碼、需求絞盡腦汁、也在創(chuàng)業(yè)路上走過，百感交集。

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

另提下里面的人物用的是臉萌設(shè)計(jì)的，侵刪（設(shè)計(jì)師正在設(shè)計(jì)人物）。

封面

故事背景

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

1. 小明和小奈戀愛，程序員和產(chǎn)品經(jīng)理的愛情故事
2. 大仁用戶量破億，一番挫折后破土而出，創(chuàng)業(yè)進(jìn)入新階段，拿到了B輪融資

人物關(guān)系

課程目錄

前8章，總共有20章。

1. 李大仁來深創(chuàng)業(yè)-互聯(lián)網(wǎng)介紹

（1）離開廣州

“故事的小黃花 從出生那年就飄著 童年的蕩秋千 隨記憶一直……“。李大仁聽著歌，望著廣州，這座生活了快10年的城市。腦中閃過了大學(xué)生活、同事、前女友，百感交集。但是為了最初的夢想，來到深圳創(chuàng)業(yè)。

（2）來深創(chuàng)業(yè)

“各位乘客你好，列車已到站“。終于邁出了這一步，深圳或許是創(chuàng)業(yè)氛圍最好的地方了。

小奈：喂，表哥你在哪？

大仁：我在深圳北站。

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

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

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

大仁：分了，她不同意我來深圳這邊創(chuàng)業(yè)。

（3）落腳

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

大仁：好的。

（4）互聯(lián)網(wǎng)

疲累了一天，躺在床上，大仁陷入了沉思。互聯(lián)網(wǎng)，是網(wǎng)絡(luò)與網(wǎng)絡(luò)之間所串連成的全球網(wǎng)絡(luò)，這里的網(wǎng)絡(luò)可以理解成一個(gè)或多個(gè)電腦，這些網(wǎng)絡(luò)以一組標(biāo)準(zhǔn)的網(wǎng)絡(luò)TCP/IP協(xié)議族相連，互聯(lián)網(wǎng)在信息層面把世界變成地球村。

互聯(lián)網(wǎng)互通是全球性的，是屬于全人類的?；ヂ?lián)網(wǎng)低成本的、高效信息交流深受大家歡迎。它是是平等的，開放的信息高速公路，是人類發(fā)展進(jìn)程的一個(gè)里程碑。

（5）中國電商發(fā)展史

下圖以中國互聯(lián)網(wǎng)、電商發(fā)展史為例子：

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

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

頭條（T）美團(tuán)（M）滴滴（D），TMD被稱為創(chuàng)業(yè)公司在BAT這樣巨頭下最大的成長界限，互聯(lián)網(wǎng)也有階層固化之勢。

（7）商戰(zhàn)&混戰(zhàn)

自2016起，阿里和騰訊的新零售之戰(zhàn)開始布局，什么是新零售？馬云口中的新零售是什么？

商戰(zhàn)：美團(tuán)打車vs滴滴外賣，阿里收購餓了么、高德推出順風(fēng)車、美團(tuán)推出打車、收購摩拜。創(chuàng)業(yè)環(huán)境如此艱難，但總有人能破土而出。

想著想著居然睡著了….

2. 服務(wù)員與廚師-前后端的區(qū)別

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

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

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

小奈：今天被Leader一頓懟…

大仁：為什么會(huì)被Leader懟呢？

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

大仁：不要?dú)怵H，產(chǎn)品上有什么問題你可以問我呀

小奈：前后端怎么區(qū)分？后端寫代碼，前端負(fù)責(zé)顯示？

大仁：這個(gè)前后端的區(qū)別，我畫張圖給你看看就知道了。

前后端區(qū)別

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

小奈：那前后端怎么交互？

大仁：你看到那個(gè)窗口沒有，服務(wù)員通過窗口拿菜，菜就是用戶要的數(shù)據(jù)，窗口就是接口，前后端通過接口來協(xié)作，接口是后端的工作。

小奈：哦~那后端是不是做的比較多、比較累一點(diǎn)。

大仁：是的，廚師累一點(diǎn)。

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

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

大仁：視覺設(shè)計(jì)（界面設(shè)計(jì)）ui像是服務(wù)員的衣服，ue （界面交互）就是點(diǎn)擊這個(gè)按鈕怎么跳轉(zhuǎn)，ue像是服務(wù)員的上菜流程、手勢等。數(shù)據(jù)庫就是神奇的物料倉庫，廚師要做什么菜，需要從倉庫里取， 取得時(shí)候會(huì)自動(dòng)復(fù)制了一份，這個(gè)數(shù)據(jù)庫以后再和你仔細(xì)講。

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

大仁：總結(jié)起來的話，涉及界面展示的屬于前端，當(dāng)請(qǐng)求數(shù)據(jù)的時(shí)候，就是常見的增刪改查，屬于后端工作，后端需要提供好這些窗口，把菜放在那里，服務(wù)員就可以過去拿。

微服務(wù)vs單體應(yīng)用

小奈：那微服務(wù)又是什么呢？

大仁：我再畫2張圖（產(chǎn)品經(jīng)理就是愛畫圖）。

大仁：你們公司是搞電商的，電商后臺(tái)系統(tǒng)比較大而全?；旧嫌捎脩艄芾?、商品管理、訂單管理、物流管理、采購管理、資產(chǎn)管理、內(nèi)容管理等組成。而且項(xiàng)目早期研發(fā)的時(shí)候，都是都所有功能堆在一起，部署在一臺(tái)服務(wù)器上。這種其實(shí)就是所謂的“單體應(yīng)用”。

但是呢，隨著業(yè)務(wù)發(fā)展，流量越來越大，這種單體應(yīng)用的弊端就變得明顯了。怎么理解呢？

單體應(yīng)用之間各個(gè)模塊互相依賴，如果某個(gè)模塊掛了，就會(huì)影響其它模塊。或者做優(yōu)惠活動(dòng)的時(shí)候，對(duì)用戶管理和優(yōu)惠券這些模塊壓力較大，但是做負(fù)載均衡的時(shí)候其它模塊也得上，浪費(fèi)資源。

小奈：那怎么辦？

大仁：其實(shí)把各個(gè)模塊單獨(dú)拎出來就好了。那里需要強(qiáng)化就強(qiáng)化那里。模塊間依賴性也不會(huì)那么大。

小奈：那前期為什么不直接用微服務(wù)？

大仁：微服務(wù)其實(shí)比較花時(shí)間，但是各個(gè)服務(wù)拆分好后，對(duì)后續(xù)擴(kuò)展和性能等的好處多多。所以很多創(chuàng)業(yè)項(xiàng)目前期都是單體應(yīng)用，大公司除外。

為了感謝大仁悉心指導(dǎo)，小奈點(diǎn)了奶茶給大家喝，分奶茶的時(shí)候，看到大明一手鼠標(biāo)一手鍵盤目不轉(zhuǎn)睛地盯著屏幕。

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

小明來了

“叮咚叮咚”

初次見面

大仁：你去接待下我朋友，他叫小明，我們公司后端開發(fā)。

耳邊突然傳來一個(gè)甜美的聲音。

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

小奈：你好，我是小奈，表哥現(xiàn)在在忙，我來招待下你。

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

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

人物檔案

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

小奈：你是做后端的吧，我有些技術(shù)問題可以請(qǐng)教你嗎？

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

小奈：我想知道你們平時(shí)敲的代碼，是怎么變成網(wǎng)頁的？怎么放到網(wǎng)上去的？

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

小明：你平時(shí)怎么看網(wǎng)頁的？

小奈：在瀏覽器輸入?www.hellojack.com?然后就可以了啊

小明：那你知道背后發(fā)生了什么么？我畫個(gè)圖給你看下。

小明：首先這里幾個(gè)家伙：瀏覽器（360之類）、服務(wù)器（阿里云之類）、域名商(萬網(wǎng)之類)、網(wǎng)頁文件（index.html）、web環(huán)境盒子（Nginx之類）。

小明：當(dāng)你輸入地址的時(shí)候，背后的事情是這樣的。

瀏覽器打電話給域名商， hellojack.com 這個(gè)sb家地址在哪？域名商告訴他ip地址，稍等，我給你轉(zhuǎn)過去。瀏覽器就把這個(gè)地址記到小本本上了，下次就不用問域名商了。然后問服務(wù)器要東西了，你盒子里面那個(gè)東西呢？

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

小奈：每個(gè)域名都有IP地址地，之前我都不曉得IP跟域名有什么聯(lián)系。

小明：1對(duì)1的，當(dāng)然你也可以搬家。

小奈：好像懂了。

小明：那你看看我們是怎么實(shí)現(xiàn)的吧。

小明：我們首先就是寫代碼咯，長得像這樣子：<h1>hello jack</h1>。

保存為 index.html 后，本地打開?？吹?jīng)]，長這樣子，我啟動(dòng)個(gè)神奇的盒子：

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) {

console.log(“hello world”)

})

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

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

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

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

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

只見小明又通紅著臉

小明：不用客氣，有什么不懂的問題隨時(shí)請(qǐng)教”

今晚好美，月亮很好看。

（2）小區(qū)與隔板間-機(jī)房和虛擬機(jī)

電腦主機(jī)vs虛擬機(jī)

小奈：一直不太明白，服務(wù)器是一個(gè)實(shí)體的機(jī)器嗎？（類似一臺(tái)主機(jī)）還是一個(gè)概念上的數(shù)據(jù)庫？本地是指的是？

大仁：

• 第一個(gè)問題：早期服務(wù)器就是一個(gè)實(shí)體的機(jī)器(物理機(jī)器)。但是虛擬機(jī)技術(shù)成熟后可以在一臺(tái)物理機(jī)器上創(chuàng)建很多臺(tái)虛擬機(jī)，所以這些虛擬機(jī)也可以作為服務(wù)器。類似A101和里面的隔板間。
• 第二個(gè)問題：我們常說的服務(wù)器（后臺(tái)）是指后臺(tái)程序+數(shù)據(jù)庫，也就是主人+衣柜，衣柜是存儲(chǔ)衣服（數(shù)據(jù)），主人是收拾、處理衣服的。你有錢可以一個(gè)住一間大房子，沒錢或者覺得太大也可以隔出幾個(gè)小板間租給別人。目前常見的服務(wù)商是這樣子做的，可能A101這間房間住了不同創(chuàng)業(yè)公司的后臺(tái)。但是房間之間都是隔離的（技術(shù)成熟）。
• 第三個(gè)問題：其實(shí)我們自己也可以搭建服務(wù)器，要和運(yùn)營商申請(qǐng)公網(wǎng)IP，一月好幾千，那我們的電腦也就是服務(wù)器了。

云主機(jī)vs機(jī)房

• 機(jī)房：類似小區(qū)，由很多服務(wù)器組成；
• 云主機(jī)：由多臺(tái)服務(wù)器組成，共同處理計(jì)算數(shù)據(jù)。

機(jī)房，類似小區(qū)，由很多服務(wù)器組成。但是可能這些業(yè)主互不相識(shí)，也可能這一層住的都是老王家族。

云主機(jī)：類似別墅，老王家族住在別墅，他們之間是有關(guān)系的，一起合作處理一些大事。

3. 世界之窗門票-賬號(hào)與Token

（1）世界之窗

終于周末了，真開心。對(duì)小奈這種初入職場的人來說，還是很期待周末的。和表哥約好周末去世界之窗玩，放松之余，還要抓緊和表哥學(xué)習(xí)東西。

（2）賬號(hào)和門票一樣

世界之窗外面是開放的，但是如果要進(jìn)去里面的話，就需要買門票了。

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

大仁：是的

小奈：賬號(hào)登陸是怎么實(shí)現(xiàn)的？

大仁：那要先給你簡單講下數(shù)據(jù)庫。

（3）數(shù)據(jù)庫是什么？

數(shù)據(jù)：舉個(gè)例子，班級(jí)里面的每個(gè)人，例如：小周，他的各個(gè)字段：年級(jí)，性別、語數(shù)英等等，周杰倫的所有信息算是一條數(shù)據(jù)。

數(shù)據(jù)表：數(shù)據(jù)表就像一個(gè)excel表格，里面存了3年1班所有學(xué)生的數(shù)據(jù)。

數(shù)據(jù)庫：數(shù)據(jù)庫可以理解成一個(gè)文件夾，里面有很多excel表格，例如3年級(jí)所有班級(jí)（1、2、3班）的excel表格。

（4）賬號(hào)密碼

大仁：這里的賬號(hào)登陸和門票進(jìn)場一樣，但是稍微不同的是，它是永久性的，只要你不改密碼/不被禁用。

（5）Token則是憑據(jù)

“叮鈴叮鈴”

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

小明：是啊，但是我沒門票，進(jìn)不去啊。

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

小明：是啊。

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

小明：你好，我是如花酒店的會(huì)員，能不能進(jìn)去這里玩下。

檢票員打電話給如花酒店，小明和酒店說了自己信息，酒店經(jīng)理給了臨時(shí)暗號(hào)：0007，你好可以了。

Token則更像是臨時(shí)暗號(hào)，這個(gè)臨時(shí)暗號(hào)是賬號(hào)授權(quán)生成的，門票丟了得重新花錢買，token丟了重新操作下認(rèn)證一個(gè)就可以了，因此token丟失的代價(jià)是可以忍受的。

（6）Cookie 和 Session

這個(gè)賬號(hào)密碼，其實(shí)還有兩個(gè)重要的概念，下回分解。

?5. 暗號(hào)和鑰匙-Cookie和Session的區(qū)別

（1）Cookie和Session的區(qū)別

小奈：表哥那個(gè)cookie和session有什么區(qū)別？

大仁：記得上次了小明和你講的故事么？， 在瀏覽器輸入url背后發(fā)現(xiàn)的事。?2.1 初次見面-瀏覽器輸入url后

大仁：上次輸入的網(wǎng)址?www.hellojack.com?，其實(shí)完整的是?http://www.hellojack.com，前面有個(gè)http前綴，它是一個(gè)協(xié)議，無狀態(tài)協(xié)議。

大仁：我來給你講個(gè)故事吧。

（2）http

很久很久以前（30年前，只有靜態(tài)html的時(shí)候），有個(gè)發(fā)快遞的人叫http。偶爾有人打電話（無來電顯示）向他買東西，他收到請(qǐng)求后，就會(huì)去中心倉庫克隆一份這個(gè)東西，然后把貨品塞到管道里，這樣客人就收到了。

那時(shí)候工作很輕松，小日子過的挺舒服啊。好景不長（社區(qū)、電商網(wǎng)站的出現(xiàn)），倉庫里進(jìn)了很多貴重和私密物品。老板要求他記錄訂購貴重物品的客人，私密物品一定要鑒別客人身份。

（3）暗號(hào)：cookie

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

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

http想了很久，最后和服務(wù)器協(xié)商，讓服務(wù)器那邊建立檔案袋，并把鑰匙給客人，下次叫客人把鑰匙給他。之后客人都通過鑰匙來打開檔案袋，確定身份。如果打不開的話就證明錯(cuò)了。

express 中的 cookie

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

var express = require(‘express’);

// 首先引入 cookie-parser 這個(gè)模塊

var cookieParser = require(‘cookie-parser’);

var app = express();

app.listen(3000);

// 使用 cookieParser 中間件，cookieParser(secret, options)

app.use(cookieParser());

app.get(‘/’, function (req, res) {

// 如果請(qǐng)求中的 cookie 存在 isVisit, 則輸出 cookie

// 否則，設(shè)置 cookie 字段 isVisit, 并設(shè)置過期時(shí)間為1分鐘

if (req.cookies.jack) {

console.log(req.cookies.jack);

res.send(“welcome”);

} else {

res.cookie(‘jack’, ‘content’, {maxAge: 60 * 1000});

res.send(“no cookie”);

}

});

（6）session

cookie 雖然很方便，但是使用 cookie 有一個(gè)很大的弊端，cookie 中的所有數(shù)據(jù)在客戶端就可以被修改，數(shù)據(jù)非常容易被偽造，那么一些重要的數(shù)據(jù)就不能存放在 cookie 中了，而且如果 cookie 中數(shù)據(jù)字段太多會(huì)影響傳輸效率。為了解決這些問題，就產(chǎn)生了 session，session 中的數(shù)據(jù)是保留在服務(wù)器端的。

session 的運(yùn)作通過一個(gè)session_id來進(jìn)行，session_id通常是存放在客戶端的 cookie 中，比如：在 express 中，默認(rèn)是connect.sid這個(gè)字段，當(dāng)請(qǐng)求到來時(shí)，服務(wù)端檢查 cookie 中保存session_id 并通過這個(gè) session_id 與服務(wù)器端的 session data 關(guān)聯(lián)起來，進(jìn)行數(shù)據(jù)的保存和修改。

作者：深圳jack，微信公眾號(hào)：產(chǎn)品經(jīng)理的技術(shù)課堂

本文由 @深圳jack 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載