Day8 axios ajax 业务调用 vue数组练习 侦听器

1.Axios Ajax业务调用
1.1 GET-?号参数请求
1.1.1 带参数提交数据
/* 2. get带参数的请求方式 ?号拼接的方式
URL: http://localhost:8090/getUserById?id=1
返回值: User对象的JSON串
*/
axios.get(“http://localhost:8090/getUserById?id=1”)
.then(function(result){
console.log(result.data)
})
1.1.2 编辑UserController
在这里插入图片描述

1.1.3 编辑UserService
在这里插入图片描述

1.2 GET-params对象语法
/**
* params 对象的方式提交
* 如果将来的参数有多个,则可以封装params对象.简洁
/
axios.get(“http://localhost:8090/getUserById”,{
params: {
id: 1
}
}).then(function(result){
console.log(result.data)
})
1.3 箭头函数语法
/ 简化回调函数的写法 */
axios.get(“http://localhost:8090/getUserById”,{
params: {
id: 1
}
}).then((result) => {
console.log(result.data)
})
2.VUE数组案例练习
2.1 常见数组函数
push() 在最后一个追加
pop() 删除最后一个
shift() 删除第一个元素
unshift() 在开头追加一个元素
splice() 在指定位置替换元素
sort() 数组排序 默认是按照字符编码的顺序进行排序
reverse() 数组反转
2.2 语法调用

{{item}}
数据:

3.侦听器
3.1 侦听器说明
在侦听器中包含了 监听器/过滤器 下列按钮包含了课堂案例语法规则

姓:

4.计算属性
4.1 计算属性概念
如果在插值表达式中有大量的数据计算,则可以通过计算属性的方式实现

4.2 计算属性语法

计算:
{{msg.split('').reverse().join('')}}

	</div>
	<script src="../js/vue.js"></script>
	<script>
		const app = new Vue({
			el: "#app",
			data: {
				msg: ''
			},
			methods: {
				reverseA(){
					console.log("我是方法调用")
					return this.msg.split('').reverse().join('')
				}
			},
			//定义计算属性
			computed: {
				//必须有返回值
				reverseStr(){
					console.log("我是计算属性")
					return this.msg.split('').reverse().join('')
				}
			}
		})
	</script>
</body>

4.3 计算属性与方法的区别
计算属性有缓存的操作 只执行一次. 效率更高
计算属性调用时,只需要写属性名称 xxx
用户每次调用都会执行方法.没有缓存操作
方法调用时需要添加 xxx()

		{{reverseStr}}
		{{reverseStr}}
		{{reverseA()}}
		{{reverseA()}}

5. Axios练习
   5.1 Get-restFul风格
   5.1.1 页面JS
   /* 利用restFul风格实现数据传参
   restFul:
   1.参数使用/分割
   2.url中不能出现动词
   */
   axios.get(“http://localhost:8090/user/1”)
   .then( result => {
   console.log(“AAAA”)
   console.log(result.data)
   })
   5.1.2 编辑UserController
   在这里插入图片描述

5.2 delete-restFul风格
5.2.1 编辑页面URL
//ajax 删除操作
axios.delete(“http://localhost:8090/user/1”)
.then( result => {
console.log(result.data)
})
5.2.2 编辑UserController
在这里插入图片描述

5.3 Post请求-对象方式
5.3.1 请求URL说明
1).
在这里插入图片描述
2).正常请求
在这里插入图片描述
3).请求参数
在这里插入图片描述

5.3.2 编辑页面Ajax
/**
* 请求类型: post/put
* 1.对象方式提交
* url: localhost:8090/addUser
*/
axios.post(“http://localhost:8090/addUser”,{
name: “黑熊精”,
age: 3000,
sex: “男”
}).then(result => {
console.log(“post”)
console.log(result.data)
})
5.3.3 编辑后端Controller
在这里插入图片描述

5.3.4 常规post请求参数
axios.post方式提交的参数是 JSON串.
普通post请求是 key:value结构数据
在这里插入图片描述

5.4 Post请求-Params方式
5.4.1 编辑页面URL
/**
* 2.axios利用form表单提交数据
*/
let params = new URLSearchParams();
params.append(“name”,“蝎子精”)
params.append(“age”,700)
params.append(“sex”, “女”)

		axios.post("http://localhost:8090/addUserForm",params)
			 .then(result => {
				 console.log("form表单提交成功!!!")
				 console.log(result.data)
			 })

5.4.2 编辑UserController
在这里插入图片描述

5.5 Post请求-RestFul方式
5.5.1 编辑页面
在这里插入图片描述

5.5.2 编辑UserController
在这里插入图片描述

5.6 Axios 设定基本URL地址
5.6.1 需求说明
如果在发起Ajax请求时,每次都需要手动的编辑URL请求地址. 可以通过如下的方式进行优化.

5.6.2 基本请求路径设定
在这里插入图片描述

5.7 Axios 实现用户列表展现
5.7.1 编辑页面

ID： 姓名： 年龄： 性别：

5.7.2 编辑UserController
//查询用户列表数据
@GetMapping("/getUser")
public List getUser(){

    List<User> userList = userService.getUser();
    return userList;
}

//删除用户信息
@DeleteMapping("/user/{id}")
public String deleteUser(@PathVariable Integer id){

    userService.deleteUser(id);
    return "数据删除成功!!!";
}

//更新用户数据
/**
* 实现修改操作
* 参数: user的JSON数据
* URL: /updateUser
*/
@PutMapping("/updateUser")
public String updateUser2(@RequestBody User user){

    userService.updateUser(user);
    return "实现数据修改";
}