太急了點吧？貼吧PWA20天就出爐了

時間 2019-11-10

標籤急了貼吧 pwa20 pwa 出爐简体版

原文原文鏈接

"老司機開車從不須要理由喜歡我就來點我吧"
易杭貼吧--新鮮出爐的中文社區 http://tieba.freeedit.cnjavascript

1. 前述

最近一直在寫一個發貼子的應用，前不久纔剛剛「完工」（其實還有不少須要改進的地方）。
這個應用是仿着上一個版本的百度貼吧來寫的，最初的打算是想要完成百度貼吧的最主要的那部分基本功能，但真正作起來，卻不是一件簡單的事。 css

這個項目一共用了近二十天的時間，我在這段時間內，既踩了不少的坑，也學到了不少的知識。
踩的坑越多，修復的bug越多，看的東西越多，就越以爲本身知識淺陋。
不少的東西，都是本身用過了以後，纔會恍然大悟。看上一百遍，還真的不如本身動手寫一遍。
因此我想將這個應用的構建過程和在這段時間內的心得體會記一記。本身呢，也能在寫的過程當中，對應用中的某些問題進行反思。 html

@-v-@前端

其實本身歷來沒有這麼完整地作過一個這樣的項目。
從應用的選題、界面的設計、工具的選擇，到環境的搭建、應用的部署，最後到應用的測試和修復，所有依賴於本身。
我既算是這個應用的「UI設計師」，也算是這個應用的「前端工程師」、「後端工程師」、「數據庫工程師」，以及「項目架構師」。（忽然就把本身說得高大上了，啼笑皆非~） vue

不過，本身一我的要演這麼多的角色，其中的困難很大。
近二十天的時間裏，我不斷地去嘗試打磨做品的細節，但願能作好每個環節。
但即便到了部署的時候，它也仍然只是個布娃娃。
不過，仍然會使我高興的是，它至少還能夠「動」。java

2. 介紹

這張圖就是這個項目第一次打開時的界面。
當咱們不斷往右滑的時候，它又會一頁頁地顯示。到了最後一頁，它又會很調皮地叫咱們返回到第一頁，而後點擊進入。
進入之後，就是登陸、註冊之類的。完成了以後，就會直接進入到app裏面，而後就能夠搜索發帖了。 node

頁面展現之類的，我就不寫了，同伴們看了，估計也會以爲沒什麼意思。
百度貼吧長什麼樣子，它也就大概長什麼樣子，只是某些地方，我作了更改和精簡（由於實在是沒有那麼多時間去寫這些功能，功能項太多了，單靠本身一我的，根本難以在短期內作完，笑~）。
只須要去玩一玩，就知道效果是怎麼樣的了，因此我就直接給地址吧。 webpack

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

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

（項目結構是怎樣的，以及如何去運行這個項目，見項目源碼地址中的readme文件。）

在這個項目中，我內置了一個彩蛋，大致是長這個樣子的 :

嗯嗯，其實咱們能夠多試幾回，每次出現的消息是不同的，就彷彿有個小機器人在跟咱們對話同樣。

其餘的效果圖，都存放在項目的result文件夾中，地址是：

freeedit/yihang-tieba/tieba-design/result

最後的最後，放上一個總覽圖。

（寫了一大堆有的沒的，接下來纔算是進入正文。）

3. 過程

最初想作一個和QQ如出一轍的聊天工具，但後來又以爲聊天的工具太廣泛了，因此就將目標轉到了百度貼吧。
一樣都是和別人一塊兒聊天吹水水，貼吧卻要顯得更好玩一些。（秋名山老司機一枚前來覲見）
本身也很喜歡貼吧那種「搞笑」、「無畏」的吹水環境。因此後來，就敲定主意作一個貼吧出來。

3.1 構思

我將項目分紅了四個部分來分步驟完成：

1 設計 freeedit/yihang-tieba/tieba-design
2 前端 freeedit/yihang-tieba/tieba-client
3 後端 freeedit/yihang-tieba/tieba-server
4 先後端鏈接 + 將項目部署給主機

3.2 設計

小部分的設計圖存放在這裏: （還有一大部分被我失誤給刪掉了）

freeedit/yihang-tieba/tieba-design

首先在阿里矢量圖標庫中，選取了近80個svg圖，再用icomoon將它們打包成能引入stylus的字體文件。
（暈死，我誤刪的部分，就包括了它，致使我下一次想替一個圖標，從新打包成新的字體文件都不行）

