1. 前后端调用
1.1 请求类型说明
分组:
1.GET/DELETE 用法一致.
2.POST/PUT 用法一致.
1.2 Delete请求
1.2.1 编辑页面HTML
<!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>
1.2.2 编辑AxiosController
1.2.3 编辑UserServiceImpl
1.3 POST请求
1.3.1 编辑页面html
<!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>
1.3.2 请求参数的结构
1.url请求地址
2.参数结构
说明: http协议中只能识别 字符串!!!
1.3.3 编辑 AxiosController
/*
* 需求: 实现用户入库操作
* 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 "新增用户成功!!!";
}
1.3.4 编辑 AxiosService
1.4 PUT请求(一)
1.4.1 编辑页面html
/**
* 需求: 要求将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)
})
1.4.2 编辑AxiosController
1.4.3 编辑UserServiceImpl
1.4 PUT请求(二)
1.4.1 编辑页面html
/**
* 需求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)
})
1.4.2 编辑AxiosController
/**
* 需求: 根据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";
}
1.4.3 编辑UserServiceImpl
//userMapper.update(arg1,arg2)
//arg1: set条件的数据,
//arg2: where条件的数据
@Override
public void updateUserByName(User user, String whereName) {
//updateWrapper 与 queryWrapper 功能一样,可以混用
UpdateWrapper<User> updateWrapper = new UpdateWrapper();
updateWrapper.eq("name",whereName);
userMapper.update(user,updateWrapper);
}
2. Vue-Axios案例
2.1 需求说明
1.当展现页面时，用户发起请求 http://localhost:8090/vue/findAll,获取所有的user数据.
2.通过Vue.js 要求在页面中展现数据, 以表格的形式展现.
3.为每行数据添加 修改/删除的按钮
4.在一个新的DIV中 编辑3个文本框 name/age/sex 通过提交按钮实现新增.
5.如果用户点击修改按钮,则在全新的DIV中 回显数据.
6.用户修改完成数据之后,通过提交按钮 实现数据的修改.
7.当用户点击删除按钮时,要求实现数据的删除操作.
2.2 用户列表展现
2.2.1 编辑html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>案例练习</title>
<script src="vue-js/js/vue.js"></script>
<script src="vue-js/js/axios.js"></script>
</head>
<body>
<div id="app">
{{msg}}
<div align="center">
<!-- 新增div -->
<h3>用户新增</h3>
编号：<input type="text" disabled="" />
姓名：<input type="text" v-model="adduser.name"/>
年龄：<input type="text" v-model="adduser.age"/>
性别：<input type="text" v-model="adduser.sex"/>
<button @click="insertBtn">新增</button>
</div>
<hr />
<!-- 修改div -->
<div align="center">
<h3>用户修改</h3>
编号：<input type="text" v-model="updateuser.id"/>
姓名：<input type="text" v-model="updateuser.name"/>
年龄：<input type="text" v-model="updateuser.age"/>
性别：<input type="text" v-model="updateuser.sex"/>
<button @click="updateBtn">修改</button>
</div>
<hr />
<!-- 展现div -->
<div>
<table border="1px" align="center" width="80%">
<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 align="center" v-for="user in userList">
<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="25%">
<button @click="updateUser(user)">修改</button>
<button @click="deleteUser(user)">删除</button>
</th>
</tr>
</table>
</div>
</div>
<script>
axios.defaults.baseURL="http://localhost:8090/vue"
const app = new Vue({
el:"#app",
data:{
msg:"hello",
userList:[],
adduser:{
name:"",
age:"",
sex:"",
},
updateuser:{
id:"",
name:"",
age:"",
sex:"",
}
},
methods:{
getUserList(){
axios.get("/getAll").then(
promise=>{
//console.log(promise.data)
this.userList=promise.data
})
},
insertBtn(){
axios.put("/insert",this.adduser).then(
promise=>{
//获取服务器返回值
let msg = promise.data
//弹出框操作
alert(msg)
//将列表数据刷新
this.getUserList()
//新增之后，将数据清空
this.adduser={}
})
},
updateBtn(){
axios.put("/update",this.updateuser).then(
promise=>{
alert(promise.data)
this.getUserList()
this.updateuser={}
})
},
deleteUser(user){
axios.delete("/deleteById?id="+user.id).then(
promise=>{
alert(promise.data)
this.getUserList()
})
},
updateUser(user){
this.updateuser=user
},
},
created() {
//alert("生命周期函数")
this.getUserList()
}
})
</script>
</body>
</html>2.2.2 编辑VueController
@RestController
@RequestMapping("/vue")
@CrossOrigin
public class UserController {
@Autowired
private UserService userService;
@GetMapping("/getAll")
public List<User> select(){
return userService.select();
}
@PostMapping("insert")
public String insert(@RequestBody User user){
userService.insert(user);
return "新增成功";
}
@DeleteMapping("delete")
public String delete(User user){
userService.delete(user);
return "删除成功";
}
@PutMapping("update")
public String update(@RequestBody User user){
userService.update(user);
return "修改成功";
}
}2.4 用户删除操作
2.4.1 添加点击事件
2.4.2 编辑JS方法
2.4.3 编辑VueController
3 知识点梳理
3.1 vue初始化操作
用法:vue页面初始化时,如果发起ajax请求.
3.2 Axios定义请求前缀
3.3 Axios与Vue数据结合
说明: 当通过axios获取服务器端数据之后,应该将该数据传给vue.data的属性. Vue对象才可以对数据进行二次操作.
3.4 用户输入双向绑定
说明: 在vue.js中 一般情况下,如果遇到用户输入,一般使用双向数据绑定的形式.
5846
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
