<script setup>
import { ref } from 'vue';
import axios from 'axios';

const id = ref(1); // 查找的id
const student = ref({}); // getData和update所用的模型

// 创建一个自定义配置的axios实例
const myAxios = axios.create({
    baseURL: 'https://localhost:7002',
    // timeout: 6000,
    // headers后面的对象，不是列表哦
    headers: {
        'RegisterNo': 'JD-TEST',
        'Timestamp': new Date().getTime()
    },

});

myAxios.interceptors.request.use((config) => {
    console.log('请求前我都会拦截一下的：\r\n', config);
    return config;
}, (error) => {
    console.log('请求失败拦截：\r\n', error);
    return Promise.reject(error);
})
myAxios.interceptors.response.use((res) => {
    console.log('响应前我都会拦截一下的：\r\n', res.data);
    return res.data; // 返回res.data后，后面通过myAxios请求后返回的res就直接是res.data了
}, (error) => {
    console.log('响应失败拦截：\r\n', error);
    return Promise.reject(error);
})

// 根据id获取学生信息
const getDataById = () => {
    myAxios.get('/api/students/getstudent', {
        params: {
            id: id.value
        }
    }).then(res => {
        student.value = res;//res.data;
    }).catch(error => {
        console.log(error.message); // axios提示
        console.log(error.response); // 返回结果
    })
}
// 更新学生数据
const updateData = () => {
    myAxios.post('/api/students/update',
        {
            ...student.value
        })
        .then(res => {
            console.log(res);
            // console.log(res.data);
        }).catch(error => {
            console.log(error);
        })
}
</script>

<template>
    <div>
        <div>
            <input type="text" v-model="id"><button @click="getDataById">get请求获取id为{{ student.id }}的学生</button>
        </div>
        <div v-if="student.id">
            <input v-model="student.id" type="hidden" /><br />
            <input v-model="student.name" type="text" /><br />
            <input v-model="student.age" type="text" /><br />
            <input v-model="student.gender" type="text" /><br />
            <button @click="updateData">修改id为{{ student.id }}的信息</button>
        </div>
    </div>
</template>