接着，我便開始設計底部的五個小圖標。原本打算用AI畫幾個矢量圖，但電腦上沒裝，再加上好久沒用過了，不知道還會不會用，就直接用PS來畫了。
PS來畫的時候，總感受，CC2014之後，對矢量圖層進行交併補運算好像不同了，不知道是否是本身的錯覺。合併多個矢量圖層，總不會出現本身想要的效果（也許是本身還沒摸透PS吧）。最後呢，就只能作位圖了。

作完了這些，我纔來開始畫應用的圖標。一個簡簡單單的吧字，放在一個圓角矩形中，上下兩個缺口，底色用#3388ff，搞定！

在上圖最右邊的吧字圖標，是用來給PWA圖標配的。
第二個圖標，是用來作用戶默認的頭像的。
其餘幾個就是應用圖標和底欄圖標了。
（爲了給用戶一種圖標在往上升騰的感受，我故意將幾個線條樣式的圖標下面，開了個口子。用戶可能看着就會很難受，就想要把它下面那根線條補全，而後他就可能會按下去。）

另外呢，考慮到網絡可能會出現問題，圖片地址找不到，因此也準備了一個默認的圖片背景圖。

3.3 前端

freeedit/yihang-tieba/tieba-client

最開始想用sass寫的，可是後來感受stylus更簡潔，更乾淨，看上去更好看，而後就選它來處理CSS了。
決定用stylus以後，就想找個和stylus同樣縮進式語法的html預處理器。正好，Jade和它真的是絕配。兩個都長得如出一轍的，用起來也方便。
我很慶幸本身選了stylue+pug的組合，要否則，這個應用可能須要一個月才能搞定呢。

到這兒呢，個人強迫症就犯了。有了CSS和HTML的預處理器，怎麼着，JS也要上個「預處理器」吧。
當時瘋狂地想要用TS，其緣由並非由於它很酷（固然，酷也算它的一方面），而是想三劍客不能只有兩劍客（babel不算劍客，它頂可能是瓶萬金油，我的愚見），這樣打架不利索。
（還有一個最最重要的緣由，說出來，大家可能會笑死我，它那atom file-icons圖標賊好看，綠色偏青色，比JS那個屎黃色好看多了。）
各位看官笑一笑就好了，飄過飄過...

迴歸理智。。。

vue對ts的支持好像還不怎麼好，vue-loader是能夠用，但用着用着，有些文件引不進來。啊！請原諒個人無知，我真不知道爲何會這樣。
最後，由於搞不定了，仍是隻要兩個劍客就夠了，三個劍客容易吵架。再加上從未用過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

"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

後端卻是沒什麼可說的（後端的哥哥姐姐們別生氣，我說的是本身寫的後端，笑~），無非就是用koa搭了個後臺，搞一搞跨域問題（之後若是有時間呢，再弄一個token驗證一下），而後用mongoose連一下mongodb，寫一寫schema，作一下limit、skip、populate之類的分頁、關聯查詢，再加上那一套簡單的curd操做，沒了。

哦，對了，我寫了一個很扯淡的代理方式。
在應用中的直播那一項，我本身搞不定，不知道怎麼作直播，而後又想填補它的空缺。
重要的是，百度貼吧裏面弄一個直播...這個...總感受有點跑題的味道。（這不是發水貼的地方，直播間也能水貼？）
固然，最最重要的仍是，本身搞不定直播這個功能。
而後，我就用了個「知道」，來頂替「直播」的位置。（主要是由於，本身常常去貼吧裏面搜貼子看，找一些之前別人問過的問題，畢竟有些問題在別的地方找不到答案，或者回答得很差...）

而後我就須要給用戶實時提示，這個地方，我代理的是360問答頁面上請求的接口。
最後用戶須要獲取到相應的信息，這個地方，我代理的是百度知道的頁面，而後把頁面上的數據抓下來，造成json文件返回給用戶。

恩恩，360問答的實時提示+百度知道的頁面信息，這就是傳說中的搜索，本身都被本身搞的笑死了，不過還別說，辦法雖然有點那啥，但效果還不錯誒，至少用來作一個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"
  }

3.5 鏈接

