前端基於angular6的ionic3，後端基於springmvc post get請求實現

最近在學習基於angular6的Ionic3的網路http請求部分，發現的確不同的版本差距還是比較大的，特別是一些隨著版本變化的地方，經過數天「填坑」之旅後，我總算搞定了一些坑，現在我來分享一下http請求的代碼實現。

本次項目前端基於angular6的Ionic3，後端是spring,springmvc,mybatis，實際測試的時候並沒有用到mybatis。

現在貼出前端代碼，記得要引入httpclientmodule這個包

本文只貼出核心部分，需要有一定的基礎

GET請求

private apiGetUserInfo = "http://localhost:8080/web/mobile/getUserInfo1";//url，web為部署在tomcat上的名稱,mobile/getUserInfo1為控制層路徑

getUserInfo(userId):Observable<string []>{//外界通過傳入一個userId實現查詢操作

return this.getUrlReturnGet(this.apiGetUserInfo+"?userId="+userId);//get請求

}

//get請求，適合傳遞一個簡單數據的情況

private getUrlReturnGet(url:string):Observable<string []>{

const httpOptions = { headers: new HttpHeaders(//此頭部是我自己添加的，到底需不需要添加有待驗證

{"Content-Type": "application/json"})

};

return this.http.get(url,httpOptions).pipe(//angular6特有的管道

tap(this.extractData),//獲取數據

catchError(this.handleError)//處理異常

);

}

//處理介面返回的數據，不需要再json處理一下！！！

private extractData(res:HttpResponse<any>){

console.log("res的值："+res);

return res;

}

//處理請求中的錯誤，考慮了各種情況的錯誤處理，並在console中顯示error，這個讀者可以根據自己業務修改

private handleError(error:HttpErrorResponse) {

console.log("指定到出錯的方法來了*************");

let errMsg:string;

if(error instanceof Response){

const body=error.json()||"";

//const err=body.error||JSON.stringify(body);

const err=body||JSON.stringify(body);

errMsg=error.status+"--"+error.statusText||""+err;

}else {

errMsg=error.message?error.message:error.toString();

}

console.error(errMsg.toString());

return Observable.throw(errMsg);

}

後台springmvc層代碼

@ResponseBody

@RequestMapping(value = "/getUserInfo1",method = RequestMethod.GET)

public UserInfoMobile getUserInfo1(String userId, HttpServletResponse resp){

//伺服器端跨域的配置

resp.setHeader("Access-Control-Allow-Origin","*");

System.out.println("運行到api/user/getUserInfo1方法來啦！！！**********************************************************************");

System.out.println("userId的值為："+userId);

if(userId.equals("000001")){

UserInfoMobile userInfoMobile=new UserInfoMobile();

userInfoMobile.setUserId("000001");

userInfoMobile.setStatus("OK");

userInfoMobile.setStatusContent("登陸成功");

return userInfoMobile;

}else {

return null;

}

}

//********************************************************以下為post請求部分**************************************************************

private apiUrlLogin = "http://localhost:8080/web/mobile/login";

login(mobile,password):Observable<string []>{//輸入手機號碼和密碼登錄

console.log("獲取到前端傳過來的mobile值："+mobile);

console.log("獲取到前端傳過來的password值："+password);

let userMobile:UserMobile=new UserMobile();//定義一個對象存儲手機號碼和密碼

userMobile._usernameMobile=mobile;

userMobile._passwordMobile=password;

//return this.getUrlReturn(this.apiUrlLogin1+"?username="+mobile+"&password="+password); //此處使用get請求也可以實現

return this.getUrlReturnPost(this.apiUrlLogin,userMobile); //post請求

}

後台springmvc代碼

@ResponseBody

@RequestMapping(value = "/login",method = RequestMethod.POST)

public UserInfoMobile login(@RequestBody UserMobile userMobile,HttpServletResponse resp){

//伺服器端跨域的配置

resp.setHeader("Access-Control-Allow-Origin","*");

System.out.println("運行到post方法來了！！********************************************************************");

System.out.println("獲取到userMobile的值："+userMobile.toString());

if(userMobile.get_usernameMobile().equals("1")&&userMobile.get_passwordMobile().equals("1")){

System.out.println("賬號密碼正確");

UserInfoMobile userInfoMobile=new UserInfoMobile();

userInfoMobile.setUserId("000001");

userInfoMobile.setStatus("OK");

userInfoMobile.setStatusContent("登陸成功");

return userInfoMobile;

}else{

UserInfoMobile userInfoMobile=new UserInfoMobile();

userInfoMobile.setStatus("ERROR");

userInfoMobile.setStatusContent("登錄失敗");

return userInfoMobile;

}

}

---------------------

作者：小小魚34309335

原文：https://blog.csdn.net/qq_34309663/article/details/84324261

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！