1.前言
本文介紹了Poetry--隨機名句接口的Web前端開發。從項目的前期規劃/技術選型到後期的實現落地做了詳細地記錄與總結，其中穿插部分技術知識。本文只是Poetry v1.0的記錄與總結，後期隨着項目的不斷推進，可能會在本文後加上version1.1+的總結。望各位關注。另，整個項目我已部署上線，可在http://ngxs.ink訪問（首次訪問加載速度偏慢）。
由於整個網站包括前端--後臺--數據庫--服務器等都由我個人完成，安全機制難免疏漏，望各位大神高擡貴手，我感激不盡！
2.目錄
3.正文
3.1 前端規劃
對於前端部分的總體規劃，我在前期做了一些工作。首先針對項目的整體定位和受衆進行分析。Poetry項目的功能是向開發人員提供一個Restful接口，每次隨機返回一句名句。那麼我對它的定位就是一個Restful接口，受衆就是有此類需求的開發人員。由於希望積攢用戶和提升技術棧，需要搭建一個網站，通過用戶的註冊登陸等功能，記錄用戶信息。這是用戶在使用接口前，必須完成的步驟。當用戶註冊成爲網站會員之後，便可以登陸進入網站主頁。對於主頁的規劃，我分了三點，一是要用戶能夠看見自己對於接口的使用量；二是用戶需要對於此網站有一個客觀的認知，這個認知體現在網站的PV上，我認爲PV數據不單單只是網站的瀏覽量，體現PV的應該是網站的註冊使用量，所以註冊量作爲一個需要可視化的數據出現在本項目前端的規劃裏。最後，用戶需要一個幫助文檔來指導其使用本網站的API（本來還計劃了支付功能和邀請機制，支付功能作爲用戶的接口用量限制，但是遵循由簡到繁的原則，在Version1.0砍掉了這兩個功能，只做了統一的後臺請求次數和頻率限制，這會在後臺總結部分體現出來）。
最終，網站前端的初步規劃如下所示：
3.2 前端技術選型
現代前端無非兩種方式，第一種HTML5+CSS3+JavaScript(含JQuery)，第二種就是三大框架Vue/React/Angular，這裏我無疑選擇第二種。接下來，在對於自己技術的提升方面，由於Vue的輕量級，自己在之前的學習實踐中（包括小程序的搭建，微信小程序前端用的是類似Vue的框架）已經比較熟悉Vue，因此在React和Angular之中選擇。Angualr1.x在之前學習過一些，分層比較清晰，但是對技術的挑戰性不大，排除。最後基於對於技術的癡迷與挑戰（聽說），我選擇了Angular8，它跳出了傳統的JavaScript而轉用更加規範的超類TypeScript且框架內容豐富，底層架構穩定，版本更新比較平穩（這些特點都是我自己體會到的），阿里雲就用的是Angualr2+，而且使用TypeScript對於我這種前後端都做的碼畜來說，切換起來更加自如。基於以上分析，前端技術選型最終定在更加“重量級”的Angualr8。後來又經過對NG-ZORRO與MATERIAL的比對，個人感覺螞蟻團隊的NG-ZORRO的體驗更好。所以最終前端技術選型定爲Angular8 + NG-ZORRO。
3.3 Angular8 + NG-ZORRO的使用
（對於技術不感興趣的可以跳過）
3.3.1 項目初始化
首先，全局安裝angular-cli工具。這裏說一點，angular-cli是對webpack的二次封裝，所以使用了angular-cli就沒必要再使用webpack了。根據前期對於官方文檔的學習，使用以下命令構建項目
npm install -g @angular/cli
ng new angular-poetry
cd angular-poetry
ng serve --open --port 4201
這樣就可以在http://localhost:4201看到運行的項目了。
3.3.2 項目各界面邏輯簡述
根據前期的規劃，應該有至少5個界面，註冊 / 登陸 / 用戶接口用量 / 網站接口用量 / 幫助文檔 。 雖然目前註冊和登陸是必須在第一步完成的，但是之後項目要改進，如果在用戶未登陸的情況下也可以展示部分數據，那麼“註冊和登陸必須在第一步”這個邏輯就必須要改動。項目前期儘量多想一些，對後期優化改進有很大幫助。所以在Version1.0的時候，就另外需要一個welcome頁面來承載登陸和註冊，那麼此時的登陸和註冊就變成了兩個子組件（就那麼點基本信息沒必要做成頁面，況且之後可能還要嵌套模態層進行登陸 / 註冊）。如果後面三個功能都變成單獨的頁面，在Angular本身就重量級（加載慢）的缺點下，無疑增加了頁面跳轉的時間，況且兩個用量頁面的設計風格如果差異很大的話，就會丟失網站UI的統一性，而如果風格統一的話，做成兩個單獨的頁面也就失去了它作爲單獨頁面的意義。所以，後面三個功能我決定做在同一個頁面上，即將其變成三個子組件，嵌套在同一個頁面框架中。最後，需要一個404頁面，不能讓服務器找不到頁面時，返回一個Nginx的404頁面吧？綜上所述，項目的組件結構關係如下：
項目結構如下：
achievement ---- （用戶邀請的其他用戶列表）功勳
index --------------（登陸後顯示的主頁面）主頁
interfaces -------- 網站總接入量
login --------------- 登陸
my-usage -------- 我的用量
not-found -------- Not Found 404
purchase -------- 購買接入量
register ---------- 註冊
today ------------- 網站今日用量
welcome -------- （內含login和register的）歡迎頁
① 先用cli命令把需要的組件都創建一下。
ng generate component welcome
//或者
ng g c welcome
② 再到 app.module.ts 裏面修改一下組件的屬性，把子組件嵌套進去。其中path值爲空的部分是默認導航的組件。
③ 引入NG-ZORRO
ng add ng-zorro-antd
3.3.2.1 welcome邏輯簡述
welcome的內容就是一張圖片和一個遮罩層主要作爲背景，後期考慮將背景動態化，隨機變換圖片和切換樣式。
3.3.2.2 login邏輯簡述
login組件是用一個table和一個form做成的，table主要來限制顯示的大體框架，form作爲提交表單。首次使用NG-ZORRO的地方。在NG-ZORRO組件庫的示例中找到需要的input框樣式，參考其實現代碼，寫出符合實際需求的組件。如：
<nz-input-group [nzSuffix]="suffixPassword" [nzPrefix]="prefixPassword" >
<input
[type]="passwordVisible ? 'text' : 'password'"
nz-input
placeholder="密碼"
[(ngModel)]="password"
/>
</nz-input-group>
這裏因爲要將用戶名和密碼一起post到後臺，所以使用[(ngModel)]的方式，雙向綁定到一個ts的password變量中（此處可優化爲小括號的html->ts的單向數據綁定）。點擊“登陸”按鈕，觸發post請求。然後對於返回的json值進行判斷，如果返回的code==0，那麼登陸成功，獲取用戶信息並且跳轉到index。如果是別的值，再進行相應的錯誤提示。此處的錯誤提示也是應用了NG-ZORRO的組件。
3.3.2.3 register邏輯簡述
register組件與login相同，也是用一個table和一個form做成的。此組件中，有一個邏輯是發送驗證碼，所以在發送驗證碼之前有一個郵箱（用戶名）的空判斷和郵箱格式判斷，在提交所有註冊信息的時候也有一個空判斷（頭像除外，因爲我給的有默認頭像）。頭像上傳組件是用了NG-ZORRO的文件上傳組件，上傳的服務器也是用的NG-ZORRO默認的，因爲我只是取它轉換後的base64編碼來存儲頭像，所以不管它把頭像傳到哪裏，對此網站來說沒有影響，要說有影響，那可能就是在上傳速度上有點慢。其他表單項就很普通，比如暱稱和密碼錶單項。
3.3.2.4 my-usage邏輯簡述
my-usage組件是用戶的接口使用量組件，使用了ECharts做數據可視化，當點擊左側標籤，展示相應的數據，此時的數據包括今天 / 昨天 / 前天的接口用量。上限是25人/次/天。
3.3.2.5 網站總接入和網站今日用量未作數據可視化，幫助文檔也只是一個文檔，在此不再贅述。
4.後記
至此，由於時間關係，我的angular-poetry項目的version1.0項目就告一段落。後期，Version1.1+在界面上會更加豐富，用戶體驗也會提升，另一方面，對於前端應該做的安全攔截，也會適當地增加進去。
摯謝閱讀。
再次感謝各位高擡貴手！
個人郵箱：[email protected]。