摘要：老司機(jī)開(kāi)車從不需要理由喜歡我就來(lái)點(diǎn)我吧易杭貼吧新鮮出爐的中文社區(qū)前述最近一直在寫(xiě)一個(gè)發(fā)貼子的應(yīng)用，前不久才剛剛完工其實(shí)還有很多需要改進(jìn)的地方。

"老司機(jī)開(kāi)車 從不需要理由 喜歡我 就來(lái)點(diǎn)我吧"   
易杭貼吧--新鮮出爐的中文社區(qū) http://tieba.freeedit.cn

最近一直在寫(xiě)一個(gè)發(fā)貼子的應(yīng)用，前不久才剛剛“完工”（其實(shí)還有很多需要改進(jìn)的地方）。
這個(gè)應(yīng)用是仿著上一個(gè)版本的百度貼吧來(lái)寫(xiě)的，最初的打算是想要完成百度貼吧的最主要的那部分基本功能，但真正做起來(lái)，卻不是一件簡(jiǎn)單的事。

這個(gè)項(xiàng)目一共用了近二十天的時(shí)間，我在這段時(shí)間內(nèi)，既踩了很多的坑，也學(xué)到了很多的知識(shí)。
踩的坑越多，修復(fù)的bug越多，看的東西越多，就越覺(jué)得自己知識(shí)淺陋。
很多的東西，都是自己用過(guò)了之后，才會(huì)恍然大悟。看上一百遍，還真的不如自己動(dòng)手寫(xiě)一遍。
所以我想將這個(gè)應(yīng)用的構(gòu)建過(guò)程和在這段時(shí)間內(nèi)的心得體會(huì)記一記。自己呢，也能在寫(xiě)的過(guò)程中，對(duì)應(yīng)用中的某些問(wèn)題進(jìn)行反思。

@-v-@

其實(shí)自己從來(lái)沒(méi)有這么完整地做過(guò)一個(gè)這樣的項(xiàng)目。
從應(yīng)用的選題、界面的設(shè)計(jì)、工具的選擇，到環(huán)境的搭建、應(yīng)用的部署，最后到應(yīng)用的測(cè)試和修復(fù)，全部依賴于自己。
我既算是這個(gè)應(yīng)用的“UI設(shè)計(jì)師”，也算是這個(gè)應(yīng)用的“前端工程師”、“后端工程師”、“數(shù)據(jù)庫(kù)工程師”，以及“項(xiàng)目架構(gòu)師”。（突然就把自己說(shuō)得高大上了，哭笑不得~）

不過(guò)，自己一個(gè)人要演這么多的角色，其中的困難很大。
近二十天的時(shí)間里，我不斷地去嘗試打磨作品的細(xì)節(jié)，希望能做好每一個(gè)環(huán)節(jié)。
但即使到了部署的時(shí)候，它也仍然只是個(gè)布娃娃。
不過(guò)，仍然會(huì)使我高興的是，它至少還可以“動(dòng)”。

這張圖就是這個(gè)項(xiàng)目第一次打開(kāi)時(shí)的界面。
當(dāng)我們不斷往右滑的時(shí)候，它又會(huì)一頁(yè)頁(yè)地顯示。到了最后一頁(yè)，它又會(huì)很調(diào)皮地叫我們返回到第一頁(yè)，然后點(diǎn)擊進(jìn)入。
進(jìn)入以后，就是登錄、注冊(cè)之類的。完成了之后，就會(huì)直接進(jìn)入到app里面，然后就可以搜索發(fā)帖了。

頁(yè)面展示之類的，我就不寫(xiě)了，同伴們看了，估計(jì)也會(huì)覺(jué)得沒(méi)什么意思。
百度貼吧長(zhǎng)什么樣子，它也就大概長(zhǎng)什么樣子，只是某些地方，我做了更改和精簡(jiǎn)（因?yàn)閷?shí)在是沒(méi)有那么多時(shí)間去寫(xiě)這些功能，功能項(xiàng)太多了，單靠自己一個(gè)人，根本難以在短時(shí)間內(nèi)做完，笑~）。
只需要去玩一玩，就知道效果是怎么樣的了，所以我就直接給地址吧。

