Springboot项目,Vue结合axios实现异步请求,并将数据显示页面
程序员文章站
2022-07-04 12:02:35
...
一、将请求的数据显示界面
controller代码:
@CrossOrigin
@RequestMapping("/emp")
public @ResponseBody List<Employee> employeeLists(Model model,String name){
System.out.println(name);
List<Employee> list = employeeMapper.findList();
model.addAttribute("list",list);
return list;
}
@CrossOrigin 注解作用:解决跨域问题
@ResponseBody 注解作用:将数据以json字符串形式返回
Html页面代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/axios.min.js"></script>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<table>
<tr>
<td>lastName</td>
<td>email</td>
<td>gender</td>
<td>birth</td>
</tr>
<tr v-for="value in info">
<td>{{value.lastName}}</td>
<td>{{value.email}}</td>
<td>{{value.gender}}</td>
<td>{{value.birth}}</td>
</tr>
</table>
</div>
<script>
new Vue({
el:"#app",
methods:{
},data(){
return{
info:{//下面字段不写也可以
lastName:null,
email:null,
gender:null,
birth:null
}
}
},
mounted(){//Vue生命周期中第四个函数:该函数在执行过程中,已经将数据渲染到界面中,并且已经更新页面。
axios.get('http://localhost:8080/emp').then(response=>(this.info=response.data))
}
})
</script>
</body>
</html>
二、axios实现并发请求
这个听着很唬人的样子,其实就一个页面同时请求多个地址,
然后一起处理数据,对于axios来说SoEasy!
Controller代码:
@CrossOrigin
@RequestMapping("/emp")
public @ResponseBody List<Employee> employeeLists(Model model,String name){
System.out.println(name);
List<Employee> list = employeeMapper.findList();
model.addAttribute("list",list);
return list;
}
@CrossOrigin
@PostMapping("/addEmp")
public String addEmp(@RequestBody Employee employee){
System.out.println(employee.toString());
int i = employeeMapper.insertEmp(employee);
System.out.println("修改的记录数:"+i);
return "redirect:/empList";
}
html页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>并发请求</title>
<script src="../js/axios.min.js"></script>
<script src="../js/vue.js"></script>
</head>
<body>
<p>并发请求:将多个请求同时在同一时刻发送到后端服务接口,最后在集中处理每个请求的响应结果。</p>
<div id="app"></div>
<script>
//1、创建一个查询所有的请求
function findAll() {
return axios.get("http://localhost:8080/emp?name=张三");
}
//2、创建一个添加请求
function save() {
axios.post("http://localhost:8080/addEmp",{
lastName:'张三',
email:'[email protected]',
gender:1,
deptId:101,
birth:'2020-12-31',
});
}
//3、并发执行
axios.all(findAll(),save());
findAll();
</script>
</body>
</html>
从上面的代码,你可以看出来,这个核心就在于axios的all方法,里面可以有多个参数,参数就是我们请求地址的方法。
上一篇: OpenGL绘图基础
下一篇: C++函数中的静态变量