java第三阶段第八天--CureGuy_public list<user> getusers(){ basemapper<object> u-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43234692/article/details/120560105

1 、Axios 学习

1.1 、get请求

1.1.1 、请求方式说明

1.http://;ocalhost:8080/findUser?id=xxx&name=xxxx

2.利用对象的方式进行数据封装 axios.get(url,{params:封装的对象})

3.RestFul方式提交方式

1.1.2 、get-restful 案例

    @GetMapping("/findUserByAS")
    public List<User> findUserByAS(User user){
        return userService.findUserByAS(user) ;
    }

    @GetMapping("user/{name}/{sex}")
    public List<User> findUserByNS(User user){return userService.findUserByNS(user);}

    <select id="findUserByAS" resultType="User">
    select * from demo_user where age=#{age} and sex=#{sex}
    </select>
    <select id="findUserByNS" resultType="User">
    select * from demo_user where name=#{name} and sex=#{sex}
    </select>

	<script>
/**
				 *  作业2:  根据age/sex查询用户信息
				 * 	url地址: http://localhost:8090/axios/findUserByAS
				 *  参数:    id=1
				 *  返回值:  console.log输出  
				 *  知识点:  根据对象传递参数时,使用params关键字
				 */
	let url2="http://localhost:8080/axios/findUserByAS"
	let user = {age : 18, sex : "女"}
	axios.get(url2,{params : user}).then(function(promise){
		console.log(promise.data)
	})
	// 利用restful实现数据获取
	// 根据name和sex查询数据
	// 模板字符串  语法ES7  一对反引号进行数据拼接
	//						通过  ${}  获取变量
	let name="金刚葫芦娃"
	let sex="男"
	//let url3="http://localhost:8080/axios/user/"+name+"/"+sex+""
	let url3=`http://localhost:8080/axios/user/${name}/${sex}`
	axios.get(url3).then(function(promise){
		console.log(promise.data)
		
	})
		</script>

1.2 、post-restful 案例

参数在http协议传输中变成了json串

    /**
     * 业务:实现用户的新增
     * URL: http://localhost:8090/axios/saveUser
     * 参数: {"name":"国庆快乐","age":72,"sex":"女"} JSON串
     * 返回值: String 新增成功
     * 知识点: post请求传递对象时,传递的数据是一个json串.不能直接为User对象赋值.
     * 解决方案:
     *        1.对象转化为JSON  @ResponseBody
     *        2.JSON转化为对象  @RequestBody
     *
     */
    @PostMapping("/saveUser")
    public String saveUser(@RequestBody User user){
        System.out.println(user);
        userService.saveUser(user);
        return "ok";
    }

	//实现post请求入库操作 实现用户入库
			//{params : user}只能用于get的请求方法
			//post中的参数直接传递给对象axios.post(url,user)
			let url="http://localhost:8080/axios/saveUser"
			let user ={
				"name": "国庆快乐！",
				"age" : 72,
				"sex" : "女"
			}
			axios.post(url,user).then(function(promise){
				console.log(promise)
			})

@Insert("insert into demo_user value(null,#{name},#{age},#{sex})")
    void saveUser(User user);

1.3 、Ajax简化操作

1.3.1 、指定公共的请求前缀

<script>
			//指定公共的请求前缀
			axios.defaults.baseURL = "http://localhost:8080"
			
			
			
			//实现post请求入库操作 实现用户入库
			//{params : user}只能用于get的请求方法
			//post中的参数直接传递给对象axios.post(url,user)
			//let url="http://localhost:8080/axios/saveUser"
			let url="/axios/saveUser"
			let user ={
				"name": "国庆快乐！",
				"age" : 72,
				"sex" : "女"
			}
			axios.post(url,user).then(function(promise){
				console.log(promise)
			})
		</script>

1.3.2 、async-await简化操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>简化操作</title>
	</head>
	<body>
		<h1>async-await</h1>
		<script src="../js/axios.js"></script>
		<script>
			//指定请求前缀
			axios.defaults.baseURL="http://localhost:8080"
			//async 必须标识函数方法
			//await 必须标识ajax请求
			//实际意义：解决了ajax中的问题，“回调地狱”
			//定义函数
			async function getUser(){
				// let promise =await axios.get("/getUser")
				// console.log(promise.data)
			
			//解析赋值 固定写法
			let {data : result}=await axios.get("/getUser")
			console.log(result)
			}
			//调用函数
			getUser()
			// axios.get("/getUser").then(function(promise){
			// 	console.log(promise.data)
			// })
		</script>
	</body>
</html>

2 、Curd操作

<!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框架 第一时间想到双向数据绑定 -->
					用户名称: <input type="text" name="name" v-model="addUser.name"/>
					用户年龄: <input type="text" name="age"  v-model="addUser.age" />
					用户性别: <input type="text" name="sex"  v-model="addUser.sex" />
					<button @click="addUserBtn">新增</button>
				</p>
			</div>
			<hr />
			<div align="center">
				<h3 align="center">用户修改操作</h3><br>
				<p>
						用户ID号: <input type="text" name="id"   v-model="updateUser.id"   disabled/>
						用户名称: <input type="text" name="name" v-model="updateUser.name"/>
						用户年龄: <input type="text" name="age"  v-model="updateUser.age"/>
						用户性别: <input type="text" name="sex"  v-model="updateUser.sex"/>
						<button @click="updateUserCommit">修改</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 align="center" v-for="user in userList">
					<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="updateBtn(user)">修改</button>
						<button>删除</button>
					</td>
				</tr>
				
			</table>
		</div>
		
		<script src="../js/axios.js"></script>
		<script src="../js/vue.js"></script>
		<script>
			//为axios执行前缀
			axios.defaults.baseURL="http://localhost:8080"

			const app = new Vue({
				el: "#app",
				data: {
					//3.定义数据列表
					userList: [],
					//指定新增对象
					addUser: {
						name: '',
						age: '',
						sex: ''
					},
					updateUser: {
						id: '',
						name: '',
						age: '',
						sex: ''
					}
				},
				methods: {
					//2.定义获取列表数据的函数
					async getUserList(){
						let {data: result} = await axios.get("/axios/findAll")
						//console.log(result)
						//将ajax返回值传递给Vue
						this.userList = result
					},
					async addUserBtn(){
						//将数据实现入库操作
						let {data: result} = await axios.post("/axios/saveUser",this.addUser)
						//用户提示
						alert(result)
						//清空原有数据
						this.addUser = {}
						//如果新增成功,应该重新获取列表信息
						this.getUserList()
					},
					updateBtn(user){
						//将用户传递的数据绑定到修改页面中.
						this.updateUser = user
					},
					async updateUserCommit(){
						//实现数据的更新操作
						let {data: result} = await axios.put("/axios/updateUser",this.updateUser)
						alert(result)
						this.updateUser = {}
						this.getUserList()
					}
				},
				mounted(){
					//1利用生命周期函数调用getUser函数
					this.getUserList()
				}
			})
			
		</script>
	</body>
</html>


    /**
     * 业务:实现用户的新增
     * URL: http://localhost:8090/axios/saveUser
     * 参数: {"name":"国庆快乐","age":72,"sex":"女"} JSON串
     * 返回值: String 新增成功
     * 知识点: post请求传递对象时,传递的数据是一个json串.不能直接为User对象赋值.
     * 解决方案:
     *        1.对象转化为JSON  @ResponseBody
     *        2.JSON转化为对象  @RequestBody
     *
     */
    @PostMapping("/saveUser")
    public String saveUser(@RequestBody User user){
        System.out.println(user);
        userService.saveUser(user);
        return "ok";
    }

    /**
     * 业务: 实现用户更新
     * URL: /axios/updateUser
     * 参数: json串
     * 返回值: 提示信息
     */
    @PutMapping("updateUser")
    public String updateUser(@RequestBody User user){

        userService.updateUser(user);
        return "更新操作成功!";
    }

修改前：