用现在最主流的前端框架优化下提交页面

发布于 2025-01-19 20:48:16

为了优化提交页面，我们可以使用现代前端框架，例如React、Vue.js或Angular。这里以Vue.js为例，构建一个更为现代和用户友好的表单提交页面。

Vue.js 示例

以下是一个使用Vue.js构建的替换词提交页面示例：

1. 引入Vue.js

在HTML文件中引入Vue.js，可以使用CDN：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>替换词</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
    <div id="app">
        <form @submit.prevent="submitForm">
            <label for="searchTerm">替换前词:</label>
            <input type="text" v-model="searchTerm" id="searchTerm" placeholder="输入要替换的词" required>
            <br>
            <label for="replaceTerm">替换后词:</label>
            <input type="text" v-model="replaceTerm" id="replaceTerm" placeholder="输入替换后的词" required>
            <br>
            <button type="submit">提交</button>
            <button type="button" @click="clearFields">清空</button>
        </form>
        <div v-if="message">{{ message }}</div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                searchTerm: '王bao强',
                replaceTerm: '王宝强',
                message: ''
            },
            methods: {
                submitForm() {
                    const urls = [
                        `http://yourdomain.com/update_sql.php?type=title&searchTerm=${encodeURIComponent(this.searchTerm)}&replaceTerm=${encodeURIComponent(this.replaceTerm)}`,
                        `http://yourdomain.com/update_sql.php?type=content&searchTerm=${encodeURIComponent(this.searchTerm)}&replaceTerm=${encodeURIComponent(this.replaceTerm)}`,
                        `http://yourdomain.com/update_sql.php?type=content_fmt&searchTerm=${encodeURIComponent(this.searchTerm)}&replaceTerm=${encodeURIComponent(this.replaceTerm)}`
                    ];

                    const requests = urls.map(url => fetch(url));

                    Promise.all(requests)
                        .then(responses => {
                            return Promise.all(responses.map(response => response.text()));
                        })
                        .then(results => {
                            this.message = '更新成功！';
                        })
                        .catch(error => {
                            this.message = '错误：' + error;
                        });
                },
                clearFields() {
                    this.searchTerm = '';
                    this.replaceTerm = '';
                    this.message = '';
                }
            }
        });
    </script>
</body>
</html>