演示 --- 易杭貼吧--新鮮出爐的中文社區(qū) http://tieba.freeedit.cn

源碼 --- https://github.com/freeedit/yihang-tieba

（項(xiàng)目結(jié)構(gòu)是怎樣的，以及如何去運(yùn)行這個(gè)項(xiàng)目，見(jiàn)項(xiàng)目源碼地址中的readme文件。）

在這個(gè)項(xiàng)目中，我內(nèi)置了一個(gè)彩蛋，大體是長(zhǎng)這個(gè)樣子的 :

嗯嗯，其實(shí)我們可以多試幾次，每次出現(xiàn)的消息是不一樣的，就仿佛有個(gè)小機(jī)器人在跟我們對(duì)話一樣。

其他的效果圖，都存放在項(xiàng)目的result文件夾中，地址是：

freeedit/yihang-tieba/tieba-design/result

最后的最后，放上一個(gè)總覽圖。

（寫(xiě)了一大堆有的沒(méi)的，接下來(lái)才算是進(jìn)入正文。）

最初想做一個(gè)和QQ一模一樣的聊天工具，但后來(lái)又覺(jué)得聊天的工具太普遍了，所以就將目標(biāo)轉(zhuǎn)到了百度貼吧。
同樣都是和別人一起聊天吹水水，貼吧卻要顯得更好玩一些。（秋名山老司機(jī)一枚前來(lái)覲見(jiàn)）
自己也很喜歡貼吧那種“搞笑”、“無(wú)畏”的吹水環(huán)境。所以后來(lái)，就敲定主意做一個(gè)貼吧出來(lái)。

我將項(xiàng)目分成了四個(gè)部分來(lái)分步驟完成：

1 設(shè)計(jì) freeedit/yihang-tieba/tieba-design
2 前端 freeedit/yihang-tieba/tieba-client
3 后端 freeedit/yihang-tieba/tieba-server
4 前后端連接 + 將項(xiàng)目部署給主機(jī)

小部分的設(shè)計(jì)圖存放在這里: （還有一大部分被我失誤給刪掉了）

freeedit/yihang-tieba/tieba-design

首先在阿里矢量圖標(biāo)庫(kù)中，選取了近80個(gè)svg圖，再用icomoon將它們打包成能引入stylus的字體文件。
（暈死，我誤刪的部分，就包括了它，導(dǎo)致我下一次想替一個(gè)圖標(biāo)，重新打包成新的字體文件都不行）

接著，我便開(kāi)始設(shè)計(jì)底部的五個(gè)小圖標(biāo)。本來(lái)打算用AI畫(huà)幾個(gè)矢量圖，但電腦上沒(méi)裝，再加上很久沒(méi)用過(guò)了，不知道還會(huì)不會(huì)用，就直接用PS來(lái)畫(huà)了。
PS來(lái)畫(huà)的時(shí)候，總感覺(jué)，CC2014以后，對(duì)矢量圖層進(jìn)行交并補(bǔ)運(yùn)算好像不一樣了，不知道是不是自己的錯(cuò)覺(jué)。合并多個(gè)矢量圖層，總不會(huì)出現(xiàn)自己想要的效果（也許是自己還沒(méi)摸透PS吧）。最后呢，就只能做位圖了。

做完了這些，我才來(lái)開(kāi)始畫(huà)應(yīng)用的圖標(biāo)。一個(gè)簡(jiǎn)簡(jiǎn)單單的吧字，放在一個(gè)圓角矩形中，上下兩個(gè)缺口，底色用#3388ff，搞定！

在上圖最右邊的吧字圖標(biāo)，是用來(lái)給PWA圖標(biāo)配的。
第二個(gè)圖標(biāo)，是用來(lái)做用戶默認(rèn)的頭像的。
其他幾個(gè)就是應(yīng)用圖標(biāo)和底欄圖標(biāo)了。
（為了給用戶一種圖標(biāo)在往上升騰的感覺(jué)，我故意將幾個(gè)線條樣式的圖標(biāo)下面，開(kāi)了個(gè)口子。用戶可能看著就會(huì)很難受，就想要把它下面那根線條補(bǔ)全，然后他就可能會(huì)按下去。）

