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 语法调用
数据:
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()}}
- 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 编辑页面
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 "实现数据修改";
}