> "老司機(jī)開車 從不需要理由 喜歡我 就來點我吧"
> [易杭貼吧--新鮮出爐的中文社區(qū) http://tieba.freeedit.cn](http://tieba.freeedit.cn)
## 1. 前述
最近一直在寫一個發(fā)貼子的應(yīng)用催跪，前不久才剛剛“完工”（其實還有很多需要改進(jìn)的地方）。
這個應(yīng)用是仿著上一個版本的百度貼吧來寫的夷野，最初的打算是想要完成百度貼吧的最主要的那部分基本功能懊蒸，但真正做起來，卻不是一件簡單的事悯搔。
這個項目一共用了近二十天的時間骑丸，我在這段時間內(nèi)，既踩了很多的坑妒貌，也學(xué)到了很多的知識通危。
踩的坑越多，修復(fù)的bug越多苏揣，看的東西越多黄鳍，就越覺得自己知識淺陋。
很多的東西平匈，都是自己用過了之后框沟，才會恍然大悟藏古。看上一百遍忍燥，還真的不如自己動手寫一遍拧晕。
所以我想將這個應(yīng)用的構(gòu)建過程和在這段時間內(nèi)的心得體會記一記士八。自己呢姚糊，也能在寫的過程中玲献，對應(yīng)用中的某些問題進(jìn)行反思车柠。
@-v-@
其實自己從來沒有這么完整地做過一個這樣的項目攘须。
從應(yīng)用的選題局骤、界面的設(shè)計呢堰、工具的選擇屿聋，到環(huán)境的搭建机久、應(yīng)用的部署臭墨，最后到應(yīng)用的測試和修復(fù)，全部依賴于自己膘盖。
我既算是這個應(yīng)用的“UI設(shè)計師”胧弛，也算是這個應(yīng)用的“前端工程師”、“后端工程師”侠畔、“數(shù)據(jù)庫工程師”结缚，以及“項目架構(gòu)師”。（突然就把自己說得高大上了软棺，哭笑不得~）
不過红竭，自己一個人要演這么多的角色，其中的困難很大码党。
近二十天的時間里德崭，我不斷地去嘗試打磨作品的細(xì)節(jié)，希望能做好每一個環(huán)節(jié)揖盘。
但即使到了部署的時候眉厨，它也仍然只是個布娃娃。
不過兽狭，仍然會使我高興的是憾股，它至少還可以“動”。
----
## 2. 介紹
這張圖就是這個項目第一次打開時的界面箕慧。
當(dāng)我們不斷往右滑的時候服球，它又會一頁頁地顯示。到了最后一頁颠焦，它又會很調(diào)皮地叫我們返回到第一頁斩熊，然后點擊進(jìn)入。
進(jìn)入以后伐庭，就是登錄粉渠、注冊之類的分冈。完成了之后，就會直接進(jìn)入到app里面霸株，然后就可以搜索發(fā)帖了雕沉。
頁面展示之類的，我就不寫了去件，同伴們看了坡椒，估計也會覺得沒什么意思。
百度貼吧長什么樣子尤溜，它也就大概長什么樣子倔叼，只是某些地方，我做了更改和精簡（因為實在是沒有那么多時間去寫這些功能宫莱，功能項太多了缀雳，單靠自己一個人，根本難以在短時間內(nèi)做完梢睛，笑~）。
只需要去玩一玩识椰，就知道效果是怎么樣的了绝葡，所以我就直接給地址吧。
[演示 --- 易杭貼吧--新鮮出爐的中文社區(qū) http://tieba.freeedit.cn](http://tieba.freeedit.cn)
[源碼 --- https://github.com/freeedit/yihang-tieba](https://github.com/freeedit/yihang-tieba)
（項目結(jié)構(gòu)是怎樣的腹鹉，以及如何去運行這個項目藏畅，見項目源碼地址中的readme文件。）
在這個項目中功咒，我內(nèi)置了一個彩蛋愉阎，大體是長這個樣子的 :
嗯嗯，其實我們可以多試幾次力奋，每次出現(xiàn)的消息是不一樣的榜旦，就仿佛有個小機(jī)器人在跟我們對話一樣。
其他的效果圖景殷，都存放在項目的result文件夾中溅呢，地址是：
[freeedit/yihang-tieba/tieba-design/result](https://github.com/freeedit/yihang-tieba/tree/master/tieba-design/result)
最后的最后，放上一個總覽圖猿挚。
（寫了一大堆有的沒的咐旧，接下來才算是進(jìn)入正文。）
----
## 3. 過程
最初想做一個和QQ一模一樣的聊天工具绩蜻，但后來又覺得聊天的工具太普遍了铣墨，所以就將目標(biāo)轉(zhuǎn)到了百度貼吧。
同樣都是和別人一起聊天吹水水办绝，貼吧卻要顯得更好玩一些伊约。（秋名山老司機(jī)一枚前來覲見）
自己也很喜歡貼吧那種“搞笑”姚淆、“無畏”的吹水環(huán)境。所以后來碱妆，就敲定主意做一個貼吧出來肉盹。
### 3.1 構(gòu)思
我將項目分成了四個部分來分步驟完成：
1 設(shè)計 [freeedit/yihang-tieba/tieba-design](https://github.com/freeedit/yihang-tieba/tree/master/tieba-design)
2 前端 [freeedit/yihang-tieba/tieba-client](https://github.com/freeedit/yihang-tieba/tree/master/tieba-client)
3 后端 [freeedit/yihang-tieba/tieba-server](https://github.com/freeedit/yihang-tieba/tree/master/tieba-server)
4 前后端連接 + 將項目部署給主機(jī)
### 3.2 設(shè)計
小部分的設(shè)計圖存放在這里:? （還有一大部分被我失誤給刪掉了）
[freeedit/yihang-tieba/tieba-design](https://github.com/freeedit/yihang-tieba/tree/master/tieba-design)
首先在阿里矢量圖標(biāo)庫中，選取了近80個svg圖疹尾，再用icomoon將它們打包成能引入stylus的字體文件上忍。
（暈死，我誤刪的部分纳本，就包括了它窍蓝，導(dǎo)致我下一次想替一個圖標(biāo)，重新打包成新的字體文件都不行）
接著繁成，我便開始設(shè)計底部的五個小圖標(biāo)吓笙。本來打算用AI畫幾個矢量圖，但電腦上沒裝巾腕，再加上很久沒用過了面睛，不知道還會不會用，就直接用PS來畫了尊搬。
PS來畫的時候叁鉴，總感覺，CC2014以后佛寿，對矢量圖層進(jìn)行交并補運算好像不一樣了幌墓，不知道是不是自己的錯覺。合并多個矢量圖層冀泻，總不會出現(xiàn)自己想要的效果（也許是自己還沒摸透PS吧）常侣。最后呢，就只能做位圖了弹渔。
做完了這些胳施，我才來開始畫應(yīng)用的圖標(biāo)。一個簡簡單單的吧字捞附，放在一個圓角矩形中巾乳，上下兩個缺口，底色用#3388ff鸟召，搞定胆绊！
在上圖最右邊的吧字圖標(biāo)，是用來給PWA圖標(biāo)配的欧募。
第二個圖標(biāo)压状，是用來做用戶默認(rèn)的頭像的。
其他幾個就是應(yīng)用圖標(biāo)和底欄圖標(biāo)了。
（為了給用戶一種圖標(biāo)在往上升騰的感覺种冬，我故意將幾個線條樣式的圖標(biāo)下面镣丑，開了個口子。用戶可能看著就會很難受娱两，就想要把它下面那根線條補全莺匠，然后他就可能會按下去。）
另外呢十兢，考慮到網(wǎng)絡(luò)可能會出現(xiàn)問題趣竣，圖片地址找不到，所以也準(zhǔn)備了一個默認(rèn)的圖片背景圖旱物。
### 3.3 前端
[freeedit/yihang-tieba/tieba-client](https://github.com/freeedit/yihang-tieba/tree/master/tieba-client)
最開始想用sass寫的遥缕，但是后來感覺stylus更簡潔，更干凈宵呛，看上去更好看单匣，然后就選它來處理CSS了。
決定用stylus之后宝穗，就想找個和stylus一樣縮進(jìn)式語法的html預(yù)處理器户秤。正好，Jade和它真的是絕配逮矛。兩個都長得一模一樣的虎忌，用起來也方便。
我很慶幸自己選了stylue+pug的組合橱鹏，要不然，這個應(yīng)用可能需要一個月才能搞定呢堪藐。
到這兒呢莉兰，我的強迫癥就犯了。有了CSS和HTML的預(yù)處理器礁竞，怎么著糖荒，JS也要上個“預(yù)處理器”吧。
當(dāng)時瘋狂地想要用TS模捂，其原因并不是因為它很酷（當(dāng)然捶朵，酷也算它的一方面），而是想三劍客不能只有兩劍客（babel不算劍客狂男，它頂多是瓶萬金油综看，個人愚見），這樣打架不利索岖食。
（還有一個最最重要的原因红碑，說出來，你們可能會笑死我，它那atom file-icons圖標(biāo)賊好看析珊，綠色偏青色羡鸥，比JS那個屎黃色好看多了。）
各位看官笑一笑就行了忠寻，飄過飄過...
回歸理智惧浴。。奕剃。
vue對ts的支持好像還不怎么好衷旅，vue-loader是可以用，但用著用著祭饭，有些文件引不進(jìn)來芜茵。啊倡蝙！請原諒我的無知九串，我真不知道為什么會這樣。
最后寺鸥，因為搞不定了猪钮，還是只要兩個劍客就夠了，三個劍客容易吵架胆建。再加上從未用過TS烤低，不好掌控大局啊。一旦TS出了BUG笆载，我就得哭暈在廁所扑馁，果斷放棄好了。強迫癥之類的東西凉驻，身為一名前端化緣人腻要，果然還是不該有啊。
最終使用到的一套前端工具涝登，就是這樣的：
template: pug
style: stylus
script: babel
database: indexDB
pug stylus babel
vue2 vuex axios+vue-axios vue-router vue-loader
better-scroll flexible animate
webpack express webpack-pwa-manifest
indexDB localStorage
```json
"dependencies": {
"better-scroll": "^0.1.15",
"flexible": "",
"animate": "",
"axios": "^0.16.2",
"vue": "^2.2.6",
"vue-axios": "^2.0.2",
"vue-router": "^2.3.1",
"vuex": "^2.3.1"
},
"devDependencies": {
"babel-preset-stage-2": "^6.22.0",
"eslint": "^3.19.0",
"eslint-config-standard": "^6.2.1",
"express": "^4.14.1",
"pug": "^2.0.0-rc.1",
"stylus": "^0.54.5",
"vue-loader": "^11.3.4",
"webpack": "^2.3.3",
"webpack-pwa-manifest": "^2.1.4"
}
```
### 3.4 后端
[freeedit/yihang-tieba/tieba-server](https://github.com/freeedit/yihang-tieba/tree/master/tieba-server)
后端倒是沒什么可說的（后端的哥哥姐姐們別生氣雄家，我說的是自己寫的后端，笑~）胀滚，無非就是用koa搭了個后臺趟济，搞一搞跨域問題（以后如果有時間呢，再弄一個token驗證一下）咽笼，然后用mongoose連一下mongodb顷编，寫一寫schema，做一下limit剑刑、skip勾效、populate之類的分頁、關(guān)聯(lián)查詢，再加上那一套簡單的curd操作层宫，沒了杨伙。
哦，對了萌腿，我寫了一個很扯淡的代理方式限匣。
在應(yīng)用中的直播那一項，我自己搞不定毁菱，不知道怎么做直播米死，然后又想填補它的空缺。
重要的是贮庞，百度貼吧里面弄一個直播...這個...總感覺有點跑題的味道峦筒。（這不是發(fā)水貼的地方，直播間也能水貼窗慎？）
當(dāng)然物喷，最最重要的還是，自己搞不定直播這個功能遮斥。
然后峦失，我就用了個“知道”，來頂替“直播”的位置术吗。（主要是因為尉辑，自己經(jīng)常去貼吧里面搜貼子看，找一些以前別人問過的問題较屿，畢竟有些問題在別的地方找不到答案隧魄，或者回答得不好...）
然后我就需要給用戶實時提示，這個地方隘蝎，我代理的是360問答頁面上請求的接口堤器。
最后用戶需要獲取到相應(yīng)的信息，這個地方末贾，我代理的是百度知道的頁面，然后把頁面上的數(shù)據(jù)抓下來整吆，形成json文件返回給用戶拱撵。
恩恩，360問答的實時提示+百度知道的頁面信息表蝙，這就是傳說中的搜索拴测，自己都被自己搞的笑死了，不過還別說府蛇，辦法雖然有點那啥集索，但效果還不錯誒，至少用來做一個DEMO，足夠了务荆。
```json
"dependencies": {
"cheerio": "^1.0.0-rc.1",
"iconv-lite": "^0.4.17",
"koa": "^2.2.0",
"koa-router": "^7.1.1",
"koa-static": "^3.0.0",
"md5": "^2.2.1",
"moment": "^2.18.1",
"mongoose": "^4.9.3"
},
"devDependencies": {
"cross-env": "^4.0.0",
"nodemon": "^1.11.0"
}
```
### 3.5 連接
其實吧妆距，數(shù)據(jù)在連接時是最麻煩的了。
因為數(shù)據(jù)請求需要時間函匕，頁面需要等待請求完成娱据，完成之后呢，又得渲染頁面盅惜，渲染頁面的同時呢中剩，又要處理沒有數(shù)據(jù)或數(shù)據(jù)有問題的情況，而且抒寂，這些數(shù)據(jù)可能還需要存儲在vuex中结啼，如果要長期存起來，還要用localStorage或indexDB屈芜，賊麻煩郊愧。
稍不注意，就會出bug沸伏，而且寫著寫著糕珊，腦袋就有點不夠用了。當(dāng)數(shù)據(jù)的請求在一個頁面里面放多了毅糟，那不同的請求之間還可能存在關(guān)聯(lián)性红选，繞來繞去的，自己都不知道自己在干嘛姆另。
幸好喇肋，我提前將每個vue文件都分離開來，成了幾個獨立的文件：
```javascript
xxx-component
index.vue? ? ? // 組件的入口
template.pug? // html
style.styl? ? // css
script.js? ? ? // script
data.json? ? ? // 組件中使用到的靜態(tài)數(shù)據(jù)
```
對每個文件的寫法迹辐，也都做了個模板出來蝶防。我每次需要寫組件的時候，復(fù)制一份模板明吩，改一改就好了间学。
另外呢，該抽離的地方印荔，我都抽離了低葫，實在是抽不了，或者我搞不定的仍律，就沒去動它嘿悬。
為了完成這個應(yīng)用，我連續(xù)抽了好幾個庫文件出來水泉。（readme中有寫）
跨域庫善涨、indexDB庫窒盐、常用的功能函數(shù)庫、mongoose的Promise版curd庫
這些文件最終都被上傳到了我的個人工具庫中钢拧。 詳見
[freeedit/lib-mini-libs-collection](https://github.com/freeedit/lib-mini-libs-collection)
項目的文件其實打包后也挺大的（904kb），比較手機(jī)耗流量娶靡。
為了讓項目具有離線存儲的能力牧牢，減少流量的消耗。
所以我在項目中用webpack插件配了一個manifest.js文件出來姿锭，這就要求需要使用Https塔鳍。
但不知是域名方面還是其他什么原因，即使是在我加了https證書之后呻此，也無法訪問https轮纫，所以最終就只能暫時用http先替著。
如果瀏覽器上面顯示不安全字樣焚鲜，及瀏覽器中顯示某某WARN信息掌唾，那應(yīng)該就是HTTPS造成的。
（這個項目沒有做SSR優(yōu)化忿磅，一是這個應(yīng)用沒有做的必要糯彬，這樣會加重服務(wù)器的負(fù)擔(dān)，二是自己對這方面不熟葱她，還在起步階段）
（可能接下來撩扒，我需要認(rèn)認(rèn)真真全面學(xué)習(xí)一下SSR和PWA ServiceWorker了）
----
## 4. 問題
### 4.1 vue computed
vue computed中的函數(shù)好像不能用async+await（用的時候才發(fā)現(xiàn)它會失效），但我當(dāng)時死腦筋吨些，跳不過去搓谆，還是后來在其他地方用定時查詢來搞定的。
不知道還有沒有什么別的方法豪墅，讓computed之中能用async異步獲取數(shù)據(jù)泉手。（雖然我明白，這件事情不該由computed來做）
### 4.2 mongoose populate
不知道m(xù)ongoose的populate()函數(shù)中偶器，繼續(xù)嵌套多個同級的populate斩萌，怎么寫的。（populate的地方之中屏轰，又有多個需要populate的地方）
比如獲取文章颊郎，然后呢需要populate('floor')，在floor之中亭枷，又需要populate('ff')和populate commit數(shù)組每一個對象中的一個叫uid的屬性。不知道該怎么寫搀崭，求問叨粘。
```javascript
const postSchema = new Schema({
bar: {
type: Schema.ObjectId,
ref: 'bar',
index: true
}
lz: {
type: Schema.ObjectId,
required: true,
ref: 'user',
index: true
}
floor: [{
type: Schema.ObjectId,
ref: 'floor',
index: true
}]
})
const floorSchema = new Schema({
ff: {
type: Schema.ObjectId,
required: true,
ref: 'user'
},
commit: [{
uid: {
type: Schema.ObjectId,
ref: 'user',
}
}]
})
```
...
還有好幾個問題猾编，一時之間想不起來了。
有知道的哥哥姐姐們升敲，替我解一解答倡。
## 5. 結(jié)束語
### 5.1 幻想
學(xué)軟件三年，從電腦打字開始驴党，到影視后期處理瘪撇，再到游戲編程，最后...我選擇了前端作為自己的長期學(xué)習(xí)目標(biāo)港庄。
因為倔既，我看到了前端的未來。
現(xiàn)在的網(wǎng)頁鹏氧，已經(jīng)在逐漸向app轉(zhuǎn)型了渤涌，真的很希望有一天，看到它取代桌面的樣子把还。
當(dāng)我們的桌面本身就是一個瀏覽器的時候实蓬，輸入任何命令，都能從網(wǎng)絡(luò)上獲取到我想要的東西吊履。我們不需要再去裝WPS安皱、迅雷應(yīng)用了，因為它們已經(jīng)變成了網(wǎng)頁艇炎。
當(dāng)我們打開這些網(wǎng)頁的時候酌伊，長的和本地應(yīng)用一樣。而且它們也能像應(yīng)用一樣冕臭，被我們安裝在電腦上腺晾，頁面外沒有瀏覽器外殼，桌面最下端也沒有什么開始按鈕辜贵，只有一個搜索框悯蝉，簡單到了極點，這該是多么的棒啊托慨。
我想鼻由，這就是我希望的未來前端。而且前端已經(jīng)在向這方向靠攏了厚棵，我想要為它的發(fā)展出一份力蕉世。
### 5.2 慶幸
很慶幸，自己沒有一來就學(xué)習(xí)前端婆硬。
最開始狠轻，我是奔后期處理去的，也就是PS彬犯、AI向楼、AU查吊、AE、MAYA湖蜕、ZBrush那一套逻卖。
這也算是培養(yǎng)了自己的設(shè)計美感（哈哈~歪路子美感）。
可能很多人覺得昭抒，幾個小圖標(biāo)评也，一張PSD圖，沒什么好設(shè)計的灭返，照著做都可以做出來的盗迟，但如果沒有別人的作為參考，就很不容易了婆殿。（特別是要融情于“景”）
而且诈乒，PS的很多概念，和HTML+CSS的布局概念很像婆芦，圖層怕磨、蒙版、背景陰影消约、漸變肠鲫、打組，等等這些或粮，都與HTML+CSS不謀而合导饲，就像是天生為它們設(shè)計的。
就是因為早期形成了某些說不出來的概念氯材，所以才能在這個作品中渣锦，嘗試著把設(shè)計的空缺給補上。
### 5.3 總結(jié)
在做這個項目的時候氢哮，我體會到了大項目的來之不易袋毙。
知易行難，即使是一個看上去并不復(fù)雜的應(yīng)用冗尤，要真的做好听盖，也并不是一件簡單的事。
嘗試去做的項目越大裂七，就越覺得自己了解得過于泛泛皆看。
想要做得精細(xì)，還是得需要時間不斷地去琢磨背零。
----
原文地址：[http://blog.freeedit.cn/2017/06/12/Yihang-Tieba-Introduction/](http://blog.freeedit.cn/2017/06/12/Yihang-Tieba-Introduction/)
[易杭 : http://blog.freeedit.cn/about/](http://blog.freeedit.cn/about/) 2017/6/12 10:07 8906字
