學習不同的vue實戰(2): 項目分析

首先

• 首發博客: 個人博客
• 項目源碼: 源碼(喜歡請star)
• 項目預覽: 預覽
• 上一章: 《學習不同的vue(1)實戰:環境搭建》
• 個人Q羣: meteor高手羣 vue學習交流羣

前言：如今有些人真心浮躁，我先發了一篇基礎《環境搭建》,就各類噴啊，各類黑啊，逼的我刪除掉了這篇文章，這個系列文章主要是針對初學者，若是你真是大神,而且以爲對你沒有幫助,你能夠選擇不看，可是,請不要抨擊別人的勞動成果。你行你上啊！🙄,順便懇請下，看完文章的各位童鞋幫我去github幫我點star能夠嗎？O(∩_∩)O，謝謝，😘,有什麼問題能夠加羣，直接找到我向我提問。

項目分析

2.1 需求分析

首頁咱們拿到一張原型設計稿.複製代碼

從原型設計稿看出，咱們獲得如下的需求:

注: 左邊的待辦項稱爲‘待辦事項’，右邊的內容部分文字稱爲’待辦單項‘

• 查詢全部待辦事項,待辦單項
• 新增,修改待辦事項
• 刪除,鎖定待辦事項
• 新增，修改，刪除待辦單項
• 未完成的待辦單項的計數

根據這些需求，咱們能夠先想一下咱們這個原型設計圖上面包含了哪些顯示的數據，和隱藏的數據呢？

2.2 數據分析

顯式數據：

• 左邊的待辦事項標題
• 右邊的待辦單項文字內容
• 未完成的待辦單項數目

隱式數據:

• 待辦事項 ——> 鎖的圖標
• 待辦事項 ——> 刪除的圖標
• 待辦事項 ——> 惟一標識(id)
• 待辦單項 ——> 刪除的圖標
• 待辦單項 ——> 是否已完成的狀態（完成後，前面會打勾,文字中間有橫槓）

最終根據上面的分析，咱們獲得一個單條待辦事項應該有如下數據。

{
id: String,  //單條待辦項惟一標示
titie: String, // 標題
count: Number  // 未完成待辦項數目
isDelete: Boolean, // 是否刪除(物理刪除)
locked: Boolean, // 是否鎖定
record : [  // 代辦項紀錄列表
    {
    text: String,  // 文字內容
    isDelete: Boolean, // 是否刪除(物理刪除)
    checked: Boolean // 是否完成
    }
]
}複製代碼

很是簡單的數據結構，你是否和想的和我同樣呢？

2.3 api分析

仔細的看上面的原型設計圖，咱們仔細想一想，完成這樣的數據須要幾個接口呢？

咱們在分析一個頁面須要的接口時候，咱們能夠從分析用戶產生的 action(即動做行爲)下手，就是你想像一下，若是你是一個用戶，你進入到這個頁面，須要看到什麼樣的內容，和執行怎麼樣的操做。

• 首次進入頁面,查看待辦事項列表
• 點擊新增按鈕，新增一個待辦事項
• 點擊一個待辦事項，右邊顯示待辦事項的詳細內容
• 點擊標題,修改待辦事項標題
• 點擊刪除圖標,刪除待辦事項
• 點擊鎖定圖標,鎖定待辦事項
• 點擊加號圖標，新增待辦單項
• 點擊待辦單項內容，修改待辦單項
• 點擊待辦單項旁刪除圖,刪除待辦單項
• 點擊已完成已經完成按鈕

從上面對用戶的action,進行分析,咱們獲得了10個須要與後臺數據交互的動做。這樣咱們就能夠知道api接口是什麼樣子的了？

我理解api接口

注: 下文中的 api 指接口名,params指傳入數據，data指返回數據

待辦事項列表

api: /todo/list (get)
params: {}
/** * 左邊的列表確定是一個數組對象,考慮到咱們每點擊到這個標題， * 就會調轉到詳細，全部須要id來做爲標識進行跳轉， * 在根據圖上，標註好的標題，數字，鎖定圖標，獲得下面的標題 */
data : [
{
id: String,  //單條待辦項惟一標示
titie: String, // 標題
count: Number  // 未完成待辦項數目
locked: Boolean, // 是否鎖定
},
{...},
...
]複製代碼

新增待辦事項

api:  /todo/addTodo (post)
params: {}
//這個接口沒什麼好多說的。

data : {};複製代碼

單個待辦事項查詢

api: /todo/listId  (get)

 params : {id : xxx} //傳id

/** * 返回待辦項的全部數據 */
 data : {
 id: String,  
 titie: String, 
 count: Number  
 isDelete: Boolean, 
 locked: Boolean, 
 record : [  
    text: String,  
    isDelete: Boolean, 
    checked: Boolean
 }
`複製代碼

修改 待辦事項標題，刪除，鎖定待辦事項

api: /todo/editTodo (post)
/** * 雖然這裏有 修改，刪除，鎖定三個操做,可是他都是修改單條數據,全部*咱們能夠合併在一個接口 */
params: {
 id: String,  
 titie: String, 
 isDelete: Boolean, 
 locked: Boolean
}

data ： {}複製代碼

新增 待辦單項

api: /todo/addRecord (post)
params: {}

data ： {}複製代碼

修改,刪除，完成待辦單項

api: /todo/editRecord (post)
/** * 雖然這裏有 修改,刪除，完成三個操做,可是他都是修改單條數據 * 全部咱們能夠合併在一個接口 */
params: {
    text: String,
    isDelete: Boolean, 
    checked: Boolean
}

data ： {}複製代碼

2.4 組件分析

什麼是組件？等等系列問題我就不在這裏講了，能夠看 《什麼是組件化開發?》

vue的組件通常分爲以下4種:

• 接入型 好比說一個容器組件,它裏面包含了其餘的組件，它自己只承擔一個佈局容器的做用
• 展現型 純展現型的數據，它能接收數據，展現出來，可是沒法與用用戶進行交互
• 交互型 好比各種增強版的表單組件，一般強調複用
• 功能型 好比 <router-view>，<transition>，做爲一種擴展、抽象機制存在。

知道了這4種組件，那麼咱們結合上面的原型設計圖，改怎麼劃分呢？獲得下面幾點:

• spa應用自己就是一個大組件
• 裏面的佈局是一個組件,它裏面包含了其餘組件
• 左邊標籤列表是一個組件，包含列表，新增
• 右邊單個待辦事項算一個組件，它包含上半部分，下半部分。
• 待辦單項是一個組件，由於它要被循環不少次

最終咱們獲得:

app.vue   // 最外層根組件 接入型
layouts.vue  // 佈局組件 接入型 接入其餘組件
todos.vue  // 左側列表 交互型組件
lists.vue  // 右側內容 交互型組件
item.vue  // 待辦單項組件 交互型組件複製代碼

好了，今天咱們項目分析，前期準備工做就到這裏，下一章開始就是代碼的實戰。