Vue(第十七课)AXIOS对JSON数据的IDUS
Vue(第十六课)JSON-SERVE和POSTMAN技术中对数据的增删改查_星辰镜的博客-CSDN博客
- get：获取数据，请求指定的信息，返回实体对象
- post：向指定资源提交数据（例如表单提交或文件上传）
- put：更新数据，从客户端向服务器传送的数据取代指定的文档的内容
- patch：更新数据，是对put方法的补充，用来对已知资源进行局部更新
- delete：请求服务器删除指定的数据
增删改查的核心贯穿本文要学习的AXIOS技术
1 查询全部记录
<script type="text/javascript"> // 获取按钮 const btn1 = document.getElementById('btn1') btn1.onclick = () => { // axios // GET 没有参数 const result = axios({ // 请求地址 url: "http://localhost:3000/students", method: 'GET' }).then( response => {console.log("请求成功", response.data)}, error => {console.log("请求失败", error)} ) } </script>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>01_axios的get基本使用</title> </head> <body> <script src="../js/axios.min.js"></script> <h3>01_axios的get基本使用</h3> <button id="btn1">点我获取所有人的基本信息的数据</button> <!-- 1 axios 调用的返回值是promise实例 2 成功的值叫 response 3 失败的值叫 error 4 axios成功的值是一个axios封装的response对象 服务器返回的真正数据在 response.data --> <script type="text/javascript"> // 获取按钮 const btn1 = document.getElementById('btn1') btn1.onclick = () => { // axios // GET 没有参数 const result = axios({ // 请求地址 url: "http://localhost:3000/students", method: 'GET' }).then( response => {console.log("请求成功", response.data)}, error => {console.log("请求失败", error)} ) } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>02_axios的get基本使用</title> </head> <body> <script src="../js/axios.min.js"></script> <h3>02_axios的get基本使用</h3> <button id="btn1">点我获取所有人的基本信息的数据</button> <script type="text/javascript"> // 获取按钮 const btn1 = document.getElementById('btn1') btn1.onclick = () => { axios.get("http://localhost:3000/students").then( response => { console.log("请求成功", response.data) }, error => { console.log("请求失败", error) } ) } </script> </body> </html>
获取所有人的信息
精简版获取数据
2 查询一条记录
<script type="text/javascript"> // 获取按钮 const btn1 = document.getElementById('btn1') btn1.onclick = () => { // axios // GET 没有参数 const result = axios({ // 请求地址 url: "http://localhost:3000/students", method: 'GET' }).then( response => {console.log("请求成功", response.data)}, error => {console.log("请求失败", error)} ) } </script>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>01_axios的get基本使用</title> </head> <body> <script src="../js/axios.min.js"></script> <h3>01_axios的get基本使用</h3> <button id="btn1">点我获取所有人的基本信息的数据</button> <!-- 1 axios 调用的返回值是promise实例 2 成功的值叫 response 3 失败的值叫 error 4 axios成功的值是一个axios封装的response对象 服务器返回的真正数据在 response.data --> <script type="text/javascript"> // 获取按钮 const btn1 = document.getElementById('btn1') btn1.onclick = () => { // axios // GET 没有参数 const result = axios({ // 请求地址 url: "http://localhost:3000/students?delay=5000", tuemout:2000, method: 'GET' }).then( response => {console.log("请求成功", response.data)}, error => {console.log("请求失败", error)} ) } </script> </body> </html>
查询个人记录
3 增加一条记录
<script type="text/javascript"> // 增加数据 const btn3 = document.getElementById('btn3') const personName = document.getElementById('person_name') const personSex = document.getElementById('person_sex') const personSubject = document.getElementById('person_subject') // 增加一个人的数据 post请求视数据 btn3.onclick = () => { axios({ url: "http://localhost:3000/teachers", method: "POST", // 携带请求体参数{json编码} // data:{name:personName.value,sex:personSex.value,subject:personSubject.value} //urlencoded编码 data: `name=${personName.value}&sex:${personSex.value}&subject:${personSubject.value}` }).then( response => { console.log("请求成功", response.data) }, error => { console.log("请求失败", error) } ) } // // 精简版 // axios.post('http://localhost:3000/teachers', { name: personName.value, sex: personSex.value, subject: personSubject.value }).then( // response => { console.log("请求成功", response.data) }, // error => { console.log("请求失败", error) } // ) </script>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>04 获取个人信息</title> </head> <style> p { text-align: center; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-weight: 800; width: 100%; height: 20px; background-color: rgb(255, 0, 89); color: rgb(255, 255, 255); } button { width: 300px; height: 40px; line-height: 40px; font-size: 20px; border-radius: 12px; color: azure; background-color: black; box-shadow: 1px 2px 3px rgb(255, 25, 0); } input { color: rgb(0, 0, 0); font-size: 20px; background-color: rgb(255, 255, 255); box-shadow: 1px 2px 3px rgb(255, 25, 0); border-radius: 12px; } </style> <body> <script src="../js/axios.min.js"></script> <p>增加摸个人</p> <button id="btn3">增加一个人的数据</button><br> <br> <input type="text" placeholder="请输入一个人的姓名" id="person_name"> <br> <br> <input type="text" placeholder="请输入一个人的性别" id="person_sex"> <br> <br> <input type="text" placeholder="请输入一个人的爱好" id="person_subject"> <br> <br> </body> </html>
增加一条记录
