三.day7VUE-ajax前后端连接

最新推荐文章于 2022-01-19 20:58:26 发布

loveyouloveyour

最新推荐文章于 2022-01-19 20:58:26 发布

阅读量127

点赞数

文章标签： ajax jquery

本文链接：https://blog.csdn.net/loveyouloveyour/article/details/119959149

版权

请求类型说明：

分组：1.GET/DELETE 用法一致

2.POST/PUT用法一致

DELETE请求：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DELETE请求</title>
	</head>
	<body>
		 <h1>前后端调用-DELETE请求测试</h1>
		 <script src="../js/axios.js"></script>
		 <script>
		 
			/* DELETE测试1:
			   需求: 删除ID=232的数据
			 */
			let url = "http://localhost:8090/axios/deleteById?id=232"
			axios.delete(url)
				 .then( promise => {
					 console.log(promise.data)
				 })
			
		 </script>
	</body>
</html>

POST请求：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>POST请求</title>
	</head>
	<body>
		 <h1>前后端调用-POST请求测试</h1>
		 <script src="../js/axios.js"></script>
		 <script>
			
			/**
			 * 需求: 实现用户新增操作
			 * 语法: axios.post(url,新增参数)
			 * 规则: 如果post/put 传递对象则直接赋值.
			 */
			let user = {
				name: '小燕子',
				age: 18,
				sex: '女'
			}
			let url = "http://localhost:8090/saveUser"
			axios.post(url,user)
			     .then(promise => {
					 console.log(promise.data)
				 })
			
			
			
		 </script>
	</body>
</html>

请求参数的结构：

说明：http下一种只能识别字符串，传入数据库（修改或新增需要将参数由JSON串转换为user对象）

/*
     * 需求: 实现用户入库操作
     * URL: http://localhost:8090/axios/saveUser
     * 参数: {name: "小燕子", age: 18, sex: "女"}
     * 返回值: String 新增成功!!!
     * 难点:
     *      json 互转  user对象
     *      1. user对象转化为json   @ResponseBody
     *      2. json转化为user对象   @RequestBody
     */
    @PostMapping("/saveUser")
    public String saveUser(@RequestBody User user){

        userService.saveUser(user);
        return "新增用户成功!!!";
    }

PUT请求（一）：

通过id修改数据：

/**
			 * 需求: 要求将id="238" 
			 * 	     改为name="小鬼当家",age=4,sex=男
			 */
			let user = {
				id: 238,
				name: "小鬼当家",
				age: 4,
				sex: "男"
			}
			let url = "http://localhost:8090/axios/updateUser"
			axios.put(url,user)
				 .then(promise => {
					 console.log(promise.data)
				 })

controller层代码：

在这里插入图片描述

PUT请求方式（二）由name字段修改：

/**
			 * 需求2: 要求将name="小燕子"
			 * 	      改为name="小鬼当家",age=18,sex=男
			 * 难点:  如果有多个参数,并且重复时 如何封装?
			 * 解决方案: 1.restFul + 对象  注意：使用反引号
			 */
			let name = "小燕子"
			let user2 = {
				name: "小鬼当家",
				age: 18,
				sex: "男"
			}
			
			let url2 = `http://localhost:8090/axios/updateUserByName/${name}`
			axios.put(url2,user2)
				 .then(promise => {
					 console.log( promise.data)
				 })

controller层代码：

 /**
     * 需求: 根据name修改数据
     * URL: http://localhost:8090/axios/updateUserByName/小燕子
     * 参数: name条件, {name: "小鬼当家",age: 18,sex: "男"}
     * 返回值: 修改成功
     * 注意事项:  restFul可以为对象的属性赋值.
     *          注意restFul的名称不要与属性重名.否则会覆盖
     *          引发BUG
     */
    @PutMapping("/updateUserByName/{whereName}")
    public String updateByName(@RequestBody User user,
                               @PathVariable String whereName){

        userService.updateUserByName(user,whereName);
        return "修改数据成功2222";
    }

Vue-Axios案例

需求说明：

1.当展现页面时，用户发起请求 http://localhost:8090/vue/findAll,获取所有的user数据.
2.通过Vue.js 要求在页面中展现数据, 以表格的形式展现.
3.为每行数据添加修改/删除的按钮
4.在一个新的DIV中编辑3个文本框 name/age/sex 通过提交按钮实现新增.
5.如果用户点击修改按钮,则在全新的DIV中回显数据.
6.用户修改完成数据之后,通过提交按钮实现数据的修改.
7.当用户点击删除按钮时,要求实现数据的删除操作.