另外呢，考慮到網(wǎng)絡(luò)可能會(huì)出現(xiàn)問(wèn)題，圖片地址找不到，所以也準(zhǔn)備了一個(gè)默認(rèn)的圖片背景圖。

freeedit/yihang-tieba/tieba-client

最開(kāi)始想用sass寫(xiě)的，但是后來(lái)感覺(jué)stylus更簡(jiǎn)潔，更干凈，看上去更好看，然后就選它來(lái)處理CSS了。
決定用stylus之后，就想找個(gè)和stylus一樣縮進(jìn)式語(yǔ)法的html預(yù)處理器。正好，Jade和它真的是絕配。兩個(gè)都長(zhǎng)得一模一樣的，用起來(lái)也方便。
我很慶幸自己選了stylue+pug的組合，要不然，這個(gè)應(yīng)用可能需要一個(gè)月才能搞定呢。

到這兒呢，我的強(qiáng)迫癥就犯了。有了CSS和HTML的預(yù)處理器，怎么著，JS也要上個(gè)“預(yù)處理器”吧。
當(dāng)時(shí)瘋狂地想要用TS，其原因并不是因?yàn)樗芸幔ó?dāng)然，酷也算它的一方面），而是想三劍客不能只有兩劍客（babel不算劍客，它頂多是瓶萬(wàn)金油，個(gè)人愚見(jiàn)），這樣打架不利索。
（還有一個(gè)最最重要的原因，說(shuō)出來(lái)，你們可能會(huì)笑死我，它那atom file-icons圖標(biāo)賊好看，綠色偏青色，比JS那個(gè)屎黃色好看多了。）
各位看官笑一笑就行了，飄過(guò)飄過(guò)...

回歸理智。。。

vue對(duì)ts的支持好像還不怎么好，vue-loader是可以用，但用著用著，有些文件引不進(jìn)來(lái)。?。≌?qǐng)?jiān)徫业臒o(wú)知，我真不知道為什么會(huì)這樣。
最后，因?yàn)楦悴欢?，還是只要兩個(gè)劍客就夠了，三個(gè)劍客容易吵架。再加上從未用過(guò)TS，不好掌控大局啊。一旦TS出了BUG，我就得哭暈在廁所，果斷放棄好了。強(qiáng)迫癥之類的東西，身為一名前端化緣人，果然還是不該有啊。

最終使用到的一套前端工具，就是這樣的：

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

  "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"
  }

freeedit/yihang-tieba/tieba-server

后端倒是沒(méi)什么可說(shuō)的（后端的哥哥姐姐們別生氣，我說(shuō)的是自己寫(xiě)的后端，笑~），無(wú)非就是用koa搭了個(gè)后臺(tái)，搞一搞跨域問(wèn)題（以后如果有時(shí)間呢，再弄一個(gè)token驗(yàn)證一下），然后用mongoose連一下mongodb，寫(xiě)一寫(xiě)schema，做一下limit、skip、populate之類的分頁(yè)、關(guān)聯(lián)查詢，再加上那一套簡(jiǎn)單的curd操作，沒(méi)了。

哦，對(duì)了，我寫(xiě)了一個(gè)很扯淡的代理方式。
在應(yīng)用中的直播那一項(xiàng)，我自己搞不定，不知道怎么做直播，然后又想填補(bǔ)它的空缺。
重要的是，百度貼吧里面弄一個(gè)直播...這個(gè)...總感覺(jué)有點(diǎn)跑題的味道。（這不是發(fā)水貼的地方，直播間也能水貼？）
當(dāng)然，最最重要的還是，自己搞不定直播這個(gè)功能。
然后，我就用了個(gè)“知道”，來(lái)頂替“直播”的位置。（主要是因?yàn)椋约航?jīng)常去貼吧里面搜貼子看，找一些以前別人問(wèn)過(guò)的問(wèn)題，畢竟有些問(wèn)題在別的地方找不到答案，或者回答得不好...）

