文章目录
1.远程调用
因为这次测试案例需要调用我们上一节完成的springbot_ssm
代码,但是此时调用存在跨域问题,此时前端项目运行后,会在浏览器报:Access to XMLHttpRequest at ‘http://localhost:8090/findAll’ from origin ‘null’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource错误,所以我们先要解决跨域问题:
1.1 什么是跨域
说明:浏览器解析Ajax时 要求浏览器的网址,与Ajax请求的网址,必须满足三要素:
1. 协议相同
2. 域名相同
3. 端口号相同
如果上述的三要素都满足,则叫同域访问,如果三要素有一项不满足,则称为跨域访问。
我们只需要在后端项目的控制类上添加@CrossOrigin
注解即可:
1.2 跨域访问案例
观察下面的访问地址,区分其是同域还是跨域,如果是跨域,说明为什么是跨域:
- http://www.baidu.com/xxx/xxx
- https://www.baidu.com/xxx/xxx
跨域请求,协议不同
- http://www.110.242.68.3:80.com/xxx/xxx
- http://www.baidu.com:80/xxx/xxx
跨域请求,域名不同
- http://www.baidu.com/xxx/xxx
- http://www.baidu.com:80/xxx/xxx
同域请求,http端口号80为默认请求,写不写都是80
- https://www.baidu.com/xxx/xxx
- https://www.baidu.com:443/xxx/xxx
同域请求, https请求端口号默认为443,写不写都是443
- 浏览器地址:http://127.0.0.1:8848/vuejs/xxxx/xxxx
- Ajax请求网址:http://localhost:8090/vuejs/xxxx/xxxx
跨域,域名,端口号均不同,虽然localhost地址就是127.0.0.1,但这不是固定的,不要自己为其进行默认的转换,localhost就是localhost。
1.3 请求类型与业务之间的关系
1.3.1 常用请求类型
请求类型共有8种:
常用的为其中get,post,put,delete四种;
1.3.2 类型与请求的映射关系
- 新增操作
- 类型:POST
- 接收的注解:
@PostMapping()
- 删除操作
- 类型:DELETE
- 接收的注解:
@DeleteMapping()
- 更新操作
- 类型:PUT
- 接收的注解:
@PutMapping()
- 查询操作
- 类型:GET
- 接收的注解:
@GetMapping()
此前我们的查询中,使用的都是@RequestMapping
注解,但其实在实际开发中并不使用,其安全度比较低,我们一般使用@GetMapping()
注解。
2.远程入门案例测试
2.1 不带参数get请求
2.1.1 编辑页面JS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>远程调用案例</title>
</head>
<body>
<div id="app">
<h1>前后端调用</h1>
</div>
<!-- 1.完成前后端远程调用 -->
<!-- 1.1引入js函数 -->
<script src="../js/axios.js"></script>
<script>
//1.动态获取用户列表信息 axios.get(url地址,提交的参数)
let url1 = "http://localhost:8090/findAll"
axios.get(url1)
.then(function(promise){
console.log(promise)
//获取服务器返回值的数据
console.log(promise.data)
})
</script>
</body>
</html>
2.1.2 前后端调用结果
2.2 带参数GET请求
2.2.1 编辑页面JS
//2. 根据id动态获取用户信息
let id = 3
let url2 = "http://localhost:8090/findUserById?id="+id
axios.get(url2)
.then(function(promise){
console.log(promise.data)
})
2.2.2 页面效果展现
2.3 GET请求参数封装为对象用法
2.3.1 F12 开发工具用法
2.3.2 前端页面JS
//3.多参数的get请求如果是多个参数,可以考虑将其封装为对象
// let age = 18
// let sex = "女"
// let url3 = "http://localhost:8090/findUserByAs?age="+age+"&sex="+sex
let user3 = {age: 18, sex: "女"}
let url3 = "http://localhost:8090/findUserByAs"
//get请求要传递对象要使用{params:url3}来接
axios.get(url3,{params:user3})
.then(function(promise){
console.log(promise.data)
})
2.3.3 前端请求路径结构
2.3.4 前端响应
2.4 PUT请求案例
2.4.1 前端页面JS
为了不将传入的数据写死,要求必须使用restful结构实现,直接使用传统的restful结构当传入参数比较多时,会十分繁琐,所以这里我们使用模板字符串。
其可以保留代码片段的格式,并且可以动态取值,其使用``包裹整个代码片段,每个参数之间使用/分隔,参数使用${key}进行接收,如:
let url4 = `http://localhost:8090/updateById/${user4.id}/${user4.name}/${user4.age}/${user4.sex}`
//4.实现数据修改的操作
//4.1请求路径 要求必须使用restful结构
// let id = 1
// let name = "黑熊精"
// let age = 3000
// let sex = "男"
// let url4 = "http://localhost:8090/updateById/"+id+"/"++name"/"++age"/"+sex+"
//以上写法正确,但是最low的写法
let user4 = {id:1,name:"黑熊精",age:3000,sex:"男"}
/*
4.2 前端知识点:模板字符串写法
语法:`` 反引号
取值:${key}
作用:1.保留代码片段的格式
2.可以动态取值 ${key}
*/
let url4 = `http://localhost:8090/updateById/${user4.id}/${user4.name}/${user4.age}/${user4.sex}`
//具体类型已经写到了查询URL中,put里已经不需要再写了
axios.put(url4)
.then(function(promise){
console.log(promise.data)
})
/*
完成后会有跨域报错问题,是因为参数接收导致的
Idea中@RequestMapping处也要求必须使用put类型的注解,将其修改为
@RequestMapping(value = "/updateById/{id}/{name}/{age}/{sex}",
method = RequestMethod.PUT)或修改为
@PutMapping("updateById/{id}/{name}/{age}/{sex}")
*/
2.4.2 后端idea注解修改
//@RequestMapping(value = "/updateById/{id}/{name}/{age}/{sex}",method = RequestMethod.PUT)
@PutMapping("updateById/{id}/{name}/{age}/{sex}")
public String updateById(User user){
userService.updateById(user);
return "用户修改成功";
}
此处注解使用@PutMapping("updateById/{id}/{name}/{age}/{sex}")
或@RequestMapping(value = "/updateById/{id}/{name}/{age}/{sex}", method = RequestMethod.PUT)
后进行测试。
2.5 POST请求案例
2.5.1 编辑页面JS
<script src="../js/axios.js"></script>
<script>
/**
* 完成用户入库操作
* 用法: axios.post(url地址,对象名称)
* axios.put(url地址, 对象名称)
*
* axios.get(url地址,{params: 对象名称})
* axios.delete(url地址,{params: 对象名称})
*/
let url1 = "http://localhost:8090/axios/saveUser"
let user1 = {name: "tomcat",age: 18, sex: "女"}
axios.post(url1,user1)
.then(function(promise){
console.log(promise.data)
})
</script>