数据查询.数据新增.数据删除.数据修改

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例练习</title>
	</head>
	<body>
			<script src="../js/axios.js"  type="text/javascript" charset="utf-8"></script>
			<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
			<div id="app">
						<!-- 新增div -->
						<div align="center">
							<h3>用户新增</h3>
							姓名: <input type="text" v-model="addUser.name"/>
							年龄: <input type="text" v-model="addUser.age"/>
							性别: <input type="text" v-model="addUser.sex"/>
							<!--  -->
							<button @click="addUserBtn">新增</button>
						</div>
						<hr />
						<!-- 修改div -->
						<div align="center">
										
										<p>
											编号: <input type="text" disabled/>
											姓名: <input type="text" v-model="updateuser.name" />
										</p>
										<p>
											年龄: <input type="text"  v-model="updateuser.age"/>
											性别: <input type="text" v-model="updateuser.sex"/>
										</p>
										<button @click="updateById()">修改</button>
									</div>
									
									<hr />
									<!-- 展现div -->
									<div>
										<table border="1px" align="center">
								<tr align="center">
									<th colspan="5"><h3>用户列表</h3></th>
								</tr>
								<tr align="center">
									<th>编号</th>
									<th>姓名</th>
									<th>年龄</th>
									<th>性别</th>
									<th>操作</th>
								</tr>
								<tr  v-for="user in users" align="center">
									<th v-text="user.id"></th>
									<th v-text="user.name"></th>
									<th v-text="user.age"></th>
									<th v-text="user.sex"></th>
									<th width="20%">
										<button @click="update(user)">修改</button>
										<button @click="deleteById(user)" >删除</button>
									</th>
								</tr>
							</table>
						</div>
					</div>
			<script >
				axios.defaults.baseURL = "http://localhost:8090/axios"
				const app=new Vue({
					el:"#app",
					
				data:{
					users:[],
					addUser:{
						name:'',
						age:'',
						sex:''
						
					},
					updateuser:{
						name:'',
						age:'',
						sex:''
					}
					},
					
				
				methods:{
					
					//获取用户信息
					getUserLiset(){
						alert("查询数据")
						axios.get("/getAll").then(
						a=>{
						console.log(a.data)
						this.users=a.data
						}
						
						)
					},
					addUserBtn(){
					axios.post("/post",this.addUser).then(promise=>{
						alert("新增成功")
						//新增之后刷新查询数据
						this.getUserLiset()
						//新增之后清空
						this.addUser={}
					})
				},
				update(user){
					this.updateuser=user
				},
				deleteById(user){
					axios.delete("/deleteById?id="+user.id).then(promise=>{
						this.getUserLiset()
					})
					
				},
				updateById(){
					axios.put("/put",this.updateuser).then(promise=>{
						this.getUserLiset()
						this.updateuser={}
					})
				}
				
				},
				
				
				created() {
					alert("生命周期函数")
					this.getUserLiset()
					
				}
				})
			
			</script>
	</body>
</html>

定义axios请求前缀：

axios.defaults.baseURL = "http://localhost:8090/vue"

总结：数据查询：axios.get(url) 链接后端查询所有数据

数据新增：axios.post(url,user) 连接后台，传入网页用户输入参数

注意：需要双向绑定，将网页用户输入参数传给空值对象

注：删除与修改点击那个按钮，就会作用于哪个user，经v-for所得

数据删除：axios.delete(url)

注意：通过对象的字段值删除，例：通过该对象id删除

"/deleteById?id="+user.id

删除按钮需绑定事件，事件需要传参数，用以获取删除条件

修改数据：axios.put（url，用户修改后参数）

1.将user与用户输入框v-model的空值对象建立联系由回返参数，对其进行修改；

user后修改按钮需要绑定事件将user属性值赋值回返给用户修改的updateuser；

用户修改后updateuser后修改按钮需要绑定事件将修改后数据传给后端

2.通过id将用户修改的数据传入后端数据库，id不可被修改，default；

loveyouloveyour

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三.day7VUE-ajax前后端连接

请求类型说明：分组：1.GET/DELETE 用法一致 2.POST/PUT用法一致DELETE请求：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>DELETE请求</title> </head> <body> <h1>前后端调用-DELETE请求测试</h1&gt...
复制链接

扫一扫