然后我就需要給用戶實(shí)時(shí)提示，這個(gè)地方，我代理的是360問(wèn)答頁(yè)面上請(qǐng)求的接口。
最后用戶需要獲取到相應(yīng)的信息，這個(gè)地方，我代理的是百度知道的頁(yè)面，然后把頁(yè)面上的數(shù)據(jù)抓下來(lái)，形成json文件返回給用戶。

恩恩，360問(wèn)答的實(shí)時(shí)提示+百度知道的頁(yè)面信息，這就是傳說(shuō)中的搜索，自己都被自己搞的笑死了，不過(guò)還別說(shuō)，辦法雖然有點(diǎn)那啥，但效果還不錯(cuò)誒，至少用來(lái)做一個(gè)DEMO，足夠了。

  "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"
  }

其實(shí)吧，數(shù)據(jù)在連接時(shí)是最麻煩的了。
因?yàn)閿?shù)據(jù)請(qǐng)求需要時(shí)間，頁(yè)面需要等待請(qǐng)求完成，完成之后呢，又得渲染頁(yè)面，渲染頁(yè)面的同時(shí)呢，又要處理沒(méi)有數(shù)據(jù)或數(shù)據(jù)有問(wèn)題的情況，而且，這些數(shù)據(jù)可能還需要存儲(chǔ)在vuex中，如果要長(zhǎng)期存起來(lái)，還要用localStorage或indexDB，賊麻煩。
稍不注意，就會(huì)出bug，而且寫(xiě)著寫(xiě)著，腦袋就有點(diǎn)不夠用了。當(dāng)數(shù)據(jù)的請(qǐng)求在一個(gè)頁(yè)面里面放多了，那不同的請(qǐng)求之間還可能存在關(guān)聯(lián)性，繞來(lái)繞去的，自己都不知道自己在干嘛。

幸好，我提前將每個(gè)vue文件都分離開(kāi)來(lái)，成了幾個(gè)獨(dú)立的文件：

xxx-component
  index.vue      // 組件的入口
  template.pug   // html
  style.styl     // css
  script.js      // script
  data.json      // 組件中使用到的靜態(tài)數(shù)據(jù)

對(duì)每個(gè)文件的寫(xiě)法，也都做了個(gè)模板出來(lái)。我每次需要寫(xiě)組件的時(shí)候，復(fù)制一份模板，改一改就好了。
另外呢，該抽離的地方，我都抽離了，實(shí)在是抽不了，或者我搞不定的，就沒(méi)去動(dòng)它。

為了完成這個(gè)應(yīng)用，我連續(xù)抽了好幾個(gè)庫(kù)文件出來(lái)。（readme中有寫(xiě)）
跨域庫(kù)、indexDB庫(kù)、常用的功能函數(shù)庫(kù)、mongoose的Promise版curd庫(kù)

這些文件最終都被上傳到了我的個(gè)人工具庫(kù)中。 詳見(jiàn)
freeedit/lib-mini-libs-collection

項(xiàng)目的文件其實(shí)打包后也挺大的（904kb），比較手機(jī)耗流量。
為了讓項(xiàng)目具有離線存儲(chǔ)的能力，減少流量的消耗。
所以我在項(xiàng)目中用webpack插件配了一個(gè)manifest.js文件出來(lái)，這就要求需要使用Https。
但不知是域名方面還是其他什么原因，即使是在我加了https證書(shū)之后，也無(wú)法訪問(wèn)https，所以最終就只能暫時(shí)用http先替著。
如果瀏覽器上面顯示不安全字樣，及瀏覽器中顯示某某WARN信息，那應(yīng)該就是HTTPS造成的。

（這個(gè)項(xiàng)目沒(méi)有做SSR優(yōu)化，一是這個(gè)應(yīng)用沒(méi)有做的必要，這樣會(huì)加重服務(wù)器的負(fù)擔(dān)，二是自己對(duì)這方面不熟，還在起步階段）
（可能接下來(lái)，我需要認(rèn)認(rèn)真真全面學(xué)習(xí)一下SSR和PWA ServiceWorker了）

