iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 14
0
Modern Web

ngrx/store 4 學習筆記系列 第 14

[ngrx/store-14] 用 Angular 5  建立一個投顧網站 - 需求篇

用 Angular 5  建立一個投顧網站

接下來我們用一個實例來介紹 ngrx/store 的使用在一個專案上,我們會先用完全使用 Services 的方式來建置,接著再將它換成用 ngrx/store 來建置,我想一方面大家會看到這兩種方式的不同,一方面對於之前的專案,也會遇到這樣轉換的問題。

業者需求

  1. 要有一個開放給所有人的首頁。
  2. 要有會員登入的功能,為了簡單起見,我們會有最簡單的後端,因篇幅關係,將不包含資料庫,所以會簡略註冊功能。
  3. 會員登入有”記得我“的功能,在特定期間內,只要開啟瀏覽器就不需再登入且直接進入會員畫面。這是一個可選項。
  4. 會員登入後有會員專區的專屬頁面,非會員不得使用,這裡會員可以瀏覽投顧報告。
  5. 投顧報告的來源來自後端,因不使用資料庫,會省略後台增加以及刪除報告的功能。
  6. 後端的投顧報告有保護,非會員無法取得。

系統規劃

包含前後端,因篇幅關係,不包括資料庫。

https://ithelp.ithome.com.tw/upload/images/20171230/20103574I5Ie1EvxuB.png

首頁

https://ithelp.ithome.com.tw/upload/images/20171230/20103574ESg85SvxIJ.png
點擊會員登入進入登入畫面

登入畫面

https://ithelp.ithome.com.tw/upload/images/20171230/20103574YZ7gQjXWl3.png
輸入會員資料,點擊後與後端連接,驗證後進入會員畫面,“記得我”會保留登入資訊。

會員畫面

https://ithelp.ithome.com.tw/upload/images/20171230/20103574LI9WlcAG8L.png
如果“記得我”,重新刷瀏覽器會直接進入這個畫面,“記得我” 到期的話會回到首頁,須重新登入。

接下來我們會一步一步從零開始建立這個專案,所有程式會放在 github, 每天一個 Branch, 讀者可以依樣寫這個專案或是直接從 github 看每天完成的進度。


上一篇
[ngrx/store-13] Store 加入 select
下一篇
[ngrx/store-15] 投顧網站 - 設定篇
系列文
ngrx/store 4 學習筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言