前後端UI產品開發協作

xcsweb發表於2018-05-18

統一命名規範:

我就發一下我的建議吧,如果你用vue就根據vue的命名規範來,因為大多人都是這樣做的,方便管理,推薦一份

vue 開發命名規範 - 前端開發日誌 - SegmentFault 思否

如果你用typescript的話,就按照typescript的命名規範來

TypeScript程式碼格式化方案標準規則是什麼?

一般頁面開發規範指南

開發規範指南

介面這些是沒有什麼限制的,檔名,架構,這些你就要和後端統一一下概述介面這些是沒有什麼限制的,檔名,架構,這些你就要和後端統一一下,可以採用駝峰式命名,也可以採用下滑線命名.開發文件,主要是api文件,目前用的是postman,主要是記錄介面,僅做測試用.但是這遠遠是不足夠的,還是要健全api文件,根據經驗會有以下問題會出現bug,正常情況,後端只會告訴你success的返回,你看到的只有success的返回,如果你只是這樣做,仍然會有問題,success也會有很多種情況,也許你只知道一種情況,在後面的開發也會有問題。後端完善介面文件.

api文件應有的格式,分為complete和fail,一般的fail,後端會有預設返回,其他的需要特殊處理

json預設格式

{
   "data":{},
   "status":"0",
   "message":""
}
複製程式碼

先說一下狀態碼

HTTP狀態碼詳解

200,302,404這些經常見到,後端返回的status也是不一樣的,這裡要跟後端以前協商一下,簡單的就0和1。0就fail,1就complete,比如說許可權控制,無權訪問,或者是許可權不夠,只能訪問一部分,就需要協商一下。1的話可能會有多種情況,返回也是不一樣的,測試可能提出不一樣的bug,比如後端查資料返回資料的格式可能是不完全的,一會返回"",一會返回[],或者乾脆這個key都不返回了,那麼前端這邊就會丟擲異常。

3.ajax請求約定,get或者post:

我目前都是統一用post,post更安全一點,資料長度無限制,不能快取。

get和post
如果你用get 請求,為了防止快取還要加隨機數時間戳之類的。 基礎資料一般就(user/info)等,安全(這個不能全部由前端做,後端不做啊)(表單驗證經常會出問題),加密傳輸啊,常見介面格式(分頁),欄位前後的統一等等吧

4.傳輸格式統一:

post請求,提交格式可能是formData形式也可能是json格式,一般用到的就這兩種,後臺可能用formData更方便,但是不靈活,由於前一個開發者用的formData,我和後端開發除錯極為不方便。json更靈活些,我推薦用json。

5.圖片路徑:

有的專案圖片路徑是前端控制,分為絕對路徑和相對路徑,本地的資源一般都是用相對路徑了,但是有的資源可能相對路徑就用不了,比如說我們後端現在用的就是七牛雲端儲存圖片,如果是一個網站可能域名就固定了,這個就比較簡單,前端請求圖片資源的公共位置應該可以封裝一下,我不知道哪個方法可以封裝,我用的vue,axios請求回來圖片的欄位沒有和後端約定,不知道怎麼封裝公共的圖片資源地址,我這邊是讓後端去封裝的,圖片大小也是後端控制的,如果前端來控制豈不是更好

6.圖片上傳:

base64編碼上傳,我喜歡這個,因為可以弄壓縮,也可以弄水印但是後端覺得太複雜,七牛雲預設有壓縮,form表單上傳圖片也是可以的,然後圖片傳上去,詳情頁會看到圖片,這裡強調一下,圖片路徑可能會有問題

7.用svn還是git:

我這裡用的是git。

8.每次修改bug儘量能有文件:

不然就只能svn一個一個查了,svn必須有message提交。

9.本地資料:

永久的用local storage,臨時的用session storage,移動端微信的cookie儲存了那些授權的資訊,所以微信這裡就不要用cookie了

10.和設計小姐姐的約定:

圖片採用png,圖片發給我之前先壓縮,然後打包成資料夾(能要求用英文給圖片命名就英文吧),或者svn格式,移動端開發尺寸約定,iphone7的尺寸就好。750px,前端用rem處理。尺寸那些也讓她標記了,不然誰知道那個字型有多大,顏色是什麼。 PxCook - 最高效易用的自動標註工具,設計研發協作利器 有互動的地方也讓她繪製了。不然你隨便弄個,又不好看。

11.和產品的約定:

怎麼弄互動,哪裡用,一定要有原型圖.產品提需求必須要有文件,沒有文件的需求,你就不做。什麼時候他說:"沒有這個需求,這個需求不是我要求的",你就要背鍋了.

隨便介紹一下知乎地址

相關文章