MVC與單元測試實踐之健身網站(四)-動做管理

網站後臺負責進行動做的管理，包括動做名稱、介紹、訓練要點、配圖等內容，以便前臺可以使用這些內容。在上一篇< Fit項目圖片上傳和雲存儲的調通>中已經準備好了這裏涉及到的主要技術難點，如今就開始完成該模塊了。

 

一 列表介紹

健身管理模塊包括肌羣、肌肉的顯示以及動做的管理。這兒也算是開始涉及「業務內容」了，還好我以前有儲備了一些關於健身的資料，如今是時候派上另外一種用場了。

a) 肌羣和肌肉由於內容相對固定，因此爲了減小業務邏輯以及單元測試的代碼量，固然最主要是爲了偷懶，就只提供列表的顯示功能，沒法編輯。

 

肌羣信息列表：

 

 

肌肉信息列表

 

 

b) 動做不像肌羣和肌肉那樣固定，必須有編輯功能，列表的顯示、添加、編輯、刪除的相應與以前權限模塊相似。主要是添加、編輯界面差別較大。

 

 

二 動做的添加、編輯

動做的添加、編輯除了文本內容，還有相關的配圖須要上傳、刪除。文本和圖片分開兩張表保存，並且文本在點擊保存按鈕時提交，圖片則在選擇後當即上傳並刷新以顯示最新的圖片列表，點擊圖片時能即時地刪除圖片。這樣界面背後的html結構就比以前的添加、編輯複雜了。

a) 總體來講，動做分爲兩類，局部訓練與綜合訓練，局部訓練是能歸屬於肌羣-肌肉-動做體系下的訓練內容，是對局部某塊肌肉的訓練，好比平板支撐動做主要是對腹橫肌的鍛鍊；綜合訓練是指能提升總體機能的運動類型，好比跑步、游泳等。

因此添加、編輯動做時，首先設定的即是動做類型：

 

 

選擇局部訓練時，須要進一步選擇肌羣和肌肉，肌羣是固定下拉內容，肌肉的下拉內容要隨肌羣的選擇動態加載。

選擇綜合訓練時，不需設置肌羣和肌肉，隱藏這兩個下拉框。

 

b) 此頁面還包括動做介紹、動做要點和注意事項的編輯，這三項信息具備一致的編輯界面，包括了多行文本內容和配圖。沒有使用富文本編輯器，但剛剛寫文章時纔想起來要增長對跨站腳本攻擊的防範呢。

 

 

三 總結

雖然以前已經準備好了圖片上傳和雲存儲的實現方式，但實際作起來才發現坑遠遠不止這些，包括頁面佈局和事件觸發等花費了很多時間，主要是本身不熟悉前端的緣由。有幾個比較特別的問題須要記錄一下。

a) 使用的模板中複選框、單選框都是使用了iCheck插件的，以前還說樣式漂亮，但今天就被iCheck坑了。

 

 

iCheck的漂亮樣式主要來自上面這段屬性設置代碼。而後若是要註冊單選框的選擇事件，用通常的ID、名稱選擇器就無論用了。要使用下面這樣的方式，綁定ifChecked事件。

 

 

b) 瀏覽器加載頁面時是從上往下的，若是$(document).ready寫在jQuery.js引用的前面，這樣的代碼就是無效的。在razor模板中也要注意，layout中用於填充頁面腳本的FootScript標籤要放在js引用的下方。

 

歡迎關注微信公衆號【菜鳥程序員成長記】