【第三阶段 day24】Axios的补充 IDEA自动注入mapper异常说明 Ajax的简化操作

本文链接：https://blog.csdn.net/oriettahuiru/article/details/121137394

文章目录

1.Axios的补充
- - 1.1 Axios-Post请求:
  - 1.2 控制层
2.IDEA自动注入mapper异常说明
3.Ajax的简化操作
4.前后端交互案例

1.Axios的补充

1.1 Axios-Post请求:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>前后端交互测试</title>
	</head>
	<body>
		<div id="app"></div>
		<script src="../js/axios.js"></script>
		<script>
			/* 1.完成用户的入库操作
			 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>
	</body>
</html>

1.2 控制层

package com.jt.controller;

import com.jt.pojo.User;
import com.jt.service.AxiosService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.context.annotation.RequestScope;

@RestController
@CrossOrigin
@RequestMapping("/axios") //抽取前缀
public class AxiosController {
    @Autowired
    private AxiosService axiosService;

    /*
    * 实现用户入库操作
    * url地址:http://localhost:8090/axios/saveUser
    * 参数: json串: {"name":"tomcat","age":18,"sex":"男"}
    * 返回值:成功消息
    * 难点:前端传递的是json,后端不可以直接使用User对象接收
    * 解决方案:
    *       1.对象可以转化为json字符串      @ResponseBody
    *       2.json串转化为对象             @RequestBody
    * */
    @PostMapping("/saveUser")
    public String saveUser(@RequestBody User user){
        System.out.println(user);
        axiosService.saveUser(user);
        return "用户新增成功";
    }
    /*
    *
    * */
}

2.IDEA自动注入mapper异常说明

在这里插入图片描述

3.Ajax的简化操作

3.1 简化axios请求的前缀

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>前后端交互测试</title>
	</head>
	<body>
		<div id="app"></div>
		<script src="../js/axios.js"></script>
		<script>
			/* 1.完成用户的入库操作
			 axios.post(url地址,对象名称)
			 axios.put(url地址,对象名称)
			 axios.get(url地址,{params: 对象名称)
			 axios.delete(url地址,{params: 对象名称)
			 */
			axios.defaults.baseURL="http://localhost:8090"
			let user1={name: "tomcat",age: 18,sex: "男"}
			axios.post("/axios/saveUser",user1)
				.then(function(promise){
					console.log(promise.data)
				})
		</script>
	</body>
</html>

3.2 关于promise对象的说明

概念:promise是ajax发送请求以后,服务器返回信息,分装到promise对象中
引入promise对象,是的ajax调用,在交互中获得简化

3.3 Ajax"回调地狱"问题

缺点:嵌套层级太深,不便于维护
分析:将ajax的2层方法,想办法封装到一层当中

3.4 解决回调地狱问题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>前后端交互测试</title>
	</head>
	<body>
		<div id="app"></div>
		<script src="../js/axios.js"></script>
		<script>
			/* 1.完成用户的入库操作
			 axios.post(url地址,对象名称)
			 axios.put(url地址,对象名称)
			 axios.get(url地址,{params: 对象名称)
			 axios.delete(url地址,{params: 对象名称)
			 */
			axios.defaults.baseURL="http://localhost:8090"
			/* 
			async:标识函数
		    await
			 */
			async function saveUser(){
				let user1={name: "tomcat",age: 18,sex: "男"}
				//let promise=await axios.post("/axios/saveUser",user1)
				let {data:result}=await axios.post("/axios/saveUser",user1)//简化promise对象的写法
				//console.log(promise.data)
				console.log(result)
			}
			//调用方法
			saveUser();
		</script>
	</body>
</html>

4.前后端交互案例

4.1 需求说明

要求用户访问页面的时候,初始化时就要访问后台服务器,发起ajax请求,实现用户列表页面的渲染
解决方案:使用生命周期函数mounted

