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();