-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=)