上一章簡單的介紹了這個聊天室的功能和要使用的技術，這一章的主要目的是為下一章的實現做準備。 任何一個項目從需求到最后的實現，都是要經歷這么個過程的，不論這個過程是否顯式存在于你自己或者團隊的項目歷程中。拿到需求后立馬開始寫代碼的同學要么是大牛——（對付各種需求已經有相當多的經驗，在理解需求的同時已然對項目進行了分析和設計），要么就是小白——（在這個階段，對寫代碼充滿了激情，渴望讓自己的手指在鍵盤上得到釋放，結果大多會走偏或者自己寫到混亂）。 因此需要這么個過程，對已有的需求再次思考、規劃 ## 12.1 實體(Model)設計 所謂的實體，就是在項目中數據存放和被傳輸的對象，從定義上來說就是客觀存在的事物。那么在這個項目中有哪些實體存在呢？ 從功能上分析，只有三個實體：用戶，話題，消息。這三個實體也就是項目中的三個Model，剩下的所有業務都是圍繞它們來運轉的。 那么這三個實體中都應該存放什么樣的數據呢？根據需求簡單的列一下: ~~~ 用戶(user): id username password registed_time 話題(topic): id title created_time owner 消息(message): id content topic_id user_id created_time ~~~ ## 12.2 接口設計 因為這個項目的重點是在前端，因此后端只是提供一個接口，先把需要的哪些接口整理清楚了，剩下的就好辦了。 那么，需要哪些接口呢？ 依然是根據功能來：?**用戶管理**?1\. 用戶注冊接口: ~~~ /user/ [POST] ~~~ 1. 獲取用戶列表接口: ~~~ /user/ [GET] ~~~ 2. 獲取單個用戶接口: ~~~ /user/<id>/ [GET] ~~~ 3. 用戶登錄: ~~~ /login/ [POST] ~~~ 4. 用戶登出: ~~~ /logout/ [GET] ~~~ **話題管理**?1\. 話題列表: ~~~ /topic/ [GET] ~~~ 1. 創建話題: ~~~ /topic/ [POST] ~~~ 2. 查看具體話題(相對于進入消息列表): ~~~ /topic/<topic_id>/ [GET] ~~~ **消息管理**?1\. 發送/回復消息: ~~~ /message/ [POST] ~~~ 1. 刪除消息: ~~~ /message/<message_id>/ [DELETE] ~~~ 2. 瀏覽消息: ~~~ /message/ [GET] ~~~ 大體就這么些個接口，url后面表示的是HTTP的方法。 這樣分析完之后，服務器的工作算是清晰了，下面在來分析頁面上的工作。 ## 12.3 頁面設計 因為是單頁應用，所有也就一個頁面，但是這一個頁面也是由多個視圖來組成的——這里的視圖可以理解為桌面程序的那種窗口。 為了有的放矢，這里我就先畫幾個草圖，來看一下我們這個項目最終的結果可能是什么: **登錄**?這個是直接截得現成的圖。 [](https://github.com/the5fire/backbonejs-learning-note/blob/master/images/login.png) 注冊界面和這個一樣 **話題界面** [](https://github.com/the5fire/backbonejs-learning-note/blob/master/images/topics.png) **消息界面** [](https://github.com/the5fire/backbonejs-learning-note/blob/master/images/message.png) ## 12.4 view的設計 這里說的view，是指backbonejs中的view，按照之前的經驗來說，大概需要劃分的view和功能分別為： 1. 話題view(topic_view): ~~~ 功能: 根據話題接口獲取所有話題數據，然后渲染模板 ~~~ 2. 消息view(message_view): ~~~ 功能: 根據消息接口返回的數據，渲染模板 ~~~ 3. 登錄view(login_view): ~~~ 功能: 展示登錄頁面，發送用戶數據到服務器端 ~~~ 4. 整體view（main_view): ~~~ 功能： 負責其他view的切換 ~~~ ## 12.5 總結 這一章主要是對功能做了更進一步的處理，目的就是能夠更好的開始編碼。在詳細設計完成之后具體實現就變得有跡可循了。 到目前為止，這個項目我也是邊寫邊做，現在還沒開始寫代碼。因此這篇文章的分析可能在之后還需要改動。但，即便如此，這個過程也是需要存在的，因為軟件開發本身就是一個不斷迭代的過程，你不可能一拍腦袋便出來一個完美方案，設計一個可行的方案，然后持續迭代才是最好的實踐。