前端實習工做總結 - 先後端分離

1.後臺管理系統
2.先後端分離
3.Git經常使用命令

後臺管理系統

我作的工做主要是重構頁面，將原來只有4個功能推展到了9個。
頁面結構：

以前由於導航內容少，因此直接所有用靜態頁面寫的，每一個頁面都須要複製粘貼相同的內容。這樣對拓展不利。
考慮到項目給的時間較短，因此我用了<frameset>和<frame>標籤將header,navigator,container分爲3個html文件，裝在一個框架集中。
相關語法：

<frame name="frameName">
<a target="frameName"> 
可實現框架內跳轉

純DOM操做

項目主要用jQuery庫，也用到了ES6的模板字符串 `` 和 ${}。
後端提供接口，ajax被前任封裝好了，叫fetchJSON,

AJAX封裝

fetch源碼

const fetchJSON = (method, url, params, token)=>{
    return new Promise(function(resolve,reject)){
        let xhr = XMLHttpRequest();
        //open方式用於指定HTTP動詞/請求的網址，是否異步
        xhr.open(method,url,true);
        xhr.onload = function(){
            if(xhr.readyState === 4) {
                if (xhr.status===200) {
                    resolve(xhr.response);
                }else {
                    console.log(xhr.status);
                    console.log('響應錯誤：',xhr.response);
                    console.log('相應碼:',xhr);
                    reject(check(xhr.response)?xhr.response:xhr.status);
                }
            }
        };
        
        xhr.onerror = function (e) {
            reject(new Error(e));
        };
        
        // xhr.open();
        xhr.timeout=60000;  //超時時間60000ms
        xhr.ontimeout = function () {
            console.log('-----------------請求超時')
            xhr.abort(); //超時中斷請求
            reject(new Error("請求超時"));
        };
        
        xhr.setRequestHeader('Content-Type', 'application/json');
        if(check(token)){
            xhr.setRequestHeader('authorization',token);
        }
        
        //發送HTTP請求
        if(method==='GET'){
            xhr.send(null);
        }else{
            xhr.send(JSON.stringify(params));
        }    
    }
}

判斷fetchJSON參數中的params

const isObjEmpty = (obj) => {
    for (var key in obj) {
        if (obj.hasOwnProperty(key))
            return false
    }
    return true;
};

const check = function (obj) {
    if (typeof obj === 'number') {
        return true;
    };
    if (typeof obj === 'boolean') {

        return obj;
    };

    if (typeof obj === 'undefined') {
        return false;
    };

    if (typeof obj === '') {
        return false;
    };

    if (obj === 'undefined'
        || obj === null
        || obj === []
        || isObjEmpty(obj)) {
        return false;
    } else {
        return true;
    }
};

得到的數據全是json數據，使用`${data.param}`打印到html中

解決跨域

對於有些沒法跨域的第三方接口，咱們須要用到反向代理
http-proxy-middleware模塊使用教程

先後端分離

RESTful API設計

第一次先後端分離，後端小哥寫的API託管到eolinker上，可是沒寫文檔。。。
爲此，我沒少去找他請教參數問題，特別是須要POST和PUT操做的時候。
同時，本身惡補了下關於API的知識
阮一峯 - RESTful API 設計指南
協議，域名，版本，路徑

HTTP動詞：

GET 從服務器取資源
POST 在服務器新建一個資源
PUT 更新資源（客戶端提供完整資源）
PATCH 在服務器更新資源（只提供可改變的屬性）
DELETE 從服務器刪資源

HEAD 獲取資源的元數據
OPTIONS 獲取信息（只關於那些客戶端可改變的）

狀態碼

200    OK - [GET]：服務器成功返回用戶請求的數據
    201    CREATED - [POST/PUT/PATCH]：用戶新建或修改數據成功
    202    Accepted - [*]：表示一個請求已經進入後臺排隊（異步任務）
    204    NO CONTENT - [DELETE]：用戶刪除數據成功
    400    INVALID REQUEST - [POST/PUT/PATCH]：用戶發出的請求有錯誤，服務器沒有進行新建或修改數據的操做
    401    Unauthorized - [*]：表示用戶沒有權限（令牌、用戶名、密碼錯誤）
    403    Forbidden - [*] 表示用戶獲得受權（與401錯誤相對），可是訪問是被禁止的
    404    NOT FOUND - [*]：用戶發出的請求針對的是不存在的記錄，服務器沒有進行操做
    406    Not Acceptable - [GET]：用戶請求的格式不可得（好比用戶請求JSON格式，可是隻有XML格式）
    410    Gone -[GET]：用戶請求的資源被永久刪除，且不會再獲得的
    422    Unprocesable entity - [POST/PUT/PATCH] 當建立一個對象時，發生一個驗證錯誤
    500    INTERNAL SERVER ERROR - [*]：服務器發生錯誤，用戶將沒法判斷髮出的請求是否成功

Git經常使用操做

Git文檔

第一步    git add .    //添加修改的代碼到git上
第二步    git commit -m '更新說明'    //添加說明
第三步    git pull    //拉git上的代碼作比對，查看是否存在衝突
第四步    git push    //上傳代碼

其餘命令：
git branch ‘’ 建立分支
git checkout ‘’ 切換分支

代碼回退
第一步    git log    //得到commit信息
第二步    複製回退對應時間的commit
第三步    git reset --hard xxxxxxxxxxxxx（commit值） (hard是不保存當前已修改的，soft是保存當前已修改的)
第四步    git push -f //強制提交代碼

時光穿梭機
--代碼被不當心回退了怎麼修復回來？
第一步    git reflog    //得到全部的git操做
第二步    git reset --hard xxxxxxxxxxxxx（commit值）

--修復到了指定hash點時，這個以後的就沒了，如何加上來呢？
第三步    git cherry-pick xxxxxxx(須要被加上來的commit值)