實習報告（一）

Http部分：

1、localStorage、essionStorage、cookies的區別：

localStorage:存儲在本地瀏覽器的永久性數據。

sessionStorage：存儲在本地瀏覽器會話中的臨時數據，在關閉瀏覽器後會自動清除。

Cookies：存儲在內存中的半永久數據。

詳情請看：https://blog.csdn.net/lq15310444798/article/details/79109026。

 

2、一次完成的http事務：

1. 1. 域名解析；
   2. 發起tcp三次握手；
   3. 創建tcp鏈接後發起http請求；
   4. 服務器端響應http請求，瀏覽器獲得html代碼；
   5. 瀏覽器解析html代碼，並請求html代碼中的資源；
   6. 瀏覽器對頁面進行渲染呈獻給客戶;

項目部分：

1、項目的規範：

1 頁面格式

 1)頁面統一採用 縮進4；

 2)文件,文件夾採用駝峯命名。

 

2 style

 1)css命名統一使用中橫線；

 2)等分排列 場景使用 flex 彈性佈局 ；

 3)使用scss語法編譯；

 4)樣式儘可能使用簡寫 ex：margin-top:1px margin-left:1px margin-bottom:1px => margin:1px 0 1px 1px;

 5)css選擇器儘可能精簡，優先考慮樣式管理，其次考慮選擇器性能；

 6)少用權重低的選擇器，例如後代選擇器標籤選擇器；

 7)當選擇器在組件內具備特定的語議或者爲js所操控，方纔考慮使用id選擇器，其餘 狀況使用類選擇器；

 8)包裹樣式屬性的 {} 跟在選擇器名稱後面,勿換行書寫{}；

 9)儘可能使用scss的選擇器嵌套，提升樣式管理度；

 10)組件內部的顏色，或者多處出現的屬性樣式，建議用@mixin 或者 scss @extend 封 裝

 11)assets/scss/modules  用於存放項目公共scss模塊，./modules/mixin  ./modules/var   可各自@import到組件內部使用；

 12)assets/scss/pages  用於存放頁面模塊的公共樣式，以整個頁面大模快命名 如   login.scss  home.scss 適用於頁面模塊屢次出現的公共樣式的集合；

 13)屬性類：頁面涉及的padding 一般爲 左右padding 30px  或者 20px；

 14)屬性類：border-radius 爲 10px 或者 6px  自行選擇；

 15)屬性類：頁面的shadow 已封裝至 assets/scss/modules/mixin中，分別對應卡片類， bannse類，列表類，以及其餘類  經過@extend 引用；

 16)屬性類：儘可能勿使用 font-weight：blod 屬性；

 17)mint-ui：mint-ui的自定義樣式修改至assets/scss/modules/mintUi.scss文件中；

 18)mint-ui：如需使用mint-ui的checklist或者radio 在組件處添加 as-checklist as-radiolist 類名，參考 pages/home/search.vue；

 19)mint-ui：組件內如需修改mint-ui的樣式，另外寫一個scss標籤，去掉scoped字段， 切記，組件內自定義的mint樣式務必包裹在頁面私有命名空間內，不然會形成全局污 染

 20)類名命名優先起用結構性類名

例如，.header .footer  .nav .list .aside .main .title .text .banner,其次使用功能性類名例如  .name；

21).list .prop .price .goods .item .detail .tip .intro ；

 

3 script

 1)統一使用es6語法規範；

 2)使用 let，const定義變量，變量聲明需提早，多個變量聲明採用逗號隔開；

 3)如需使用 this 的引用，統一 使用變量名 me    ex: const me = this；

 4)變量採用駝峯命名,勿使用下劃線          ex：let myTest = ''；

 5)js語句結束使用;號結束。

 

4 組件

1)私有組件放置於各個模塊目錄下的componets目錄，公共組件放置於src/components/ 目錄；

2)對於頁面組成組件 引用的變量名添加 'Com' 前綴  ex: import ComHeader from '@/components/header'；

3)對於彈框組件 引用的變量名添加 'Pop' 前綴  ex: import PopChooseMonth from '@/components/popChooseMonth'；

 

5 圖片 icon

1)關於圖片命名，採用中劃線隔開，使用英文命名，勿使用拼音或者中文等非規範類命 名；

2)icon類圖片添加 icon- 前綴；

3)背景類圖片添加  bg-icon；

4)項目中用到的組件儘可能使用字體圖表，登陸iconfont首頁-> 個人項目-> A+福利站  可 將圖片文件包下載至本地，存放於static/目錄；

5)icon的命名規範爲 class = 'iconfont icon-demo'；

6)使用切圖類的icon 使用 i-icon 做爲命名空間以跟iconfont區分。

 

2、基本業務

對於一些項目中的基本業務，在ui沒有給出具體交互設計時，應先想到一些表單的驗 證，如手機號、密碼、姓名等驗證；還有一些按鈕的做用，好比說退出登陸按鈕通常會 跟隨着一個二級確認彈框；

 

3、項目的流程

由產品經理完成文檔 => 找UI設計高保和低保 => 而後找前端和後臺開發人員開會 => 前端完成靜態頁面和交互/後臺完成接口 => 後臺自測 => 後臺提測 =>  前端聯調 => 前端自測 => 前端提測 => 測試人員測試 => 產品驗收 => 運營平臺上架商品 => 上線。