vue computed中的函數(shù)好像不能用async+await（用的時(shí)候才發(fā)現(xiàn)它會(huì)失效），但我當(dāng)時(shí)死腦筋，跳不過(guò)去，還是后來(lái)在其他地方用定時(shí)查詢來(lái)搞定的。
不知道還有沒(méi)有什么別的方法，讓computed之中能用async異步獲取數(shù)據(jù)。（雖然我明白，這件事情不該由computed來(lái)做）

不知道m(xù)ongoose的populate()函數(shù)中，繼續(xù)嵌套多個(gè)同級(jí)的populate，怎么寫(xiě)的。（populate的地方之中，又有多個(gè)需要populate的地方）

比如獲取文章，然后呢需要populate("floor")，在floor之中，又需要populate("ff")和populate commit數(shù)組每一個(gè)對(duì)象中的一個(gè)叫uid的屬性。不知道該怎么寫(xiě)，求問(wèn)。

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",
    }
  }]
})

...
還有好幾個(gè)問(wèn)題，一時(shí)之間想不起來(lái)了。
有知道的哥哥姐姐們，替我解一解。

學(xué)軟件三年，從電腦打字開(kāi)始，到影視后期處理，再到游戲編程，最后...我選擇了前端作為自己的長(zhǎng)期學(xué)習(xí)目標(biāo)。
因?yàn)?，我看到了前端的未?lái)。
現(xiàn)在的網(wǎng)頁(yè)，已經(jīng)在逐漸向app轉(zhuǎn)型了，真的很希望有一天，看到它取代桌面的樣子。
當(dāng)我們的桌面本身就是一個(gè)瀏覽器的時(shí)候，輸入任何命令，都能從網(wǎng)絡(luò)上獲取到我想要的東西。我們不需要再去裝WPS、迅雷應(yīng)用了，因?yàn)樗鼈円呀?jīng)變成了網(wǎng)頁(yè)。
當(dāng)我們打開(kāi)這些網(wǎng)頁(yè)的時(shí)候，長(zhǎng)的和本地應(yīng)用一樣。而且它們也能像應(yīng)用一樣，被我們安裝在電腦上，頁(yè)面外沒(méi)有瀏覽器外殼，桌面最下端也沒(méi)有什么開(kāi)始按鈕，只有一個(gè)搜索框，簡(jiǎn)單到了極點(diǎn)，這該是多么的棒啊。
我想，這就是我希望的未來(lái)前端。而且前端已經(jīng)在向這方向靠攏了，我想要為它的發(fā)展出一份力。

很慶幸，自己沒(méi)有一來(lái)就學(xué)習(xí)前端。
最開(kāi)始，我是奔后期處理去的，也就是PS、AI、AU、AE、MAYA、ZBrush那一套。
這也算是培養(yǎng)了自己的設(shè)計(jì)美感（哈哈~歪路子美感）。
可能很多人覺(jué)得，幾個(gè)小圖標(biāo)，一張PSD圖，沒(méi)什么好設(shè)計(jì)的，照著做都可以做出來(lái)的，但如果沒(méi)有別人的作為參考，就很不容易了。（特別是要融情于“景”）
而且，PS的很多概念，和HTML+CSS的布局概念很像，圖層、蒙版、背景陰影、漸變、打組，等等這些，都與HTML+CSS不謀而合，就像是天生為它們?cè)O(shè)計(jì)的。
就是因?yàn)樵缙谛纬闪四承┱f(shuō)不出來(lái)的概念，所以才能在這個(gè)作品中，嘗試著把設(shè)計(jì)的空缺給補(bǔ)上。

在做這個(gè)項(xiàng)目的時(shí)候，我體會(huì)到了大項(xiàng)目的來(lái)之不易。
知易行難，即使是一個(gè)看上去并不復(fù)雜的應(yīng)用，要真的做好，也并不是一件簡(jiǎn)單的事。
嘗試去做的項(xiàng)目越大，就越覺(jué)得自己了解得過(guò)于泛泛。
想要做得精細(xì)，還是得需要時(shí)間不斷地去琢磨。

原文地址：http://blog.freeedit.cn/2017/06/12/Yihang-Tieba-Introduction/

易杭 : http://blog.freeedit.cn/about/ 2017/6/12 10:07 8906字