前端基于angular6的ionic3环境，后端基于springmvc情况下，http的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;
    }
}