-1.async-await 操作
* axios的get请求语法
* 知识点:
* 1.箭头函数 主要简化回调函数的写法
* 规则: 如果参数只有一个则括号可以省略
<script>
let url = "http://localhost:8080/axios/getUserId?id=100"
axios.get(url)
.then(
result =>{
alert(result.data)
})
</script>
* 2.async-await简化 解构赋值
* 2.1 async 需要标识函数
* 2.2 await 需要标识ajax请求
* 上述的操作可以将多行js 封装为一行执行 简化代码操作
* 通过下列的配置简化 Ajax请求的路径
* axios.defaults.baseURL = "http://localhost:8080/"
//1.定义方法
//为ajax添加前缀
axios.defaults.baseURL="http://localhost:8080"
async function getUserId(){
let url = "/axios/getUserId?id=100"
//let promise = await axios.get(url)
// alert(promise.data) 解构赋值 ,提取对象中有价值的数据
let {data: reda,status: code} = await axios.get(url)
console.log(code)
console.log(reda)
}
//2.调用方法
getUserId();
2. VUE+Axios案例
说明:
- 利用VUE.js构建页面
- 利用Axios实现userList数据的获取, 利用VUE.js展现列表信息
- 完成页面数据的删除操作
- 完成页面数据的修改操作
2.0请求类型
请求的类型是由程序员手动控制
分类A
1.get 请求类型 查询
2.delete 请求类型 删除
分类B
1.post 请求类型 form表单提交 新增操作
2.put 请求类型 更新操作
2.1绘制前端页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>永花列表demo</title>
</head>
<script>
</script>
<body>
<div id="app">
<div align="center">
<h1 align="center">用户新增</h1>
名称: <input type="text" v-model.trim="addUser.name"/>
年龄: <input type="text" v-model.number="addUser.age"/>
性别: <input type="text" v-model.trim="addUser.sex"/>
<button @click="insertUserList">新增</button>
</div>
<!-- <button @click="getUserList" >获取数据</button> -->
<br>
<table id="tab1" border="1pcx" align="center" width="80%">
<tr><td colspan="5" align="center"><h1>用户列表</h1></td></tr>
<tr>
<td align="center">编号</td>
<td align="center">姓名</td>
<td align="center">年龄</td>
<td align="center">性别</td>
<td align="center">操作</td>
</tr>
<!-- 指令: 可以循环数据+标签 v-for -->
<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>修改</button>
<button @click="deleteUser(user.id)">删除</button></td>
</tr>
</table>
</div>
<script src="../js/vue.js"></script>
<script src="../js/axios.js"></script>
<!--
需求分析:
1.当用户打开页面 ajax请求
-->
<script>
//设置前缀
axios.defaults.baseURL="http://localhost:8080"
const app = new Vue({
el: "#app",
data: {
id: 0 ,
userList: [],
addUser: {
name: '',
age: 0,
sex: ''
}
},
methods: {
//get 后台服务器数据
async getUserList(){
let url = "/vue/getUserList"
let {data: result} = await axios.get(url)
//console.log(result)
this.userList = result
},
//POST,新增用户
async insertUserList(){
let url = "/vue/insertUser"
let {data: result} = await axios.post(url,this.addUser)
alert(result);
//重新刷新
this.getUserList();
},
//delete 根据id删除
async deleteUser(id){
let url = `/vue/deleteUser?id=${id}`
let {data: result} = await axios.delete(url)
alert(result);
this.getUserList();
}
},
//调用生命周期函数
mounted(){
//console.log(1)
//初始化时调用.getUserList()
this.getUserList();
}
})
</script>
</body>
</html>
2.2 编辑VueController
package com.jt.vueContorller;
import com.jt.pojo.User;
import com.jt.service.Usersevice;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.List;
@RestController
@CrossOrigin
public class VueController {
@Autowired
private Usersevice usersevice;
//展现所有用户信息/vue/getUserList
@GetMapping("/vue/getUserList")
public List<User> getUserList(){
return usersevice.getAll();
}
// 新增用户 /vue/insertUser
@PostMapping("/vue/insertUser")
public String insertUser(@RequestBody User user){
usersevice.insertUser(user);
System.out.println("添加成功");
return "添加成功";
}
//删除用户/vue/deleteUser?id=${id}
@DeleteMapping("/vue/deleteUser")
public String deleteUser(Integer id){
usersevice.deleteId(id);
System.out.println("删除成功");
return "删除成功"+id;
}
}
2.3编辑UserService
package com.jt.service;
import com.jt.mapper.UserMapper;
import com.jt.pojo.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class UsersevriceImpl implements Usersevice {
@Autowired
private UserMapper userMapper;
@Override
public List<User> getAll() {
return userMapper.selectList(null);
}
@Override
public void deleteId(Integer id) {
userMapper.deleteById(id);
}
@Override
public void insertUser(User user) {
userMapper.insert(user);
}
}
![Java小案例——随机数猜测随机数猜测[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)