vue中使用axios來與後臺建立連線

• 在axios使用post請求中Content-Type: application/json是預設的，對於這個Content-Type，在後臺中，我們需要用@RequestBody來處理資料，具體如下

前端傳遞資料

axios.post("http://localhost:8080/Login", {username : this.sizeForm.username}).then(res=>{
  console.log(res)
})

後端接收資料
實體類

package com.google.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class user {
    String name;
    String password;
}
 

Controller

@CrossOrigin(origins = "http://localhost:8081",maxAge = 3600)  //解決跨域問題
@Controller
public class SecurityController {

@RequestMapping("/Login")
    @ResponseBody
    public HashMap<String, Object> Login( @RequestBody user user, Model model) {
        String username = user.getName();
        String password = user.getPassword();
        HashMap<String, Object> userMap = new HashMap<>();
        userMap.put("username",username);
        userMap.put("password",password);
        return userMap;
    }
}
 

注意這裡有跨域問題
我們需要在該類上添加註釋@CrossOrigin