Vue(第十七课)AXIOS对JSON数据的增删改查二）-阿里云开发者社区

Vue(第十七课)AXIOS对JSON数据的增删改查二）

2023-07-16 246

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Vue(第十七课)AXIOS对JSON数据的增删改查二）

4 修改一条记录

<!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="btn4">点我更新一个人的基本数据信息</button><br> <br>
    <input type="text" placeholder="请输入要修改的id编号" id="person_update_id"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    &nbsp;
    <input type="text" placeholder="请输入要修改的姓名" id="person_update_name"> <br> <br>
    <input type="text" placeholder="请输入要修改的性别" id="person_update_sex"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    &nbsp;
    <input type="text" placeholder="请输入要修改的爱好" id="person_update_subject"> <br> <br>
    <script>
        // 修改数据
        const btn4 = document.getElementById('btn4')
        const personUpdateId = document.getElementById('person_update_id')
        const personUpdateName = document.getElementById('person_update_name')
        const personUpdateSex = document.getElementById('person_update_sex')
        const personUpdateSubject = document.getElementById('person_update_subject')
        // 修改id
        btn4.onclick = () => {
            // 修改数据  http://localhost:3000/teachers
            axios({
                url: "http://localhost:3000/teachers",
                method: 'PUT',
                data: {
                    id: personUpdateId.value,
                    name: personUpdateName.value,
                    sex: personUpdateSex.value,
                    subject: personUpdateSubject.value
                }
            }).then(
                response => { console.log("请求成功", response.data) },
                error => { console.log("请求失败", error) }
            )
        }
    </script>
</body>
</html>

5 删除一条记录

<!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="btn5">点我删除一个人的信息</button>
    <input type="text" id="person_delete_id" placeholder="请输入删除id的编号">
    <script type="text/javascript">
        btn5.onclick = () => {
            axios({
                url: `http://localhost:3000/teachers/${personDeleteId.value}`,
                method: 'DELETE',
            }).then(
                response => { console.log("请求成功", response.data) },
                error => { console.log("请求失败", error) }
            )
        }
    </script>
</body>
</html>

6 axios中常用到的配置项

<!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>06_axios中常用到的配置项</title>
</head>
<body>
    <script src="../js/axios.min.js"></script>
    <link rel="stylesheet" href="../css/index.css">
    <button id="btn">点击我获取所有的人员信息</button>
    <script>
        // 给axios配置默认属性
        axios.defaults.timeout=2000
        axios.defaults.responseType="json"
        const btn = document.querySelector("#btn")
        // console.log(btn)
        btn.onclick = () => {
            //请求的地址
            axios({
                url: "http://localhost:3000/students",
                // 请求参数
                method: 'GET',
                // params:({a:2,b:8}),
                // 配置请求体参数 json
                // data:{c:6,d:9},
                //配置请求体参数   url编码
                // data:'e=68&f=90',
                // 配置时间
                timeout: 2000, 
                headers:{school:'schoole'},
                 //默认的值
                responseType:'json'
            }).then(
                response => { console.log("请求成功", response.data) },
                error => { console.log("请求失败", error) }
            )
        }
    </script>
</body>
</html>