在Demo中新增一個index.html頁面用Vue雙向繫結模擬Get/Post請求用於除錯介面

阿新 • • 發佈：2022-04-07

index.html檔案路徑：

src/main/resources/static/index.html

先看效果：

原始碼：

點選檢視程式碼

<!DOCTYPE html>
<html lang="cn">
<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>Document</title>
    <script src="https://lib.baomitu.com/vue/2.6.14/vue.common.dev.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app" style="color: rgb(20, 169, 189); margin-left: 20px; margin-right: 20px; text-align:right; width:300px">
    <div  >
        <div>
            <legend>form表單 註冊:</legend>
            姓名:<input style="width: 170px;" type="text" name="user" v-model="formData.user">
            <br>
            年齡:<input type="text" name="age" v-model="formData.age">
            <br>
            性別:<input type="text" name="sex" v-model="formData.sex">
            <br>
            手機:<input type="text" name="phone" v-model="formData.phone">
            <br>
            密碼:<input type="text" name="password" v-model="formData.password">
            <br>
            <button @click="add()">新增</button>&ensp;
            <button @click="update()">提交修改</button>&ensp;<br>
            刪除ID:<input type="text" name="id" v-model="id">
            <br>
            <button @click="get()">查詢</button>&ensp;
            <button @click="del()">刪除</button>
        </div>
    </div>
</div>
</body>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            formData:{
                user: null,
                age: null,
                sex: null,
                phone: null,
                password: null,
            },
            id: null,  // 根據 ID 去查資料，以及刪除操作傳的 ID
        },
        mounted() {

        },
        methods: {
            // 模擬 Get 請求
            apiGet(request) {
                axios(request).then(function (response) {
                    // console.log(response.data);
                    // 查詢操作才需要這個，結果集覆蓋頁面
                    app._data.formData = response.data;
                });
            },
            // 模擬 Post 請求
            apiPost(request) {
                axios(request).then(function (response) {
                    // console.log(response.data);
                    alert(response.data) ;
                });
            },

            // 查詢
            get() {
                let request = {
                    method: 'get',
                    url: 'http://localhost:8080/user/getId?id=' + this.id,
                    headers: {
                        'Content-Type': 'application/json; charset=UTF-8'
                    },
                    data: this.formData,
                }
                // 呼叫 Get 請求
                this.apiGet(request);
            },

            // 新增
            add() {
                let request = {
                    method: 'post',
                    url: 'http://localhost:8080/user/insert',
                    headers: {
                        'Content-Type': 'application/json; charset=UTF-8'
                    },
                    data: this.formData,
                }
                // 呼叫 Post 請求
                this.apiPost(request);
            },

            // 修改
            update() {
                this.formData.id = this.id;
                let request = {
                    method: 'post',
                    url: 'http://localhost:8080/user/save',
                    headers: {
                        'Content-Type': 'application/json; charset=UTF-8'
                    },
                    data: this.formData,
                }
                this.apiPost(request);
            },

            // 刪除
            del() {
                let request = {
                    method: 'delete', // 這裡可以用 post 或者 delete ，取決於後臺限制用哪種接收方式
                    url: 'http://localhost:8080/user/delId?id=' + this.id,
                    headers: {
                        'Content-Type': 'application/json; charset=UTF-8'
                    }
                }
                this.apiPost(request);
            },

        },

    });
</script>
</html>

雙向繫結

<div>
    <legend>form表單 註冊:</legend>
    姓名:<input style="width: 170px;" type="text" name="user" v-model="formData.user">
    <br>
    年齡:<input type="text" name="age" v-model="formData.age">
    <br>
    性別:<input type="text" name="sex" v-model="formData.sex">
    <br>
    手機:<input type="text" name="phone" v-model="formData.phone">
    <br>
    密碼:<input type="text" name="password" v-model="formData.password">
    <br>
    <button @click="add()">新增</button>&ensp;
    <button @click="update()">提交修改</button>&ensp;<br>
    刪除/查詢ID:<input type="text" name="id" v-model="id">
    <br>
    <button @click="get()">查詢</button>&ensp;
    <button @click="del()">刪除</button>
</div>

<script>
const app = new Vue({
    el: "#app",
    data: {
        formData:{
        user: null,
        age: null,
        sex: null,
        phone: null,
        password: null,
    },
    id: null,  // 根據 ID 去查資料，以及刪除操作傳的 ID
    },
    ······

封裝請求

······
methods: {
    // 模擬 Get 請求
    apiGet(request) {
        axios(request).then(function (response) {
            // console.log(response.data);
            // 查詢操作才需要這個，結果集覆蓋頁面
            app._data.formData = response.data;
        });
    },
    // 模擬 Post 請求
    apiPost(request) {
        axios(request).then(function (response) {
            // console.log(response.data);
            alert(response.data) ;
        });
    },
    ······

實際呼叫

    <button @click="add()">新增</button>
    <button @click="update()">提交修改</button>
    <button @click="get()">查詢</button>
    <button @click="del()">刪除</button>

······
methods: {
    // 查詢
    get() {
        let request = {
            method: 'get',
            url: 'http://localhost:8080/user/getId?id=' + this.id,
            headers: {
                'Content-Type': 'application/json; charset=UTF-8'
            },
            data: this.formData,
        }
        // 呼叫 Get 請求
        this.apiGet(request);
    },

    // 新增
    add() {
        let request = {
            method: 'post',
            url: 'http://localhost:8080/user/insert',
            headers: {
                'Content-Type': 'application/json; charset=UTF-8'
            },
            data: this.formData,
        }
        // 呼叫 Post 請求
        this.apiPost(request);
    },

    // 修改
    update() {
        this.formData.id = this.id;
        let request = {
            method: 'post',
            url: 'http://localhost:8080/user/save',
            headers: {
                'Content-Type': 'application/json; charset=UTF-8'
            },
            data: this.formData,
        }
        this.apiPost(request);
    },

    // 刪除
    del() {
        let request = {
            method: 'delete', // 這裡可以用 post 或者 delete ，取決於後臺限制用哪種接收方式
            url: 'http://localhost:8080/user/delId?id=' + this.id,
            headers: {
                'Content-Type': 'application/json; charset=UTF-8'
            }
        }
        this.apiPost(request);
    },

},
······