學習不一樣的vue實戰(2): 專案分析

Yangyi發表於2017-06-02
Vue

首先

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

專案分析

2.1 需求分析

首頁我們拿到一張原型設計稿.複製程式碼

學習不一樣的vue實戰(2): 專案分析

從原型設計稿看出，我們得到以下的需求:

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

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

根據這些需求，我們可以先想一下我們這個原型設計圖上面包含了哪些顯示的資料，和隱藏的資料呢？

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  // 待辦單項元件   互動型元件複製程式碼

好了，今天我們專案分析，前期準備工作就到這裡，下一章開始就是程式碼的實戰。

相關文章