1. 程式人生 > >WebStorm教程(3)

WebStorm教程(3)

介面

我自己理解前後端傳輸資料都是通過ajax方式
一般使用get和post兩種方式傳輸資料

GET

介面

介面描述 獲取登入驗證碼圖片及金鑰
HTTP方法 POST
URL /captcha
HTTP頭部
HTTP請求BODY
HTTP響應訊息內容
{
    "status": int,
    "msg": string,
    "data": {
        "pic": string,
        "captchaEncrypt": string
    }
}

程式碼

var u = "http://121.42.161.235:9091";
var o;
// 驗證碼
function safecode() {
    o = $.ajax({
        type: 'POST',
        url: u + "/captcha",
        async: false,
        success: function(result) {
            $('#safecode-img').attr('src', "data:image/jpeg;base64," + result.data.pic);
        }
    });
}
safecode();

POST

介面

介面描述 前臺將使用者名稱、密碼、驗證碼及驗證碼金鑰提交至服務端進行登入驗證,登入成功後會返回token,登入失敗則返回提示資訊
HTTP方法 POST
URL /login
HTTP頭部
HTTP請求BODYBODY
{
    "username": string //使用者名稱
    "password": string //密碼
    "captcha": string //驗證碼
    "captchaEncrypt": string //驗證碼金鑰,此欄位為獲取驗證碼時給前端傳遞的引數
}

HTTP響應訊息內容

{
    "status": int "msg": string,
    "data": {
        "token": string // 客戶端token
    }
}

程式碼

參考:https://blog.csdn.net/liyongjian12/article/details/54844827

// 登入方法
function submitTest() {
    // 校檢
    // 觀察值
    // let userName = document.getElementById("userName").value;
    // let password = document.getElementById("password").value;
    // let captcha = document.getElementById("captcha").value;
    let userName = "sa";
    let password = "111111";
    let captcha = "5k83";
    // 登入
    var logininfo = $.ajax({
        type: 'POST',
        url: u + "/login",
        async: false,
        dataType: "json",
        contentType: "application/json",
        data: JSON.stringify({
            "username": userName, //使用者名稱
            "password": password, //密碼
            "captcha": captcha, //驗證碼
            "captchaEncrypt": "0BB5E9A26A099E34F6F076270B519894"
            // "captchaEncrypt": o.responseJSON.data.captchaEncrypt //驗證碼金鑰,此欄位為獲取驗證碼時給前端傳遞的引數
        }),
        success: function(result) {
            console.log(result.tocken);
        }
    });
    console.log(logininfo);
}
submitTest();