其實吧，數據在鏈接時是最麻煩的了。
由於數據請求須要時間，頁面須要等待請求完成，完成以後呢，又得渲染頁面，渲染頁面的同時呢，又要處理沒有數據或數據有問題的狀況，並且，這些數據可能還須要存儲在vuex中，若是要長期存起來，還要用localStorage或indexDB，賊麻煩。
稍不注意，就會出bug，並且寫着寫着，腦殼就有點不夠用了。當數據的請求在一個頁面裏面放多了，那不一樣的請求之間還可能存在關聯性，繞來繞去的，本身都不知道本身在幹嗎。

幸虧，我提早將每一個vue文件都分離開來，成了幾個獨立的文件：

xxx-component
  index.vue      // 組件的入口
  template.pug   // html
  style.styl     // css
  script.js      // script
  data.json      // 組件中使用到的靜態數據

對每一個文件的寫法，也都作了個模板出來。我每次須要寫組件的時候，複製一份模板，改一改就行了。
另外呢，該抽離的地方，我都抽離了，實在是抽不了，或者我搞不定的，就沒去動它。

爲了完成這個應用，我連續抽了好幾個庫文件出來。（readme中有寫）
跨域庫、indexDB庫、經常使用的功能函數庫、mongoose的Promise版curd庫

這些文件最終都被上傳到了個人我的工具庫中。詳見
freeedit/lib-mini-libs-collection

項目的文件其實打包後也挺大的（904kb），比較手機耗流量。
爲了讓項目具備離線存儲的能力，減小流量的消耗。
因此我在項目中用webpack插件配了一個manifest.js文件出來，這就要求須要使用Https。
但不知是域名方面仍是其餘什麼緣由，即便是在我加了https證書以後，也沒法訪問https，因此最終就只能暫時用http先替着。
若是瀏覽器上面顯示不安全字樣，及瀏覽器中顯示某某WARN信息，那應該就是HTTPS形成的。

（這個項目沒有作SSR優化，一是這個應用沒有作的必要，這樣會加劇服務器的負擔，二是本身對這方面不熟，還在起步階段）
（可能接下來，我須要認認真真全面學習一下SSR和PWA ServiceWorker了）

4. 問題

4.1 vue computed

vue computed中的函數好像不能用async+await（用的時候才發現它會失效），但我當時死腦筋，跳不過去，仍是後來在其餘地方用定時查詢來搞定的。
不知道還有沒有什麼別的方法，讓computed之中能用async異步獲取數據。（雖然我明白，這件事情不應由computed來作）

4.2 mongoose populate

不知道mongoose的populate()函數中，繼續嵌套多個同級的populate，怎麼寫的。（populate的地方之中，又有多個須要populate的地方）

好比獲取文章，而後呢須要populate('floor')，在floor之中，又須要populate('ff')和populate commit數組每個對象中的一個叫uid的屬性。不知道該怎麼寫，求問。

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. 結束語

5.1 幻想

學軟件三年，從電腦打字開始，到影視後期處理，再到遊戲編程，最後...我選擇了前端做爲本身的長期學習目標。
由於，我看到了前端的將來。
如今的網頁，已經在逐漸向app轉型了，真的很但願有一天，看到它取代桌面的樣子。
當咱們的桌面自己就是一個瀏覽器的時候，輸入任何命令，都能從網絡上獲取到我想要的東西。咱們不須要再去裝WPS、迅雷應用了，由於它們已經變成了網頁。
當咱們打開這些網頁的時候，長的和本地應用同樣。並且它們也能像應用同樣，被咱們安裝在電腦上，頁面外沒有瀏覽器外殼，桌面最下端也沒有什麼開始按鈕，只有一個搜索框，簡單到了極點，這該是多麼的棒啊。
我想，這就是我但願的將來前端。並且前端已經在向這方向靠攏了，我想要爲它的發展出一份力。

5.2 慶幸

很慶幸，本身沒有一來就學習前端。
最開始，我是奔後期處理去的，也就是PS、AI、AU、AE、MAYA、ZBrush那一套。
這也算是培養了本身的設計美感（哈哈~歪路子美感）。
可能不少人以爲，幾個小圖標，一張PSD圖，沒什麼好設計的，照着作均可以作出來的，但若是沒有別人的做爲參考，就很不容易了。（特別是要融情於「景」）
並且，PS的不少概念，和HTML+CSS的佈局概念很像，圖層、蒙版、背景陰影、漸變、打組，等等這些，都與HTML+CSS不謀而合，就像是天生爲它們設計的。
就是由於早期造成了某些說不出來的概念，因此才能在這個做品中，嘗試着把設計的空缺給補上。