前端基于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