4.2 增删改查(前端)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户列表展现案例</title>
	</head>
	<body>
		<div id="app">
			<div align="center">
				<h3 align="center">用户新增</h3><br>
				<p>
					用户名称: <input type="text" name="name" v-model="user1.name"/>
					用户年龄: <input type="text" name="age" v-model="user1.age"/>
					用户性别: <input type="text" name="sex" v-model="user1.sex"/>
					<button @click="insertUserList">新增</button>
				</p>
			</div>
			<hr />
			<div align="center">
				<h3 align="center">用户修改操作</h3><br>
				<p>
						用户ID号: <input type="text" name="id"  disabled v-model="updateuser1.id"/>
						用户名称: <input type="text" name="name" v-model="updateuser1.name"/>
						用户年龄: <input type="text" name="age"  v-model="updateuser1.age"/>
						用户性别: <input type="text" name="sex"  v-model="updateuser1.sex"/>
						<button @click="updateUserList">修改</button>
				</p>
			</div>
			<h1 align="center">用户列表展现案例</h1>
			<table align="center" border="1px" width="80%">
				<tr align="center">
					<td>ID编号</td>
					<td>姓名</td>
					<td>年龄</td>
					<td>性别</td>
					<td>操作</td>
				</tr>
				<!-- 遍历tr标签 展现数据 -->
				<tr align="center" v-for="user in listUser">
					<td v-text="user.id"></td>
					<td v-text="user.name"></td>
					<td v-text="user.age"></td>
					<td v-text="user.sex"></td>
					<td>
						<button @click="updatecommit(user)">修改</button>
						<button @click="deleteUserList(user)">删除</button>
					</td>
				</tr>
			</table>
		</div>
		
		<script src="../js/axios.js"></script>
		<script src="../js/vue.js"></script>
		<script>
			axios.defaults.baseURL="http://localhost:8090"
			const app=new Vue({
				el:"#app",
				data:{
					listUser:[],
					user1:{
						id:"",
						name:"",
						age:"",
						sex:""
					},
					updateuser1:{
						id:"",
						name:"",
						age:"",
						sex:""
					}
				},
				methods:{
					async findUserList(){
						let {data:result}=await axios.get("/axios/findUserList")
						this.listUser=result
					},
					async insertUserList(){
						let {data:result,status:status}=await axios.post("/axios/insertUserList",this.user1)
						if(status === 200){
							alert(result)
							this.user1={}
							this.findUserList()
						}else{
							alert("用户新增失败")
						}
					},
					updatecommit(user){
						this.updateuser1=user
					},
					async updateUserList(){
						let {data:result,status:status}=await axios.put("/axios/updateUserList",this.updateuser1)
						if(status === 200){
							alert(result)
							this.updateuser1={}
							this.findUserList()
						}
					},
					async deleteUserList(user2){
						let {data:result,status:status}=await axios.delete("/axios/deleteUserList",{params:user2})
						if(status === 200){
							alert(result)
							this.findUserList()
						}
					}
					
				},
				mounted() {
					this.findUserList()
				}
			})
		</script>
	</body>
</html>

4.3 控制层

package com.jt.controller;

import com.jt.pojo.User;
import com.jt.service.AxiosService;
import org.apache.ibatis.annotations.Delete;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.context.annotation.RequestScope;

import java.util.List;

@RestController
@CrossOrigin
@RequestMapping("/axios") //抽取前缀
public class AxiosController {
    @Autowired
    private AxiosService axiosService;

    /*
    * 实现用户入库操作
    * url地址:http://localhost:8090/axios/saveUser
    * 参数: json串: {"name":"tomcat","age":18,"sex":"男"}
    * 返回值:成功消息
    * 难点:前端传递的是json,后端不可以直接使用User对象接收
    * 解决方案:
    *       1.对象可以转化为json字符串      @ResponseBody
    *       2.json串转化为对象             @RequestBody
    * */
    @PostMapping("/saveUser")
    public String saveUser(@RequestBody User user){
        System.out.println(user);
        axiosService.saveUser(user);
        return "用户新增成功";
    }
    /*
    *查询用户信息
    *http://localhost:8090/axios/saveUser
    * */
    @GetMapping("/findUserList")
    public List<User> findUserList(){
        return axiosService.findUserList();
    }
    @PostMapping("/insertUserList")
    public String insertUserList(@RequestBody User user){
        System.out.println(user);
        axiosService.insertUserList(user);
        return "用户新增成功";
    }

    //@PostMapping("/deleteUserList")
    @DeleteMapping("/deleteUserList")
    public String deleteUserList(User user){
        System.out.println(user);
        axiosService.deleteUserList(user);
        return "用户删除成功";
    }
    @PutMapping("/updateUserList")
    public String updateUserList(@RequestBody User user){
        axiosService.updateUserList(user);
        return "用户修改成功";
    }

}